Thursday, 22 August 2013

JQuery-Selectors

  1. $('*'): This selector selects all elements in the document.
  2. $("p > *"): This selector selects all elements that are children of a paragraph element.
  3. $("#specialID"): This selector function gets the element with id="specialID".
  4. $(".specialClass"): This selector gets all the elements that have the class ofspecialClass.
  5. $("li:not(.myclass)"): Selects all elements matched by <li> that do not have class="myclass".
  6. $("a#specialID.specialClass"): This selector matches links with an id of specialID and a class of specialClass.
  7. $("p a.specialClass"): This selector matches links with a class of specialClass declared within <p> elements.
  8. $("ul li:first"): This selector gets only the first <li> element of the <ul>.
  9. $("#container p"): Selects all elements matched by <p> that are descendants of an element that has an id of container.
  10. $("li > ul"): Selects all elements matched by <ul> that are children of an element matched by <li>
  11. $("strong + em"): Selects all elements matched by <em> that immediately follow a sibling element matched by <strong>.
  12. $("p ~ ul"): Selects all elements matched by <ul> that follow a sibling element matched by <p>.
  13. $("code, em, strong"): Selects all elements matched by <code> or <em> or <strong>.
  14. $("p strong, .myclass"): Selects all elements matched by <strong> that are descendants of an element matched by <p> as well as all elements that have a class ofmyclass.
  15. $(":empty"): Selects all elements that have no children.
  16. $("p:empty"): Selects all elements matched by <p> that have no children.
  17. $("div[p]"): Selects all elements matched by <div> that contain an element matched by <p>.
  18. $("p[.myclass]"): Selects all elements matched by <p> that contain an element with a class of myclass.
  19. $("a[@rel]"): Selects all elements matched by <a> that have a rel attribute.
  20. $("input[@name=myname]"): Selects all elements matched by <input> that have a name value exactly equal to myname.
  21. $("input[@name^=myname]"): Selects all elements matched by <input> that have a name value beginning with myname.
  22. $("a[@rel$=self]"): Selects all elements matched by <p> that have a class value ending with bar
  23. $("a[@href*=domain.com]"): Selects all elements matched by <a> that have an href value containing domain.com.
  24. $("li:even"): Selects all elements matched by <li> that have an even index value.
  25. $("tr:odd"): Selects all elements matched by <tr> that have an odd index value.
  26. $("li:first"): Selects the first <li> element.
  27. $("li:last"): Selects the last <li> element.
  28. $("li:visible"): Selects all elements matched by <li> that are visible.
  29. $("li:hidden"): Selects all elements matched by <li> that are hidden.
  30. $(":radio"): Selects all radio buttons in the form.
  31. $(":checked"): Selects all checked boxex in the form.
  32. $(":input"): Selects only form elements (input, select, textarea, button).
  33. $(":text"): Selects only text elements (input[type=text]).
  34. $("li:eq(2)"): Selects the third <li> element
  35. $("li:eq(4)"): Selects the fifth <li> element
  36. $("li:lt(2)"): Selects all elements matched by <li> element before the third one; in other words, the first two <li> elements.
  37. $("p:lt(3)"): selects all elements matched by <p> elements before the fourth one; in other words the first three <p> elements.
  38. $("li:gt(1)"): Selects all elements matched by <li> after the second one.
  39. $("p:gt(2)"): Selects all elements matched by <p> after the third one.
  40. $("div/p"): Selects all elements matched by <p> that are children of an element matched by <div>.
  41. $("div//code"): Selects all elements matched by <code>that are descendants of an element matched by <div>.
  42. $("//p//a"): Selects all elements matched by <a> that are descendants of an element matched by <p>
  43. $("li:first-child"): Selects all elements matched by <li> that are the first child of their parent.
  44. $("li:last-child"): Selects all elements matched by <li> that are the last child of their parent.
  45. $(":parent"): Selects all elements that are the parent of another element, including text.
  46. $("li:contains(second)"): Selects all elements matched by <li> that contain the text second.

You can use all the above selectors with any HTML/XML element in generic way. For example if selector $("li:first") works for <li> element then $("p:first") would also work for <p> element.

No comments:

Post a Comment