HACOSA jQuery STUDY#2. jQuery 로 요소 선택하기

소개• selector 엔진‒ CSS 1 – 3 명세서에 기술된 selector 들을 지원‒ 특별한 상태와 특성을 이용하여 요소를 선택하는데 사용할 수 있는

사용자정의 셀렉터 (costom selector) 포함

$(‘#id’); // ID name 으로 접근$(‘.class’); // class name 으로 접근$(‘elementName’); // element name 으로 접근 $(‘div’);$(‘elementName#id); // 특정 ID 를 가진 요소 $(‘div#content’);$(‘elementName.class); // 특정 class 를 가진 요소 $(‘li.menu’);$(‘#id elementName’); // 특정 ID 요소내의 특정 요소 $(‘#header a);$(‘#id > .class’); // 특정 ID 요소의 특정 class 직속자식요소 $(‘#head > .menu’);$(‘elementName, elementName, …’); // 여러 개의 요소 $(‘div,p,blockquote’);

자식 요소 찾기• 자식 결합자 (>) 사용‒ CSS 2 의 “ > “ selector 와 동일‒ 부모 요소의 특정 자식 요소를 반환‒ $(‘Parent Element Name > Childe Element Name’)

<a href=“/category”>Category</a><ul id=“nav”> <li><a href=“#anchor1”>Anchor 1</a></li> <li><a href=“#anchor2”>Anchor 2</a></li> <li><span><a href=“#anchor2”>Anchor 2</a></span></li></ul><script type=“text/JavaScript”> alert($(‘#nav li > a’).length);</script>

Q. alert 은 몇 을 출력하게 될까 ?

자식 요소 찾기• children( ) method 사용‒ children() : 부모의 모든 자식 요소를 반환 . children(‘*’) 과 동일‒ children(selector) : 부모의 특정 자식 요소를 반환‒ $(parent selector).children([selector])

<a href=“/category”>Category</a><ul id=“nav”> <li><a href=“#anchor1”>Anchor 1</a></li> <li><a href=“#anchor2”>Anchor 2</a></li> <li><span><a href=“#anchor2”>Anchor 2</a></span></li></ul><script type=“text/JavaScript”> alert($(‘#nav li’).children().length); alert($(‘#nav li’).children(‘a’).length);</script>

Q. alert 은 각각 몇 을 출력할까 ?Q. alert($(‘#anchor1’).children().length); 는 몇을 출력하게 될까 ?

특정 형제들 선택하기• 인접 형제 요소 : 인접형제 결합자 (+) 사용‒ CSS 2 의 “ + “ selector 와 동일한 결합자‒ $(‘base+ target’)‒ $(base selector).next(target selector) 와 동일

<p id=“p1”>Paragraph 1</p><ul id=“nav”> <li><a href=“#anchor1”>Anchor 1</a></li> <li><a href=“#anchor2”>Anchor 2</a></li> <li><span><a href=“#anchor2”>Anchor 2</a></span></li></ul><p id=“p2”>Paragraph 2</p><script type=“text/JavaScript”> alert($(‘#nav + p’).length); </script>

Q. alert 은 몇을 출력할까 ?Q. alert($(‘#nav + p’).attr(‘id’)) 가 출력하는 내용은 ?

특정 형제들 선택하기• 모든 형제 요소 : silblings( ) method 사용‒ 인접함의 상관 없이 모든 형제 요소 반환‒ $(selector).siblings() : 모든 형제 요소 반환‒ $(selector).siblings(selector) : 특정 형제 요소 반환

<a href=“www.naver.com”> 네이버 </a><p id=“p1”>Paragraph 1</p><ul id=“nav”> <li><a href=“#anchor1”>Anchor 1</a></li> <li><a href=“#anchor2”>Anchor 2</a></li> <li><span><a href=“#anchor2”>Anchor 2</a></span></li></ul><p id=“p2”>Paragraph 2</p><script type=“text/JavaScript”> alert($(‘#nav ’).siblings().length); alert($(‘#nav ’).siblings(‘p’).length); </script>

Q. alert 은 각각 몇 을 출력할까 ?

특정 형제들 선택하기• 선택된 요소 이후의 모든 형제 요소 : 일반형제 결합자 (~) 사용‒ CSS3 의 “ ~ “ 선택자와 동일‒ $(‘base ~ target’)

<a href=“www.naver.com”> 네이버 </a><p id=“p1”>Paragraph 1</p><ul id=“nav”> <li><a href=“#anchor1”>Anchor 1</a></li> <li><a href=“#anchor2”>Anchor 2</a></li> <li><span><a href=“#anchor2”>Anchor 2</a></span></li></ul><p id=“p2”>Paragraph 2</p><p id=“p3”>Paragraph 3</p><script type=“text/JavaScript”> alert($(‘#nav ~ p ’).length); </script>

Q. alert 은 각각 몇 을 출력할까 ?

인덱스 순서로 요소 선택하기• jQuery Filter 이용

※ (n) 이 음수이면 마지막 인덱스부터 거꾸로 계산

Filter Description Example

:first 첫 번째 선택 요소 $(‘ol li:first’);

:last 마지막 선택 요소 $(‘ol li:last’);

:even 짝수 요소 (0 부터 인덱스 ) $(‘ol li:even’);

:odd 홀수 요소 (0 부터 인덱스 ) $(‘ol li:odd’);

:eq(n) (n) 번째 인덱스에 해당하는 단일 요소 $(‘ol li:eq(0)’);

:lt(n) (n) 번째 보다 다음에 있는 모든 요소 $(‘ol li:lt(0)’);

:gt(n) (n) 번째 보다 앞에 있는 모든 요소 $(‘ol li:gt(1)’);

현재 애니메이션 중인 요소 선택• :animated Filter 이용‒ $(‘[element]:animated’)

‒ ref) 현재 요소가 애니메이션 중인지 확인 하는 법→is() method 사용→$(‘target’).is(‘:animated’)

$(‘div:not(div:animated)’).animate({height:100});

무엇을 포함하고 있는지에 따라 요소 선택하기

• 특정 텍스트 컨텐츠를 포함한 요소 선택‒ :contains Filter 사용‒ $(‘[element]:contains(text)’)

‒ filter() Method 와 정규식 사용

<span>Hellow Bob!</span><script type=“text/JavaScript”> $(‘span:contains(“Bob”)’);</script>

$(selector).filter(function(){ return [ 정규식 ].test($(this).text());}

무엇을 포함하고 있는지에 따라 요소 선택하기

• 특정 요소를 포함하는 요소 선택‒ :has Filter 사용‒ $(‘:has(selector)’)

<div> <p>Paragraph 1</p> <p> Naver : <a href=“www.naver.com”>Go Naver</a> Daum : <a href=“www.daum.net” class=“newWin”>Go Daum</a> Nate : <a href=“www.nate.com” class=“newWin”>Go Nate</a> </p></div> <script type=“text/JavaScript”> alert($(‘p:has(a)).length);</script>

Q. 위 페이지 실행 시 얼럿에 뜨는 숫자는 ?Q. alert($(‘p:has(.newWin)).length 실행 시 뜨는 숫자는 ?

일치되지 않는 요소 선택• :not Filter 사용‒ $(‘:not(selector)’)

<li><a href=“www.naver.com”>go naver</a></li><li><a href=“www.daum.net”>go daum</a></li><li><a href=“www.nate.com” class=“selected”>go nate</a></li><li><a href=“www.yahoo.com”>go yahoo</a></li><li><a href=“www.google.com”>go google</a></li>

<script> alert($(“a:not(‘.selected’) ").length); alert($(“li:not(li:lt(2))).length); alert($(“a:not(li a)”).length);</script>

Q. 위 페이지 실행 시 얼럿에 각각 뜨는 숫자는 ?

가시성을 기반으로 요소 선택• 눈에 보이는지 보이지 않는지에 따라 요소 선택‒ :hidden 또는 :visible Filter 이용‒ 주의 ! 1.3.2 ver 이전에서는 visibility 속성을 기반으로 동작

이후 버전에서는 요소의 width, height 를 검사

<div> <p style=“display:none”>Paragraph 1</p> <p> Naver : <a href=“www.naver.com”>Go Naver</a> Daum : <a href=“www.daum.net” class=“newWin”>Go Daum</a> Nate : <a href=“www.nate.com” class=“newWin”>Go Nate</a> </p></div> <script type=“text/JavaScript”> alert($(‘p:has(a)).length);</script>

Q. 위 페이지 실행 시 얼럿에 뜨는 숫자는 ?Q. style=“width:0px;height:0px” 일 경우 얼럿에 뜨는 숫자는 몇이 될까 ?

어트리뷰트 기반으로 요소 선택• 어트리뷰트와 어트리뷰트 값으로 요소 선택

사용법 설명 사용예[attr] 특정 어트리뷰트를 가진 요소 $(‘a[title][href]’)

[attr=val] 지정된 어트리뷰트가 지정된 값을 가진 요소 $(‘a[title=“naver”])

[attr!=val]

지정된 어트리뷰트나 값을 갖지 않는 요소 $(‘a[title!=“naver”])

[attr^=val]

지정된 어트리뷰트가 지정된 값으로 시작하는 요소 $(‘a[title^=“na”])

[attr$=val]

지정된 어트리뷰트가 지정된 값으로 끝나는 요소 $(‘a[title^=“er”])

[attr~=val]

공백과 함께 특정 값을 포함하는 요소

( 단 , 특정 값은 완전한 단어만 처리됨 .

[attr~=“er”] 인 경우 title=“naver” 은 불일치 처리 )

$(‘a[title~=“naver”])

형식에 따라 폼 요소 선택• jQuery Filter 이용

• :input Filter ‒ 모든 input, textarea, button, select 를 선택

Filter Selected Element:text <input type=“text” />

:password <input type=“password” />

:radio <input type=“radio” />

:checkbox <input type=“checkbox” />

:submit <input type=“submit” />

:image <input type=“image” />

:reset <input type=“reset” />

:button <input type=“button” />

:file <input type=“file” />

:hidden <input type=“hidden” />

특성을 갖는 요소 선택하기• 다른 요소와의 관계 , 어트리뷰트 , 셀렉터 식으로 표현하기

어려운 매우 특별한 특성으로 요소를 찾을 경우• filter() method 사용• $(selector).filter([selector|function|element|jQuery Object])

$(‘div’).filter(fucntion(){ var width = $(this).width(); return width > 100 && width < 200;});// width 가 100px ~ 200px 사이인 div 반환

컨텍스트 매개변수 사용하기• 컨텍스트란 ? ‒ jQuery 가 셀렉터 식에 의해 매치되는 요소를 찾을 장소

• 두 번째 매개변수로 특정 컨텍스트 지정

$(‘p’, ‘#content’);// ID 가 content 인 요소 내의 <p> 요소 반환

사용자정의 필터 셀렉터 만들기• filter 를 확장시키는 방법• $.expr[‘:’].newFilter = function(elem, index, match){

return [ 반환할 컬렉션 정의문 ];}

<li><a href=“www.naver.com” class=“newWin”>go naver</a></li><li><a href=“www.daum.net” class=“newWin”>go daum</a></li><li><a href=“www.nate.com” class=“newWin”>go nate</a></li><li><a href=“www.yahoo.com”>go yahoo</a></li><li><a href=“www.google.com”>go google</a></li><script type=“text/JavaScript”> $.expr[':'].newWin = function(elem){ return $(elem).attr('class') == 'newWin'; } alert($('a:newWin').length);</script>

<li><a href=“www.naver.com” class=“newWin”>go naver</a></li><li><a href=“www.daum.net” class=“newWin”>go daum</a></li><li><a href=“www.nate.com” class=“newWin”>go nate</a></li><li><a href=“www.yahoo.com”>go yahoo</a></li><li><a href=“www.google.com”>go google</a></li><script type=“text/JavaScript”> $.extend($.expr[':'], { newWin : function(elem){ return $(elem).attr('class') == 'newWin'; }, currWin : function(elem){ return $(elem).attr('class') != 'newWin'; } }); alert($('a:newWin').length); alert($('a:currWin').length);</script>

END