jQuery | Basic filter() with Examples-trickcode

• We already knew about filters that perform like strainers. This selector helps to extract the HTMLDocument element while jquery manipulation.
• Almost all these basic filters are getting a value based on the index.
• Let's learn about basic filters.

: header

• Used to discover the header element's content.
• The header filter point out all header elements(h1,h2,..h6).

$(document).ready(function () {
     $('button').click(function () {
        $(':header').text("heading");
     });
 });  

• In this Example will derive all header element's
• This filter helps to find out the caption of the document.

:lt() and :gt()

• This filter helps to discover the element found on index values.
• The:lt() filter gets an element that has less than the selected index value.
• The:gt() filter like as:lt() but it discovers an element that has greater than an index selected value.

$(document).ready(function () {
  $('button').click(function () {
      $('p:lt(2)').hide();
  });
}); 

$(document).ready(function () {
  $('button').click(function () {
      $('p:gt(3)').hide();
  });
});   

• We can mention an index value using the minus sign.
• It starts to count the index at the last element.

$(document).ready(function () {
  $('button').click(function () {
      $('p:lt(-1)').hide();
  });
}); 

Counting starts at the last p element.

: odd and: even

• Jquery: odd and: even filters are just elect the odd and even elements based on an element's index value.

$(document).ready(function () {
  $('button').click(function () {
      $('p:odd').show();
  });
});  

• It elects the odd series paragraph only.

$(document).ready(function () {
  $('button').click(function () {
      $('p:even').show();
  });
});   

• It elect the even series paragraph only.

: first and: last

• Jquery: first and: last selector select the first and last elements of a selected parent.

$(document).ready(function () {
  $('button').click(function () {
      $('p:first').show();
  });
});   

It selects just a first element only.

$(document).ready(function () {
  $('button').click(function () {
      $('p:last').show();
  });
}); 

• It selects just a last element only.

:eq()

• Jquery: eq() selector get an equal index value element to a selected parent.

$(document).ready(function () {
  $('button').click(function () {
    $('p:eq(3)').show();
  });
});   

• It helps to get an identical index value of the element.

:not()

Jquery :not() selector designate which element did't have the mentioned component to a selected parent element.

$(document).ready(function () {
  $('button').click(function () {
      $('div:not(p))').show();
  });
});

• This example display which div did't have the p element that only display .

:target

• Jquery :target selector select the mentioned target attribute element to a selected parent.

$(document).ready(function () {
  $('button').click(function () {
      $('div#div1:target').hide();
  });
});   

• It will select mentioned id that is #div1 content.

:lang()

• Jquery :lang() selector select particular language element to a selected element.

$(document).ready(function () {
  $('button').click(function () {
        $('div:lang(en-us)').hide();
    });
});