容易理解错误的地方:

  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:选择器 过滤器的更多相关文章

  1. JQuery选择器&过滤器

    JQuery对象: JQuery对象的本质上是DOM数组,它对DOM元素进行了封装 JQuery对象和JavaScript对象可以互转(\$()/$obj()[i]),但是JQuery对象和Javas ...

  2. jQuery选择器与过滤器(二)

    一.jQuery选择器1.基本选择器:所有选择器    *标签选择器    标签名ID选择器    #ID类选择器    .className组合选择器    selector1,selector2 ...

  3. jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html

    我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮草案定义 ...

  4. jQuery-1.9.1源码分析系列(二)jQuery选择器续1

    在分析之前说一点题外话. ownerDocument和 documentElement的区别 ownerDocument是Node对象的一个属性,返回的是某个元素的根节点文档对象:即document对 ...

  5. 二、jquery选择器

    在jquery库中,可以通过选择器实现DOM元素快捷选择这一重要的核心功能. 1.选择器的优势 (1)代码更简单 由于在jquery库中,封装了大量可以通过选择器直接调用的方法或函数,使编写代码更加简 ...

  6. jquery 选择器(name,属性,元素)大全

    jQuery 选择器大体上可分为:基本选择器.层次选择器.过滤选择器.表单选择器. 其中过滤选择器可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器.表单对象 ...

  7. jquery选择器总结 转自(永远的麦子)

    jQuery选择器总结 阅读目录 1, 基本选择器? 2, 层次选择器? 3, 过滤选择器? 4, 表单选择器? jQuery选择器共有四大类,分别为基本选择器,层次选择器,过滤选择器和表单选择器.下 ...

  8. jQuery-认识JQuery,jQuery选择器

    认识JQuery: 1.window.onload与$(document).ready()的区别 window.onload $(document).ready() 执行时机 必须等待网页中的所有内容 ...

  9. jQuery选择器和选取方法

        我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮 ...

随机推荐

  1. 删除ARCSDE表空间和用户后,新建时出现error -1:O的解决办法

    对于刚开始使用arcsde的用户,可能会出现各种问题,慢慢来就会找到解决办法 当我们删除用户和表空间时,在服务器本地还保留这sde.dbf文件(删除时选择了删除本地文件,不知道为什么), 我们可以换一 ...

  2. 【Luogu】P3750分手是祝愿(期望DP)

    题目链接 这题好喵啊…… 设f[i]是最少用i次才能全关上转移到最少用i-1次才能全关上灯的期望值,那么n个灯里有i个是正确的,剩下的都是不正确的 因此期望是$f[i]=frac{n}{i}+frac ...

  3. TTL 和 RS-232

    下面详细讲解下面这三种的区别 USB转TTL串口板(常用芯片PL2303,CH340) USB转RS-232串口线 TTL转RS-232串口板,RS-232转TTL串口板(常用芯片MAX3232,MA ...

  4. 学习RMQ-ST表

    RMQ一般是一个二维数组,用$dp[i][j]$表示起点为i开始连续数$2^j$个元素其中的最值,由于对于一个闭区间有:$R-L+1=len$因此也可以用另外一种记法:闭区间为$[i,i+2^j-1] ...

  5. [HDU3516] Tree Construction [四边形不等式dp]

    题面: 传送门 思路: 这道题有个结论: 把两棵树$\left[i,k\right]$以及$\left[k+1,j\right]$连接起来的最小花费是$x\left[k+1\right]-x\left ...

  6. C++ Contest Code preprocessor

    大概可以拿来方便拉模板 变量名.语法都是瞎整的你感觉有用随便用好了.. #include<bits/stdc++.h> using namespace std; map<string ...

  7. 当时用vuex的时候,使用...对象展开扩展符报错的解决办法

    出现这种问题的主要原因是当前的babel不支持...对象展开扩展符,只需要安装一个插件然后再在.babelrc当中进行下配置就好了 npm i babel-plugin-transform-objec ...

  8. 2017最好的JavaScript框架、库和工具 — SitePoint

    与开发者数量相比,可能有更多的JavaScript框架.库和工具.截止到2017年5月,在GitHub上快速搜索能搜到超过110万的JavaScript项目. 在npmjs上有50万的可用包,并且这些 ...

  9. 80人环游世界(bzoj 2055)

    Description     想必大家都看过成龙大哥的<80天环游世界>,里面的紧张刺激的打斗场面一定给你留下了深刻的印象.现在就有这么     一个80人的团伙,也想来一次环游世界. ...

  10. 【HDOJ5975】Aninteresting game(BIT原理)

    题意:给定n个区间,第i个区间的范围是[i-lowbit(i)+1,i].一共有q组询问,询问有两种: 1 x y:询问sigma lowbit(i) (x<=i<=y) 2.x:询问有几 ...