jQuery: Selectors, event handling and DOM manipulation
With jQuery one can select (query) HTML elements and perform "actions" on them.
jQuery Syntax:
The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s).
Basic syntax is: $(selector).action()
• A $ sign to define/access jQuery
• A (selector) to "query (or find)" HTML elements
• A jQuery action() to be performed on the element(s)
Examples:
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".
jQuery selectors are one of the most important parts of the jQuery library.
jQuery Selectors
jQuery selectors allow you to select and manipulate HTML element(s). jQuery selectors are used to "find" (or
select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more.
It's based on the existing CSS Selectors, and in addition, it has some own custom selectors.
All selectors in jQuery start with the dollar sign and parentheses: $().
The element Selector
The jQuery element selector selects elements based on the element name. One can select all <p> elements on
a page like this:
$("p")
Example 21: When a user clicks on a button, all <p> elements will be hidden:
<html>
<head>
<script src="[Link]
</script>
<script>
$(document).ready(function()
{
$("button").click(function()
{
$("p").hide();
});
});
</script>
</head>
<body>
<p>Welcome to Web technology</p>
<button>hide para</button>
</body>
</html>
Example 2 using DOM object: Change font style and text color using css property.
<html>
<head>
<title>DOM Style Change</title>
</head>
<body>
<p id="para1">Welcome to Web Technology.</p>
<button onclick="changeStyle()">Change Style</button>
<script>
function changeStyle()
{
var pelement = [Link]("para1");
[Link] = "red";
[Link] = "24px";
}
</script>
</body>
</html>
Above example to change font style and text color using css property and jQuery.
<html>
<head>
<script src="[Link]
</script>
<script>
$(document).ready(function()
{
$("button").click(function()
{
$("p").css("font-size","24px");
$("p").css("color","red");
});
});
</script>
</head>
<body>
<p>Welcome to Web technology</p>
<p>Welcome</p>
<button>hide para</button>
</body>
</html>
Output:
The #id Selector
The jQuery #id selector uses the id attribute of an HTML tag to find the specific element. An id should be
unique within a page, so you should use the #id selector when you want to find a single, unique element.
To find an element with a specific id, write a hash character, followed by the id of the HTML element:
$("#test")
Example
When a user clicks on a button, the element with id="test" will be hidden:
<html>
<head>
<script src="[Link]
</script>
<script>
$(document).ready(function()
{
$("button").click(function()
{
$("#p1").css("font-size","24px");
$("#p1").css("color","red");
});
});
</script>
</head>
<body>
<p id="p1">Welcome to Web technology</p>
<p>Welcome</p>
<button>hide para</button>
</body>
</html>
Output:
The .class Selector
The jQuery .class selector finds elements with a specific class. To find elements with a specific class, write a
period character, followed by the name of the class:
$(".test")
Example
When a user clicks on a button, the elements with class="test" will be hidden:
<html>
<head>
<script src="[Link]
</script>
<script>
$(document).ready(function()
{
$("button").click(function()
{
$(".p").css("font-size","24px");
$(".p").css("color","red");
});
});
</script>
</head>
<body>
<p class="p">Welcome to Web technology</p>
<p>Welcome</p>
<button>hide para</button>
</body>
</html>
Output:
$(“*”) - Selects all elements
Example:
<html>
<head>
<script src="[Link]
</script>
<script>
$(document).ready(function()
{
$("button").click(function()
{
$("*").css("font-size","24px");
$("*").css("color","red");
});
});
</script>
</head>
<body>
<p>Welcome to Web technology</p>
<p>Welcome</p>
<h1>Welcome to Engineering</h1>
<button>hide para</button>
</body>
</html>
Output:
$(this) – Selects the current HTML element
Example:
<html>
<head>
<script src="[Link]
</script>
<script>
$(document).ready(function()
{
$("button").click(function()
{
$(this).hide();
});
});
</script>
</head>
<body>
<p>Welcome to Web technology</p>
<p>Welcome</p>
<h1>Welcome to Engineering</h1>
<button>hide para</button>
</body>
</html>
Output:
After clicking on button, button will be hidden.