[jQuery/Tutorial] Selector 를 통해 Element 선택하기.

Selector 를 통해 Element 선택하기.

[이전강좌] DOM의 Attributes 사용하기.

jQuery 는 CSS3 가 제공하는 selector 대부분을 지원하고, 이외의 특별한 selector 들도 제공한다.

ID 로 선택하기

$("#myID");

Class 이름으로 선택하기

$(".myClass");

Attribute 값으로 선택하기

$("a[href='newHtml.html']");

CSS 복합 selector 로 선택하기

$("#myID ul.myClass li");

Pseudo-selector

$("a.external:first");       // external 이라는 class 를 가진 첫번쨰녀석

$("tr:odd");                 // tr 의 홀수번째 녀석들.

$("#myForm:input")      // input 중 myForm 이라는 id 를 가진 녀석들

$("div:visible");           // 보이는 모든 div 선택.

$("div:gt(2)");            // gt는 greater than 의 약자로 첫번째 3개의 element 이외의 모든 div 선택.

$("div:animated");       // animated div 모두 선택.

주의사항 : visible 과 :hidden 의 pseudo-selector는 CSS 값뿐만이 아니라, width, height 값까지 봐서 실제로 화면에 그려지는지 여부를 판단한다는 것에 주의해야 한다. 이는 <tr> tag 에 대해서는 해당하지 않고, DOM 에 추가되지 않은 모든 element 는 모두 hidden 으로 간주한다는 사실도 알고 있어야겠다.

좋은 Selector 선택, 사용하기

Selector 를 잘 선택하면 performance 에서 이득을 얻을 수 있다. 

꼭 필요한 element 들만을 search 하도록 구체화 하는 것이 좋지만, 

이를 위해 정보를 너무 많이 제공하는 것 역시 overhead 이다.

추가로, jQuery 는 selector에 regular expression도 제공하지만, 

오래된 browser 에서는 너무 나쁜 성능을 보이므로, 

id, class name, tag name 으로 검색하는 것이 항상 추천된다.

내 Selector 문은 유효한가?

내가 작성한 Selector 문이 제대로 element 들을 pick 하는지 궁금할 때 

다음과 같은 코드를 작성하기 쉬운데 주의해야 한다.

if ( $("div.myClass") ){

// ... do sth.

}

jQuery selector 는 array object 를 항상 return 하기 때문에 (못 찾아도 빈 array 가 return 된다. ) 

저 구문은 항상 true 가 된다.

따라서 해당 element 가 있는지 판단하기 위한 제대로된 구문은 아래와 같다.

if ( $("div.myClass").length ){

// ... do sth.

}

Selection 저장하기

jQuery 는 cache 를 지원하지 않는다. 

따라서 한번 찾은 elements selection 을 여러번 이용하려면 

이 selection 을 아래와 같이 저장해서 사용해야 한다.

var $divs = $("div");

FYI) $divs 로 사용한 변수이름은 convention.

selection을 저장하여 사용할 때 주의사항은, 

저장된 변수는 query 당시의 정보를 가지고 있을 뿐 

해당 page 의 내용을 dynamically 반영하지 않는다는 사실. 

만약 새로운 div 태그가 추가되었다고 해도, 이전에 저장해놓은 $divs 로는 접근할 수 없다. 

새로 query 하거나 아니면 새로 추가된 div element를 $divs 에 추가해넣어야 한다.

Selection Filtering

jQuery 는 selection 을 더 정교하게 하기 위한 filtering 함수들을 제공한다.

$("div.myClass").has("p");     // p 태그를 가진 div.myClass element.

$("h1").not(".bar");              // bar class 가 아닌 h1 elements

$("ul li").filter(".current");       // current class 를 가진 ul li.

$("ul li").first();                   // ul li 의 첫번째 item.

$("ul li").eq( 5 );                // 여섯번째 ul li.

Form element 선택

Form element 의 경우는 기본 selection 정보만으로는 선택이 힘든 경우가 많다. 

그래서 jQuery 에서는 추가 pseudo-selector 를 제공한다.

$("form :button");

최고의 performance 를 위해서 먼저 jQuery 기본 selector 로 검색 후에 .

filter("pseudo-selector") 를 이용해 추가 검색하는 것이 좋다.

$("form").filter(":button");

:button : type="button" 또는 <button> 을 찾는다.

:checkbox : type="checkbox"

:checked : checked checkbox 와 radio button 을 골라낸다.

:disabled : disable 된 input elements 들 select.

:file : type="file" 인 input elements

최신의 browser 들은 [type="file"] selector 를 사용하는 것이 :file 보다 추천된다.

:image : image type 의 input 태그들

최신 browser 는 역시 [type="image"] 가 추천된다.

:input : <input>, <textarea>, <select>, <button> elements 찾는다.

:password : password type 의 input 태그를 찾는다.

[type="password"] 가 추천된다.

:radio : radio type 의 input 태그.

[type="radio"] 가 추천된다.

한 set의 radio button 을 찾으려면 다음과 같이 한다.

$("form input[name="gender"]:radio")

:reset : reset type 의 input 태그

[type="reset"] 이 추천된다.

:selected : <option> element 중 선택된 모든 element 성택

:submit : submit type 의 input element

[type="submit"] 이 추천된다.

:text : text type 의 모든 input 태그

참고로 <input> 태그의 기본은 text 이기 때문에 type 이 명시되지 않은 모든 녀석들을 함께 로드한다.

:button, :checkbox, :checked, :disabled, :file, :first, :gt, :image, :input, :lt, :odd, :password, :radio, :reset, :selected, :submit, :text, :visible, Animated, array, cache, class 이름으로 검색, coding convention, convention, css, CSS3, ELEMENT, EQ, Example, example code, Filter, filtering, First, form selector, has, id로 검색, jQuery, Not, overhead, Performance, pseudo selector, query, Regular Expression, Sample Code, selection, selector, TAG, tag 이름, Tr, tutorial, 강좌, 검색, 기초 강좌, 동적 반영, 레귤러 익스프레션, 복합 selector, 선택, 성능, 셀렉터, 수도 selector, 실수, 예제, 예제 코드, 오버헤드, 유효성, 저장, 좋은 selector, 주의사항