jQuery Selectors
The jQuery selector enables you to find DOM elements in your web page. Most of the times you will start with selector function $() in the jQuery. jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. These selectors use familiar CSS syntax to allow page authors to quickly and easily identify any set of page elements to operate upon with the jQuery library methods.
jQuery selectors start with the dollar sign and parentheses - $() . A jQuery statement typically follows the syntax pattern:
$(selector).methodName();
example
To find elements with a specific class, write a period character , followed by the name of the class:
$(".MyClass")
jQuery Basic Selectors
All Selector ("*")
To select all elements of the page, we can use all selectors, for that we need to use * (asterisk symbol). example
<script language="javascript" type="text/javascript">
$( "*" ).css( "border", "3px solid red" );
</script>
Element Selector
To select all elements of specific type , we can use element selector. We need to use the html tag name.
$("p").text('Paragraph Changed...');
<p>This is a Paragraph</p>
Browser ViewThis is a Paragraph
The above code shows how to change the content of a paragraph with new content.
Full Source
<html>
<head>
<title>Hello World</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").text('Paragraph Changed...');
});
});
</script>
</head>
<body>
<p>This is a Paragraph</p>
<button>Click me</button>
</body>
</html>
Selecting Elements by ID
Each element have an unique ID in the web page. Hash (#) operator is used to select the elements based on Id attribute . You can get a particular element by using id selector pattern.
$('#myID').append(' Added here');
<p id="myID">I am Here...</p>
The above code shows how to append string to the existing in the paragraph element using jQuery ID selector .
Browser ViewI am Here...
<html>
<head>
<title>Hello World</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$('#myID').append(' Added here');
});
});
</script>
</head>
<body>
<br>
<br>
<p id="myID">I am Here...</p>
<button>Click me</button>
</body>
</html>
Selecting Elements by Class
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.
$('.myClass').append(' Added here');
<p class="myClass">I am Here...</p>
The above code shows how to append string to the existing in the paragraph element using jQuery Class selector.
Browser ViewI am Here...
<html>
<head>
<title>Hello World</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$('.myClass').append(' Added here');
});
});
</script>
</head>
<body>
<p class="myClass">I am Here...</p>
<button>Click me</button>
</body>
</html>
Multiple Selectors
You can specify any number of selectors to combine into a single result. Here order of the DOM elements in the jQuery object aren't necessarily identical.
$(".myClass, #myID").css("background-color", "red");
<p class="myClass">Paragraph with Class selector</p>
<p id="myID">Paragraph with ID selector</p>
Browser ViewParagraph with Class selector
Paragraph with ID selector
<html>
<head>
<title>Hello World</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(".myClass, #myID").css("background-color", "red");
});
});
</script>
</head>
<body>
<p class="myClass">Paragraph with Class selector</p>
<p id="myID">Paragraph with ID selector</p>
<button>Click me</button>
</body>
</html>
Select Elements by Attribute
jQuery also allows you to find an element based on attributes set on it. The attr( properties) method set a key/value object as properties to all matched elements. Syntax
selector.attr({property1:value1, property2:value2})
jQuery gives us the means to manipulate the properties of the HTML elements . We can modify the attributes later on after getting access to those properties.
$("img").attr({
src: "change.png",
title: "Attribute",
alt: "Attribute Change",
border: "4px solid black"
});
<img src="logo.png" title="None" alt="None" />
The above code use jQuery to change the image source, the alt attribute, the title attribute and add additional border attributes to image.
Browser View
<html>
<head>
<title>Hello World</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("img").attr({
src: "change.png",
title: "Attribute",
alt: "Attribute Change",
border: "4px solid black"
});
});
});
</script>
</head>
<body>
<img src="logo.png" title="None" alt="None" />
<br>
<button>Click me</button>
</body>
</html>
Related Topics