jQuery Selectors

jQuery Selectors are used to find elements in web document. JQuery selectors make easy to find elements or controls. after find elements we can have entire control on it. it can be single element or an array of elements. jQuery provides a lot of techniques to find element by using selectors.
we can select elements by tag, id, class, attributes and many more.

How to use jQuery Selectors ?

First of all you, needs to open any web browser i.e. Chrome, firefox or Internet Explorer.
Press F12 to open firebug or developer panel. locate console and click on console tag. Now open any web site. (having jQuery link), you can check jQuery link from Elements tab under development panel. Find header under html tag and you will find javascript link for jQuery files like.

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>

Moreover, you can test by type $ sign in console panel, an popup dropdown appears automatically, if jQuery reference is added with in selected website.

Press ctrl+l to clear console.
Type any jQuery code
Press Enter to execute jquery.
Press shift+Enter to go into new line without jQuery execution.

1). All (Universal) Selector
Select all elements:

// Returns array of all elements
$('*')


Get total selected elements.

// Returns number of selected elements
$('*').length


Get first element from selected element array.

// Returns First Element of selected collection.
$('*')[0]


2). Element Selector
you can select element by tag name.

Syntax: $('tagname')

Example: $('input')

it will select all input elements <input />.
you can get first element by

$('input')[0]


3). Class Selector
you can select element by css class name with period (.) sign prefix.

Syntax: $('.ClassName')

Example: $('.row')

it will select all elements having attribute class="row".

4). ID Selector
you can select element by its id with hash (#) sign prefix.

Syntax: $('#id')

Example: $('#StudentId')

Since every element have unique id in html document, it will return only element having id = "StudentId"

5). Multiple Selector
you can also select multiple controls by using multiple selector.

$('selector1, selector2, selectorN')


If you have any query or question or topic on which, we might have to write an article for your interest or any kind of suggestion regarding this post, Just feel free to write us, by hit add comment button below or contact via Contact Us form.


Your feedback and suggestions will be highly appreciated. Also try to leave comments from your valid verified email account, so that we can respond you quickly.

 
 

{{c.Content}}

Comment By: {{c.Author}}  On:   {{c.CreatedDate|date:'dd/MM/yyyy'}} / Reply


Categories