jquery:选择器 过滤器
容易理解错误的地方:
1.假如我们想要让一个表格中第八列的所有单元格,都隐藏起来。我们可能会这么写$("table tr td:eq(8)").css("display","none");但是结果和我们想的不一样,只有第一行,第八列的单元格被隐藏了,而其他的并没有。如果我们要这么写 $("table tr).find("td:eq(8)").css("display","none") 结果就和我们想要的一样了。
原因:alert($("table tr td").length) 结果为50 结果表格是10列5行。
2.
选择器和过滤器配合筛选
演示:找到最后一个tr,然后再找他的第二个子元素,再从第二个子元素中找到他的input子元素
$("tr:last>:nth-child(2)>:input").focus();
简单选择器的开头部分(显式或隐式)是标签类型声明。如果选取的元素和标签名无关,则可以使用通配符 * 来代替。如果选择器没有以标签名或通配符开头,则隐式含有一个通配符。
标签名或通配符制定了备选文档元素的一个初始集。在简单选择器中,标签类型声明之后的部分是由零个或多个过滤器组成。过滤器从左到右应用,和书写顺序一致,其中每一个都会缩小选中元素集。
其中每一个都会缩小选中的元素,这句话,这里我需要进行深入的解释一下,简单选择器,首先,标签名或通配符制定了备选文档元素的一个初始集,然后我们在这个初始集的基础上,用过滤器过滤,一个过滤器过滤完了之后,初始集会变小,接着用下一个过滤,直到最后。假若某一个过滤器一个也没过滤到,那么这个选择器就是选择失败了,什么也没找到。
举例:
<div id="c"> asdfasdf <div class="n">nnnn</div> <div class="n">n2n2n2n2n</div> <div class="t">tttt</div> <div class="t">t2t2t2t2t</div> </div>
$(".t:last-child").text("yoyo"); t2t2t2t2t会变成yoyo
$(".n:last-child").text("yoyo");没任何反应。因为.n过滤之后是nnnn和n2n2n2n2n,然后我又用last-child,他的意思是父节点的最后一个子元素,父节
点是id为c的div,他的最后一个子元素是t2t2t2t2t,两个没有交集,自然取不到。虽然我们不会用到先.class后last-child的方式,但是这里举一个这样的例
子。 如果想让div下面的样式为t的最后一个元素 改变 不能用last-child,需要用last,$(".n:last").text("yoyo");
举例:$("[onclick]:button").val("mabo"); 这里面就没有显示的标签名,所以不是以标签名开头,它会有一个隐式的通配符,其中[onclick]和:button都是过滤器 他代表的是选取 带有onclick属性的button按钮,为按钮的value属性值复制“mabo”,$("span.m").html("123"),这个例子里面就有显示的标签名,.m是过滤器。
组合选择器
$("div.t+div.n").html("hahahaha"); div.t是一个简单选择器,div是标签名.t是过滤器 .n也是过滤器 +是组合选择器的一种。
A B 从匹配选择器A的元素的子孙元素中,选取匹配选择器B的文档元素。注意,组合符就是空白符
A>B 从匹配选择器A的元素的子元素中,选取匹配选择器B的文档元素
A+B 从匹配选择器A的元素的下一个兄弟元素(忽略文本节点和注释)中,选取匹配选择器B的文档元素
A~B 从匹配选择器A的元素的后面的兄弟元素中,选取匹配选择器B的文档元素
过滤器列表
#id
.class
[attr] 匹配拥有attr属性(和属性值无关)的所有元素。要是和值有关,请用[attr=val]、[attr!=val][attr^=val][attr$=val][attr*=val] [attr~=val] 举例:$("[onclick]").append("哈哈") 对包含onclick属性的元素append哈哈
:button 匹配<button type="button">和<input type="button">元素 举例:$(":button").val("你妹") 把button的value属性值变成“你妹”
:empty 匹配没有子节点、没有文本内容的元素
:enabled
:first
:last
:first-child
:last-child
:only-child
:nth-child(n) 匹配的元素是其父节点的第n个子元素。n可以是树脂、单词even、单词odd或计算公式。使用nth-child(even)来选取那些在其父节点的子元素中排行第2或第4等序号的元素,nth-child(odd)则是第1、第3等元素。元素序号从0算。
:nth(n) 与eq(n)相同
:even 匹配列表中偶数序号的元素。由于第一个元素的序号为0,因此实际上选中的是第1个、第3个、第5个等元素
:odd
:parent
jquery:选择器 过滤器的更多相关文章
- JQuery选择器&过滤器
JQuery对象: JQuery对象的本质上是DOM数组,它对DOM元素进行了封装 JQuery对象和JavaScript对象可以互转(\$()/$obj()[i]),但是JQuery对象和Javas ...
- jQuery选择器与过滤器(二)
一.jQuery选择器1.基本选择器:所有选择器 *标签选择器 标签名ID选择器 #ID类选择器 .className组合选择器 selector1,selector2 ...
- jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html
我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮草案定义 ...
- jQuery-1.9.1源码分析系列(二)jQuery选择器续1
在分析之前说一点题外话. ownerDocument和 documentElement的区别 ownerDocument是Node对象的一个属性,返回的是某个元素的根节点文档对象:即document对 ...
- 二、jquery选择器
在jquery库中,可以通过选择器实现DOM元素快捷选择这一重要的核心功能. 1.选择器的优势 (1)代码更简单 由于在jquery库中,封装了大量可以通过选择器直接调用的方法或函数,使编写代码更加简 ...
- jquery 选择器(name,属性,元素)大全
jQuery 选择器大体上可分为:基本选择器.层次选择器.过滤选择器.表单选择器. 其中过滤选择器可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器.表单对象 ...
- jquery选择器总结 转自(永远的麦子)
jQuery选择器总结 阅读目录 1, 基本选择器? 2, 层次选择器? 3, 过滤选择器? 4, 表单选择器? jQuery选择器共有四大类,分别为基本选择器,层次选择器,过滤选择器和表单选择器.下 ...
- jQuery-认识JQuery,jQuery选择器
认识JQuery: 1.window.onload与$(document).ready()的区别 window.onload $(document).ready() 执行时机 必须等待网页中的所有内容 ...
- jQuery选择器和选取方法
我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮 ...
随机推荐
- SPOJ 422 Transposing is Even More Fun ——Burnside引理
这题目就比较有趣了. 大概题目中介绍了一下计算机的储存方法,给一个$2^a*2^b$的矩阵. 求转置.但是只能交换两个数,求所需要的步数. 首先可以把变化前后的位置写出来,构成了许多的循环.左转将狼踩 ...
- BZOJ4002 [JLOI2015]有意义的字符串 【数学 + 矩乘】
题目链接 BZOJ4002 题解 容易想到\(\frac{b + \sqrt{d}}{2}\)是二次函数\(x^2 - bx + \frac{b^2 - d}{4} = 0\)的其中一根 那么就有 \ ...
- 字符串函数 (strfun)
字符串函数 (strfun) 题目描述 两个等长的由大写英文字母构成的字符串a和b,从a中选择连续子串x,从b中选出连续子串y.子串x与子串y的长度相等. 定义函数f(x,y)为满足条件xi=yi(1 ...
- 核苷酸(evolution)
核苷酸(evolution) 题目描述 生物课是帕特里克最讨厌的课程,没有之一. 相比做一些无聊而又无趣的遗传题,他更喜欢其他所有的科目. 包括英语. 但是今天不同.他被一个关于RNA感染DNA的题目 ...
- vue的roter使用
1在src下建立router文件夹,再建立router.js import Vue from 'vue' import Router from 'vue-router' import home fro ...
- oracle char和varchar2的区别
char的长度是固定的,varchar2长度是可以变化的.比如:存储的是“abc”,对于char(20)来说,表示你存储的占20个字节(包括17个空字符):而对于varchar2(20)来说,表示你存 ...
- 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---47
以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:
- C#根据反射和特性实现ORM映射实例分析
本文实例讲述了C#根据反射和特性实现ORM 映射的方法.分享给大家供大家参考.具体如下: (一)关于反射 什么是反射? 反射就是在运行时,动态获取对象信息的方法.比如:运行时获得对象有哪些属性,方法, ...
- 【转载】NonEmpty和Non Empty的区别
转载来源:http://www.ssas-info.com/analysis-services-articles/50-mdx/2196-mdx-non-empty-vs-nonempty One o ...
- html5---音频视频基础一
//html5 音频和视频 :标签 a: audio,video b: source :视频容器 a:容器文件,类似于压缩了一组文件 -音频轨道 -视频轨道 -元数据:封面,标题,字幕等 -格式:.a ...