Surfin' Milkyway

웹앱 과정 - 제이쿼리 (1)

20 Apr 2020 | jQuery selector

제이쿼리 개요

제이쿼리(jQuery)

  • 가장 인기 있는 자바 스크립트 라이브러리
  • 크로스 브라우징 지원 (cross browsing)
    브라우저마자 자바스크립트의 해석이 상이하고, 어떤 브라우저는 오류를 내뱉기도 하는 문제가 있었다. 제이쿼리는 모든 웹 브라우저에서 항상 동일하게 동작하도록 지원한다.
  • 생산성 향상 지원
    • Write Less, Do More
    • 더 적은 코드 양으로 더 많은 기능을 수행

제이쿼리에 관한 사이트 - w3schools - jQuery API - learning jQuery - jQAPI

자바스크립트

자바스크립트 코드는 <script> 태그 안에 명세하여 <head> 또는 <body> 태그 안에 포함시킨다. <script src="sample.js"> 를 통해 별도의 자바스크립트 파일을 import할 수도 있다. <body>의 최하단에 위치하는 것이 좋다. (참고 : script 태그는 어디에 위치해야 할까요?)

자바스크립트 함수는 다른 함수에 의해 호출되거나 이벤트 발생시 호출되어 실행된다.

  • 예 : 이벤트 핸들러 onload(), onclick() 이벤트 핸들러 (event handler) : 키보드나 마우스 등의 동작에 의해 이벤트가 발생할 경우 이를 감지하여 자바스크립트 코드와 연결
  • 자바스크립트 코드를 직접 명세하기보다는 특정 함수를 호출할 목적으로 사용

제이쿼리 연동

  • HTML5 문서 안에서 제이쿼리 라이브러리 파일을 포함하도록 선언
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  • 제이쿼리의 동작은 자바스크립트처럼 HTML5 태그와 결합하지 않는다. -> tag 안에 스크립트 코드를 포함시키지 않고 HTML5 태그와 스크립트 코드를 분리할 수 있다.
  • DOM이라는 공통된 표준 모델을 따르면 스크립트 엔진이나 언어가 다르더라도 얼마든지 동일하게 HTML5나 XML 문서에 접근할 수 있다. DOM은 플랫폼과 언어에 중립적이며 동적으로 문서의 내용, 구조, 스타일을 접근하고 변경하는 중요한 수단

DOM 트리 구조

  • 엘리먼트 노드 태그와 내용으로 구성되는 엘리먼트를 표현하는 노드 하위에 또다른 엘리먼트 노드를 포함할 수 있다.
  • 속성 노드 엘리먼트의 시작 태그 안에 포함되는 속성 이름과 속성 값을 쌍으로 갖는 노드
  • 텍스트 노드 엘리먼트가 갖는 실제 내용을 의미하는 노드 DOM 트리에서 최하위 단말 노드가 해당

제이쿼리 함수

jQuery() 함수는 제이쿼리의 핵심

  • 모든 시작은 jQuery() 함수를 통해 이루어진다.
  • 괄호 앞의 jQuery 문자열은 제이쿼리를 사용한다는 일종의 선언. 자바스크립트 문장과 제이쿼리 문장을 구별하는 역할

입력 인자 유형

  • 큰따움표 또는 작은따옴표 모두 가능
// 1) 선택자 입력 인자
jQuery('body p');
// 2) HTML 입력 인자
jQuery('<h1>HTML 동적 추가</h1>')
// 3) 함수 입력 인자
jQuery(function(){alert("DOM 트리가 생성됨")});
  1. 선택자 입력 인자 : DOM 트리에서 원하는 노드를 선별하기 위해 사용
  2. HTML 입력 인자
    • 내부적으로는 자바스크립트의 createElement() 함수를 호출
    • 주로 DOM 트리에 새로운 노드를 추가하기 위해 사용됨
  3. 함수 입력 인자
    • jQuery() 함수는 명세된 순서대로 호출되어 실행됨
    • jQuery() 함수의 실행 대상인 노드가 DOM 트리에 생성되기도 전에 먼저 실행되는 것을 피하기 위해 jQuery() 함수 안에 입력 인자로 함수를 포함시키면 HTML5 문서를 모두 읽어들여 DOM 트리가 생성된 후 함수가 호출되어 실행되도록 할 수 있음
    • 콜백 함수(callback function) : 함수를 실행한 이후 스스로 호출되는 함수

