본문 바로가기
프로그래밍 놀이터/Web

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

by 돼지왕 왕돼지 2013. 7. 17.
반응형



 Selector 를 통해 Element 선택하기.

 

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


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 이 명시되지 않은 모든 녀석들을 함께 로드한다.








반응형

댓글