JQuery Selectors – by id, name or tag

jqueryJQuery is a JavaScript library that makes most of the work, that we do daily for the client side manipulation, easy to perform. In this tutorial, we will see how to select DOM elements using JQuery with their ids or name or just by tag. To perform any task on an DOM element through JQuery like making its display as none, we must first select the element using JQuery selectors and after that we can just apply the task on that. Let us just do it with some example.

1. Selecting elements with ID

In our first example, we will see how to select an element with its own id. As we know, the id of an element will always be unique, that means we can easily select an element if we know that its ID is.


<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>JQuery Id Selector</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <style type="text/css">
       .red{
          color:red;
       }
       .green{
           color:green;
       }
    </style>
    </head>
    <body>
        <h1 id="first">First H1</h1>
        <br/>
        <h1 id="second">Second H1</h1>
        <br/>
        <h1 id="another">Another H1</h1>
        <br/>
        <button onclick="changeColor('red')">Make first H1 Red</button>
        <script>
            function changeColor(colorClass){
                //Selecting h1 elements with id first
                var h1 = $('#first');
                //Removing all current classes from element
                h1.removeClass();
                //Applying the requested class to element
                h1.addClass(colorClass);
            }
        </script>
    </body>
</html>

In the above example, there are three h1 elements in the page and there is a button to change the color of the first h1 to red by adding the css class red to it.

It has following code to perform that:

1.var h1 = $(‘#first’); :- In this line we have used JQuery id selector to select the first h1 and store it as a JavaScript variable h1. As you can see firstis the id of the h1 in first position. # is used to tell JQuery that search with the id.

2.h1.removeClass();:- removeClass() is a function defined in JQuery that can be applied to any JQuery element, like h1 here, to remove any particular class from that element or to remove all classes from that element. Here, it is used to remove all classes associated with the fisrt h1 element.

3.h1.addClass(colorClass); :- addClass() is a function defined in JQuery to add a new css class with an JQuery element. Here, we are adding class ‘red’with the first h1 to make its textcolor red.

Here is the output of the example :

2. Select element with class name
As in the previous example in which we select using id, we can also select elements with same class name. As we know, more than one html element can have same class name, so we can select more than one element with same class name and apply any operations together on those elements.

Related Posts:

  • No Related Posts

Comments are closed.