문서 시작 이벤트 핸들러

jQuery(document).ready(function(){ ... });

document 선택자: HTML5 문서 전체를 선택 ready() 메소드: HTML5 문서가 웹 브라우저에 표시될 준비가 완료되면 실행되는 이벤트 핸들러

jQuery 함수의 사용

주석은 /*로 시작하고 */로 끝을 지정 한 줄 단위의 주석은 //로 시작하며 웹 브라우저에 의해 해석되지 않고 무시됨

  • ready() : 준비되었을 때
  • click() : 클릭되었을 때
  • remove() : 특정 엘리먼트를 DOM 트리에서 삭제
  • text() : DOM 트리에 텍스트 노드를 추가

jQuery 코드는 HTML5 문서 내용 자체는 변화시키지 않고 DOM 트리만 변경

문서 시작 이벤트 핸들러

제이쿼리 코드를 <head> 안에 명세할 경우, <body> 태그 안의 HTML5 엘리먼트 태그들이 DOM 트리를 구성하기 전에 제이쿼리 코드가 먼저 실행되는 문제점이 있다. 이를 해결하기 위해 문서 시작 핸들러 jQuery(document).ready() 안에 제이쿼리 시랭문들을 ;로 구분하여 나열하면 DOM 트리 구성이 완료된 후까지 실행이 지연되었다가 자동으로 호출되어 순차적으로 실행된다. 제이쿼리를 포함한 문서를 처음 시작하는 방법은 2가지가 있다.

  1. jQuery(document).ready(function() { ... });
    • 문서가 100% 로드되기 전 페이지 DOM만 로드가 완료된 이후 수행
    • .ready() 메소드가 여러 개 있더라도 순서대로 실행
    • 비교적 첫 페이지 로드 시간이 빠름
  2. jQuery(window).load(function() { ... });
    • 문서가 100% 로드된 후 페이지 DOM + 리소스 전체(문서에 포함된 이미지 등의 모든 객체)가 모두 로드 완료된 이후 한 번만 수행
    • .load() 메소드가 여러 개 있으면 마지막만 실행
    • 기존 자바스크립트 window.onload = function() { ... }를 대체
    • 비교적 첫 페이지 로드 시간이 느림

DOM 트리를 변경함으로써 웹 페이지의 표현 내용도 동적으로 변화시킬 수 있다.

jQuery() 함수의 단축형

jQuery()를 보통 $()로 줄여 표시한다. 의미는 같다. 식별이 어렵고 불편하기 때문 제이쿼리 변수, 함수를 자바스크립트의 변수, 함수 등과 구별하기 위한 목적

var 변수명; // 일반 변수
var $변수명; // 제이쿼리 변수

$를 붙이지 않은 일반 변수는 보통의 자바스크립트 변수로 처리

$()

  • 제이쿼리 함수, 제이쿼리 래퍼(wrapper)
  • 보통 제이쿼리 함수는 $(선택자) 형태로 제이쿼리 선택자를 입력 인자로 받아들여 선택자 조건을 만족하는 엘리먼트 노드들을 DOM 트리에서 찾아 객체 형식으로 반환 -> 제이쿼리 객체
  • 이때 일치하는 DOM 노드들이 여러 개이면 배열 형태의 제이쿼리 객체 집합을 반환
  • 반환하는 DOM 엘리먼트들을 제이쿼리 객체 개념으로 감싸고 미리 준비된 메소드를 사용할 수 있도록 함 -> 제이쿼리 래퍼

제이쿼리 선택자

기본 선택자

  • * : 모든 엘리먼트 선택
  • 태그명 : 특정 엘리먼트를 모두 선택
  • #아이디 : 고유한 아이디 속성값을 가진 엘리먼트를 선택
  • .클래스 : 특정 클래스 속성값을 가진 엘리먼트들을 선택
// 기본 선택자
$('*').css('border-style', 'hidden');
$('p').css('border', 'dashed thick red');
$('.class1').css('border', 'solid thick green');
$('#p3').css({'background-color':'purple', 'color':'white'});

