Did you find this useful?
Socialize it today.


jQuery Selectors

Sunday, June 10, 2012

The jQuery selectors to let us quickly and easily access individual or groups of HTML elements in the Document Object Model (DOM). Selectors allow you to get the exact element or attribute you want from your HTML document. jQuery supports the existing CSS Selectors, as well as some custom selectors. All of the jQuery selectors begin with the dollar sign and parentheses: $().


SelectorExampleDescription
*$("*")All elements
selector-1,selector-2$("p,div")All elements with matching selectors
#id$("#one")The element with id="one"
.class$(".two")All elements with class="two"
element$("div")All div elements
.class.class$(".abc.def")All elements with the classes "abc" and "def"


SelectorExampleDescription
:animated$(":animated")All animated elements
:contains(text)$(":contains('test')")All elements that contain the text
:empty$(":empty")All elements with no child nodes
:eq(index)$("ul li:eq(2)")The third element in a list [starts at 0]
:even$("tr:even")All even tr elements
:first$("div:first")The first div element
:gt(index)$("ol li:gt(2)")List elements with an index > 2
:header$(":header")All header elements [h1, h2 ...]
:hidden$("div:hidden")All hidden div elements
:last$("div:last")The last div element
:lt(index)$("ol li:lt(2)")List elements with an index < than 2
:not(selector)$("td:not(:empty)")All td elements that are not empty
:odd$("tr:odd")All odd tr elements
:visible$(":visible")Visible elements


SelectorExampleDescription
[attribute]$("[href]")All elements with a href attribute
[attribute=value]$("[href='index.htm']")All elements with a href attribute equal to "index.htm"
[attribute!=value]$("[href!='index.htm']")All elements with a href attribute not equal to "index.htm"
[attribute$=value]$("[href$='.png']")All elements with a href attribute ending with ".png"
[attribute^=value]$("[href^='http']")All elements with a href attribute beginning with "http"


SelectorExampleDescription
:input$(":input")All input elements
:text$(":text")Input elements with type="text"
:password$(":password")Input elements with type="password"
:radio$(":radio")Input elements with type="radio"
:checkbox$(":checkbox")Input elements with type="checkbox"
:submit$(":submit")Input with type="submit"
:reset$(":reset")Input elements with type="reset"
:button$(":button")Input elements with type="button"
:image$(":image")Input elements with type="image"
:file$(":file")Input elements with type="file"
:enabled$(":enabled")Enabled input elements
:disabled$(":disabled")Disabled input elements
:selected$(":selected")Selected input elements
:checked$(":checked")Checked input elements


The selectors are very useful and would be required at every step while using jQuery. They do a great job making it easy to get to the exact element that you want from your HTML document. Here is an example where you are selecting all paragraph elements and when you click on any of them, the text color changes to red. If you copy and paste this example, make sure you update the correct value for the src attribute in the reference to the jQuery library.


<html>
<head>
<title>Your Title</title>
 <script type="text/javascript" src="jquery.js">
 </script>

</head>
<body>
   <p>This is a paragraph.</p>
   <p>This is second paragraph.</p>
   <p>This is third paragraph.</p>

   <script type="text/javascript">
       $(document).ready(function () {
           $("p").click(function () {
               $(this).css("color", "red");
           });
       });
   </script>
 
</script>
</body>
</html>

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

JavaScript and jQuery: The Missing Manual HTML CSS and JavaScript Editor Pro jQuery