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


  Modified On Nov-22-2017 12:07:16 PM

Leave Comment