Using jQuery Selectors you can select and manipulate any HTML element of DOM (Document Object Model). When a web page is loaded, the browser creates a Document Object Model (DOM) of the page, A DOM is nothing but a hierarchy of html elements. Before we see how to use jQuery Selectors to select and manipulate DOM elements, lets take an example to understand how a webpage is translated into a DOM.
Webpage vs DOM
Here we have taken an example of a webpage, we have translated this webpage into a Document object model so that you can understand the elements of an html page.
Webpage:
<!DOCTYPE html> <html> <head> <title>Welcome to BeginnersBook</title> </head> <body> <h2>This is just an example</h2> <p>This is just a paragraph.</p> </body> </html>
DOM of the above webpage:
What can we do using jQuery Selectors
You can select html elements based on their name, class, id, attribute, value etc. and then you can apply behaviour to them.
For example lets say you have an html page with a paragraph and a button, you can apply behaviour to the button using jQuery selector to hide the paragraph when the button is clicked, or you can change the background colour of the paragraph when the button is clicked, you can do whatever you want, basically jQuery selectors give you full control over the html elements.
Types of jQuery Selectors
There are number of jQuery Selectors which you can use to manipulate the html elements. Lets take few examples to understand the various types of selectors.
jQuery selector starts with $ sign followed by parenthesis. For example $(p) selects all the paragraphs of the html page.
jQuery Element Name Selector
jQuery element name selector syntax is $(element_name). It selects the html element based on the element name. We provide the element name inside parenthesis to select it.
In the following example we have an html page that contains few elements such as head, body, h2, p, button etc. In the script section of the web page we have added the jQuery function that selects the h2 element and hide it when the button is clicked.
We have used the selector on h2 element and we are calling hide function like this: $(“h2”).hide(); this will select all the h2 element of the html page and hide them when the button is clicked.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h2").hide();
});
});
</script>
</head>
<body>
<h2>jQuery Selectors Example on BeginnersBook.com</h2>
<p>This is a paragraph. It contains some text.</p>
<button>Click Me!</button>
</body>
</html>
Output:
Before button is clicked:
This is when the above html page is loaded in the browser, we have not yet clicked the button.
After button is clicked:
Once the button is clicked it selected all the h2 element of the html page and hidden them.
jQuery Element #id Selector
In the above example we have seen how to select an html element based on the name, however the downside of using name selector is that it selects all the elements of the html page, for example $(p) selects all the paragraphs of the html page.
What if we want to select only a particular paragraph and not all the paragraphs of an html page, we can do this by assigning an id to that particular paragraph and then select the para based on the id.
The syntax of element #id selector is:
$("#my_id")
This will select the element that has the id my_id.
Lets take an example.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#myid").hide();
});
});
</script>
</head>
<body>
<h2 id="myid">jQuery element id selector example</h2>
<p>This example is published on beginnersbook.com</p>
<p>This is another paragraph.</p>
<button>Click Me!</button>
</body>
</html>
Output:
Before button is clicked:
After button is clicked:
jQuery Element .class Selector
In the above example, we have seen the element id selector. The limitation of id selector is that an id is unique and two html elements cannot have the same id.
What if we want to hide a particular h2 element and a particular para element on a button click event. We can achieve this with the help of element class selectors, we can assign the same class to that h2 element and p element and call the hide function on the element class selector. The syntax of element class selector is:
$(".myclass")
This will select all html elements that has the class myclass.
Lets take an example:
In the following example we have assigned a class myclass to three html elements, h2, p and button element. We have called the hide function on the element class selector where we passed the class name as myclass. This should hide all these three elements on the button click event.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".myclass").hide();
});
});
</script>
</head>
<body>
<h2 class="myclass">jQuery element class selector example</h2>
<p>This example is published on beginnersbook.com</p>
<p class="myclass">This is another paragraph.</p>
<button class="myclass">Click Me!</button>
</body>
</html>
Output:
Before button is clicked:
After button is clicked:
More jQuery Selectors Tutorial
| Link | Example | Description |
|---|---|---|
| * Selector | $(“*”) | Selects all the elements of an html page. |
| #id Selector | $(“#myid”) | Selects the element with id value equals to “myid”. |
| .class Selector | $(“.myclass”) | Selects all the elements with class “myclass”. |
| Multiple class Selector | $(“.myclass1,.myclass2”) | Selects all the elements with class “myclass1” or “myclass2”. |
| Element Selector | $(“p”) | Selects all the paragraphs |
| Multiple elements Selector | $(“h2,p,a”) | Selects all the h2, p and a elements of an html page |
Leave a Reply