Difference between revisions of "JQuery"

From Colettapedia
Jump to navigation Jump to search
Line 10: Line 10:
 
* read the selectors backwards
 
* read the selectors backwards
 
* $("p > a") - return link elements who have a <p> for a parent element
 
* $("p > a") - return link elements who have a <p> for a parent element
* $("ul.myList > li > a") - return link elements who are children of a <li> element, which are in turn children of a <ul> element of class "myList"
+
* $("ul.myList > li > a") - return link elements who are children of a <li> element, which are in turn children of a ul element of class "myList"
 
* $("p+a") - matches link elements immediately preceded by sibling <p> tag
 
* $("p+a") - matches link elements immediately preceded by sibling <p> tag
 
* $("p~a") - matches link elements preceded by any sibling <p> tag
 
* $("p~a") - matches link elements preceded by any sibling <p> tag

Revision as of 20:43, 5 October 2009

Selector Syntax

Basic CSS selectors

  • $("a") - matches all link (<a>) elements
  • $("#specialID") - matches elements that have an id of specilID
  • $(".specialClass") - matches elements that have the class of specialClass
  • $("a#specialID.specialClass") - matches links with an id of specialID and a class of special Class.
  • $("p a.specialClass") - matches links with an id of specialID and a class of specialClass

Child, Container, and attribute selectors

  • $("p a") - return link elements that are descendents of

    tag

  • read the selectors backwards
  • $("p > a") - return link elements who have a

    for a parent element

  • $("ul.myList > li > a") - return link elements who are children of a
  • element, which are in turn children of a ul element of class "myList"
  • $("p+a") - matches link elements immediately preceded by sibling

    tag

  • $("p~a") - matches link elements preceded by any sibling

    tag

  • $("a[href^=http://]") - return any link elements, the beginning of whose href attribute matches "http://"
  • $("form[method]") - return any form element that simply has an explicit method attribute
  • $("input[type=text]") - return any input element with a type attribute of text
  • $("div[title^=my]") - return any div element whose title attribute starts with "my"
  • $("a[href$=.pdf]")
  • $("a[href*=jquery.com]")
  • $("li:has(a)") - return any
  • element that has a link element in it
  • only one level of nesting supported this way
  • $("foo:not(bar:has(baz))") - this is ok