Basic jQuery Attribute filters

By | September 22, 2018

Now we will discuss about attribute filters of jQuery. By using attribute filter we can select element by it attribute and the attribute value. Common attribute filters are-

$(“[attribute]”)

Select all elements those has specified attribute.

Example:

$("[class]").css("border","3px solid red");

Select all the elements from HTML document those contains the class attribute.

$(“element[attribute]”)

Select all specified elements those contains the specified attribute.

Example:

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

Select all paragraphs from HTML document those contains the class attribute.

In both above cases the value of the attribute doesn’t matter. If only contains the specified attribute then will selected.

 $(“ [attribute=value]”)

Select all elements from the HTML document those have the specified attribute and the value of that attribute is match with given value.

$("[class=a]").css("border","3px solid red");

Select all the elements from HTML document those has class attribute value = “a”

$(“element[attribute=value]”)

Select all specified element from the HTML document those have the specified attribute and the value of that attribute match with the given value.

Example

$("p[class=a]").css("border","3px solid red");

Select all paragraphs from the HTML document those has class attribute and the value of that class attribute = “a”.

$(“[attribute!=value]”)

Select all elements those don’t have the specified attribute and value.

Example:

$("[class!=a]").css("border", "3px solid red");

Select all the elements from the HTML document those don’t have class attribute and the value of the class attribute = “a”

Here selected all the elements of the page except item1, item2 and paragraph1 because all those three elements contains class a.

$(“element[attribute!=value]”)

Select all specified elements those don’t have the specified attribute and value.

$("p[class!=a]").css("border", "3px solid red");

Select all paragraphs those don’t have class attribute with value a.

$(“[attribute^=value]”)

Select all elements those have specified attribute and the value of the attribute starts with the given value.

Example

$("[id^=para]").css("border", "3px solid red");

Select all HTML attribute that has id attribute and id value starts with “para” string.

Here item4, paragraph2 and paragrh4 has id attribute and their value start’s with “para” i.e. id = “para1”

$(“element[attribute^=value]”)

Select all the specified elements those have the specified attribute and the attribute value starts with given value.

Example:

$("p[id^=para]").css("border", "3px solid red");

Select all paragraph elements those has id attribute and the id value starts with “para” string.

$(“[attribute$=value]”)

Select all elements those have the specified attribute and the value of that attribute ends with the given value.

Example:

$("[id$=a1]").css("border", "3px solid red");

Select all the elements from HTML document those has id attribute and the value of that id attribute ends with a1

In above case we have ul, list item-2 and paragraph2 those has id attribute and the value of those attributes ends with a1

$(“element[attribute$=value]”)

Select all specified elements those have specified attribute and the value of that attribute end with given value.

Example

$("p[id$=a1]").css("border", "3px solid red");

Select all paragraph elements those has id attribute and the value of that attribute ends with a1.

$(“[attribute*=value]”)

Select all elements those has specified attribute and that attribute value contains the given value.

$("[id*=ara]").css("border", "3px solid red");

Select all the elements from the HTML document those has id attribute and the attribute value contains “ara” string.

$(“element[attribute*=value]”)

Select all specified elements those has specified attribute and that attribute value contains the given value.

Example

$("p[id*=ara]").css("border", "3px solid red");

Select all paragraph elements from the HTML document those has id attribute and the value of the id element contains “ara” string.

$(“[attr1] [attr2] [attrN]”)

Select all elements those has all specified attributes.

Example

$("[id][class]").css("border", "3px solid red");

Select all those elements those has both id and class attributes.

All above three (03) elements has both id and class attributes.

$(“element[attrFilter1] [attrFilter2] [attrFilterN]”)

Select all specified elements those has all given attributes.

Example:

$("p[id][class]").css("border", "3px solid red");

Select all paragraph elements those has both id and class attributes.

$(“ [attr1=value1] [attr2=value2] [attrN=valueN]”)

Select all the elements those has all given attribute and the value of each individual attribute match with the given value of each individual attribute.

Example

$("[lang=en-us][class=a]").css("border", "3px solid red");

Select all those elements those has class attribute value = a and lang attribute value = en-us

$(“element[attr1=value1] [attr2=value2] [attrN=valueN]”)

Select all specified elements those has all given attribute and the value of each individual attribute match with the given value of each individual attribute.

$("p[lang=en-us][class=a]").css("border", "3px solid red");

Select all paragraph elements those has class attribute = a and lang attribute=en-us

We can also use the conjunction of multiple attribute selector as follows-

$("p[id^=para][lang*=en-]").css("border", "3px solid red");

Select all paragraph elements those id attribute value starts with “para” string and lang attribute’s value contains “en-“ string.

Note: in jQuery selector statement all attribute name and their values are places inside the curly braces ([ ]).

32 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 *