JQuery Selectors

By | September 17, 2018

jQuery selectors allows us to select and manipulate HTML elements by their name or id or attributes or type or values. In jQuery all selectors are start with $().

Most common jQuery selectors are-

1. Element Selector

2. Id Selector

3. Class Selector

4. Self-Selector

5. All Elements Selector

6. Attribute Selector

7. Hierarchical Selector

Now we will take a look about each above selector shortly-

1. Element Selector

Select the element(s) based on specified element name.

 Syntax [for selecting element(s) by providing single element name]

$("tagName")

Here tagName means the name of the element that we want to select. In this case jQuery will select all the element(s) from a HTML document based on the provided tagName.

Example:

$("p")

We selected all p element(s) from the HTML document.

$("p").css("border", "3px solid red");

In above example we selected the element all p from HTML document and set its border to 3 pixel solid red color.

Syntax [for selecting element(s) by providing multiple elements name]

$("tagName1, tagName2, tagName3,….. tagNameN")

Here tagName1, tagName2, tagName3,….. tagNameN means list of elements name those we want to select. In this case all matching elements will select from the HTML document based on the list of elements name that we provided for select. Separate each selecting elements by comma (,).

Example

$("ul,li,p")

Select all ul, li & p elements from a HTML document.

$("ul, li, p").css("border", "3px solid red");

Select all ul, li & p elements from a HTML document and set their borders to 3 pixel solid red color.

2. Id Selector

Select HTML element(s) by specified element Id.

Syntax [for selecting element(s) by providing single Id]

$("#id")

Here

# sign is uses to tell jQuery that we want to select HTML element by their id.

id means the element’s id.

So inside parenthesis we provide # sign before id value i.e. #+id to select element(s) by id. It’s the rule of jQuery “when we need to select any element(s) by their Id we will provide # before the id value as shown above syntax.”

Example-

$("#firstParagraph")

Inside above example we select all elements that has the Id = firstParagraph. We placed # sign before id value so the complete form became #firstParagraph. Placing # sign before id value is the rule of jQuery to select an element by its id.

 $("#list1").css("border", "3px solid red");

Inside above example we select the element who have the id = list1 and make its border to 3 pixel solid red colored.

Syntax [for selecting element(s) by providing multiple ids]

$("#id1, #id2, #id3…#idN")

Here #id1, #id2, #id3…#idN means sequence of id’s of elements those we want to select. In this case all elements of matching id’s will select from the HTML document based on the sequence of elements ids that we provided for select. Separate each selecting ids by comma (,).

Example:

$("#list1,#list2")

In above example we select all elements that has id list1 and list2

$("#list1,#list2").css("border", "3px solid red");

Select all elements that has id list1 or list2 from a HTML document and set their borders to 3 pixel solid red color.

3. Class Selector

Select all HTML element(s) by specified class name.

Syntax [for selecting element(s) by providing single class name]

$(“.className”)

Here

Dot(.) sign is uses to tell jQuery that we want to select HTML element by their class attribute name.

className means the name of the class attribute that we referred for that element.

So inside parenthesis we provide dot (.) sign before class name i.e.-  .+className to select element(s) by class name. It’s the rule of jQuery “when we need to select any element(s) by their class name we will provide dot (.) before the class name as shown above syntax.”

Example

$(".a")

We select all elements that has class name a.

$(".a").css("border", "3px solid red");

Select all elements that has class name a from the HTML document and set their borders to 3 pixel solid red color.

Syntax [for selecting element(s) by providing multiple class names]

$(“.className1.className2.className3….classNameN”)

 Here .className1.className2.className3….classNameN means sequence of class names of elements those we want to select. In this case all elements that’s has same class names will select from the HTML document based on the sequence of elements class name that we provided for select.

Example

$(".a.b")

Select all elements that has class attribute name a or b or both.

$(".a.b").css("border", "3px solid red");

Select all elements that has class attribute name a or b or both and set their borders to 3 pixel solid red color.

4. Self-Selector

Select current html element

Syntax

$(this)

Here this means the element that we want to select.

Example

  $("button").click(function(){

    $(this).hide();

});

Inside above code we hide the button element as soon as click on the button. Inside the inner selector the “this” keyword means the button element.

5. All selector

Select all elements from a HTML document

Syntax

$("*")

Here by * we mean all elements in the HTML document.

Example

$("button").click(function(){

   $("*").hide();

});

Inside above code we hide all HTML elements as soon as we click on the button. Inside inner selector the * means all elements of the HTML document.

6. Attribute Selector

Select all elements those as specified attribute name-

Syntax

$("attributeName")

Here attributeName means the name of the attribute by which we want to select element(s)

 Example-

$("[href]")

Select all elements those has href element.

$(document).ready(function(){

    $("button").click(function(){

        $("[href]").hide();

    });

});

As soon as we click on the button element it will select all elements from the HTML document that has href attribute.

We can also select specific element by providing it’s attribute name as well as their value as follows-

$("a[target='_blank']")

Select all <a> element(s) that’s target set to blank

$(document).ready(function(){

    $("button").click(function(){

        $("a[target='_blank']").hide();

    });

});

