In this part we will see different ways we can select element or node in jQuery. Before you start with this part, I strongly recommend you to read first part of this series.
In jQuery an element or node can be selected in many ways. An element can be selected
- By ID
- By Class name
- By Attribute or value of an attribute
- If we want to select all elements then that can be selected by using tag name.
Before we go ahead and understand many ways of selecting an element or node, let us first understand what is an Element? In below HTML all the div and P can be called as nodes or elements. Any HTML elements on the HTML page can be termed as node. A node is called as Child Node if it is inside some other node. For example in below HTML snippet P inside div with id hellodiv is child node of this particular div.
Let us use above HTML and we need to select all the div. Since we need to select all the div then we can select that using tag name. All the div can be selected as following. In alert we will be getting number of div is on page.
In the same way if we want to select all the anchor tag <a>, all the page tag <p>, all the table tag <table> , we can do that as following
We can select more than one tag together by separating them with comma. Like following in one statement we can select all the p, table and a elements on the page.
If we want to select a specific element then we can select that using its class name or id. Let us say we have HTML as following
We want to select div with id is hellodiv. This can be selected as following
We will be getting following output in alert box.
Essentially, an element can be selected with ID by using # symbol. If we want to select elements with class name we can do that with the use of period operator.
Now we need to select div using class name. Selecting with class name is exactly the same as selecting by id. However there is performance issue in selecting using class name. Since jQuery iterate through all the DOM objects in memory whereas in case of selecting using ID, jQuery directly fetch the DOM object from memory.
And you will be getting expected output in alert as following,
There is only difference of hash and period in selecting using id or class name.
There may be scenario when you want to select a specific type of tag on basis of class name. For example in below HTML all the elements having same class name ‘hellodiv’.
If we want to select element P with class hellodiv then we will be selecting as following,
Essentially we need to put class name with period after the tag name.
Now let us take some other selection examples. For example you from following HTML you want to select all the hidden div.
We can select all the hidden div as following,
If we want to check that whether a div is hidden or not, we can check that as following
There may be scenario when we need to select child elements. For example consider following HTML
Now if we want to print number of <li> elements. We can do that as following,
Let us say you want to print first and last <li> elements, we can do that as following,
If we want to get nth element in the list, we can do that as following,
If we want to select all the odd and even numbers we can do that as following,
In this way we can select Elements or Nodes in different ways.
In this part we focused on different ways of Element or Node selection in jQuery. I hope this post was useful. Thanks for reading.