What is Selectors?
A jQuery Selector is a jquery function which uses expressions to find the given/matching elements inside the DOM object. We have already had details about selectors here. So i am going to starting how to use selectors.
Here we are going to explain much more detail with examples.
How to use Selectors?
The selectors, its the heat of jquery function to perform operation on the DOM object like event handling, Applying animation , etc.,. They fetch exact element that we mention from the HTML document. Here, let we discuss the types of selectors with examples
It selects the element based on the given ID. The ID selector started with “#” symbol. From above example, it selects the element which has the ID attribute “divCol”. Note : ID can’t be duplicated in a HTML document,so it will select the single Element inside the HTML Element. It select all the element which matches with the given selector. From above example, $(‘div As a name implies, it will select the element based on the css class name.The class selector started with ‘.’ symbol. It used to select more that one element. From above example,$( “div,span,p.myClass”) it will select the all the div,span and .myclass attribute in the P tag. As name implies, it will select whole element in the document.
Type of selector
Example
ID Selector
Selects HTML (DOM object )elements which are match with the given selector
$(‘#divCol’)
Name Selector
It select all the element which has the name of divCol inside the div.
$(‘div[name=divCol]’)
Class Selector (.Class)
Selects all elements which match with the given Class.
$(‘.divCol’)
Multiple Elements
Selects the all given type of element in the HTML document.
$( “div,span,p.myClass”)
Universal (*)
Selects all elements available in a DOM.
$(‘*’)
ID Selector :
Name Selector
Class Selector (.Class)
From above example,$(‘.divCol’) it will select all the elements which matche the class in the HTML document.Multiple Elements
Universal (*)