Using jQuery Selectors

The jQuery library let us easily access elements or groups of elements in the Document Object Model (DOM)

A jQuery Selector is a function which makes use of expressions to find out matching elements from a DOM based on the given criteria.

CSS selectors:

Selector Purpose
tagname Find all elements that are named tagname
#identifier Find elements with ID of identifier
.className Finds all elements that have class attribute with the value className
tag.className Gets elements of type tag that have attribute with value of className
tag#id.className Retrieves the tag element that has an ID of id and a class attribute with the value of className
* Find all of the elements on the page

Using jQuery vs. using the plan browser DOM

DOM jQuery
Get all tags
document.getElementsByTagName("p")
$("p")
Get tag with id list1
document.getElementById("list1")
$("#list1")
Get all li tag with class a
First get all li tags using
document.getElementById("li")
then loop through result set
and find li with class a
$("li .a")

The hierarchy and combination selectors allow us to get advanced in selecting page content.
We can select elements based on hierarchical relationships or on series of common criteria.

Selector Purpose
selector, selector Find all of specified selectors
.class1.class2 Find all elements with .class1 and .class2 applied
parent > child Final all child elements that are direct children of elements of type parent
ancestor descendant Find all descendant elements that are combined within elements of type ancestor
prev + next Find all next elements that are next to prev element
prev ~ siblings Find all sibling elements that come after prev and match siblings selector
This entry was posted in Business Booster e-Tricks. Bookmark the permalink.

Comments are closed.