jQuery: Selector Summary
Blogs20112011-11-02
jQuery selector summary
I got the following summary from http://demo.smartnetzone.com/jquery-selectors/. not all, but helpful, save here for quick retrieving.
| Selector | Example | Description | Reference |
|---|---|---|---|
| * | $(“*”) | It will select all the elements | http://api.jquery.com/all-selector/ |
| #id | $(“#myid”) | The element with id name myid will be selected | http://api.jquery.com/id-selector/ |
| .class | $(“.myclass”) | The element with class name myclass will be selected | http://api.jquery.com/class-selector/ |
| .class1.class2 | $(“.class_first. class_second”) | It will select all the elements of class_first and class_second classes | http://api.jquery.com/class-selector/ |
| element | $(“p”) | All p elements will be selected | http://api.jquery.com/element-selector/ |
| :first | $(“li:first”) | The first li element will be selected | http://api.jquery.com/first-selector/ |
| :last | $(“li:last”) | The last li element will be selected | http://api.jquery.com/last-selector/ |
| :even | $(“tr:even”) | All even tr elements will be selected | http://api.jquery.com/even-selector/ |
| :odd | $(“tr:odd”) | All odd tr elements will be selected | http://api.jquery.com/odd-selector/ |
| :eq(index) | $(“ul li:eq(2)”) | The index starts at 0. The third element in a list will be selected. | http://api.jquery.com/eq-selector/ |
| :gt(no) | $(“ul li:gt(2)”) | List elements with an index greater than 2 will be selected | http://api.jquery.com/gt-selector/ |
| :lt(no) | $(“ul li:lt(2)”) | List elements with an index less than 2 will be selected | http://api.jquery.com/lt-selector/ |
| :header | $(“:header”) | All the header elements will be selected (ex. h1,h2,…) | http://api.jquery.com/header-selector/ |
| sel1,sel2,sel3 | $(“p,td,.myclass”) | All elements with matching selectors will be selected | http://api.jquery.com/multiple-selector/ |
| :contains(text) | $(“:contains (‘smartnetzone’)”) | All elements which contains the text smartnetzone will be selected | http://api.jquery.com/contains-selector/ |
| :visible | $(“table:visible”) | All visible tables will be selected | http://api.jquery.com/visible-selector/ |
| :empty | $(“:empty”) | All elements with no child elements will be selected | http://api.jquery.com/empty-selector/ |
| :hidden | $(“p:hidden”) | All hidden p elements will be selected | http://api.jquery.com/hidden-selector/ |
| :reset | $(“:reset”) | All input elements with type=”reset” will be selected | http://api.jquery.com/reset-selector/ |
| :button | $(“:button”) | All input elements with type=”button” will be selected | http://api.jquery.com/button-selector/ |
| :file | $(“:file”) | All input elements with type=”file” will be selected | http://api.jquery.com/file-selector/ |
| :submit | $(“:submit”) | All input elements with type=”submit” will be selected | http://api.jquery.com/submit-selector/ |
| :input | $(“:input”) | All input elements will be selected | http://api.jquery.com/input-selector/ |
| :text | $(“:text”) | All input elements with type=”text” will be selected | http://api.jquery.com/text-selector/ |
| :password | $(“:password”) | All input elements with type=”password” will be selected | http://api.jquery.com/password-selector/ |
| :enabled | $(“:enabled”) | All enabled input elements will be selected | http://api.jquery.com/enabled-selector/ |
| :disabled | $(“:disabled”) | All disabled input elements will be selected | http://api.jquery.com/disabled-selector/ |
| :selected | $(“:selected”) | All selected input elements will be selected | http://api.jquery.com/selected-selector/ |
| :radio | $(“:radio”) | All input elements with type=”radio” will be selected | http://api.jquery.com/radio-selector/ |
| :checkbox | $(“:checkbox”) | All input elements with type=”checkbox” will be selected | http://api.jquery.com/checkbox-selector/ |
| [attribute] | $(“[href]“) | All elements with a href attribute will be selected | http://api.jquery.com/has-attribute-selector/ |
| [attribute=value] | $(“[href=‘index.html’]“) | All elements with a href attribute value equal to “index.html” will be selected | http://api.jquery.com/attribute-equals-selector/ |
| [attribute!=value] | $(“[href!=‘index.html’]“) | All elements with a href attribute value not equal to “index.html” will be selected | http://api.jquery.com/attribute-not-equal-selector/ |
| [attribute$=value] | $(“[href$=‘.jpg’]“) | All elements with a href attribute value ending with “.jpg” will be selected | http://api.jquery.com/attribute-ends-with-selector/ |