Home > DeveloperSection > Articles > JQuery Element Selector

JQuery Element Selector


JQuery JQuery 
Ratings:
0 Comment(s)
 4781  View(s)
Rate this:

JQuery Element Selector

JQuery selector is used to select HTML element by element name or attribute.  JQuery selectors and attribute selectors are some of the best features. They allow you to quickly select all elements or groups of element of a given tag name, attribute name or their contents. In this example I am trying to change backcolor and forecolor of text that defined in <p>element on mouse over.

JQuery Element selector:

$("button") all elements of <button>.

$("button.theme")  all elements where class is="theme" <button>.

$("button#button1") selects the button of the with id=”button1”.

Code:

<head>

 

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">     </script>

 

    <script type="text/javascript">

        alert('Jquery');

        $(document).ready(function         {

            $("p#p1").mouseover(function()//this function will execute when mouse pointer will reach on <p>element where id is p1

            {

                $("p#p1").css("background-color", "blue");//.css  method will change background of <p>element where id is p1              

 $("p#p1").css("color", "white

            });

            $("p#p2").mouseover(function

             {

                 $("p#p2").css("background-color", "yellow $("p#p2").css("color", "black            });

        }

       );

    </script>

</head>

<body>

    <h2>

        Jquery Learning.</h2>

    <p id="p1">

        First time using jquey.</p>     <p id="p2">

        It is very intresting.</p>

</body>

When mouse pointer will over on text then text color will change as shown below:

Screenshot

JQuery Element Selector


Don't want to miss updates? Please click the below button!

Follow MindStick