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> < ...
随机推荐
- Java随笔一
1.继承:子类调用超类构造器时,super调用构造器的语句必须是子类构造器的第一条语句: Java没有多继承,但是可以构造实现多个接口的类: 2.多态:Java 中,对象变量是多态的.一个父类变量既可 ...
- 函数中的static静态变量
静态变量仅在局部函数域中存在且只被初始化一次,当程序执行离开此作用域时,其值不会消失,会使用上次执行的结果. <?php function testStatic($start,$end){ st ...
- python小细节
1.tab缩进2.读取文件,在文件名前加r或者R.这是因为python原始字符串特性,即在字符串的前面已R或者小写字母r开始,则字符串不对\进行转移,直接输出,通常用于表示windows的路径.fil ...
- android 查看MD5、sha1值命令
cmd 进去keystore 文件所在目录 keytool -list -v -keystore xxx.keystore debug.keystore 默认目录:C:\Documents and S ...
- HTML5,jQuery,ajax基础面试
简要描述HTML5中的本地存储 答案: 很多时候我们会存储用户本地信息到电脑上,例如:比方说用户有一个填充了一半的长表格,然后突然网络连接断开了,这样用户希望你能存储这些信息到本地,当网络回复的时候, ...
- Codeforces Round #168 (Div. 2)
A. Lights Out 模拟. B. Convex Shape 考虑每个黑色格子作为起点,拐弯次数为0的格子构成十字形,拐弯1次的则是从这些格子出发直走达到的点,显然需要遍历到所有黑色黑色格子. ...
- 《C专家编程》第一章——C:穿越时空的迷雾
这一章讲的是C语言的发展史,包括它是多么不经意的诞生,而后又经历了早期C.K&C.ANSI C的各种阶段,直到它现在形成的这个样子.C语言从来不是一门完美的语言,所以它一直在发展,直到今日,它 ...
- js模块化AMD/CMD
JavaSript模块化 在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发? 模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统 ...
- JavaScript 消息框+特殊字符
JavaScript 中创建三种消息框:警告框.确认框.提示框: 1.警告框: 警告框经常用于确保用户可以得到某些信息. 当警告框出现后,用户需要点击确定按钮才能继续进行操作 语法:alert(&qu ...
- 关于是用dotnet获取本机IP地址+计算机名的方法
印象中在maxscript帮助文档里找到过方法,但是当时没记下来.只能通过dotnet实现了. 如果电脑有无线网卡和本地连接,可能会出现乱码,也问了写dotnet的朋友,提供了一些思路,不过最终还是使 ...