계층 선택자

  • 선택자 > 자식선택자 : 특정 엘리먼트 바로 밑에 위치한 하위 엘리먼트(자식 엘리먼트)를 선택
  • 선택자 자손선택자 : 특정 엘리먼트 안에 포함된 모든 하위 엘리먼트(자손 엘리먼트)를 선택
  • 선택자 + 형제선택자 : 특정 엘리먼트에 바로 다음에 나오는 특정한 형제 엘리먼트 하나를 선택
  • 선택자 ~ 형제선택자 : 특정 엘리먼트 다음에 나오는 특정한 모든 형제 엘리먼트들을 선택
// 계층 선택자
$('#p1 + p').css('border-style', 'hidden');
$('#p2 ~ p').css('border', 'dashed thick red');
$('div > div').css('border', 'solid thick green');
$('div span').css({'background-color':'purple', 'color':'white'});

속성 선택자

  • 선택자[속성명] : 해당 속성을 포함하는 엘리먼트들을 선택
  • 선택자[속성명="조건값"] : 해당 속성값이 조건값과 일치하는 엘리먼트들을 선택
  • 선택자[속성명*="조건값"] : 해당 속성값이 조건값을 포함하는 엘리먼트들을 선택
  • 선택자[속성명^="조건값"] : 해당 속성값이 조건값으로 시작하는 엘리먼트들을 선택
  • 선택자[속성명$="조건값"] : 해당 속성값이 조건값으로 끝나는 엘리먼트들을 선택
// 속성 선택자
$('p[class]').css('border-style', 'hidden');
$('*[id*="2"]').css('border', 'dashed thick red');
$('*[class^="cla"]').css('border', 'solid thick green');
$('p[id$="2"]').css({'background-color':'purple', 'color':'white'});

위치필터 기본 선택자

  • filter : 선택자에 의해 선택된 엘리먼트들 중 필터 조건에 맞는 엘리먼트들로 선택 대상을 한번 더 제한
  • 선택자 뒤에 콜론(:)을 붙여 명세
  • 반환된 엘리먼트들은 자바스크립트의 배열 첨자를 적용하므로 첨자가 ‘0’부터 부여됨 :first == :eq(0) == :lt(1)
  • 선택자:first : 선택된 엘리먼트들 중 첫 번째 엘리먼트를 선택
  • 선택자:last : 선택된 엘리먼트들 중 마지막 엘리먼트를 선택
  • 선택자:odd : 선택된 엘리먼트들 중 홀수 첨자 엘리먼트들을 선택
  • 선택자:even : 선택된 엘리먼트들 중 짝수 첨자 엘리먼트들을 선택
  • 선택자:eq(n) : 선택된 엘리먼트들 중 n번째 엘리먼트를 선택
  • 선택자:lt(n) : 선택된 엘리먼트들 중 n번째의 앞 엘리먼트들을 선택
  • 선택자:gt(n) : 선택된 엘리먼트들 중 n번째의 뒤 엘리먼트들을 선택
  • 선택자:not(condition) : 선택된 엘리먼트들 중 필터링 조건을 만족하지 않는 엘리먼트들을 선택
// 위치필터 기본 선택자
$('div:first').css('border-style', 'hidden');
$('p:even').css('border', 'dashed thick red');
$('span:eq(1)').css('border', 'solid thick green');
$('p:lt(1)').css({'background-color':'purple', 'color':'white'});

위치필터 계층 선택자

  • 선택자:first-child : 선택된 엘리먼트들 중 부모의 첫 번째 자식 엘리먼트들을 선택
  • 선택자:last-child : 선택된 엘리먼트들 중 부모의 마지막 자식 엘리먼트들을 선택
  • 선택자:nth-child(odd) : 선택된 엘리먼트들 중 부모의 홀수 번째 자식 엘리먼트들을 선택
  • 선택자:nth-child(even) : 선택된 엘리먼트들 중 부모의 짝수 번째 자식 엘리먼트들을 선택
  • 선택자:nth-child(n) : 선택된 엘리먼트들 중 부모의 n번째 자식 엘리먼트를 선택
  • 선택자:nth-child(Xn+Y) : 선택된 엘리먼트들 중 부모의 Xn+Y번째에 있는 자식 엘리먼트들만을 선택(n은 0부터 시작)
  • 선택자:only-child : 선택된 엘리먼트들 중 (형제 엘리먼트가 없는) 유일한 자식 엘리먼트들만을 선택
