JQuery中的基本筛选选择器

原创 2016年05月30日 17:08:16
    很多时候我们不能直接通过基本选择器与层级选择器找到我们想要的元素,为此jQuery提供了一系列的筛选选择器用来更快捷的找到所需的DOM元素。筛选选择器很多都不是CSS的规范,而是jQuery自己为了开发者的便利延展出来的选择器

筛选选择器的用法与CSS中的伪元素相似,选择器用冒号“:”开头。我们通过一个列表,来看看基本筛选器的描述

这里写图片描述

注意

  • eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素,根据之前匹配的元素在进一步筛选,注意jQuery合集都是从0开始索引
  • :gt()是一个段落筛选,从指定索引的下一个开始,gt(1) 实际从2开始

    下面我们看实例:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>基本筛选器</h2>
    <h3>:first/:last/:even/:odd</h3>
    <div class="left">
        <div class="div">
            <p>div:first</p>
            <p>:even</p>
        </div>
        <div class="div">
            <p>:odd</p>
        </div>
        <div class="div">
            <p>:even</p>
        </div>
        <div class="div">
            <p>:odd</p>
        </div>
        <div class="div">
            <p>:even</p>
        </div>
        <div class="div">
            <p>div:last</p>
            <p>:odd</p>
        </div>
    </div>
    <script type="text/javascript">
    找到第一个div
   $(".div:first").css("color", "#CD00CD");
    </script>

    <script type="text/javascript">
    //找到最后一个div
     $(".div:last").css("color", "#CD00CD");
    </script>

    <script type="text/javascript">
    //:even 选择所引值为偶数的元素,从 0 开始计数
    $(".div:even").css("border", "3px groove red");
    </script>

    <script type="text/javascript">
    //:odd 选择所引值为奇数的元素,从 0 开始计数
    $(".div:odd").css("border", "3px groove blue");
    </script>


    <h3>:eq/:gt/:lt</h3>
    <div class="left">
        <div class="aaron">
            <p>:lt(3)</p>
        </div>
        <div class="aaron">
            <p>:lt(3)</p>
        </div>
        <div class="aaron">
            <p>:eq(2)</p>
        </div>
        <div class="aaron">
        </div>
        <div class="aaron">
            <p>:gt(3)</p>
        </div>
        <div class="aaron">
            <p>:gt(3)</p>
        </div>
    </div>
    <script type="text/javascript">
    //:eq
    //选着单个
    $(".aaron:eq(2)").css("border", "3px groove blue");
    </script>

    <script type="text/javascript">
    //:gt 选择匹配集合中所有索引值大于给定index参数的元素
    $(".aaron:gt(3)").css("border", "3px groove blue");
    </script>

     <script type="text/javascript">
    //:lt 选择匹配集合中所有索引值小于给定index参数的元素
    //与:gt相反
    $(".aaron:lt(2)").css("color", "#CD00CD");
    </script>

    <h3>:not</h3>
    <div class="left">
        <div>
            <input type="checkbox" name="a" />
            <p>Aaron</p>
        </div>
        <div>
            <input type="checkbox" name="b" />
            <p>慕课</p>
        </div>
        <div>
            <input type="checkbox" name="c" checked="checked" />
            <p>其他</p>
        </div>
    </div>
    <script type="text/javascript">
        //:not 选择所有元素去除不匹配给定的选择器的元素
        //选取所有input中,没有checked属性的p元素,赋予颜色
        $("input:not(:checked)+p").css("background-color", "#CD00CD");
    </script>
</body>

</html>

执行结果如下:

这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。

jquery 实现筛选功能。

商品属性筛选商品的属性筛选 是一个十分常见的功能,通常是同一类型的属性只能选择一个。例如 价格范围,或者品牌,为了使选择的内容看上去更直观 ,一般都会将选择项列出,并拥有点击取消 选择 ,点击同类替换...
  • qq_29594393
  • qq_29594393
  • 2017年01月04日 19:42
  • 2213

jQuery筛选--查找,串联

jQuery筛选–查找,串联查找 B.children([…]) 获得所有的子元素。CDEF A.fi...
  • daliyuan350649623
  • daliyuan350649623
  • 2016年12月20日 20:10
  • 677

jquery之选择器和筛选器

jquery之选择器 根据给定的id、class或者tagName匹配一个元素。 使用任何的元字符(如!"#$%&'()*+,./:;?@[\]^`{|}~)作为名称的文本部分, 它必须被两个反斜...
  • hf549072646
  • hf549072646
  • 2015年12月31日 15:16
  • 471

jQuery筛选器--内容选择器

内容选择器 筛选规则 内容选择器的过滤规则主要体现在它所包含的子元素或文本内容上 内容选择器   :contains('text') 获取文本内容包...
  • tjj3027
  • tjj3027
  • 2018年01月11日 09:49
  • 11

jquery 实现筛选功能。

商品属性筛选商品的属性筛选 是一个十分常见的功能,通常是同一类型的属性只能选择一个。例如 价格范围,或者品牌,为了使选择的内容看上去更直观 ,一般都会将选择项列出,并拥有点击取消 选择 ,点击同类替换...
  • qq_29594393
  • qq_29594393
  • 2017年01月04日 19:42
  • 2213

jquery之选择器和筛选器

jquery之选择器 根据给定的id、class或者tagName匹配一个元素。 使用任何的元字符(如!"#$%&'()*+,./:;?@[\]^`{|}~)作为名称的文本部分, 它必须被两个反斜...
  • hf549072646
  • hf549072646
  • 2015年12月31日 15:16
  • 471

jquery遍历筛选数组的几种方法和遍历解析json对象

jquery grep()筛选遍历数组  复制代码代码如下: $().ready(  function(){  var array = [1,2,3,4,5,6,7,8,9];  ...
  • u010486495
  • u010486495
  • 2017年01月08日 17:16
  • 2190

【JQuery/整理】筛选器用法小结+JQ追加HTML/获取属性

大家好呀,好久不见,正所谓一日不见如隔三秋,咱这两个月没见估计都快把小D给忘了哈,额,这个主要怪我啦,这段时间都在赶毕业设计,这不看着快做完了,眼下整理下有关web前台的资料,这回先贴出一部分JQue...
  • o0DarkNessYY0o
  • o0DarkNessYY0o
  • 2017年03月22日 09:57
  • 1962

jQuery实现列表搜索(筛选)效果

用jQuery实现列表搜索(筛选)效果,至于筛选的数据,这里是本地直接写的。...
  • genius_yym
  • genius_yym
  • 2016年12月11日 15:56
  • 1067

JQuery选择器中的可见性筛选

元素有显示状态与隐藏状态,jQuery根据元素的状态扩展了可见性筛选选择器:visible与:hidden 下面用表格大致了解一下,就两个选择器:这2个选择器都是 jQuery 延伸出来的,看起来比较...
  • LHJBK
  • LHJBK
  • 2016年05月30日 17:47
  • 827
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JQuery中的基本筛选选择器
举报原因:
原因补充:

(最多只允许输入30个字)