JQuery 选择器总结

初学JQuery 对选择器进行分类整理，以作查询记忆之用。

1.基本的三种选择器

id选择器：$("#id");

类选择器: $(".class");

元素选择器:$("element");

PS:全选择器:$("*"); 

2.层级选择器

子代选择器:$("#id>child")  注：只会选取子代元素，不会选取其它后代。

后代选择器：$("#id descendant") 选取所有后代。

相邻兄弟选择器:$("#id+next") 选取位于当前节点后面的相邻兄弟节点。

兄弟选择器:$("#id~siblings") 选取位于当前节点后面的所有兄弟节点   。

PS：以上四种选择器只是以id选择器为例而已可以替换成其他。

3.筛选选择器

基本筛选选择器

$("#id:first") 匹配第一个元素（后面省略拉）；

$(":last") 匹配最后一个元素；

$(":not(scrap)") 过滤掉不需要的scrap元素;

$(":eq(index)") 通过索引值index匹配相对应的节点； eq:equal

$(":gt(index)")大于索引值index的节点； gt：greater than

$(":lt(index)") 小于索引值index的节点; lt: less than

$(":even") 索引值为偶数的节点; even:偶数的

$(":odd") 索引值为奇数的节点；odd 奇数的

$(":header") 所有的标题元素 h1,h2,h3......

$(":animated") 所有正在执行动画的元素

$(":lang(language)")指定语言的所有元素

这里针对这个选择器说明一下

<div lang="en"></div> 比如针对这个html div元素 我们就可以通过该选择器获取他。其实lang只是起到一个声明的作用，对浏览器友好，没有实际作用效果。

$(":root") 该文档的根元素

内容筛选选择器

$(":contains(text)")所有包含text该指定内容的元素

$(":has(element)")所有含有element该指定元素的元素

$(":empty") 选择没有子元素和文本节点的元素 

  $(":parent") 选择含有子元素或者文本的元素 eg:$("a:parent") 选取所有含有a元素的元素。

可见性筛选选择器

$(":visible") 选择所有显示的元素

$(":hidden") 选取所有隐藏的元素

想要认识这两个选择器，我们首先要回忆下我们有哪些方法可以让一个元素不可见？？

1.width height 设置为0  这种情况无需多说 对于JQ来说 自然是属于visible。

2.visible:hidden  这也是属于visible，因为visible只是把元素隐藏起来，但它依然在文档中占据空间。

3.opacity:0 这个和上面一样，依然在文档中占据空间 所以依然属于visible

5.overflow:hidden 同上！！

5.display:none  哈哈 好不容易这个属于hidden (所以只有这一个么？？暂时只发现这一个，以后有发现补充)