[JQuery]学习——过滤选择器
来源:互联网 发布:网络架构师工资 编辑:程序博客网 时间:2024/06/08 21:58
第一 基本过滤器:
过滤名jQuery语法说明返回:first$('li:first')选取第一个元素单个元素:last$('li:last')选取最后一个元素单个元素:even$('li:even')选取索引(0开始)是偶数的所有元素集合元素:not(selector)$('li:not(.red)')选取class不是red的li集合元素:eq(index)$('li:eq(2)')选取索引(0开始)等于2的index元素单个元素:gt(index)$('li gt(2)')选取索引(0开始)大于index的元素集合元素:lt(index)$('li lt(2)')选取索引(0开始)小于index的元素集合元素:header$(':header')选取标题元素,h1-h6集合元素:animated$(':animated')选择正在执行的动画元素集合元素:focuns$(':focus')选取当前被焦点的元素集合元素jQuery 为最常用的过滤器提供了专用的方法,已达到提到性能和效率的作用:
$('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 的元素
第二 内容过滤器
过滤器名jQuery语法说明返回:contains(text)$(':contains("ccc")')选取含有ccc的文本元素元素集合:empty$(':empty')选取不包含子元素或空文本的元素元素集合:has(selector)$(':has(.red)')选取含有class是red的元素元素集合:parent$(':parent')选取含有子元素或文本的元素元素集合jQuery 提供了一个has()方法来提高:has 过滤器的性能:
$('ul').has('.red').css('background', '#ccc'); //选择子元素含有class 是red 的元素
jQuery 提供了一个名称和:parent 相似的方法,但这个方法并不是选取含有子元素或文本
的元素,而是获取当前元素的父元素,返回的是元素集合。
$('li').parent().css('background', '#ccc'); //选择当前元素的父元素
$('li').parents().css('background', '#ccc'); //选择当前元素的父元素及祖先元素
$('li').parentsUntil('div').css('background', '#ccc'); //选择当前元素遇到div 父元素停止
三 可见性过滤器
$('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'; //可以自定义各种判断 必须使用$(this)来表示要判断的元素否则,不管怎么样function里面返回是否是true或false都和调用的元素无关
}));
$('li').eq(2).hasClass('red'); //和is 一样,只不过只能传递class
//特殊要求函数返回,强大的function过滤
$('li').filter(function () {
return $(this).attr('class') == 'red' && $(this).attr('title') == '列表3';
}).css('background', '#ccc');
- [JQuery]学习——过滤选择器
- jQuery选择器——属性过滤选择器
- jQuery选择器——基本过滤选择器
- jQuery选择器——内容过滤选择器
- jQuery选择器——属性过滤选择器
- jQuery学习笔记(一)——基础选择器、过滤选择器、表单选择器
- 深入学习jQuery选择器系列第六篇——过滤选择器之状态选择器
- jQuery过滤选择器——基础过滤选择器
- jQuery过滤选择器——内容过滤选择器
- jQuery过滤选择器——可见度过滤选择器
- jQuery过滤选择器——属性过滤选择器
- jQuery过滤选择器——子元素过滤选择器
- jQuery过滤选择器——表单对象属性过滤选择器
- Jquery实战学习--过滤选择器
- jQuery学习之过滤选择器
- jquery学习之 过滤选择器
- jQuery学习四-过滤选择器
- 一步一步学习 JQuery (三) 过滤选择器:基本过滤选择器 && 内容过滤选择器 && 可见性过滤选择器
- Android之Monkey全参数(包含隐藏参数)
- ZOJ2110 Tempter of the Bone
- 【leetcode】Valid Palindrome
- 求解一个简单的创建单链表的问题为什么用二级指针 ?
- MFC多线程编程之三——线程间通讯
- [JQuery]学习——过滤选择器
- ubuntu 修改 ls 下的目录颜色
- C#操作注册表,设置系统环境变量
- MFC不能多线程操作控件的原因
- SP2-0667: Message file sp1<lang>.msb not found SP2-0750: You may need to set ORACLE_HOME to your Ora
- ubuntu下SHELL编程基础
- 开发汉澳sinox64位,对接汉澳矩阵电脑
- 如何使用MITK定义的插件
- OpenSSH