Admin
In this article, we are going to learn about the jQuery selector. jQuery selector is one of the most important parts of jQuery which are used to select HTML element.
Without a jQuery selector, we can not perform any action on HTML DOM ( Document Object Model ) element. In this guide, we will see all about the selector in jQuery. In the previous tutorial, we have seen all about jQuery syntax.
Headings of Contents
jQuery Selector
jQuery selector is used to select and manipulate HTML element(s). The selector in jQuery performs a major role. There are lots of selectors available in jQuery.
jQuery selectors are used to finding HTML elements based on their name, id, class name, types and attributes, and value of attributes and perform an action on them.
All the selectors in jQuery start with the Doller sign ( $ ).
The Element Selector
The jQuery selector selects HTML elements based on the element name. Let’s use the jQuery selector to select the <h1> heading and perform some action on that element.
To select the <h1> heading, we will use the following –
$("h1")In this example, we will select <h1> heading and display a small message in the alert() box on click on the heading.
$(document).ready(function () {
$('h1').click(function () {
alert('Welcome to Programming Funda Portal..')
})
});In the above example, we have select the <h1> heading and display the message “Welcome to Programming Funda Portal..” on click on the heading.
Note: When you use only element name to select, Then jQuery selector will select all the elements with the same name. For example, In the above example, we have to select the <h1> heading, Then the selector select will select all the <h1> heading.
Example:
You can use the below HTML code, which we have been seen above example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Tutorial</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<h1>Click Now</h1>
</body>
<script>
$(document).ready(function () {
$('h1').click(function () {
alert('Welcome to Programming Funda Portal..')
})
});
</script>
</html>
The jQuery id selector:
The jQuery #id select is used id attributes of HTML element to select any specific element. An id attribute should be unique on a single web page.
To find an HTML element of a specific id, you can use the following:
$("#idName")Note:- idName will replace with your element id name.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Tutorial</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<h1 id="myid">Click Now</h1>
</body>
<script>
$(document).ready(function () {
$('#myid').click(function () {
alert('Welcome to Programming Funda Portal..')
})
});
</script>
</html>
The jQuery class selector:
The jQuery class selector selects HTML elements with a specific class name.
To find HTML elements with the specific class name, you can use the following:
$(".className")Note:- className will replace with your elements class name.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Tutorial</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<h1 class="myclass">Button One</h1>
<h1 class="myclass">Button Two</h1>
</body>
<script>
$(document).ready(function () {
$('.myclass').click(function () {
alert('Welcome to Programming Funda Portal..')
})
});
</script>
</html>
Type of jQuery selector:
There are lots of selectors available in jQuery, which are used to select HTML elements.
| jQuery Selector | Description |
|---|---|
| $(“*”) | Select all the element |
| $(this) | Select current HTML element |
| $(“h1.myid”) | Select all <h1> heading of class name myid. |
| $(“h1:first”) | Select the first <h1> heading. |
| $(“ul li:first”) | Select first <li> element with first <ul>. |
| $(“[href]”) | Select all elements with attribute href. |
| $(“a[target=’_blank’]”) | Selects all <a> elements with a target attribute value equal to “_blank“. |
| $(“:button”) | select all the button element as well as an <input> element of the type button. |
| $(“tr:even”) | Select all even <tr> elements. |
| $(“tr:odd”) | Select all odd <tr> elements. |
jquery in Separate File:
You can use jQuery code inside a separate JavaScript file. To do this, You have to create a separate js file and link it to your main HTML page using script tag within <head> and </head> section.
Example:
We have two files index.html and testing.js and Now, we will connect the testing.js file with the index.html file using the script tag.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Tutorial</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="./testing.js"></script>
</head>
<body>
<h1 class="myclass">Button One</h1>
<h1 class="myclass">Button Two</h1>
</body>
</html>
testing.js
$(document).ready(function () {
$('.myclass').click(function () {
alert('Welcome to Programming Funda Portal..')
})
});Note: If you use a separate js file, Then you don’t need to use <script> and </script> tags. As you can see in the above testing.js file.
Conclusion:
In this selector in the jQuery article, you have learned all about the jQuery selector.jQuery selector is the most important part of jQuery because with the help of select we can select any particular HTML element and perform an action on them, That’s why jQuery select is important.
I hope this selector in the jQuery tutorial will help you to understand a selector. If you like this article, please comment and share it with your friends who want to learn jQuery.
For More Information:- Click Here
