JQuery selectors are used to select HTML elements / tags from HTML DOM (Document Object Model) with the elements / tags you want to work with. You can select one or more than one element using different selector at a time and add, update or remove any attribute, element, tag, style for all the selected elements at the same time with very minimum line of code.
There are different kinds of selector available in JQuery to select the tags are elements you want to select from DOM. But to use any JQuery function, the java script object or DOM object should be wrapped with JQuery wrapper. To do that, either you can use the text “JQuery” or the symbol “$”
Both the below line of codes are meaning same.
Same line the $ symbol, there are different symbols used for different selectors. This makes the developers to achieve big functionalities in very less number of codes and increase the productivity.
If you need to know more about "Why JQuery", please refer the following link.
Selector by Tag Name: (Tag name with single quotes)
To select one Tag:
$(‘a’) --> Selects all anchor tags from the document.
To select multiple tags: (Tags within single quotes separated by comma)
$(‘a,p’) --> Selects all anchor tags and all Paragraph tags from the document
To select all tags with another tag: (Parent Tag Name space Child Tag Name within single quotes)
$(‘div a’) --> Selects all anchor tags which are inside any div tag.
Selector by ID: (Symbol hash “#” with id value)
$(‘#myDivTag’) --> Selects div tag which is having ID as “myDivTag”
Selector by CSS Class Name: (Symbol Period “.” With class name)
$(‘div.highlight’) --> Selects all div tags which are have css class name “highlight”
Selector by Attributes Value: (tagname followed by attribute and/or attribute value with in Square brackets)
To select all matching tags with if matching attribute available
$(‘div[title]’) --> Selects all div tag where all divs has title
To select all matching tags with matching attribute with same matching value
$(‘div[title=”Title 1”]’) --> Selects all div tag where all divs has title with value “Title 1”
Selector by Inputs: (Symbol Colon “:”)
To select all form input elements. (Form inputs are not just the input tag but all element which will be post in the post method. Such as Textbox, Radio, Select, Button etc)
$(‘:input’) --> Selects all input tags from the dom. Do not confuse with $(‘input’) which will only select input tag, not radio button, select or button etc.