jQuery_3_过滤选择器

过滤选择器（过滤器）类似于CSS3里的伪类，包含

1. 基本过滤器

2. 内容过滤器

3. 可见性过滤器

4. 子元素过滤器

5. 其他方法

 

一.  基本过滤器

过滤器名	jQuery语法	注释
:first	$("li:first")	选取第一个li元素
:last	$("li:last")	选取最后一个li元素
:not(selector)	$("li:not(.red)")	选取class不是red的li元素
:even	$("li:even")	选取索引（0开始）是偶数的所有元素
:odd	$("li:odd")	选取索引（0开始）是奇数的所有元素
:eq(index)	$("li.eq(2)") 正数第三个 $$("li.eq(-2)") 倒数第二个	选择索引（0开始）等于index的元素
:gt(index)	$("li:gt(2)")	选择索引（0开始）大于index的元素
:lt(index)	$("li:lt(2)")	选择索引（0开始）小于index的元素
:header	$(":header")	选择标题元素h1~h6
:focus	$("input:focus")	选择当前被焦点元素 focus过滤器，必须是网页初始状态的已经被激活焦点的元素才能实现元素获取。而不是鼠标点击或Tab键敲击激活的

 

四个方法    

first()	等同于 :first
last()	等同于:last
eq(index)	等同于:eq(index)
not(selector)	等同于:not(selector)

 

    <ul id="d1">
        <li>列表1</li>
        <li>列表2</li>
        <li class="red">列表3</li>
        <li>列表4</li>
        <li>列表5</li>
        <li>列表6</li>
    </ul>

    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5</li>
        <li>列表6</li>
    </ul>

    <div>
        <h3>我是标题</h3>
    </div>

    <input type="text"/>
    <input type="text" />

    <div style="display:none">aduabcppoip</div>
    <div>jhkjkhjkhjkhjk</div>
    <div></div>
    <div></div>

    $("li:first").css("background", "grey");
    $("li:last").css("background", "grey");
    $("#d1 li:last").css("background", "grey");
    $("ul:first li:last").css("background", "grey");
    $("li:not(.red)").css("background", "grey");
    $("li:even").css("background", "grey");
    $("li:odd").css("background", "grey");
    $("li:eq(2)").css("background", "grey");
    $("li:eq(-2)").css("background", "grey");
    $("li:gt(2)").css("background", "grey");
    $("li:lt(3)").css("background", "grey");
    $("li:lt(-3)").css("background", "grey");
    $(":header").css("background", "grey");
    $("div :header").css("background", "grey");
    $("input").get(1).focus();//先让文本框选中
    $("input:last:focus").css("background", "red");

    $("li").first().css("background", "grey");
    $("li").last().css("background", "grey");
    $("li").not(".red").css("background", "grey");
    $("li").eq(2).css("background", "grey");

 

      二. 内容过滤器

   内容过滤器的过滤规则主要是包含了子元素或文本内容          

过滤器名	JQuery语法	注释
:contains(text)	$(":contains('abc')")	选取含有“abc”文本的元素
:empty	$("div:empty")	选取不包含子元素或空文本的div元素
:has(selector)	$(":has(.red)")	选择子元素含有class是res的元素
:parent	$(":parent")	选取含有子元素或文本的元素

       

      四个方法

has(selector)	等同于:has(selector)
parent()	选择当前元素的父元素
parents()	选择当前元素的父元素和祖先元素
parentsUntil()	选择当前元素的遇到某个元素停止

      注意：这里的parent方法和:parant过滤器是不同的

    $("div:contains('abc')").css("background", "grey");
    $("div:empty").css("height", "20px").css("background", "grey");
    $("ul:has(.red)").css("background", "grey");
    $("div:parent").css("background", "grey");

    $("ul").has(".red").css("background", "grey");
    $("li").parent().css("background", "grey");
    $("li").parent().eq(0).css("background", "grey");
    $("li").parents().css("background", "grey");
    $("li").parentsUntil("body").css("background", "grey");

 

      三. 可见性过滤器

            可见性过滤器根据元素的可见性和不可见性来选择相应元素             

:hidden	$(":hidden")	选取不可见元素
:visible	$(":visible")	选取可见元素

      :hidden过滤器一般是包含的内容为：css样式为dispaly:none, input表单类型为type="hidden"和          visiblity:hidden的元素。

    $("div:hidden").css("background", "grey").show(1000);
    $("div:visible").css("background", "grey")