Hacosa j query 2th

1,271 views

Published on

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

Published in: Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,271
On SlideShare
0
From Embeds
0
Number of Embeds
360
Actions
Shares
0
Downloads
34
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Hacosa j query 2th

  1. 1. HACOSA jQuery STUDY#2. jQuery로 요소 선택하기
  2. 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. 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. 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. 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. 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. 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. 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. 9. 현재 애니메이션 중인 요소 선택• :animated Filter 이용 ‒ $(‘[element]:animated’) $(‘div:not(div:animated)’).animate({height:100}); ‒ ref) 현재 요소가 애니메이션 중인지 확인 하는 법 →is() method 사용 →$(‘target’).is(‘:animated’)
  10. 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. 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. 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. 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. 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. 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. 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. 17. 컨텍스트 매개변수 사용하기• 컨텍스트란? ‒ jQuery가 셀렉터 식에 의해 매치되는 요소를 찾을 장소• 두 번째 매개변수로 특정 컨텍스트 지정 $(‘p’, ‘#content’); // ID가 content인 요소 내의 <p> 요소 반환
  18. 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. 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. 20. END

×