JQuery selectors with examples

1) $(“div”) selects all <div> elements

2) $(“fieldset a”) selects all <a> elements within elements

3) $(“li>p”) selects all <p> elements that are direct children of <li> elements

4) $(“div~p”) selects all <div> elements that are preceded by a <p> element

5) $(“p:has(b)”) selects all <p> elements that contain a <b> element

6) $(“div.someClass”) selects all <div> elements with a class name of someClass

7) $(“.someClass”) selects all elements with class name someClass

8) $(“#testButton”) selects the element with the id value of testButton

9) $(“img[alt]”) selects all <img> elements that possess an alt attribute

10) $(“a[href$=.pdf]”) selects all <a> elements that possess an href attribute that ends in .pdf

11) $(“button[id*=test]”) selects all buttons whose id attributes contain test

12)$(“p:first”) selects the first element on the page

13) $(“img[src$=.png]:first”) selects the first <img> element on the page that has a src attribute ending in .png

14) $(“button.small:last”) selects the last element on the page that has a class name of small

15) $(“li:first-child”) selects all <li> elements that are first children within their lists

16) $(“a:only-child”) selects all <a> elements that are the only element within their parent

17) $(“li:nth-child(2)”) selects all <li> elements that are the second item within their lists

18) $(“tr:nth-child(odd)”) selects all odd <tr> elements within a table

19) $(“div:nth-child(5n)”) selects every 5th <div> element

20) $(“div:nth-child(5n+1)”) selects the element after every 5th <div> element

21) $(“.someClass:eq(1)”) selects the second element with a class name of someClass

22) $(“.someClass:gt(1)”) selects all but the first two elements with a class name of someClass

23) $(“.someClass:lt(4)”) selects the first four elements with a class name of someClass

24) $(“img:animated”) selects all <img> elements that are undergoing animation

25) $(“:button:hidden”) selects all button type elements that are hidden

26) $(“input[name=myRadioGroup]:radio:checked”) selects all radio elements with the name attribute value of
myRadioGroup that are checked

27) $(“:text:disabled”) selects all text fields that are disabled

28) $(“#xyz p :header”) selects all header type elements within <p> elements that are within an element with an id value of xyz. Note the space before :header that prevents it from binding directly to the p.

29) $(“option:not(:selected)”) selects all unselected elements

30) $(“#myForm button:not(.someClass)”) selects all buttons from the with the id of myForm that do not possess the class name someClass.

31) $(“select[name=choices] :selected”) selects the selected elements within the element named choices.

32) $(“p:contains(coffee)”) selects all <p> elements that contain the text coffee

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s