하코사 종로 jQuery 스터디 모임 2일차

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

2. 소개
• 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’);

3. 자식 요소 찾기
• 자식 결합자(>) 사용
‒ 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은 몇 을 출력하게 될까?

4. 자식 요소 찾기
• 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); 는 몇을 출력하게 될까?

5. 특정 형제들 선택하기
• 인접 형제 요소 : 인접형제 결합자(+) 사용
‒ 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’)) 가 출력하는 내용은?

6. 특정 형제들 선택하기
• 모든 형제 요소 : 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 은 각각 몇 을 출력할까?

7. 특정 형제들 선택하기
• 선택된 요소 이후의 모든 형제 요소 : 일반형제 결합자(~) 사용
‒ 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 은 각각 몇 을 출력할까?

8. 인덱스 순서로 요소 선택하기
• jQuery Filter 이용
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)’);
※ (n)이 음수이면 마지막 인덱스부터 거꾸로 계산

9. 현재 애니메이션 중인 요소 선택
• :animated Filter 이용
‒ $(‘[element]:animated’)
$(‘div:not(div:animated)’).animate({height:100});
‒ ref) 현재 요소가 애니메이션 중인지 확인 하는 법
→is() method 사용
→$(‘target’).is(‘:animated’)

10. 무엇을 포함하고 있는지에 따라 요소 선택하기
• 특정 텍스트 컨텐츠를 포함한 요소 선택
‒ :contains Filter 사용
‒ $(‘[element]:contains(text)’)
<span>Hellow Bob!</span>
<script type=“text/JavaScript”>
$(‘span:contains(“Bob”)’);
</script>
‒ filter() Method와 정규식 사용
$(selector).filter(function(){
return [정규식].test($(this).text());
}

11. 무엇을 포함하고 있는지에 따라 요소 선택하기
• 특정 요소를 포함하는 요소 선택
‒ :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 실행 시 뜨는 숫자는?

12. 일치되지 않는 요소 선택
• :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. 위 페이지 실행 시 얼럿에 각각 뜨는 숫자는?

13. 가시성을 기반으로 요소 선택
• 눈에 보이는지 보이지 않는지에 따라 요소 선택
‒ :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” 일 경우 얼럿에 뜨는 숫자는 몇이 될까?

14. 어트리뷰트 기반으로 요소 선택
• 어트리뷰트와 어트리뷰트 값으로 요소 선택
사용법 설명 사용예
[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] 공백과 함께 특정 값을 포함하는 요소 $(‘a[title~=“naver”])
(단, 특정 값은 완전한 단어만 처리됨.
[attr~=“er”]인 경우 title=“naver”은 불일치 처리)

15. 형식에 따라 폼 요소 선택
• jQuery Filter 이용
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” />
• :input Filter
‒ 모든 input, textarea, button, select를 선택

16. 특성을 갖는 요소 선택하기
• 다른 요소와의 관계, 어트리뷰트, 셀렉터 식으로 표현하기 어려
운 매우 특별한 특성으로 요소를 찾을 경우
• 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 반환

17. 컨텍스트 매개변수 사용하기
• 컨텍스트란?
‒ jQuery가 셀렉터 식에 의해 매치되는 요소를 찾을 장소
• 두 번째 매개변수로 특정 컨텍스트 지정
$(‘p’, ‘#content’);
// ID가 content인 요소 내의 <p> 요소 반환

18. 사용자정의 필터 셀렉터 만들기
• 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>

19. <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>

20. END