JQuery_过滤选择器

一、基本过滤器

　　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_过滤选择器的更多相关文章

jQueryt过滤选择器
jQueryt过滤选择器基本过滤选择器选择器描述返回示例重要 :first 返回第一个元素单个元素 :last 返回最后一个元素单个元素 :not(selector) ...
jquery选择器(三)-过滤选择器
一.基本过滤选择器二.内容过滤选择器 1. 包含文本内容为“text”的元素 2. 含有某个选择器所匹配的父元素 3. 包含有子元素或者文本的父元素 4. 不含有子元素或者文本的父元素三.可见性过 ...
jQuery 简单过滤选择器
<!DOCTYPE HTML> <html> <head> <title> 使用jQuery基本过滤选择器 </title> <scr ...
jquery :checked(过滤选择器) 和空格:checked(后代选择器)
jquery 过滤选择器和后代选择器 <%@ page language="java" contentType="text/html; charset=UTF- ...
jQuery过滤选择器
//基本过滤器$('li:first').css('background','#ccc');//第一个元素$('li:last').css('background','red');//最后一个元素$( ...
JQuery 可见性过滤选择器
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
JQuery 内容过滤选择器
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
jQuery选择器介绍：基本选择器、层次选择器、过滤选择器、表单选择器
选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.因此,如果能熟练的使用选择器,不仅能简化代码,而且可以达到事半功倍的效果.jQuery选择器完全继承了 ...
jQuery过滤选择器:not()方法使用介绍
在jQuery的早期版本中,:not()筛选器只支持简单的选择器,说明我们传入到:not这个filter中的selector可以任意复杂,比如:not(div a) and :not(div,a) & ...

随机推荐

关于Currency类型和 TCurrencyFiled的悲剧
这2天程序出问题, 用户结算金额经常莫名其妙的多出了小数点后几位, 不用思考肯定是因为浮点精度不准确的问题查了一下, 程序中的数据类型使用的是Currency, 按照数据类型的描述, 这个金额类型 ...
QTreeWidget
#include "dialog.h" #include "ui_dialog.h" #include<QtCore> #include<Qt ...
小试牛刀3之JavaScript基础题
JavaScript基础题 1.让用户输入两个数字,然后输出相加的结果. *prompt() 方法用于显示可提示用户进行输入的对话框. 语法: prompt(text,defaultText) 说明: ...
LuaXMLRPC笔记
XMLRPC XMLRPC 为以http为传输协议,使用xml格式化数据来执行远程过程调用, 区别于本地过程调用, 即发生在不同主机之间. 属于分布式计算的一种简单实现,比web service简单易 ...
discuz 二次开发
discuz 框架也算是比较流行的社区论坛框架,discuz 的基础架构采用世界上最流行的 web 编程组合 PHP + MySQL 实现,是一个经过完善设计,适用于各种服务器环境的高效论坛系统解决方 ...
matlab中动态绘图并保存为视频的小例子
如题,多的就不说了,先上一个效果: 每隔0.1秒,绿色的直线转动一个角度. 再看看代码如何实现: fuction main clear; clc; %%%%%%%%%%%%%%%%%%%%%%%%%% ...
MVC返回JSON数据格式书写方式
返回json数据格式,多个返回值加,隔开 [Route("api/users/web")] //如果不加这个路由请这样调用:/api/users/web?schoolname=十五 ...
Tomcat JSP提交参数中文乱码问题解决
参考: http://blog.csdn.net/error_case/article/details/8250209 中文乱码是个老生常谈的问题,一般情况下,只要保证页面,web服务器,数据库的编码 ...
递归函数 Python
函数: def fact(n): if n==1: return 1 return n * fact(n-1) 递归过程: print(fact(5)) >>fact(5) >> ...
Dynamics AX 2012 R2 创建一个专用的批处理服务器
安装额外AOS的另一原因,是要创建一个专用的Batch服务器. AOS实例在处理batch job时,会影响它的响应速度.安装一个专用Batch服务器,可以解决这个问题. 批处理服务器不能加到 ...

JQuery_过滤选择器

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

随机推荐

热门专题