Virtual Classes Logo          Virtual Classes
    Read Anytime,Anywhere

JQuery selectors

JQuery selectors allow you to select and manipulate HTML element(s). JQuery selectors are used to find or select HTML elements on the basis of their id, classes, types, attributes, values of attributes .

Commonly used JQuery Selectors are-
1-Id Selector-The jQuery #id selector uses the id attribute of an HTML element to find the specific element. Id of elemets is always unique in a page,so use #id selector when you want to find a single, unique element.
Syntex-$("#controlID")
To select an element by id,write a hash character and then write the id of the HTML element which you want to select.
Example-$("#txtFirst")
Above code will select element which has id="txtFirst"

2-Class Selector- The jQuery class selector finds elements which has specific class used in elements. use class selector when you want to select group of elements.
Syntex-$(".className")

To select an element by class selector, write a period character and then name of the class.
Example-$(".required")

Above code will select element those has required class.

3-Element Selector-
The jQuery element selector selects elements based on the element name. Use element selector when you want to select all element of specific type.
Syntex-$("ElementName")

To select an element by element selector,write a element name inside parentheses.
Example-$("p")

Above code will select all p element.

Below table show other JQuery Selector

Lst of selector in Jquery

Form Selector
There are a number of different INPUT types in HTML and jQuery makes it simple to select the different types of input elements, such as all the text fields, all the radio buttons, all the submit buttons and so on.
Examples:
1-To match all the text type fields in a document: $(':text')
2-To target a specific form/div use the following instead:$('#myform :text')
Using a form id as in this second example also speeds up the selector because it does not have to scan the entire DOM to find all text inputs in the document.
3-To iterate through all the text fields.
$('#myform :text').each(function() {
// write your logic here
});

4-Same way if you want to iterate through all the radio button-
$(':radio') each(function() {
// write your logic here
});


Summary of selectors
1- $(':input') matches all input and textarea fields.
2- $(':text') matches all text type fields.
3- $(':password') matches all password fields.
4- $(':radio') matches all radio buttons.
5- $(':checkbox')matches all checkboxes.
6- $(':submit')>matches all submit buttons.
7- $(':image') matches all image type inputs.
8-$(':reset') matches all reset buttons.
9- $(':button') matches all input buttons with the type button.
10- $(':file') matches all file upload fields.


Attribute Selector
The [attribute=value] selector selects each element with the specified attribute and value.
Syntax:$("[attribute=value]")
attribute:Required. Specifies the attribute to find
value:Required. Specifies the value to find
Ex-
$("[href=a]").css("background-color", "yellow");
Above code will chnage the tag which has href value 'a' to yellow.