jQuery 선택자 사용하기

초기 웹 프로그래밍에서는 웹 페이지내의 컨텐츠를 바꾸려면 서버에 필요한 요청을하고, 새로운 내용의 웹페이지 전체를 받아서 화면에 보여주는 방식이었습니다.

 

이 경우 페이지내의 많은 변하지 않는 부분(헤더, 푸터 등)도 매번 새로 받아와야 했었습니다. 그래서 페이지를 프레임(frame)으로 나누어 변하는 부분은 줄이는 방법도 많이 사용되었습니다.

 

요즘은 필요한 컨텐츠를 가져올 때는 ajax 를 통해서 백그라운드로 가져오고, 화면은 자바스크립트를 이용해서 페이지내의 요소들을 직접 바꾸는 방법을 주로 사용합니다.

 

이때 DOM(Document Object Model) 구조로 되어 있는 페이지내의 필요한 요소에 손쉽게 접근할 수 있게 해주는 자바스크립트 라이브러리로 많이 사용되는 것이  jQuery 입니다.

 

일단 필요한 요소에 접근하면 그 요소에 대한 값/속성 등의 변경, 활성/비활성화, 보이기/감추기, 애니메이션등 다양한 작업을 편리하게 할 수 있도록 해 도와줍니다.

 

현재 jQuery의 최신버전은 3.2.1 입니다.(2017년 11월 03일 현재)

 

https://code.jquery.com/jquery-3.2.1.min.js

 

Internet Explorer 6-8, Opera 12.1x or Safari 5.1+ 와 같은 하위 브라우저에 대한 지원이 필요하다면  jQuery 1.x 버전을 사용해야 합니다.

 

https://code.jquery.com/jquery-1.12.4.min.js

 

다음은 http://learn.jquery.com/using-jquery-core/selecting-elements/ 의 내용을 정리한 것입니다.

 

jQuery의 기본 개념은 "어떤 엘리먼트를 선택하여 어떤 작업을 수행한다." 입니다. 작업을 할 엘리먼트를 선택하는 것이 기본이 되겠습니다. jQuery는 대부분의 CSS3 셀렉터를 지원합니다. 뿐만아니라 표준이 아닌 셀렉터도 지원합니다.

 

- ID 를 사용하여 선택하기 (ID 는 페이지 내에서 유일해야 합니다.)

 

$("#myId");

<p id="myId">아이디</p>

 

- 클래스명을 사용하여 선택하기 (동일한 클래스를 가지는 복수 요소가 선택될 수 있습니다.)

 

$(".myClass");

<p class="myClass">클래스</p>

 

- 속성으로 선택하기

 

$("input[name='first_name']");

<input type="text" name="first_name" />

 

- 복합 CSS 선택자로 선택하기 ( contents 를 id 로 가지는 요소 하위의 ul 요소중 people를 클래스로 가지는 ul 요소의 모든 li를 선택합니다.)

 

$("#contents ul.people li").each(function(){
	console.log($(this).text());
});

<div id="contents">
	<ul class="people">
		<li>첫번째</li>
		<li>두번째</li>
	</ul>
</div>

 

- 콤마로 구분된 셀렉터의 리스트로 선택하기 (콤마(,) 로 분리된 요소들은 독립적입니다.)

 

$("div.myClass, ul.people");

<div class="myClass"></div>
<ul class="people"></ul>

 

- Pseudo-Selector(의사 선택자)

 

// "external" 클래스를 가지는 a 요소중 첫번째 요소를 선택합니다.
$("a.external:first");

<a href="" class="external">첫번째</a>
<a href="" class="external">두번째</a>

$("tr:odd");  // table의 홀수 번째 행을 선택합니다. 행번호는 0 번 부터 시작합니다.
$("tr:even"); // table의 짝수 번째 행을 선택합니다.
$("li:even"); // table 외에 다른 요소에도 사용할 수 있습니다.

// 폼내에서 input 태그 모두 선택 합니다.
$("#myForm :input");

// 보이지 않는 div 들을 선택합니다.
$("div:visible");
$("div:hidden");

 

:visible, :hidden 선택자는 CSS의 visibility 또는 display 속성을 사용하여 판단하지 않습니다. 요소의 실체 높이와 너비가 0보다 큰지를 가지고 판단합니다.

 

// 처음 세개의 div를 제외한 모든 div들을 선택합니다. 카운트는 0부터 시작하므로 2보다 큰것이 되어 0,1,2가 제외됩니다.
$("div:gt(2)");

// 모든 현재 애니메이션되는 div들을 선택합니다.
$("div:animated");

 

주의) :visible, :hidden 의사 선택자를 사용할 때, jQuery 는 엘리먼트의 실제 보여지는가를 체크합니다. 그 엘리먼트의 CSS 의  visibility 혹은 display 속성을 체크하지 않습니다. jQuery 는 엘리먼트의 페이지내에서의 물리적인 높이와 너비가 0보다 큰지를 확인합니다.

 

예외로 <tr> 엘리먼트에 대해서는 동작하지 않습니다. <tr>의 경우 jQuery는 CSS display 프로퍼티를 체크합니다. 그리고 display 프로퍼티가 none 으로 설정되면 hidden 으로 판단합니다.

 

엘리먼트가 DOM에 추가되지 않았다면 항상 hidden으로 판단합니다. CSS 가 그것들이 보이도록 되어 있어도 그렇습니다.

 

 

선택자 선택하기

좋은 선택자를 선택하는 것은 자바스크립트의 성능을 향상시키는 하나의 방법이 됩니다. 너무 특수한 것은 나쁜 선택이 될 수 있습니다. 만약 #myTable th.special과 같은 선택자로 처리할 수 있다면, #myTable thead tr th.special 같은 선택자는 지나치게 과합니다.

 

