JQuery Selectors Example Tutorials

JQuery Selectors are very essential syntax that are used in the jQuery library. The JQuery Selectors are used to select the elements in the HTML document and perform actions on that elements.

JQuery Selectors :

By using the JQuery Selectors we can select one or more elements at a time on the HTML document.

It starts with a $ (dollar) and then selector placed in side a parenthesis (). The selectors also known as the factory function.

Selecting Elements with jQuery :

We can easily select and modify the DOM elements using JQuery selectors. JQuery given N number of selectors to access the DOM, here are the all possible selectors and explained.

Selecting Elements by ID :

Each element have an unique ID in the web page. The attribute ID is denoted by id=”mark”. Hash (#) operator is used to select the elements based on Id attribute. The below code is referred the id,

$("#mark").css("background", "yellow"); 
<div id="mark">JQuery Selector ID Example</div>

Selecting Elements by class name :

It is used to select the element with the reference of the class name. Dot (.) operator is used to select the elements based on class attribute. The attribute to refer the element is class=”mark”.

$(".mark").css("background", "yellow"); 
 <div class="mark">JQuery Selector ID Example</div>

Selecting Elements by element name

In jQuery we can select the element using the tag name itself. Here is the example:

$("p").text("Hello World!");
 <p>JQuery Selector ID Example</p>

Selecting Elements by attribute :

In jQuery we can select an element by using the attributes. Here, we can consider the attributes like name, id, class and etc. The basic syntax of Attribute Selector is (element[‘attribute=“name”]’).

We can select the elements, in multiple ways using attribute selector; here are the examples.

Attribute name is equals :

If you want to select an element which is having the attribute name equals with “sample“, then we can go with this selector.

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery Document Ready Demo</title>
        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
    <script>    
          $(document).ready(function () {
                $("input[name='impData']").val("This is an Important Data");
            })</script> 
    <body>     
        <input name="impData">     
        <input name="sampleData">     
        <input name="fulldata"> 
    </body>
</html>

The above program is used to set the text value to whose attribute name equals with impDta.

Attribute name Starts with :

If you want to select an element which is having the attribute name starts with “sample”, then we can go with this selector.

To use the starts with selector, JQuery given us an operator called ^ (exponent). we can use this in front of equals(^=) or not equals (^!=) operator. Here is an example:

[html]

<html>
<head>
<meta charset="utf-8">
<title>jQuery Selector Starts with Demo</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
   $(document).ready(function() {
       $("input[name^=’sample’]").val("This is Sample Data");
   })
</script>
<body>
   <input name="impData">
   <input name="sampleData">
   <input name="fulldata">

</body>
</html>

[/html]

The above program is used to set the text value to whose attribute name starts with sample.

Attribute name Ends with :

Like starts with, we can also select the attribute value ends with like below.

To use the ends with selector, JQuery given us an operator called $ (dollar). we can use this in front of equals($=) or not equals ($!=) operator. Here is an example:

[html]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Document Ready Demo</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
   $(document).ready(function() {
       $("input[name$=’Data’]").val("This is Sample Data");
   })
</script>
<body>
   <input name="imp">
   <input name="sampleData">
   <input name="fulldata">

</body>
</html>

[/html]

The above program is used to set the text value to whose attribute name ends with Data.

Selecting the current HTML element :

By using the this operator we can select the current html element.

$(this)

Selecting based on Even or Odd :

Generally these selectors are used to apply on tables in html. If we create a table in html, by default DOM will maintain the indexes for all rows in a table. Then If we want to select the table rows w.r.t their index positions, it is a better option to use this even or odd selector.

$("tr:even")
$("tr:odd")

$(“tr:even”) : It selects all even <tr> elements.

$(“tr:odd”) : It selects all odd <tr> elements.

Selector Methods in jQuery API :

JQuery provides us three predefined methods to select a particular element on the given set of elements.

Those are :

find() : This method is used to select the descendant elements in the given element set.
filter(): It is used to select all elements not only the descendant elements on the selection set.
has() : It is used to select the elements in the new set only if the elements are descendant from the selection set of elements.

These are the all possible and important list of JQuery selectors.

Happy Learning 🙂