jQuery selectors

I will definitely forget the syntax of jQuery selectors if I do not write jQuery code for some days. So it is better to list them here as a memo.

Select element based on tag:

$(“div”);

This is the simplest form of jQuery selector. No special character such as dot and hash needs to be in front of the string of the selector. But the string is limited to a tag name. If there is no tag with that name in current page, the selector selects 0 element.

select based on id:

$(“#id”);

Putting a hash before an id can select the element with that id.

select based on class:

$(“.classname”);

This will select all elements with classname class.

select based on attribute:

$(“[attribute]”;

will select all elements with “attribute” attribute regardless of the attribute value. As long as an element has that attribute, it will be selected, even no value is assigned to the attribute.

select based on specific attribute value:

$(“[attribute=value]”)

will select elements which have that attribute and the attribute value is “value”.

fuzzy match:

$(“[attribute*=substr]”)

will select elements which have that attribute and the attribute value contains a sub-string “substr”.

Note the difference between $(“div.c1”) and $(“div[class=\”c1\”]”). The former selects all Divs that have c1 in their class while the later selects only divs that have c1 class. So, <div class=”c1 c2″> will be selected by $(“div.c1”) but not selected by $(“div[class=\”c1\”]”). To select this div, you need $(“div[class=\”c1 c2\”]”). In $(“div.c1”), the class name is case insensitive, so both $(“div.c1”) and $(“div.C1”) can select the div. But in $(“div[class=\”c1 c2\”]”), the class name is case sensitive so $(“div[class=\”C1 c2\”]”) won’t select the element. In other words, selecting by attribute requires the value of the attribute is exactly the same as that in the node. So $(“div[class=\”c2 c1\”]”) won’t select the element, either. But the quotes around the attribute value, whether they are single quotes or double quotes, do not matter. You can even omit the quotes around the attribute value, i.e., $(“div[class=c1 c2]”), $(“div[class=\”c1 c2\”]”), $(“div[class=’c1 c2′]”) have the same effect.

Combine multiple selectors:

$(“p[attribute=value]”)

This combines the tag selector and the attribute selector, which selects only <p> elements AND the elements must have attribute with the attribute value being “value”.

$(“p.classname”)

This combines the tag selector and the class selector, which selects the <p> elements that have the classname class.

$(“.classname[attribute=value]”)

This combines the class selector and the attribute selector. Only the elements with both the classname class and the “value” attribute are selected. This is equivalent to:

$(“[attribute=value].classname”)

Select based on multiple classes:

$(“.cs1, .cs2”)

will select all elements with either cs1 or cs2(or both). Note that

$(“.cs1.cs2”)

only selects the elements with both cs1 and cs2. Note also that

$(“.cs1 .cs2”)

only selects .cs2 elements within the children of .cs1 elements. Now you should know the comma, space in the selector expression really matter: comma means grouping, space means descendant. The absence of character between selectors means AND. But you can not write tag immediately after class because if so, the class and the tag can not be separated:

$(“.cs1p”)

instead, you should write class after tag like

$(“p.cs1”)

The descendant selector can be replaced by the find method, i.e., the following two have the same effect:

$(“.cs1 .cs2”)

$(“.cs1”).find(“.cs2”)

Both select the child elements of .cs1 which have the class .cs2.

In the above examples, there are only two selectors at most in the selector expression. But there can be more than two selectors in the selector expression and the principles we talked apply as well.

Select elements which contain specified text:

$(“p:contains(text)”)

will select all <p> which have “text” contained in their text(as a sub-string). The quotes(single quotes or double quotes) around the text do not matter, i.e., the following three get the same result:

$(“p:contains(‘text’)”)

$(“p:contains(\”text\”)”)

$(“p:contains(text)”)

To do some experiments on jQuery selectors, you can use the following code:

$(“#id”).css(“color”,”red”);

This will change the selected element to red color so you can be sure the element is indeed selected by your selector. For example,

$(“#id”).prev(“.c1”).css(“color”,”red”);

will select the immediately preceding sibling element to “#id” element if it has c1 class.

 difference between find and children

$().find finds all descendants including children and grand-children,…, etc. while $().children only finds the direct children. In other words, jQuery.find traverses downs multiple levels but jQuery.children only traverse down a single level in the DOM tree.

difference between descendant selector and find.

$(“.cs1 .cs2”) is equivalent to $(“.cs1”).find(“.cs2”). $(“.cs1 > .cs2” is equivalent to $(“.cs1”).children(“.cs2”). The find and children function are useful in the cases that the parent element has been obtained with other ways.

The selectors in $.next() and $.prev()

jQuery.next() and jQuery.prev() functions does not need a selector. They just select the immediately next sibling or the immediately previous sibling. But you can provide a selector to them, in which case the next(previous) sibling is selected only if it satifies the selector. If the immediately next sibling or the immediately previous sibling does not meet the condition of the selector, the result is an empty collection. They do not consider other siblings even they satisfy the selector.

Difference between $().closest(), $().parent() and $().parents()

All the three functions traverse upwards in the DOM tree. $.closest includes the $ element itself while $.parent and $.parents do not consider $ itself. The difference between $.parent and $.parents is that $.parent only travels a single level up the DOM tree while $.parents travels multiple levels up to the document root. It is like the difference between $.children and $.find.

If you like my content, please consider buying me a coffee. Buy me a coffeeBuy me a coffee Thank you for your support!

Comments are closed, but trackbacks and pingbacks are open.