jQuery Selectors
When you use the JavaScript then read and modify the content of the page is the very common task. While doing this you want to find the elements that you wish to change and for this work selector is used in jQuery. When you use the normal JavaScript, finding elements become extremely complicated, unless you need to find a single element which has a value specified in the ID attribute. Using the jQuery selector you can find the elements based on their attribute, types, name, id, classes, values of attributes and much more. jQuery selectors is most important part of the jQuery library. jQuery selectors provide the facility to select and manipulate HTML element (s). In jQuery all the selectors start with the dollar sign and parentheses: $() A jQuery statement typically follows the syntax pattern: $(selector).methodName ();
Using elements, ID's, classes and attribute
Here are some common ways of selecting the elements on a page.The #id selector
The #id selector of jQuery is used to find the specific element through the id attribute of an HTML tag. When you want a single element with the unique ID on the page, you can use the ID selector. Syntax:$("#test")
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>This is the first heading</h2>
<p id="test">This is the id selector.</p>
<p>This is the first paragraph.</p>
<button>Click here</button>
</body>
</html>
Try Now
The .class selector
The class selector is used to find the elements with a specific class.$(".test")
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>
<body>
<h2>This is the heading</h2>
<p class="test">This is the class selector.</p>
<p class="test">This is the second paragraph.</p>
<p> This is the paragraph.</p>
<button>Click Here</button>
</body>
</html>
Try Now
The element selector
The element selector is used to select the elements based on the element name.$("a")
$("div")
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").css("background", "orange");
});
</script>
</head>
<body>
<h1>This is the first heading</h1>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<div>This is another block of text.</div>
</body>
</html>
The attribute selector
Attribute selector is used to select an element by one of its HTML attributes like an input's type attribute.Example:
<!DOCTYPE html>
<html>
<head>
<title>jQuery Select Element by Attribute</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", ?orange");
});
</script>
</head>
<body>
<form>
<label>Name: <input type="text"></label>
<label>Password: <input type="password"></label>
<input type="submit" value="Sign In">
</form>
</body>
</html>