jQuery filters basic

By | September 19, 2018

We already seen that jQuery selectors are very powerful for selecting contents from webpages. Now we will use filters that makes jQuery selectors more powerful. jQuery filters works with selectors and provide more powerful fine-grained control on selecting the elements from HTML document. In jQuery filters are categorized into six(06) different categories. They are-

1. Basic filters

2. Content filters

3. Visibility filters

4. Attribute filters

5. Child filters

6. Form filters

1. Basic Filters

This provides basic filtering like getting first element, last element, even numbered elements, odd numbered elements etc.

2. Content Filters

Filter the elements based on their contents like select an element if the element contains a particular string. In this case the filter takes the particular string content as filtering condition.

3. Visibility Filters

Select elements based on their visibility hidden or visible settings i.e. such filters select elements based on the provided visibility (visible or hidden) status of the element. If provided value is hidden then it will select hidden element(s). if provided value is visible then will visible elements.

4. Attribute Filters

Select elements by provided attribute and attribute value. In this case examine a given attribute on element to determine whether it should be filtered out or not.

5. Child Filters

Select elements based upon their relationship with their parent element.

6. Form Filters

Select provided form element(s) based on the provided value.

Basic jQuery filters

Basic jQuery filters allows us to refine the results of a jQuery selector by only including elements that matches certain conditions. Most used basic jQuery filters are-

$("element:first")

Select the first specified element from the HTML document.

Example:

$("ul:first")

Above filter will find the first unordered list from HTML document.

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

Above filter will find the first paragraph from the HTML document and mark it with red colored border.

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

Select the element that has class attribute “.a” and the element is the element among all other elements of the document those has class “.a”.

$("element:last")

Select the last specified element from the HTML document

Example

$("ul:last")

Find the last unordered list from the HTML document.

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

Above filter will select the last paragraph from the HTML document and mark it with red colored border.

$("element:even")

Select the even numbered indexed specified element(s) from the HTML document. Here it will select even indexed elements.

Example:

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

Output

Here it selected even indexed elements starting from 0. So in above example it selected 0th and 2nd indexed paragraphs from 4 paragraphs.

$("element:odd")

Select the odd numbered indexed specified element(s) from the HTML document

Example:

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

Here it selected odd indexed (1st indexed and 3rd indexed) paragraphs from the HTML document.

$("element:eq(n)")

In jQuery eq means equals. Select the specified element from given index. The indexing starts from 0.

Example:

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

Select the 3rd indexed paragraph from the HTML document

$("element:gt(n)")

In jQuery gt means greater than. Select all specified element(s) that’s index is greater than the given index.

Example

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

Here select all paragraphs from the HTML document that’s index no are greater than the given index i.e. index-0 (zero).

$("element:lt(n)")

In jQuery “lt” means “less than” . Select all specified element(s) that’s index is less than the given index.

Example

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

Here selects all paragraphs those index is less than the given index i.e. index-3

$("element:header")

Selects all header elements i.e. H1, H2, H3, H4 etc. from HTML document.

Example:

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

Here select all header elements those are exists inside the HTML element. if there is no Header element then nothing will selected.

$("element:animated")

Selects all elements that’s are currently being animated i.e. those elements that’s has animation and those animations are are in running mode at the time when selector selecting that element.

Example

<!doctype html>
<html lang="en">
  <head>
   <meta charset="utf-8">
   <title>animated demo</title>
   <style>
    div {
         background: yellow;
         border: 1px solid #AAA;
         width: 80px;
         height: 80px;
         margin: 0 5px;
         float: left;
       }
    div.colored {
    background: green;
    }
   </style>
   <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  </head>
  <body>
   <button id="run">Run</button>
   <div></div>
   <div id="mover"></div>
   <div></div>
   <script>
     $( "#run" ).click(function() {
     $( "div:animated" ).toggleClass( "colored" );
   });

   function animateIt() {
     $( "#mover" ).slideToggle( "slow", animateIt );
   }
   animateIt();
  </script>

 </body>
</html>

In above example there are three div’s filled by yellow color. One div is animated. There is also a button with captioned “Run”. When user will click the button it will select the animated div and change it’s color to green as then indication of selection. This example has been taken from here.

$("element:not(selector)")

Select all elements that don’t match the given selector i.e. given element.

Example:

$("p:not(p:eq(2))").css("border","3px solid red");

Here selects all paragraphs from the HTML document where paragraph is not the paragraph of index-2.

$("element:focus")

Select all element’s that’s are currently is focused.

$('input:focus')

Select the input element that is currently in focus.

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