Jquery selectors are used to manipulate DOM (Document object model), attach events, add element, remove element on runtime.
Selector | Description |
---|---|
element selector | element selector are used to select particular element Ex: <p>Stackoverflow to help in understanding errors </p> 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") <div id="selectMe">I am inner content of Div.</div> 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")<span class="demoClass"> Demo JQuery class Selectors </span> 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 : "*" . $("*") It is referencing complete DOM element including html, head... |
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:
:eq(1)
will select second child element. Here indexing is starts from "0".:gt(3)
will return all the element having index greater than 3.:lt(2)
will return all element having index less than 2.Above selectors are covered in : https://jsfiddle.net/rezjvrum/2/