jquery Filter Selector

Points:

• Basic Filter
• Content Filter
• Visibility filters
• Child element Filter
• Other methods

First, basic filter

<ul>    <li>Item1</li>    <li>Item2</li>    <li class="Item3">Item3</li>    <li>Item4</li>    <li>Item5</li>    <li>Item6</li></ul>

1. Get the first LI under UL, equivalence method

$("ul li:first").css("color""red");$("ul li").first().css("color""blue");

2. Obtain the last Li under UL, equivalence method

$("ul li:last").css("color""red");$("ul li").last().css("color""blue");

3. Get the class under UL not equal to Item3 Li, equivalent method not ()

$("ul li:not(.item3)").css("color""red");$("ul li").not(".item3").css("color""blue");

4. Get the UL index value for the odd Li

$("ul li:odd").css("color""red");

5. Obtain the li of the specified index value under UL

$("ul li:eq(0)").css("color""red");

6. Get the LI under UL greater than the specified index value

$("ul li:gt(2)").css("color""red");

7. Obtain the LI under UL less than the specified index value

$("ul li:lt(2)").css("color""red");

8. Match H1~h6 's H tag

<h1>h1</h1><h2>h2</h2><h5>h5</h5>$(":header").css("color", "red");

9. Get the element where the initial state of the page has been activated, not a mouse click or a tab type

<input type="text" id="txt"/>$("#txt").get(0).focus();$(":focus").css("background""red");

Second, Content filter
1. The filter rules of the content filter are mainly contained sub-elements or text content
Select an element that contains "Lamport" text

<div>lamport1</div><p>abclamport</p><h2>asdfllamportsdf</h2><h3></h3>$(":contains(lamport)").css("color", "red");

2. Match an element that does not contain child elements or any text

alert($("h3:empty").get(0).tagName);   // H3

3. Select the element that contains the child element as class=red, that is, the returned element is the parent element, and the equivalent method is the has ()

<ul>    <li>item1</li>    <li class="red">item2</li>    <li>item3</li></ul>alert($("ul:has(.red)").get(0).innerHTML);$("ul").has(".red").css("background""blue");

4. Match elements that contain child elements or text content

alert($(".red:parent").get(0).tagName);        //LI, 返回class为red且包含子元素或者文本内容的元素

5.parent () similar to: Parent property, but returns the element

alert($(".red").parent().get(0).tagName);      // UL

6.parents () method, which returns the parent node of the element and the ancestor

var ele = $(".red").parents();for(var i = 0lenlen; i++) {    alert(ele.get(i).tagName);      // UL BODY HTML}

7.parentsUntil () method, which returns the parent of the element and the ancestor until the specified parent element is encountered

var ele = $(".red").parentsUntil("html");for(var i = 0lenlen; i++) {    alert(ele.get(i).tagName);      // UL BODY}

Third, the visibility of the filter
Visibility filters Select elements based on the visibility and invisibility of elements

<ul>    <li style="display:none">item1</li>    <li class="red">item2</li>    <li>item3</li></ul>alert($("ul li:hidden").get(0).innerHTML);     // item1alert($("ul li:visible").size());              // 2

Iv. Sub-element filter
Filtering rules: Relationships between parent and child elements

<ul>    <li>Li1</li>    <li>Li2</li>    <li>Li3</li></ul><ul>    <li>Only-one</li></ul>    <li>Li4</li>    <li>Li5</li>    <li>Li6</li></ul>

1. Match the first child element of each Li element's parent element

$("ul li:first-child").css("color""red");

2. Match the last child element of each Li element's parent element

$("ul li:last-child").css("color""red");

3. Match elements with only one element

$("ul li:only-child").css("color""red");

4. Match the first element of each Li element's parent element, and the index value starts at 1

$("ul li:nth-child(1)").css("color""red");

Five. Other methods
1. Judging selector is

<ul>    <li>li1</li>    <li class="red">li2</li>    <li>li3</li></ul>alert($(".red").is("li")); // true, 判断class为red的元素是否为li元素

Also, is can contain anonymous functions as arguments

alert($(‘.red‘).is(function () {//true，方法，同上    return $(this).get(0‘li2‘//可以自定义各种判断}));

2.hasClass to see if an element contains each class

alert($("ul li:nth-child(2)").hasClass("red"));    //trueend), 选取从start到end的元素，索引值从0end)$("ul li").slice(02).css("color""red");        // 第一个和第二个，不包括第三个

3. Get all element nodes under an element include text nodes (blank text)

alert($("ul").contents().size());      // 7

The filter () filtering method, and the IS () method can accept a function parameter
First select the LI element under UL, and then filter the last sub-element by using the filter () method

$("ul li").filter(‘:last‘).css("color""red");

4.end () to get the previous state of the current element

<div id="test">    is H1is p</p></div>$("#test").click(function () {    // 首先获取#test下的p,使其隐藏    // 接着接受本次引用，返回的是#test    // 最后又调用了一次hide(),使得整个DIV都被隐藏掉    $(this).find("p").hide().end().hide();});

jquery Filter Selector