In above code we select all <a>  that’s target set to blank

$(document).ready(function(){

    $("button").click(function(){

        $("a[target!='_blank']").hide();

    });

});

In above example we select all <a> that’s target not set to blank.

7. Hierarchical Selector

Hierarchy selectors allow us to match elements within the context of other elements. Some selectors match only elements that are direct children of their parent elements; other selectors match elements all the way down the hierarchy (for example, the child of a child of a parent element).

Common Hierarchy selectors are-

7.1- Child Selector

Select all specified child element(s) of specified parent element.

Syntax

       $(“parentElement>childElement”)

Here parent means any valid HTML element that’s child element we want to select and child means any valid HTML element that is the child of above parent element that we want to select. So this selector will select all matching child elements of specified parent element.

Example

$("ul > li")

Select all li element that’s are the child of ul element

$("ul.top > li").css("border", "1px solid blue");

Select all li element that’s are the child of ul element and ul element that has class “top” i.e. select    all li elements from those ul elements that has class top.

7.2- Descendant selector

Select all elements that are descendants of a given ancestor. A descendant of an element could be a child, grandchild, great-grandchild, and so on. For example, $('#article div') selects all <div> elements that are descendants of the element whose id attribute is set to article.

Syntax

$("ancestorElement descendantElement")

 Here ancestor means any valid element whose descendant we will select. descendant means a valid element that we will select. It will be the descendant element of the ancestor element.

Example:

$("ul li")

Select all <li> elements that’s are descendants of <ul> element.

$("ul li.a").css("border", "3px solid red");

Select all <li> elements that’s has “a” class and are descendant of <ul> element

7.3- Next Adjacent selector

Select all next specified elements that are immediately preceded by a sibling element.

Syntax

$(“previousElement + nextElement”)

Here previousElement is a valid HTML element. It is preceding sibling element of selecting element. nextElement is also a valid selector that that we want to select. The selector will select only those nextElements that’s are next to previousElement.

Example:

$('#page + div') 

Here selects the <div> element that is immediately preceded by a sibling element whose id attribute is set to page.

 $("ul+p").css("color", "red") ;

Here we colored red to the first <p> element after the outermost <ul> element. Here the <p> element is a sibling of <ul>.

7.4- Next Siblings Selector

Select all sibling elements that’s are follow after the previous element. Selecting  elements should have the same parent and must match the filtering element.

Syntax

$("prevElement ~ siblingElements")

Here prevElement is a valid HTML selector that’s is the preceding element. siblingElements are the elements that we want to select. In case of selecting we will select all the siblingElements that’s are preceded by the prevElement. All siblingElements should have same parent.

Example

$("#page ~ div") 

Selects the <div> element that is immediately preceded by a sibling element whose id attribute is set to page, and selects sibling <div> elements are followed by the element that’s id is page.

$("#list1 ~ p").css("border", "3px solid red");

Select all paragraphs those are the siblings of list1

It seems that Next Adjacent Selector and Next Siblings are quite similar. Then what is the difference between them?

The difference is-

+. “Next Adjacent Selector” is works for selecting immediately following element to the previous element.

$("ul+p").css("color", "red"); 

Colors red the first <p> element after the outermost <ul> element. The <p> element is a sibling of <ul>.

+. But “Next Siblings Selector” works for selecting matching all following sibling elements.

 $("ul~p").css("font-weight", "bold"); 

Here bold all <p> sibling elements after the outermost <ul> element.

 

30 Total Views 1 Views Today
Md. Mojammel Haque

CSM, CSPO, CSD, CSP-SM, CSP-PO (ScrumAlliance.org)
Certification Profile Link-
https://www.scrumalliance.org/community/profile/mhaque13

Currently working as Lead Team (Application Architecture) at Raven Systems Ltd. Passion for software development especially agile practices such as TDD with in depth knowledge of Object Oriented Programming, SOLID Principles, Gang of Four Design Patterns, Some Enterprise Application Architectural Patterns. Over 8 years of software development experience ASP.NET. Has the ability to understand and transform complex business requirements into software ensuring applications are delivered on time. Also experience in non Microsoft .NET technologies such as Dapper.Net, Git, Structure Map & Angular, Bootstrap, HTML-5, CSS-3 etc.

Category: 1.04-jQuery
Md. Mojammel Haque

About Md. Mojammel Haque

CSM, CSPO, CSD, CSP-SM, CSP-PO (ScrumAlliance.org) Certification Profile Link- https://www.scrumalliance.org/community/profile/mhaque13 Currently working as Lead Team (Application Architecture) at Raven Systems Ltd. Passion for software development especially agile practices such as TDD with in depth knowledge of Object Oriented Programming, SOLID Principles, Gang of Four Design Patterns, Some Enterprise Application Architectural Patterns. Over 8 years of software development experience ASP.NET. Has the ability to understand and transform complex business requirements into software ensuring applications are delivered on time. Also experience in non Microsoft .NET technologies such as Dapper.Net, Git, Structure Map & Angular, Bootstrap, HTML-5, CSS-3 etc.

Leave a Reply

Your email address will not be published. Required fields are marked *