Net-informations.com
SiteMap  | About    

jQuery Selectors



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.

How to use jQuery Selectors and CSS Selectors

jQuery selectors start with the dollar sign and parentheses - $() . A jQuery statement typically follows the syntax pattern:

example

To find elements with a specific class, write a period character , followed by the name of the class:

jQuery Basic Selectors

Complete List of jQuery Selectors

All Selector ("*")

To select all elements of the page, we can use all selectors, for that we need to use * (asterisk symbol).

example

Element Selector

To select all elements of specific type , we can use element selector. We need to use the html tag name.

run this source code Try it Yourself


This is a Paragraph

The above code shows how to change the content of a paragraph with new content.

Full Source

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 .

run this source code Try it Yourself


I am Here...

Full Source

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.

run this source code Try it Yourself


I am Here...

Full Source

Multiple Selectors

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.

run this source code Try it Yourself

Paragraph with Class selector

Paragraph with ID selector

Full Source

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.

Syntax

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.

run this source code Try it Yourself
None


Full Source









net-informations.com (C) 2018    Founded by raps mk
All Rights Reserved. All other trademarks are property of their respective owners.