Getting started with jquery-selectors – Jquery Selectors

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:

List of various selectors:

  1. ":first" – Select first element.
  2. ":last" – Select last element.
  3. ":even" – Select all even element.
  4. ":odd" – Select all odd element.
  5. ":eq(index)" – Select the indexed element. Ex: :eq(1) will select second child element. Here indexing is starts from "0".
  6. ":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.
  7. ":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 :

if you want to reproduce, please indicate the source:
Getting started with jquery-selectors – Jquery Selectors - CodeDay