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
Anonymous User
30-Apr-2019Thanks for sharing.