What is the Selector in Jquery ? (Part 3)


Jquery Selectors are one of the important part of Jquery library. It is process of finding out the element in Document Object Model(DOM).

We can also say selector is used to select one or more element in DOM
All the selector in Jquery start with $() sign.

There are the following selector in Jquery

1. #Id selector
2. class Selector
3. Universal Selector
4. Multiple element selector
5 Name Selector.

Now we will see the examples of all selector
1. #Id Selector:

It uses the Id attribute of an html and find out the specific id in HTML DOM element. It is the fastest and best ways to find out the specific Id in DOM element.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <script src="../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("button").click(function () {
                $("#Line1").hide();
            });
        });
    </script>
</head>
<body>
    <p id="Line1">This is the first line</p>
    <p>This is the Second line</p>
    <button>Click Here</button>
</body>
</html>

Note: In the above example, we have used Id i.e “Line1” of Paragraph. which is used for hiding the specific paragraph .

2. Class Selector:

It is used to select the html element on basis of css class name.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <script src="../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("button").click(function () {
                $(".colorcss").hide();
            });
        });
    </script>
    <style>
        .colorcss {
            background-color:silver;
            font-size:20px;
        }
    </style>
</head>
<body>
    <p class="colorcss">This is the first line</p>
    <p class="colorcss">This is the Second line</p>
    <button>Click Here</button>
</body>
</html>

Note: In the above example we are hiding the both paragraph on basis of css class name.

3. Universal Selector:

It will select all the element of Dom Element.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <script src="../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("button").click(function () {
                $("*").hide();
            });
        });
    </script>
    <style>
        .colorcss {
            background-color:silver;
        }
    </style>
</head>
<body>
    <p class="colorcss">This is the first line</p>
    <p class="colorcss">This is the Second line</p>
    <label>EmpName:</label>
    <input type="text" name="txtEmpName" value=" " />
    <br /><br />
    <button>Click Here</button>
</body>
</html>

Note: In above example it will hide all the element of Html element.

4. Multiple Element Selector

It is used to select the element on basis of multiple element in DOM element.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <script src="../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("button").click(function () {
                $(".colorcss,#p2,#p3").hide();
            });
        });
    </script>
    <style>
        .colorcss {
            background-color:silver;
        }
    </style>
</head>
<body>
    <p class="colorcss">This is the first line</p>
    <p Id="p2">This is the Second line</p>
    <p Id="p3">This is the third line</p>
    <button>Click Here</button>
</body>
</html>

It will hide the element on basis of css class,Id Name in above example.

5. Name Selector:

Name selector is used to select the html Dom element on basic of html tag name.

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
     <script src="../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("button").click(function () {
                $("p,div").hide();
            });
        });
    </script>
</head>
<body>
    <p>This is the first line</p>
    <p>This is the Second line</p>
    <div id="Div1">
        <p>I am in Div1 </p>
    </div>
    <div id="Div2">
        <p>I am in Div2 </p>
    </div>
    <button>Click Here</button>
</body>
</html>

In the above example, if we have to hide all paragraph and div element then we can use name selector.

Summary

In the above examples, we have learnt the basic concept of selector in Jquery.

Advertisements
Posted in Jquery. 1 Comment »

One Response to “What is the Selector in Jquery ? (Part 3)”

  1. Learn Jquery with in 15 hrs | Chandradev's Blog Says:

    […] 3. What is the Selector in Jquery ? (Part 3) […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: