一、基本过滤器

　　1、基本过滤器

　　　　过滤器主要通过特定的过滤规则来筛选所需的 DOM 元素，和 CSS 中的伪类的语法类似：使用冒号(:)开头。
　　　　

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
    $(function(){
        //$('li:first').css('background', '#ccc'); //第一个元素
        //$('li:last').css('background', 'red'); //最后一个元素，是最后一个ul下的最后一个li
        //$('#box li:last').css('background', 'red');//指定了id的ul下的最后一个li
        //$('ul:first li:last').css('background', 'red');//如果不加id实现选中第一个ul下的最后一个li

        //$('li:not(.red)').css('background', '#ccc'); //选中除了 class 为 red 的其他所有元素

        //$('li:even').css('background', '#ccc'); //索引为偶数的元素是从0开始的

        //$('li:odd').css('background', '#ccc'); //索引为奇数的元素

        //$('li:eq(2)').css('background', '#ccc'); //指定索引值的元素,可以是负数，负数的情况是倒着计算的

        //$('li:gt(2)').css('background', '#ccc'); //大于索引值的元素

        //$('li:lt(2)').css('background', '#ccc'); //小于索引值的元素

        $(':header').css('background', '#ccc'); //页面所有 h1 ~ h6 元
        //素如果标题标签在div里面的时候要使用后代关系选中标签节点:$('div :header').css('background', '#ccc');
        //或者直接选中标签，就是说标签是h3就：$('h3:header').css('background', '#ccc');

        $('input').get(0).focus(); //先初始化激活一个元素焦点
        $(':focus').css('background', 'red'); //被焦点的元素
        //注意：:focus 过滤器，必须是网页初始状态的已经被激活焦点的元素才能实现元素获取。而不是鼠标点击或者 Tab 键盘敲击激活的。
    });
</script>

</head>
<body>
<ul id="box">
    <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>
<h3>我是标题</h3>

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

　　2、替代方法：

　　　　jQuery 为最常用的过滤器提供了专用的方法，已达到提到性能和效率的作用：

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
    $(function(){
        //$('li').first().css('background', '#ccc'); //元素 li 的第一个元素
        //$('li').last().css('background', '#ccc'); //元素 li 的最后一个元素
        //$('li').eq(2).css('background', '#ccc'); //元素 li 的第三个元素，负数从后开始
        $('li').not('.red').css('background', '#ccc'); //元素 li 不含 class 为 red 的元素
    });
</script>

</head>
<body>
<ul id="box">
    <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>
<h3>我是标题</h3>

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

二、内容过滤器

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

　　

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
    $(function(){
        //$('div:contains("姐姐")').css('background', '#ccc');//通过某个div里的文本来选择出当前所属的那个div
        //('div:empty').css('background', '#ccc').css('height','20px');//选中没有内容的div,但是如果里面包含了其他标签或文本就没有了
        //$('ul:has(.red)').css('background', '#ccc'); //选择子元素含有 class 是 red 的元素
        $('div:parent').css('background', '#ccc'); //选择非空元素  这里是div的
    });
</script>

</head>
<body>
<div>我存在,你婶婶的脑海里</div>
<div>我存在,你姐姐的脑海里</div>
<div></div>
<div><strong></strong></div>
<ul id="box">
    <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>
</body>

　　jQuery 提供了一个 has()方法来提高:has 过滤器的性能：

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
    $(function(){
        $('ul').has('.red').css('background', '#ccc'); //选择子元素含有 class 是 red 的元素
    });
</script>

</head>
<body>
<div>我存在,你婶婶的脑海里</div>
<div>我存在,你姐姐的脑海里</div>
<div></div>
<div><strong></strong></div>
<ul id="box">
    <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>
</body>

　　jQuery 提供了一个名称和:parent 相似的方法，但这个方法并不是选取含有子元素或文本的元素，而是获取当前元素的父元素，返回的是元素集合。

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
    $(function(){
        //$('li').parent().css('background', '#ccc'); //选择当前元素的父元素
        //$('li').parents().css('background', '#ccc'); //选择当前元素的父元素及所有的祖先元素
        $('li').parentsUntil('div').css('background', '#ccc'); //选择当前元素遇到 div 父元素停止
    });
</script>

</head>
<body>
<div>我存在,你婶婶的脑海里</div>
<div>我存在,你姐姐的脑海里</div>
<div>
    <ul id="box">
        <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>
</body>

三、可见性过滤器

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

　　

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
    $(function(){
        alert($('div:hidden').size()); //选中元素 div 隐藏的元素
        alert($('div:visible').size()); //选中元素 p 显示的元素
        $('div:hidden').css('background','#ccc').show(1000);//show(方法实现动画效果)
    });
</script>

</head>
<body>
<div style="display:none;">我存在,你婶婶的脑海里</div>
<div>我存在,你姐姐的脑海里</div>
</body>

　　注意：:hidden 过滤器一般是包含的内容为：CSS 样式为 display:none、input 表单类型为type="hidden"和 visibility:hidden 的元素。

四、子元素过滤器

　　子元素过滤器的过滤规则是通过父元素和子元素的关系来获取相应的元素。

　　

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
    $(function(){
        //$('li:first-child').css('background', '#ccc'); //每个父元素第一个 li 元素
        //$('li:last-child').css('background', '#ccc'); //每个父元素最后一个 li 元素
        //$('li:only-child').css('background', '#ccc'); //每个父元素只有一个 li 元素也就是说父元素下只有一个子元素时，那么选中这个子元素，当有很多子元素时全部不选
        //$('li:nth-child(odd)').css('background', '#ccc'); //每个父元素奇数 li 元素
        //$('li:nth-child(even)').css('background', '#ccc'); //每个父元素偶数 li 元素
        //$('li:nth-child(3)').css('background', '#ccc'); //每个父元素第三个 li 元素,索引值是从1开始的
        $('li:nth-child(3n)').css('background', '#ccc');//还可以这样使用nth-child这个方法可以任意数值表达式
    });
</script>

</head>
<body>
<div>我存在,你婶婶的脑海里</div>
<div>我存在,你姐姐的脑海里</div>
<div></div>
<div><strong></strong></div>
<ul id="box">
    <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>
<h3>我是标题</h3>
<input type="text" />
</body>

五、其他方法

　　jQuery 在选择器和过滤器上，还提供了一些常用的方法，方便我们开发时灵活使用

　　

　　1、is()方法

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
    $(function(){
        //alert($('.red').is('li')); //参数是选择器，表示red这个类的标签是不是li，是返回true不是返回false
        //alert($('.red').is($('li')));//参数也可以是jQuery 对象集合
        //alert($('.red').is($('li').eq(2)));//参数也可以是jQuery 对象单个
        alert($('.red').is($('li').get(2))); //true，DOM 对象
    });
</script>

</head>
<body>
<div>我存在,你婶婶的脑海里</div>
<div>我存在,你姐姐的脑海里</div>
<div></div>
<div><strong></strong></div>
<ul id="box">
    <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>
<h3>我是标题</h3>
<input type="text" />
</body>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
    $(function(){
        alert($('.red').is(function () {                         //结果为true
            return $(this).attr('title') == '列表3';             //可以自定义各种判断$(this)就等于$('.red')  attr()表示获取元素的title属性的值
        }));
        //注意：必须使用$(this)来表示要判断的元素，否则不管function里面是否返回true或false都和调用元素无关
    });
</script>

</head>
<body>
<ul id="box">
    <li>列表1</li>
    <li>列表2</li>
    <li class="red" title="列表3">列表3</li>
    <li class="red">列表4</li>
    <li>列表5</li>
    <li>列表6</li>
</ul>
</body>

 

　　2、hasClass()

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
    $(function(){
        alert($('li').eq(2).hasClass('red')); //和 is 一样，只不过只能传递 class表示判断第3个li（即角标为2的li）元素中是否有class属性或者class属性的值是否是red
    });
</script>

</head>
<body>
<ul id="box">
    <li>列表1</li>
    <li>列表2</li>
    <li class="red" title="列表3">列表3</li>
    <li class="red">列表4</li>
    <li>列表5</li>
    <li>列表6</li>
</ul>
</body>

　　3、slice()

　　　　注意：这个参数有多种传法和 JavaScript 的 slice 方法是一样的比如：slice(2)，从第三个开始到最后选定；

　　　　slice(2,4)，第三和第四被选定；slice(0,-2)，从倒数第三个位置，向前选定所有；slice(2,-2)，前两个和末尾两个未选定。

