jQuery选择器详解.docx

jQuery选择器详解 页面的任何操作都需要节点的支撑，开发者如何快速高效的找到指定的节点也是前端开发中的一个重点。jQuery提供了一系列的选择器帮助开发者达到这一目的，让开发者可以更少的处理复杂选择过程与性能优化，更多专注业务逻辑的编写。jQuery几乎支持主流的css1~css3选择器的写法。 选择器存在的意义在于更快，更准确，更便捷的找到HTML文档DOM树中的节点。 下面分别介绍jQuery中的ID选择器，标签选择器，元素选择器，全选择器， 层级选择器与筛选选择器。 ID选择器： 选择器描述$( #id )  通过id选择处理对象，id是唯一的，每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id，将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的  类选择器： 标签描述$( .class )  类选择器，顾名思义，通过class样式类名来获取节点，相对id选择器来说，效率相对会低一点，但是优势就是可以多选  元素（标签）选择器： 标签描述$( element )  元素选择器，根据给定（html）标记名称选择所有的元素，有哪些信誉好的足球投注网站指定元素标签名的所有节点，这个是一个合集的操作。同样的也有原生方法getElementsByTagName()函数支持  全选择器： 标签描述$( * )  jQuery中可以通过传递*选择器来选中文档页面中的元素，抛开jQuery，如果要获取文档中所有的元素，通过document.getElementsByTagName()中传递*同样可以获取到  层级选择器： 文档中的所有的节点之间都是有这样或者那样的关系。我们可以把节点之间的关系可以用传统的家族关系来描述，可以把文档树当作一个家谱，那么节点与节点直接就会存在父子，兄弟，祖孙的关系了。 标签描述$(“parentchild”)子选择器，选择指定parent元素的“child”直接子元素。$(“ancestor descendant)后代选择器，选择指定祖先的所有后代$(“prev+next”)相邻兄弟选择器，选择所有在prev元素后的next元素。$(“prev~siblings”)一般兄弟选择器，匹配prev后的所有兄弟元素，并匹配过滤”siblings”选择器。细观察层级选择器之间还是有很多相似与不同点 1:层级选择器都有一个参考节点 2:后代选择器包含子选择器的选择的内容 3:一般兄弟选择器包含相邻兄弟选择的内容: 4：相邻兄弟选择器和一般兄弟选择器所选择到的元素，必须在同一个父元素下 基本筛选选择器： 筛选选择器的用法与CSS中的伪元素相似，选择器用冒号“：”开头。针对的都是dom节点。 标签描述$(“:first”)匹配第一个元素。$(“:last”)匹配最后一个元素。$(“:not(selector)”)选择所有元素中去除不匹配给定选择器的元素$(“:eq(index)”)在匹配的集合中选择索引值为index的元素$(“:gt(index)”)在匹配的集合中选择所有索引值大于index的元素$(“:lt(index)”)在匹配的集合中选择所有索引值小于index的元素$（“:even”）在匹配的集合中选择所有索引值为偶数的元素$(“:odd”)在匹配的集合中选择所有索引值为奇数的元素$(“:header”)选择所有标题元素，如h1,h2,h3等$(“:lang(language))选择指定语言的所有元素$(“:root”)选择该文档的根元素，一般为window节点$(“:animate”)选择所有正在执行的动画元素注意事项： 1 :eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素，根据之前匹配的元素在进一步筛选。 2：注意jQuery合集都是从0开始索引，gt是一个段落筛选，从指定索引的下一个开始，gt(1) 实际从2开始 内容筛选选择器： 基本筛选选择器针对的都是元素DOM节点，如果我们要通过内容来过滤，jQuery也提供了一组内容筛选选择器，当然其规则也会体现在它所包含的子元素或者文本内容上。 标签描述$(“:contains(text))选择所有包含指定文本的元素$(“:parent”)选择所有包含子节点与文本的元素$(“:empty”)选择所有没有子节点（包括文本节点）的元素$(“:has(selector))选择包含指定元素（Selector）的元素注意事项： 1