jQuery Selectors and Attribute Selectors Cheat-Sheet
jQuery has become the coolest JavaScript framework now a days. This is why from novice to tech giants are using and promoting it as well. If you are a web evangelist and already used it then you should say “jQuery rules, man!”.
In this post I will try to write a cheat-sheet on jQuery Selectors and Attribute Selectors. No more talks, let’s roll on action now!
Basics |
|||
|---|---|---|---|
| Selector | Example | Description | Return |
| * | $(‘*’); | This wildcard is used to select all elements | Array<Element(s)> |
| #id | $(‘#myID); | This selector will select the unique element with given ID. | Array<Element>(note it) |
| element | $(‘a’); | This will select all a/anchor elements in the document. | Array<Element(s)> |
| elements | $(‘td, li, .myClass, #myID’); | Multiple type of elements could be selected in a comma separated manner. |
Array<Element(s)> |
| .class | $(‘.myClass’); | This selector can be used to select all elements with the specified class |
Array<Element(s)> |
Hierarchy/Path |
|||
|---|---|---|---|
| Selector | Example | Description | Return |
| assendant/descendant | $(‘li a’); | This selector will select all a elements those are descendants of li elements |
Array<Element(s)> |
| parent>child | $(‘table>tr’); | We can easily select all child elements in parent>child fashion |
Array<Element>(note it) |
| prev+next | $(‘label+input’); | This will select all INPUT elements next to LABEL elements | Array<Element(s)> |
| prev~siblings | $(‘#prev~div’); | This will select one/all element(s) which is/are siblings of prev elements. Note that no interpolated elements will be selected between prev and sibling. |
Array<Element(s)> |
Basic Filters |
|||
|---|---|---|---|
| Selector | Example | Description | Return |
| :first | $(‘dt:first’); | This will return the first dt element. | Array<Element>(note it) |
| :last | $(‘tr:last’); | Match the last tr element | Array<Element>(note it) |
| :not(‘element’) | $(‘input:not(:checked)’); | match all input elements except for checked input elements | Array<Element(s)> |
| :even | $(‘table tr:even’); | Returns all even tr from a table in the given example. (Zero indexed) |
Array<Element(s)> |
 dd |
$(‘table tr:odd’); | Returns all odd tr from a table in the given example. (Zero indexed) |
Array<Element(s)> |
| :eq(index) | $(‘tr:eq(3)’); | This will select the second row from a table | Array<Element> |
| :gt(index) | $(‘tr:gt(3)’); | This will collect all tr elements greater than the index of the given index (as per example 3) |
Array<Element> |
| :lt(index) | $(‘tr:lt(3)’); | This will collect all tr elements greater than the index of the given one (3). |
Array<Element> |
| :animated | $(‘div:animated’); | Matches all div elements as per example that are imposed animation with jQuery |
Array<Element> |
| :header | $(‘:header’); | Select all header elements like h1, h2, h3 etc | Array<Element> |
Content Filters |
|||
|---|---|---|---|
| Selector | Example | Description | Return |
| :contains(‘text’) | $(‘div:contains(“Ferdous”)’); | Select the elements that contain the given text. | Array<Element(s)> |
| :empty | $(‘td:empty’); | Match all elements those are empty. This means the element shouldn’t have any child node even text node |
Array<Element>(note it) |
| :parent | $(‘li:parent’); | Match all parent elements those are parent of li | Array<Element(s)> |
| :has(‘element’) | $(‘div:has(“p”)’); | Collect the elements that has at least one specified element in :has(). |
Array<Element(s)> |
Visibility Filters |
|||
|---|---|---|---|
| Selector | Example | Description | Return |
| :hidden | $(‘div:hidden’); | Collects all specified hidden elements | Array<Element(s)> |
| :visible | $(‘div:visible’); | Collects all specified visible elements | Array<Element>(note it) |
Attribute Filters |
|||
|---|---|---|---|
| Selector | Example | Description | Return |
| [attribute] | $(‘div[id]‘); | This will select all elements with the given attribute. note that the @ sign has been deprecated from version 1.2 |
Array<Element(s)> |
| [attribute=value] | $(‘input[name="email"]‘); | Select elements that has the specified attribute and exact value | Array<Element>(note it) |
| [attribute!='value'] | $(‘div[id="content"]‘); | Matches elements that either don’t have the specified attribute or do have the specified attribute but not with a certain value |
Array<Element(s)> |
| [attribute*='value'] | $(‘div[id*="page"]‘); | Matches elements that have the specified attribute and it contains a certain value. |
Array<Element(s)> |
| [attribute^='value'] | $(“input[name^='username']“) | Matches only when the element has an attribute and started with a certain value |
Array<Element(s)> |
| [attribute$='value'] | $(‘input[name$="password"]‘); | Array<Element>(note it) | |
Form Filters |
|||
|---|---|---|---|
| Selector | Example | Description | Return |
| :enabled | $(‘input:enabled’); | Collects all enabled fields from a form. In this example all enabled input fields |
Array<Element(s)> |
| :disabled | $(‘input:disabled’); | Collects all disabled form elements | Array<Element>(note it) |
| :selected | $(’select option:selected’); | Collects all selected options from a form’s select boxes | Array<Element(s)> |
| :checked | $(‘input:checked’); | This will collect all checked form inputs | Array<Element(s)> |
Child Filters |
|||
|---|---|---|---|
| Selector | Example | Description | Return |
| :nth-child(index/even/odd/equation) | $(‘table tr:nth-child(“even”)’); or $(‘table tr:nth-child(1)’); | Selects all nth-child with given index. index could be numeric or string. |
Array<Element(s)> |
| :first-child | $(‘div span:first-chilld’); | Match the first child element of a given parent | Array<Element>(note it) |
Form |
|||
|---|---|---|---|
| Selector | Example | Description | Return |
| :input | $(‘:input’); | Matches all input, textarea, select and button elements. | Array<Element(s)> |
| :text, :password, :checkbox etc | $(‘input:text’);$(‘input:password’);$(‘input:hidden’); | We can select an element from a form by using the input’s type attributes |
Array<Element(s)> |
7 Responses 
Leave a Reply 
Linux Geek, Code Junkie, Technology Enthusiast, Early Adopter, Idea Evangelist, Tech Support Blogger, Bootstrapper, Technology Consultant, Caffeine lover, Tyrant, Thicker Quicker Picker Upper and a Serial CODER.
I am Nurul Ferdous, serving at Right Brain Solution Limited as Software Engineer. I am a FOSS advocate and love RnD. I said hello to this universe on a shiny day on May 07, 1979.
I have a positive, “can-do” attitude. I relish tackling new classes of problems with ingenuity and dogged tenacity! When working I enjoy my job and love to make and have a friendly and energetic work environment
I believe in documentation and unit-testing and really, really try to do it. I keep abreast of new technologies, subscribe to (and generally read) innumerable academic journals, industry magazines and all the trade rags.
I love to travel and spend time with my family whenever possible. In my off time, I read books, try to write something and try to sing (though it has been often regarded as a curse to my audience).
Please stay in touch with what dynamciguy.com also feel free to connect with me on Twitter, Facebook and LinkedIn if you’re active on those networks.
I hope you enjoy dynamciguy.com
|
FOSS advocate, Web Evangelist, Caffeine lover & a dynamic guy. meh. |
I am a Zend Certified Engineer
I am Nurul Ferdous a professional software Engineer working at Right Brain Solution Ltd. I live in Dhaka, Bangladesh. I have coded websites with great respect to standards, because it makes life easier for everybody. Nothing brings me more pleasure than making something out of nothing. Even when the results are far from my ideal expectations, I find the whole ceremony of creativity completely enthralling.
Great…Adding in my bookmark list.
it’s great,
keep it up
Great dada
Keep on jumping.
This is great !!
Thanks!!
Daniel C.
Hi, i found you through twitter. i am from dhaka…
about this post: these things are just too hard for me to understand…
Of course it will rule.
jQuery rules man!