// 위치필터 계층 선택자
$('div:first-child').css('border-style', 'hidden');
$('p:nth-child(odd)').css('border', 'dashed thick red');
$('p:nth-child(3n+1)').css('border', 'solid thick green');
$('*:only-child').css({'background-color':'purple', 'color':'white'});

폼 필터 선택자

  • 선택자:input : 모든 폼 입력 양식의 엘리먼트를 선택 <input>, <select>, <button>, <textarea>
  • 선택자:button : 모든 버튼 유형의 엘리먼트를 선택 <button>, type 속성값이 submit, reset, button인 <input> 태그들
  • 선택자:text : 텍스트 엘리먼트들만 선택 type 속성값이 text인 <input> 태그
  • 선택자:checkbox : 체크박스 선택 버튼 엘리먼트만 선택 type 속성값이 checkbox인 <input> 태그
  • 선택자:radio : 라디오 선택 버튼 엘리먼트만 선택 type 속성값이 radio인 <input> 태그
  • 선택자:file : 파일 엘리먼트를 선택 type 속성값이 file인 <input> 태그
  • 선택자:image : 폼 이미지 엘리먼트를 선택 type 속성값이 image인 <input> 태그
  • 선택자:password : 패스워드 엘리먼트를 선택 type 속성값이 password인 <input> 태그
  • 선택자:submit : 전송 버튼 엘리먼트를 선택 type 속성값이 submit인 <input> 태그
  • 선택자:reset : 초기화 버튼 엘리먼트를 선택 type 속성값이 reset인 <input> 태그

상태 필터 선택자

  • 현재 웹 브라우저 실행 홤녀에서의 특정 상황 조건을 만족하는지 여부에 따라 엘리먼트를 한번 더 거르는 필터 선택자
  • 폼 엘리먼트의 현재 상태를 검사하는데 유용
  • 선택자:selected : 지정된 엘리먼트들 중 현재 선택된 엘리먼트만 선택
  • 선택자:checked : 지정된 엘리먼트들 중 현재 설정된 엘리먼트(체크박스, 라디오버튼)만 선택
  • 선택자:enabled : 지정된 엘리먼트들 중 현재 활성화된 엘리먼트만 선택
  • 선택자:disabled : 지정된 엘리먼트들 중 현재 비활성화된 엘리먼트만 선택
  • 선택자:visible : 지정된 엘리먼트들 중 현재 보여지는 엘리먼트만 선택
  • 선택자:hidden : 지정된 엘리먼트들 중 현재 숨겨진 엘리먼트만 선택
  • 선택자:focus : 지정된 엘리먼트들 중 현재 포커싱된 엘리먼트만 선택
  • 선택자:animated : 지정된 엘리먼트들 중 현재 애니메이션이 동작 중인 엘리먼트만 선택

내용 필터 선택자

  • 엘리먼트의 내용 조건 필터를 통해 한번 더 거르는 선택자
  • 특정 엘리먼트가 내용이 있는지 혹은 내용 중 특정 문자열이 포함되는지를 확인 가능
  • 선택자:has(자손엘리먼트) : 선택된 엘리먼트들 중 하위에 특정 자손 엘리먼트르 하나 이상 포함하고 있는 엘리먼트만 선택
  • 선택자:contains(문자열) : 선택된 엘리먼트들 중 내용으로 특정 문자열을 포함하고 있는 엘리먼트만 선택
  • 선택자:empty : 선택된 엘리먼트들 중 내용이 없는 엘리먼트만 선택
  • 선택자:parent : 선택된 엘리먼트들 중 내용(공백 포함)이 있는 엘리먼트(다른 엘리먼트의 부모에 해당하는 엘리먼트)만 선택
// 내용 필터 선택자
$('*:contains(2)').css('border-style', 'hidden');
$('div:has(span)').css('border', 'dashed thick red');
$('*:empty').css('border', 'solid thick green');
$('#div0 *:parent').css({'background-color':'purple', 'color':'white'});

참고

Related Posts

Comments