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) & ...

随机推荐

PCM-脉码调制
1. PCM---Pulse Code Modulation,脉码调制. 在光纤通信系统中,光纤中传输的是二进制光脉冲“0”码和“1”码,它由二进脉冲编码调制制数字信号对光源进行通断调 ...
Git command line
# Pull the repo from master git pull # Create branch for myself in local git branch john/jenkins_cod ...
angularJs实现信息数据提交功能
如下简单的报名提交的实现 1.数据绑定 2.$http.post()提交数据一.数据绑定  <div class="attend_box" ...
超简易静态Web服务器
使用 HttpListener 写的一个超简易静态Web服务器开发环境:VS2010 + .NET2.0 http://files.cnblogs.com/zjfree/EasyIIS.rar
《Android 性能测试初探》
移动测试站点推荐: https://testerhome.com/ 专项相关帖子推荐: <Android 性能测试初探>合集移动无线应用专项测试浅谈公开课: [腾讯课堂]Testerh ...
angularJs自定义指令.directive==类似自定义标签
创建自定义的指令除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名 ...
4.用PHP打印出前一天的时间格式是2006-5-10 22:21:21
echo date('Y-m-d H:i:s', strtotime('-1 days'));
Java语言的特点
一. 面向对象:其实是现实世界模型的自然延伸.现实世界中任何实体都可以看作是对象.对象之间通过消息相互作用.另外,现实世界中任何实体都可归属于某类事物,任何对象都是某一类事物的实例.如果说传统的过程式 ...
paper 94：视觉领域博客资源1之中国部分
这是收录的图像视觉领域的博客资源的第一部分,包含:中国内地.香港.台湾这些名人大家一般都熟悉,本文仅收录了包含较多资料的个人博客,并且有不少更新,还有些名人由于分享的paper.code或者数据集不 ...
AJAX-----13HTML5中新增的API---FormData
FormData 表单数据对象,这是在HTML5中新增的一个API,他能以表单对象做参数,自动的将表单的数据打包,当ajax发送数据是,发送FormData内的表单数据给后端即可 <!DOCTY ...

JQuery_过滤选择器

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

随机推荐

热门专题