- 4 years ago
- Zaid Bin Khalid
- 9179 Views
-
3
In this session, you will learn how to select HTML elements using jQuery with the help of an example.
Selecting Elements with jQuery
JQuery, the most commonly used JavaScript to get/modify content or value of the HTML elements on the page.
Moreover, you can perform or apply some effective actions you needed during work. For instance hide animations, show, etc.,.
Remember one thing select the target HTML element before performing any kind of action you need to find.
In JavaScript selecting the elements through a typical JavaScript is very difficult and painfu. However, here the jQuery works like a miracle. The DOM elements selection ability to make simple and easy is one of the most powerful features of the jQuery.
Common ways of selecting the Elements:
There are some common ways of selecting the elements mention below:
- Selecting elements by ID
- Choosing elements by Class Name
- Select elements by Name
- Select elements by Attribute
- Selecting elements by Compound CSS Selector
- jQuery Custom Selector
In the following sections, you will learn some of the common ways of selecting the elements on a page and do something with them with the help of using the jQuery and example.
Selecting Elements by ID
To select a single element with the unique ID on the page you can use the ID selector.
jQuery code will select and highlight an element having the ID attribute is known as id=”mark”, you can use it when the document is ready to be manipulated. As shown in the example.
<script>
$(document).ready(function(){
// Highlight element with id mark
$("#mark").css("background", "yellow");
});
</script>
Selecting Elements by Class Name
To select the elements with a specific class you can use the class selector.
jQuery code will select and highlight the elements having the class attribute is known as class=” mark”, you can use it when the document is ready. As shown in the example.
<script>
$(document).ready(function(){
// Highlight elements with class mark
$(".mark").css("background", "yellow");
});
</script>
Selecting Elements by Name
To select elements based on the element name you can use the element selector.
jQuery code will select and highlight all the paragraph elements of the document code is known as <p>, you can use it when the document is ready. As shown in the example.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "yellow");
});
</script>
Selecting Elements by Attribute
To select an element by one of its HTML attributes you can use the elements by attribute. like link’s target attribute or an input’s type attribute and many more.
jQuery code will select and highlight all the text inputs elements with the type=” text”, you can use it when the document is ready. As shown in the example.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "yellow");
});
</script>
Selecting Elements by Compound CSS Selector
You can also combine the CSS selectors to make your selection even more precise.
<script>
$(document).ready(function(){
// Highlight only paragraph elements with class mark
$("p.mark").css("background", "yellow");
// Highlight only span elements inside the element with ID mark
$("#mark span").css("background", "yellow");
// Highlight li elements inside the ul elements
$("ul li").css("background", "red");
// Highlight li elements only inside the ul element with id mark
$("ul#mark li").css("background", "yellow");
// Highlight li elements inside all the ul element with class mark
$("ul.mark li").css("background", "green");
// Highlight all anchor elements with target blank
$('a[target="_blank"]').css("background", "yellow");
});
</script>
jQuery Custom Selector
jQuery provides custom selector to further increase the capabilities of selecting elements on a page.
- 4 years ago
- Zaid Bin Khalid
- 9179 Views
-
3