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筛选--查找,串联

jQuery筛选–查找,串联查找 B.children([…]) 获得所有的子元素。CDEF A.fi...

jquery 实现筛选功能。

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

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

用jQuery实现列表搜索(筛选)效果,至于筛选的数据,这里是本地直接写的。...

jQuery——可见性筛选选择器

jQuery的可见性筛选选择器有visible和hidden,对应于元素的显示和隐藏状态;为此先要区分display:none和visibility:hidden的区别: display:none是在...

jQuery 选择器/筛选

• 基本过滤选择器 a. :fitst 选取第一个元素 b. :last选取最后一个元素 c. :not() 选取除指定之外的元素 d. :even 偶数选择器 e. :odd 奇数选择器 ...

jquery之选择器和筛选器

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

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

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

jquery实现表格内容筛选

对于表格来说,当数据比较多的时候,我们无法一页一页的查找,这时可以通过一个搜索框来实现搜索。 对于这个搜素框,我们为了更好的体验可以利用keyup事件实现在用户输入的时候就开始筛选,而不是填完以后点...

使用python进行汉字与二进制之间的转换

背景:最近有人给我一大堆二进制,看的我眼花缭乱,最后得知这是汉字的编码,那肯定要转成汉字呀,当然不排除有标点、特殊符号、英文大小写字母等,但这些都比较简单,主要是汉字与二进制的转换稍微麻烦一点。最后简...

在python中解压rar文件

第三步: 终于可以开始解压了,命令十分简单 from unrar import rarfile file = rarfile.RarFile('file_name') #这里写入的是需要解压的文件,...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JQuery中的基本筛选选择器
举报原因:
原因补充:

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