JQuery 1.*速成版之二
过滤选择器简称:过滤器。它其实也是一种选择器,而这种选择器类似与 CSS3(http://t.mb5u.com/css3/)里的伪类,可以让不支持 CSS3 的低版本浏览器也能支持。和常规
选择器一样,jQuery 为了更方便开发者使用,提供了很多独有的过滤器。
一.基本过滤器
过滤器主要通过特定的过滤规则来筛选所需的 DOM 元素,和 CSS 中的伪类的语法类似:使用冒号(:)开头。
过滤器名 jQuery 语法说明 返回
:first $('li:first') 选取第一个元素 单个元素
:last $('li:last') 选取最后一个元素 单个元素
:not(selector) $('li:not(.red)') 选取class 不是red 的li 元素 集合元素
:even $('li.even') 选择索引(0开始)是偶数的所有元素 集合元素
:odd $('li:odd') 选择索引(0开始)是奇数的所有元素 集合元素
:eq(index) $('li:eq(2)') 选择索引(0开始)等于index的元素 单个元素
:gt(index) $('li:gt(2)') 选择索引(0开始)大于index的元素 集合元素
:lt(index) $('li.lt(2)') 选择索引(0开始)小于index的元素 集合元素
:header $(':header') 选择标题元素,h1 ~ h6 集合元素
:animated $(':animated') 选择正在执行动画的元素 集合元素
:focus $(':focus') 选择当前被焦点的元素 集合元素
注意: :focus 过滤器, 必须是网页初始状态的已经被激活焦点的元素才能实现元素获取。而不是鼠标点击或者Tab键盘敲击激活的。
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的元素
注意::first、:last 和first()、last()这两组过滤器和方法在出现相同元素的时候,first会实现第一个父元素的第一个子元素,last会实现最后一个父元素的最后一个子元素。所以,如果需要明确是哪个父元素,需要指明:$('#box li:last').css('background', '#ccc'); //#box元素的最后一个 li
//或$('#box li).last().css('background', '#ccc'); //同上
<------------------------------------------------------------------------------------------------------------------------------------------------------------------------>
二.内容过滤器
内容过滤器的过滤规则主要是包含的子元素或文本内容上。
过滤器名 jQuery 语法说明 返 回
:contains(text) $(':contains("ycku.com")') 选取含有"ycku.com"文本的元素 元素集合
: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'); //选择当前元素的父元素
<------------------------------------------------------------------------------------------------------------------------------------------------------------------------>
三.可见性过滤器
可见性过滤器根据元素的可见性和不可见性来选择相应的元素。
过滤器名 jQuery 语法说明 返回
:hidden $(':hidden') 选取所有不可见元素 集合元素
:visible $(':visible') 选取所有可见元素 集合元素
$('p:hidden).size(); //元素 p 隐藏的元素 $('p:visible').size(); //元素 p 显示的元素
注意::hidden过滤器一般是包含的内容为:CSS 样式为display:none、input表单类型为type="hidden"和 visibility:hidden的元素。
<------------------------------------------------------------------------------------------------------------------------------------------------------------------------>
四.子元素过滤器
子元素过滤器的过滤规则是通过父元素和子元素的关系来获取相应的元素。
过滤器名 jQuery 语法说明 返回
:first-child $('li:first-child') 获取每个父元素的第一个子元素 集合元素
:last-child $('li:last-child') 获取每个父元素的最后一个子元素 集合元素
:only-child $('li:only-child') 获取只有一个子元素的元素 集合元素
:nth-child(odd/even/eq(index)/n[+1]) $('li:nth-child(even)') 获取每个自定义子元素的元素(索引值从1 开始计算) 集合元素
<------------------------------------------------------------------------------------------------------------------------------------------------------------------------>
五.其他方法
jQuery 在选择器和过滤器上,还提供了一些常用的方法,方便我们开发时灵活使用。
方法名 jQuery 语法说明 返回
is(s/o/e/f) $('li').is('.red') 传递选择器、DOM、jquery对象或是函数来匹配元素结合 集合元素
hasClass(class) $('li').eq(2).hasClass('red') 其实就是 is("." + class) 集合元素
slice(start, end) $('li').slice(0,2) 选择从start 到end位置的元素,如果是负数,则从后开始 集合元素
filter(s/o/e/f) $('li').filter('.red') --------- ---
end() $('div').find('p').end() 获取当前元素前一次状态 集合元素
contents() $('div').contents() 获取某元素下面所有元素节点,包括文本节点,如果是 iframe,则可以查找文本内容 集合元素
<------------------------------------------------------------------------------------------------------------------------------------------------------------------------>
实例:
$(function () { //$('li:first').css('background', '#ccc');
//$('li:last').css('background', '#ccc');
//$('#box li:last').css('background', '#ccc');
//$('ul:first li:last').css('background', '#ccc');
//$('li:not(.red)').css('background', '#ccc');
//$('li:even').css('background', '#ccc');
//$('li:odd').css('background', '#ccc');
//$('li:eq(2)').css('background', '#ccc');
//$('li:eq(-2)').css('background', '#ccc');
//$('li:gt(3)').css('background', '#ccc');
//$('li:lt(2)').css('background', '#ccc');
//$('div :header').css('background', '#ccc');
//$('input').get(0).focus();
//$(':focus').css('background', 'red'); //$('li').first().css('background', '#ccc');
//$('li').last().css('background', '#ccc');
//$('li').not('.red').css('background', '#ccc');
//$('li').eq(2).css('background', '#ccc');
//$('div:contains("ycku.com")').css('background', '#ccc');
//$('div:empty').css('background', '#ccc').css('height','20px');
$('ul:has(.red)').css('background', '#ccc');
//$('div:parent').css('background', '#ddf');
//$('ul').has('.red').css('background', '#ccc'); //alert($('li').parent().size());
//alert($('li').parent().get(0));
//$('li').parent().css('background', '#ccc');
//$('li').parents().css('background', '#ccc');
//$('li').parentsUntil('body').css('background', '#ccc'); //alert($('div:hidden').size());
//$('div:hidden').css('background', '#ccc').show(1000);
//alert($('div:visible').size()); });
js code1:
$(function () { //$('li:first-child').css('background', '#ccc');
//$('li:last-child').css('background', '#ccc');
//$('li:only-child').css('background', '#ccc');
//$('li:nth-child(even)').css('background', '#ccc');
//$('li:nth-child(odd)').css('background', '#ccc');
//$('li:nth-child(5n)').css('background', '#ccc');
//$('li:nth-child(4n+1)').css('background', '#ccc'); //alert($('.red').is('li'));
//alert($('.red').is('div'));
//alert($('.red').is($('li')));
//alert($('.red').is($('div')));
//alert($('.red').is($('li').get(2)));
//alert($('.red').is($('li').eq(2))); //alert($('.red').is(function () {
// return $(this).attr('title') == '列表3';
//})); //注意,必须使用$(this)来表示要判断的元素,否则,不管function里面是否返回true或false都和调用的元素无关了 //alert($('li').eq(2).hasClass('red')); //$('li').slice(5,7).css('background', '#ccc');
//$('li').slice(2).css('background', '#ccc');
//$('li').slice(0, -2).css('background', '#ccc');
//$('li').slice(2, -2).css('background', '#ccc'); //alert($('#box').find('li').end().get(0));
//alert($('#box').find('li').parent().get(0)); //$('#box').next('ul').end().css('background', '#ccc'); //alert($('div:first').children().size());
//alert($('div:first').contents().size()); //$('li').filter('.red, :first-child, :last-child').css('background', '#ccc'); $('li').filter(function () {
return $(this).attr('class') == 'red' && $(this).attr('title') == '列表3';
}).css('background', '#ccc'); });
js code2:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>过滤选择器</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div>我们的新域名为:<span>ycku.com</span></div>
<div style="display:none;">我们的新域名为:ycku.com</div>
<div>我们的旧域名为:yc60.com</div>
<div></div>
<div></div> <ul>
<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> <input type="text" /> <h3>我是标题</h3> </body>
</html>
html code:
JQuery 1.*速成版之二的更多相关文章
- jQuery Mobile (整合版)
jQuery Mobile (整合版) 前言 为了方便大家看的方便,我这里将这几天的东西整合一下发出. 里面的例子请使用手机浏览器查看. 什么是jQuery Mobile? jquery mobile ...
- Java正则速成秘籍(二)之心法篇
导读 正则表达式是什么?有什么用? 正则表达式(Regular Expression)是一种文本规则,可以用来校验.查找.替换与规则匹配的文本. 又爱又恨的正则 正则表达式是一个强大的文本匹配工具,但 ...
- [Unity+Android]横版扫描二维码
原地址:http://blog.csdn.net/dingxiaowei2013/article/details/25086835 终于解决了一个忧伤好久的问题,严重拖了项目进度,深感惭愧!一直被一系 ...
- 一句代码美化你的下框之jquery.selectMM修复版(jquery.selectMM v0.9 beta 20141217)
一句代码美化你的下框之jquery.selectMM修复版(jquery.selectMM v0.9 beta 20141217) 浏览效果: http://www.beyond630.com/jqu ...
- NewLife.XCode 上手指南2018版(二)增
目录 NewLife.XCode 上手指南2018版(一)代码生成 NewLife.XCode 上手指南2018版(二)增 NewLife.XCode 上手指南2018版(三)查 NewLife.XC ...
- 图片人脸检测——OpenCV版(二)
图片人脸检测 人脸检测使用到的技术是OpenCV,上一节已经介绍了OpenCV的环境安装,点击查看. 往期目录 视频人脸检测——Dlib版(六)OpenCV添加中文(五)图片人脸检测——Dlib版(四 ...
- 锋利的jQuery(第二版)学习总结
通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结. 此书主要讲解了jQuery的常用操作,包括认识jQuery,j ...
- c++ primer plus 第6版 部分二 5- 8章
---恢复内容开始--- c++ primer plus 第6版 部分二 5- 章 第五章 计算机除了存储外 还可以对数据进行分析.合并.重组.抽取.修改.推断.合成.以及其他操作 1.for ...
- jquery实现一些小动画二
jquery实现一些小动画二 jquery实现拖拽功能 <!DOCTYPE html> <html lang="en"> <head> < ...
随机推荐
- 从service弹出系统级自定义提示框,可在任意页面弹出
添加权限 <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" /> // 显示 ...
- Android WebView 保存cache至External Storage
源博客: http://www.devahead.com/blog/2012/01/saving-the-android-webview-cache-on-the-sd-card/ 其中心思想是,通过 ...
- 关于peersim样例配置文件的超详细解读(新手勿喷)
相信很多兄弟一开始接触peersim,对配置文件还是有点不适应,我看了好久的样例的配置文件,一层层去找对应的文件的方法,终于好像悟懂了一点,记下来以后回顾. 贴上代码,一点点分析. 首先要说下所谓的配 ...
- SqlServer性能优化 自定义动化性能收集(四)
配置数据收集器: 1.创建登录名并映射角色 2.配置管理数据仓库 3.创建收集组.收集项----MSDB数据存储 sp_syscollector_create... 4.自动配置相关job 具体步 ...
- Xcode7 Cocoapods 安装或更新出现错误
好长时间没有玩过CocoaPods了,今天在执行 pod install --verbose --no-repo-update 的时候出现了错误如下 [MT] DVTAssertions: ASSER ...
- 【JS】falsy与truthy
1.Falsy值,当进行逻辑判断时均为false(如!!false==false).六个Falsy值:false.undefined.null.正负0.NaN."". 2.其余所有 ...
- JavaScript 运动框架
<script> window.onload=function (){ var oDiv=document.getElementById("div1"); oDiv.o ...
- MyEclipse JAX-WS Web Service
在Myeclipse8.5下开发Web service程序,目前系统支持的开发框架有3个,JAX-WS,REST(JAX-RS),XFire.其中系统建议不要使用XFire 的框架,可能是要被淘汰了( ...
- linux系统下,查看端口号被哪个应用占用
netstat -tunlp 会把所有端口和所有对应的程序显示出来. 用grep管道可过滤出来需要的信息.比如,17059端口号被占用了. 第一步:netstat -tunlp | grep 1705 ...
- Windows下的Eclipse启动出现:a java runtime environment(JRE) or java development kit(JDK) must be
打开eclipse的时候回遇到这种情况 解决方案: 进入eclipse.exe所在的目录,在eclipse.ini文件中加入以下两行: -vm <your path to jdk|jre> ...