Learn jQuery Part1: Introduction to jQuery

Objective

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.

image

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.

 image

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

image

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.

image

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

image

We want to select div with id is hellodiv. This can be selected as following

image 

We will be getting following output in alert box.

image

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.

image

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.

image

And you will be getting expected output in alert as following,

image

There is only difference of hash and period in selecting using id or class name.

image

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’.

image

If we want to select element P with class hellodiv then we will be selecting as following,

image

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.

image

We can select all the hidden div as following,

image

If we want to check that whether a div is hidden or not, we can check that as following

image

There may be scenario when we need to select child elements. For example consider following HTML

image

Now if we want to print number of <li> elements. We can do that as following,

image

Let us say you want to print first and last <li> elements, we can do that as following,

image

If we want to get nth element in the list, we can do that as following,

image

If we want to select all the odd and even numbers we can do that as following,

clip_image001

In this way we can select Elements or Nodes in different ways.

Conclusion

In this part we focused on different ways of Element or Node selection in jQuery. I hope this post was useful. Thanks for reading.

 

Advertisements

3 thoughts on “Learn jQuery Part 2: How to Select Elements or Nodes in jQuery

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s