jQuery Element Selector

jQuery Element Selector

jQuery Element Selector with Examples

In this article, I am going to discuss jQuery Element Selector with Examples. Please read our previous article, where we discussed jQuery ID Selector. The jQuery Element Selector allows us to select an element from the HTML page based on the element name. At the end of this article, you will understand everything about the jQuery Element selector

jQuery Element Selector

To select any HTML element by its tag name, we have to use the jQuery Element selector. To the jQuery function if we pass the element tag name as its selector then it is called as jQuery Element selector. jQuery Element selector uses document.getElementsByTagName() function of JavaScript.

Syntax: $(‘Element tag name’)

We can provide the element name that we want to select in the parenthesis. For example, suppose that we have a button element in our HTML like below
Click Me

To select this button element, we have to use the element selector as follows
$(‘button’)

The usage of selecting the element by their tag name is exactly as same as we have used in CSS. For example
$(‘p’): This will select all the paragraph tags
$(‘div button’): This will select all the elements which are descendant of element
$(‘div, span, button’): This will select all the, and elements
$(‘div > p’): This will select

elements that are a direct child of a element
$(‘div ~ p’): This will select

elements appear after element
$(‘p: first-child’): This will select only the first p element of its parent
$(‘p: last-child’): This will select only the last p element of its parent
$(‘p: nth-child(3)’): This will select only the 3rd p element of its parent
$(‘tr: odd’): This will select only the odd children of its parent
$(‘tr: even’): This will select only the even children of its parent
$(‘div: has(p)’): This will select all the div elements that have a p element
$(‘div: contains(“hello”)’): This will select all div elements that contains the string hello
$(‘:header’): This will select all the header elements ,,……….
$(‘:empty’): This will select all elements that are empty
$(‘:header:not(h1)’): This will select all header elements that are not h1
$(‘table:visible’): This will select all visible tables
$(‘ul li:eq(3)’): The fourth element in a list (index starts at 0)
$(‘ul li:gt(3)’): List elements with an index greater than 3
$(‘ul li:lt(3)’): List elements with an index less than 3

Example to understand jQuery Element Selector:

Now let’s jump to the practical to understand these things

   
jQuery Element Selector
 
This is Some text
 
This is some another text
     

Once you run the above code, you will get the following page in the browser.

Once you click on the Click Me button, the page changes as shown in the below image. When we click on the button, we are selecting all the paragraph elements by $(‘p’) and applying the border to all of them and hence you are getting the below output.

Example: Selecting descendant elements

In the below example we are targeting the anchor tag which is the descendant of the DIV by $(‘div a’) and we apply the border on the targeted element.

     
jQuery Element Selector
 
This is a DIV
 This is anchor element 
 
     

When you run the above HTML code, you will get the following output in the browser.

When you click on the Click Me button, it will apply the border to the anchor element which is descendent of the Div element as shown in the below image.

Example: Selecting multiple elements

In the below example, we are targeting all the paragraph, span, anchor tags by $(‘p, span, a’) and apply the style to them.

     
jQuery Element Selector
 
This is some text
 This is span element 
 
This is anchor element 
 
     

When we run the above code, we will get the following output in the browser.

When you click on the Click Me button, it will apply the border to the paragraph, span, and anchor elements as shown in the below image.

Example:

In the below example, we are using a pseudo-selector. This will apply only to the first paragraph tag.

     
jQuery Element Selector
 
This is 1st text
 
This is 2nd text
 
This is 3rd text
 
     

When you run the above HTML code, you will get the following output in the browser.

When you click on the Click Me button, it will apply the border to the first paragraph elements as shown in the below image.

Example:

$(‘element’) returns a collection of elements, we can alert the number of elements also by length method.

     
jQuery Element Selector
 
This is 1st text
 
This is 2nd text
 
This is 3rd text
 
     

When you run the above code and click on the Click Me button, you will get the following alert.

Example:

In the below example we are selecting those odd table rows

     
jQuery Element Selector
 
 Front End Back End  Bootstrap NODE JS  jQuery PHP   
     

Now, run the above HTML code and click on the Click Me button, you will get the following output.

Example:

In the below example we are selecting those div elements which has a p element.

     
jQuery Element Selector
 
This is a Text
 

     
Hello World