Jquery selectors are used to manipulate DOM (Document object model), attach events, add element, remove element on runtime.
|element selector||element selector are used to select particular element
To access this "p" tag, we need to add this element and wrap it inside jquery syntax like : $("p").
"$" represents the jquery, its just aliasing of jquery and if we want we can use jquery instead of "$" like jQuery().
If we are working with other library or framework (angular) that has same aliasing as jquery ($), we can alter this conflict by using $.noConflict() method of jquery.
|ID selector||we can write Id selector as $("#text of id attribute")
Here text of ID attribute is "selectMe", so to select this ID selector using jquery we have to write: $("#selectMe").
Multiple IDs can be selected using comma seperate Ex: $("#id1,#id2,#id3…")
|Class Selector||Class selectors is represented by dot/"." and written as $(".className")
To access class selector, we write $(".demoClass"), Multiple class can be selected as comman separated values. $(".class1,.class2,.class3")
|All element selector||To select Complete DOM element, we have to include character :
This is p Tag
This is div Tag
This is span Tag
$("*") // It will refer all the DOM element
Check jsfiddle for example: https://jsfiddle.net/rezjvrum/
List of various selectors:
- ":first" – Select first element.
- ":last" – Select last element.
- ":even" – Select all even element.
- ":odd" – Select all odd element.
- ":eq(index)" – Select the indexed element. Ex:
:eq(1)will select second child element. Here indexing is starts from "0".
- ":gt(index)" – Show all element whose index is greater than the index pass. Ex:
:gt(3)will return all the element having index greater than 3.
- ":lt(index)" – Show all element whose index is less than the index pass. Ex:
:lt(2)will return all element having index less than 2.
Above selectors are covered in : https://jsfiddle.net/rezjvrum/2/
if you want to reproduce, please indicate the source:
Getting started with jquery-selectors – Jquery Selectors - CodeDay