<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
    $(function(){
        //$('li').slice(0,2).css('color', 'red'); //前两个变成红色两个参数表示的都是索引，这里表示从0角标到2角标，不包含2角标
        //$('li').slice(2).css('color', 'red');//表示选中从角标2开始一直到尾
        //$('li').slice(0,-2).css('color', 'red');//表示倒着选，即除了列表5和6没选中外其他都选中了即-1-2不选
        $('li').slice(2,-2).css('color', 'red');//表示前两个和后两个不选，其他选中
    });
</script>

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

JQuery_过滤选择器的更多相关文章

  1. jQueryt过滤选择器

    jQueryt过滤选择器 基本过滤选择器 选择器 描述 返回 示例 重要 :first 返回第一个元素 单个元素     :last 返回最后一个元素 单个元素     :not(selector) ...

  2. jquery选择器(三)-过滤选择器

    一.基本过滤选择器 二.内容过滤选择器 1. 包含文本内容为“text”的元素 2. 含有某个选择器所匹配的父元素 3. 包含有子元素或者文本的父元素 4. 不含有子元素或者文本的父元素 三.可见性过 ...

  3. jQuery 简单过滤选择器

    <!DOCTYPE HTML> <html> <head> <title> 使用jQuery基本过滤选择器 </title> <scr ...

  4. jquery :checked(过滤选择器) 和 空格:checked(后代选择器)

    jquery 过滤选择器 和 后代选择器 <%@ page language="java" contentType="text/html; charset=UTF- ...

  5. jQuery过滤选择器

    //基本过滤器$('li:first').css('background','#ccc');//第一个元素$('li:last').css('background','red');//最后一个元素$( ...

  6. JQuery 可见性过滤选择器

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. JQuery 内容过滤选择器

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  8. jQuery选择器介绍：基本选择器、层次选择器、过滤选择器、表单选择器

    选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.因此,如果能熟练的使用选择器,不仅能简化代码,而且可以达到事半功倍的效果.jQuery选择器完全继承了 ...

  9. jQuery过滤选择器:not()方法使用介绍

    在jQuery的早期版本中,:not()筛选器只支持简单的选择器,说明我们传入到:not这个filter中的selector可以任意复杂,比如:not(div a) and :not(div,a) & ...

随机推荐

  1. javascript小实例，多种方法实现数组去重问题

    废话不多说,直接拿干货! 先说说这个实例的要求:写一个方法实现数组的去重.(要求:执行方法,传递一个数组,返回去重后的新数组,原数组不变,实现过程中只能用一层循环,双层嵌套循环也可写,只做参考): 先 ...

  2. 蓝牙物理链路类型：SCO和ACL链路

    蓝牙物理链路ACL(Asynchronous Connectionless), 另外的一种链路是SCO(Synchronous Connection Oriented)主要用来传输对时间要求很高的数据 ...

  3. Linux系统下安装MongoDB 指南

    1.首先连接到Linux系统. 2.到MongoDB官网下载合适的MongoDB安装压缩包. 下载页面:https://www.mongodb.org/downloads#production. 这里 ...

  4. oracle从零开始学习笔记 二

    多表查询 等值连接(Equijoin) select ename,empno,sal,emp.deptno from emp,dept where dept.deptno=emp.deptno; 非等 ...

  5. 如何用按钮的click事件去触发a标签的click事件

    在jQquery中,可以用如下方式触发input.a标签的click事件: <input id="my_input" /> <a id="my_a&qu ...

  6. iOS,Xcod7/8,iOS使用修改点

    1.Xcod7使用修改点 2.Xcode8使用修改点 Xcod7使用修改点 1.xcode7 新建的项目,Foundation下默认所有http请求都被改为https请求. HTTP+SSL/TLS+ ...

  7. 重启redis报错：Waiting for Redis to shutdown

    重启redis,发现一直报:Waiting for Redis to shutdown service redis_6379 restart Stopping ... OK (error) NOAUT ...

  8. here was insufficient free space available after evicting expired cache entries - consider increasing the maximum size of the cache

    tomcat重启后报以下错误: 09-Dec-2016 10:57:49.150 WARNING [localhost-startStop-1] org.apache.catalina.webreso ...

  9. The method setCharacterEncoding(String) is undefined for the type HttpServletResponse 是什么原因？

    response.setCharacterEncoding("gb2312"); 在Servlet2.3中是不行的,至少要2.4版本才可以,如果低于2.4版本,可以用如下办法: r ...

  10. js计时器方法 setInterval(),setTimeout()

    window.setInterval() 周期性地调用一个函数(function)或者执行一段代码. var intervalID = window.setInterval(func, delay[, ...