jQuery Selectors

 To select elements using jQuery, we wrap the selector in $(), as in  $("p a.specialClass").

 

The  $() function (an alias for the  jQuery() function) returns a special Java-Script object containing an array of the DOM elements that match the selector. 

 

(一).using basic css selectors, examples:

 

(二). Using child, container, and attribute selectors

 

examples:

 

input[type=text] //This selector matches all input elements with a type of text

div[title^=my]  //This selects all <div> elements with title attributes whose value begins with my

a[href$=.pdf]   //This  selects all <a>  elements with href attributes whose value ends with .pdf

a[href*=jquery.com]  //This selects all <a> elements with href attibutes whose value contain string"jquery.com" anywhere

p > a    //this selects only links that are direct children of a <p> element

li:has(a)  //This selector matches all <li> elements that contain an <a> element. It's different with "li a"
 

 

 

（三）. Selecting by position

 

 

note: eq is 0-based, but :nth-child is 1-based

 

(四) .Using custom jQuery selectors

 

 

 

We can combine selector filters too. For example, if we want to select only enabled and checked check boxes, we could use  "checkbox:checked:enabled".

 

To select non-check box <input> elements, we use  "input:not(:checkbox)".

 

note:

 

filter selectors are easily identified because they all begin with a colon character (:) or a square bracket character ([).

Any other selector can’t be used inside the :not() filter.

 

All the materials come from "jQuery in action".

 

 

 jQuery allows us to treat the wrapped set as a JavaScript array.

eg: $('img[alt]')[0]