//基本过滤器
$('li:first').css('background','#ccc');//第一个元素
$('li:last').css('background','red');//最后一个元素
$('li:not(.red)').css('background','red');//非class为red的元素
$('li:even').css('background','red');//索引为偶数的元素
$('li:odd').css('background','red');//索引为奇数的元素
$('li:eq(2)').css('background','red');//指定索引值的元素
$('li:gt(2)').css('background','red');//大于索引值的元素
$('li:lt(2)').css('background','red');//小于索引值的元素
$(':header').css('background','red');//页面所有h1 ~ h6元素

$('input').get(0).focus();//将焦点定位在第一个input文本框中
$(':focus').css('background','red');//设置焦点的元素颜色
$(':focus').val('bbbb');////将焦点的元素写入一个值

$('li').eq(2).css('background','#ccc');//元素li的第三个元素,负数从后开始
$('li').first().css('background','#ccc');//元素li的第一个元素
$('li').last().css('background','#ccc');//元素li的最后一个元素
$('li').not('.red').css('background','#ccc');//元素li不含class为 red的元素

$('#box li:last').css('background','#ccc');//#box元素的最后一个 li
$('#box li).last().css('background','#ccc');//同上

//内容过滤器
//选择元素文本节点含有 ycku.com 文本的元素
$('div:contains("ycku.com")').css('background','#ccc');
$('div:empty').css('background','#ccc');//选择空元素
$('ul:has(.red)').css('background','#ccc');//选择子元素含有class是red的元素
$(':parent').css('background','#ccc');//选择非空元素
//jQuery 提供了一个 has()方法来提高:has 过滤器的性能:
$('ul').has('.red').css('background','#ccc');//选择子元素含有class是red 的元素

$('li').parent().css('background','#ccc');//选择当前元素的父元素
$('li').parents().css('background','#ccc');//选择当前元素的父元素及祖先元素
$('li').parentsUntil('div').css('background','#ccc');//选择当前元素遇到div父元素停止

$('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(2)').css('background', '#ccc');//每个父元素第三个 li 元素

//可见性过滤器
$('p:hidden).size();//元素p隐藏的元素
$('p:visible').size();//元素p显示的元素

//子元素过滤器
$('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(2)').css('background', '#ccc');//每个父元素第三个li元素

//其它选择器
$('.red').is('li');//true,选择器,检测class是否为red
$('.red').is($('li'));//true,jQuery 对象集合,同上
$('.red').is($('li').eq(2));//true,jQuery对象单个,同上
$('.red').is($('li').get(2));//true,DOM对象同上
$('.red').is(function () {
//true,方法,同上
return $(this).attr('title') == '列表 3';
//可以自定义各种判断
}));
$('li').eq(2).hasClass('red');//和 is 一样,只不过只能传递 class
$('li').slice(0,2).css('color', 'red');//前三个变成红色

$("div").find("p").end().get(0);//返回div的原生 DOM
$('div').contents().size();//返回子节点(包括文本)数量
$('li').filter('.red').css('background','#ccc');//选择 li 的 class 为 red 的元素
$('li').filter('.red, :first, :last').css('background','#ccc'); //增加了首尾选择
//特殊要求函数返回
$('li').filter(function () {
return $(this).attr('class') == 'red' && $(this).attr('title') == '列表 3';
}).css('background', '#ccc');

过滤选择器简称:过滤器。它其实也是一种选择器,而这种选择器类似与 CSS3
(http://t.mb5u.com/css3/)里的伪类,可以让不支持 CSS3 的低版本浏览器也能支持。和常规
选择器一样,jQuery 为了更方便开发者使用,提供了很多独有的过滤器。
一.基本过滤器
过滤器主要通过特定的过滤规则来筛选所需的 DOM 元素,和 CSS 中的伪类的语法类
似:使用冒号(:)开头。

注意:
:focus 过滤器,必须是网页初始状态的已经被激活焦点的元素才能实现元素获取。
而不是鼠标点击或者 Tab 键盘敲击激活的

注意::first、:last 和 first()、last()这两组过滤器和方法在出现相同元素的时候,first 会
实现第一个父元素的第一个子元素,last 会实现最后一个父元素的最后一个子元素。所以,
如果需要明确是哪个父元素,需要指明:
$('#box li:last').css('background', '#ccc');
//#box 元素的最后一个 li
//或
$('#box li).last().css('background', '#ccc');
//同上

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

jQuery 提供了一个名称和:parent 相似的方法,但这个方法并不是选取含有子元素或文本
的元素,而是获取当前元素的父元素,返回的是元素集合。
$('li').parent().css('background', '#ccc');

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

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

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

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

$('li').slice(0,2).css('color', 'red');
//前三个变成红色
注意:这个参数有多种传法和 JavaScript 的 slice 方法是一样的比如:slice(2),从第三个
开始到最后选定;slice(2,4),第三和第四被选定;slice(0,-2),从倒数第三个位置,向前选定
所有;slice(2,-2),前两个和末尾两个未选定。

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

  1. jQuery过滤选择器:first和:first-child的区别,CSS伪类:first-child

    最近项目中遇到需求:只在第一列不能删除,不显示小叉号:点击可添加一列,后面的列右上角显示小叉号,可以点击删除. 我是使用以下方法解决这个小需求 :CSS伪类选择器:first-child设置所有小叉号 ...

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

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

  3. 10分钟-jQuery过滤选择器

    1.:first过滤选择器 本次我们介绍过滤选择器,该类型的选择器是依据某过滤规则进行元素的匹配.书写时以":"号开头,通经常使用于查找集合元素中的某一位置的单个元素. 在jQue ...

  4. jQuery过滤选择器:not()方法介绍

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

  5. 009 jquery过滤选择器-----------(表单对象属性过滤选择器 与 表单选择器)

    1.表单对象属性选择器 2.程序 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  6. Jquery过滤选择器,选择前几个元素,后几个元素,内容过滤选择器等

    一.基本过滤选择器(重点掌握下列八个):first 选取第一个元素 $("div:first").css("color","red");:l ...

  7. jQuery过滤选择器具体解释

    基本过滤选择器 选取第一个元素(:first) //选择第一个div元素. $('#btn1').click(function(){ $('div:first').css("backgrou ...

  8. 基础2.Jquery过滤选择器

                         1.基础选择器: 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择ID为divId的元素 element 根据元素的 ...

  9. 【jQuery】(2)---Jquery过滤选择器

                         1.基础选择器: 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择ID为divId的元素 element 根据元素的 ...

随机推荐

  1. android studio问题-ICCP:Not recognizing known sRGB profile

    转:http://my.oschina.net/1pei/blog/479162 PNG格式:每个PNG文件是由一个PNG标识(signature),后面跟一些数据块(chunk),每个chunk由 ...

  2. SSH整合之spring整合struts2(续上)

    一.项目结构 二.新建UserAction,继承自ActionSupport,并实现ModelDriven<User>接口:getModel方法是用来装配对象属性的:注意,userServ ...

  3. Get value from agent failed: cannot connect to [[192.168.186.130]:10050]: [113]No route to host

    客户端配置zabbix-agent 后,网页端出现Get value from agent failed: cannot connect to [[192.168.186.130]:10050]: [ ...

  4. PHP定界符 heredoc

    <?php echo <<<EOT //如果这个后面有空格,报错... haha EOT; //如果这个后面有空格,报错[如果没有空格,就这样文件直接结束,同样报错,请在EOT ...

  5. 配置 Apache+php多端口多站点(转载)

    配置httpd.conf监听多个端口 #增加监听端口 等以下内容都设置以后,可以通过 netstat -n -a查看端口是否开启 开启虚拟站点 # Virtual hosts#Include conf ...

  6. ASP.NET MVC 开启AJAX跨域请求

    <system.webServer> <httpProtocol> <customHeaders> <add name="Access-Contro ...

  7. ASP.NET MVC 站点设置.html 为起始页

    1.  删除 controller="XX" 2. 确保你的工程根目录下的*.htm或*.html文件名在IIS默认文档中存在 搞定

  8. UICollectionViewController用法

    在iOS 6 发布前,开发人员习惯使用UITableView来展示几乎所有类型的数据集合.ios 6 为 IOS 引入了全新的控制器,用来显示数据集合,集合视图控制器是与表视图控制器类似的全新UI框架 ...

  9. JNI环境变量——JNIEnv*的使用 &&配置jd环境变量

      如果没有配置环境变量,先配置环境变量,如下: 1.右键我的电脑——高级——环境变量——下面的系统变量 2.选择[新建系统变量]--弹出“新建系统变量”对话框,在“变量名”文本框输入“JAVA_HO ...

  10. 用sql合并列,两句话合为一句

    合并bc两列 UPDATE `test` SET `a`=concat(`b`,`c`) 清空a列 UPDATE `test` SET `a` = NULL