- 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(); }); });
Post A Comment:
0 comments: