• jquery select
  • 프로그래밍/자바스크립트
  • 2009/05/16 10:30
  •  
  • Posted by 웹눈

jquery select


This is a paragraph of text with class="goofy." It has anexternal link, some $(code), and a same-page link.

  1. list item 1 with dummy link to silly.pdf
  2. list item 2 with class="goofy"
  3. list item 3
  4. list item 4 with silly link to silly.pdf
  •  $('li:eq(0)') gets the first list item
  •  $('li:even') gets all odd-numbered list items (because, in javascript, numbering starts with 0, not 1).
  •  $('li:lt(3)') gets the first 3 list items. "lt" stands for "less than," and it starts counting at 0, not 1.
  •  $('li:not(.goofy)') gets list items 1, 2, and 4, because they're not "goofy."
  •  $('p a[href*=#]') gets any links that are inside a paragraph and have an "href" attribute starting with "#" — containing "#" anywhere. in other words, same-page links. There are problems with trying to identify same-page links this way. I'll write about this in an upcoming entry. Note the space between the "p" and the "a"; that means that the "a" is a descendant of the "p."
  •  $('code, li.goofy') gets all code elements and any list item with a class of "goofy."
  •  $('ol .goofy > strong') gets all strong elements that are children of any element with a class of "goofy" as long as the class somewhere inside (i.e. a descendent) of an ordered list. Notice that the word "item" is not highlighted because, even though it's inside ".goofy," it's not a direct child. Only "goofy" is a direct child of ".goofy." Maybe we should call it "goofy jr."
  •  $('li + li > a[href$=pdf]') gets all links ending in "pdf" that are children of any list item that has another list item as its previous sibling. It won't get the first list item's silly.pdf because that list item has no other list items before it.
  •  $('span:hidden') gets any span element that is hidden.

Note: The selectors used for the toggle buttons are identical to the ones shown next to each button, except that they are preceded by $('#jqdt').find to target the highlighting.

jQuery's selector expressions cover the full range of CSS 1-3, along with basic XPath and a few jQuery-only expressions. For a complete list, visit jquery.com

Next time, I'll explore jQuery functions such as .filter(), prev(), and siblings() that complement the above selector expressions to give you full DOM-traversing power!

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

jquery select  (0) 2009/05/16
jQuery 를 이용한 XML 파싱  (0) 2009/05/16
INPUT TYPE 에서 숫자만 입력받기  (0) 2009/04/10
테두리가 둥근 테이블 만들기  (0) 2008/08/26
Trackback 0 Comment 0