The jQuery selector enables you to find DOM elements in your web page. Most of the times you will start with selector function $() in the jQuery. jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. These selectors use familiar CSS syntax to allow page authors to quickly and easily identify any set of page elements to operate upon with the jQuery library methods.
jQuery selectors start with the dollar sign and parentheses - $() . A jQuery statement typically follows the syntax pattern:
To find elements with a specific class, write a period character , followed by the name of the class:
jQuery Basic Selectors
All Selector ("*")
To select all elements of the page, we can use all selectors, for that we need to use * (asterisk symbol).
To select all elements of specific type , we can use element selector. We need to use the html tag name.
This is a Paragraph
The above code shows how to change the content of a paragraph with new content.
Selecting Elements by ID
Each element have an unique ID in the web page. Hash (#) operator is used to select the elements based on Id attribute . You can get a particular element by using id selector pattern.
The above code shows how to append string to the existing in the paragraph element using jQuery ID selector .
I am Here...
Selecting Elements by Class
The jQuery class selector finds elements with a specific class. To find elements with a specific class, write a period character , followed by the name of the class.
The above code shows how to append string to the existing in the paragraph element using jQuery Class selector.
I am Here...
You can specify any number of selectors to combine into a single result. Here order of the DOM elements in the jQuery object aren't necessarily identical.
Paragraph with Class selector
Paragraph with ID selector
Select Elements by Attribute
jQuery also allows you to find an element based on attributes set on it. The attr( properties) method set a key/value object as properties to all matched elements.
jQuery gives us the means to manipulate the properties of the HTML elements . We can modify the attributes later on after getting access to those properties.
The above code use jQuery to change the image source, the alt attribute, the title attribute and add additional border attributes to image.