Getting Started with Jquery Selectors

Jquery Selectors

• Jquery Selectors are used to picking a selected element for a jquery manipulation.
• Jquery Selectors are plays an important role to find one or more elements based on the element’s attributes and their basic features.
• Selectors get and set an element and its value with the help of DOM Tree.
• Selectors are manipulating a jquery with the help of dollar symbol -$().
• The selectors are enfolded into () these braces and enclosed a selector by quotes like $(“selector”). These quotes are the user’s possibilities that maybe single quote $(‘selector’).
• These two methods derive the same results only.
• Jquery selectors are divided based on their manipulations process.

Basic Selectors

• Basic Selectors are select an element based on their essential features only.

Selectors	Description	Example
Element	A selection is Based on an Element Name.	$(“p”).text();
Element1,,ElementN	It select several HTML Elements based on an element Name.	$(“p”,”h1”,”div”).text();
Id	A selection is based on Unique id Attribute.	$(“#p1”).text();
Class	In this selector manipulate a jquery based on an element's class name.	$(“.p1”).text();
*	This selector called as universal selector that select an entire element.	$(*).text();

Attribute Selectors

• Attribute Selectors are picked an element based on an element's attributes and it's value.
• An attributes names are enclosed into a single bracket like-[].

Selectors	Description	Example
[name]	This selector elect the selected attribute value.	$('h1').attr('title');
[name=value]	Select a matched attribute's element.	$('h1[title|= head]').text()
[name='value1']	Select which element have these two attribute value.	$('h1[title=head][name=have]').text();
[name|='value']	select an element which start with | pipe symbol or the mentioned value.	$('h1[title|= head]').text();
[name^='value']	Select the attribute which start with selected value.	$('h1[title^=head]').text();
[name$='value']	Selection is based on the ending value.	$('h1[title$=ing]').text();
[name~='value']	This selection is based on sibiling values.	$('h1[title~=head]').text()
[name!='value']	It not select a matched element.	$('h1[title!=head]').text()
[name*='value']	It select an entire selected element.	$('h1[title*=head]').text()

Hierarchy based selectors

• In this selection is based on ancestors and descendants of an element.
• This selector helps to find out an element that based on their relationships like child, parent, and ancestors.

The following table describes this selection process.

Selector	Description	Example
parent>child	It select a direct child element of selected parent.	$('div>h1').text();
ancestor descendant	Selection is based on an element's entire relationship.	$('div>p>span>b').text();
element + next	It select the next element of a selected element.	$('h1+p').text()
element ~ next	It select a sibling elements.	$('label~input').css({ "border-color": "red" });

Thanks for reading Jquery is one the most popular libary written is javascript. If you are looking for some good jquery interview questions check the next article.