나의 선택에는 엘리먼트가 포함되어 있는가?

선택을 하고 나면, 선택된 것들로 작업을 할 수 있을지 알고 싶어 할것입니다. 통상적인 실수는 다음과 같이 사용하는 것입니다.

 

// 동작하지 않습니다.
if( $("div.foo") ) {   ... }

 

이것은 동작하지 않습니다. 선택이 $()를 사용하여 만들어질 때, 객체가 항상 반환됩니다. 그리고 객체는 항상 true 로 평가됩니다. 그 선택이 어떤 엘리먼트도 포함하지 않았을때도 if 문장 안의 코드는 여전히 실행될 것입니다.

 

선택된 엘리먼트가 있는지 결정하는 가장 좋은 방법을 선택자의 .length 프로퍼티 를 확인하는 것입니다. 이것은 얼마나 많은 엘리먼트가 선택되었는지 알려줍니다.

 

만약 결과가 0 이라면 .length 프로퍼티는 boolean값으로 사용되어질 경우,  false 로 평가 될 것입니다.

 

// 선택이 엘리먼트를 포함하고 있는지 테스트 합니다.
if( $("div.foo").length ) {
	...
}

// 데이터가 있으면 각 요소에 대해 다음과 같이 작업할 수 있습니다.

// each() 사용 - elem은 jQuery 객체가 아닙니다.
$("div.foo").each(function(i, elem) {
	...
});

// for 사용 - get() 으로 얻은 elem은 jQuery 객체가 아닙니다.
for(var i = 0; i < $("div.foo").length; i++) {
	var elem = $("div.foo").get(i);
	...
}

 

선택 저장하기

jQuery는 엘리먼트를 캐쉬하지 않습니다. 사용했던 선택을 다시 만들 필요가 있다면 선택 만들기를 반복하는 것보다 변수에 저장해야 합니다.

 

var divs = $( "div" );

 

변수에 저장하고 나면, 원래 선택에 대해 메소드를 호출하는 것과 동일하게 변수에 대해 메소드를 호출할 수 있습니다.

 

선택은 단지 선택이 만들어질 당시의 페이지상의 엘리먼트만을 가지고 옵니다. 만약에 엘리먼트들이 나중에 추가되었다면, 선택을 다시 해야만 할 것입니다. 그렇지 않으면 추가된 것들은 선택이 저장된 변수에 추가해야할 것입니다. 저장된 선택들은 DOM 이 변경될 때 자동적으로 업데이트 되지 않습니다.

 

 

선택의 정제와 필터링

때때로 선택은 우리가 찾는것보다 더 많을 것을 포함합니다. jQuery는 선택을 정제하고 필터하는데 필요한 여러 메소드를 제공합니다.

 

// 선택을 정제하기
$( "div.foo" ).has( "p" );         // <p> 태그를 포함하는 "div.foo" 엘리먼트
$( "h1" ).not( ".bar" );           // 클래스  bar 를 가지지 않는 <h1> 엘리먼트
$( "ul li" ).filter( ".current" ); // current 클래스를 가지는 ul li 아이템
$( "ul li" ).first();              // ul 리스트의 첫번재 아이템
$( "ul li" ).eq( 5 );              // 여섯번째 아이템

 

폼 엘리먼트 선택하기

jQuery 는 폼내의 엘리먼트를 찾는데 도움을 주는 여러개의 의사 선택자를 제공합니다. 이것들은 특히 유용한데, 표준 CSS 선택자들을 사용하여 타입이나 상태에 기반하여 폼엘리먼틀을 구분하기 힘들기 때문입니다.

 

 

-  :checked

:checkbox 와 체크된 체크박스들을 목표로하는 :checked를 혼동하지 말아야 합니다. 그러나 명심하세요. 이 선택자는 또한 체크된 라디오 버튼들과 <select> 엘리먼트와도 일을 한다는 것을요.(<select> 엘리먼트만을 위해서는 :selected 선택자를 사용하세요.)

 

$( "form :checked" );

:checked 의사 선택자는 체크박스, 라디오 버튼, 콤보박스 와 동작합니다.

 

 

-  :disabled

:disabled 의사 선택자를 disabled 속성의 <input> 엘리먼트에 목표로 사용됩니다.

 

$( "form :disabled" );

따라서 :enabled 를 사용할 때 가장 좋은 성능을 얻으려면, 먼저 표준 jQuery 선택자로 엘리먼트를 선택한 다음, .filter(":enabled") 를 사용하거나, 의사 선택자 앞에 태그 이름이나 다른 선택자를 함께 사용합니다.

 

 

-  :input

:input 선택자를 사용하여 모든 <input>, <textarea>, <select>, <button> 엘리먼트를 선택합니다.

 

$( "form :input" );

 

 

-  :selected

:selected 의사 선택자는 <option> 엘리먼트 내의 모든 선택된 아이템들을 목표로 합니다.

 

$( "form :selected" );

 

따라서 :selected 를 사용할때 가장 좋은 성능을 얻으려면, 먼저 표준 jQuery 선택자로 엘리먼트를 선택한 다음, .filter(":selected") 를 사용하거나, 의사 선택자 앞에 태그 이름이나 다른 선택자를 함께 사용합니다.

 

 

타입에 의해 선택하기

jQuery 는 유형에 따라 폼 정의 엘리먼트를 선택하는 의사 선택자를 제공합니다.

 

:password - 패스워드 입력 필드
:reset    - 리셋 버튼
:radio    - 라디오 버튼
:text     - 텍스트 입력필드
:submit   - 폼 제출 버튼
:checkbox - 체크박스
:button   - 버튼
:image    - 이미지 폼 제출 버
:file     - 파일 선택 필드