【jQuery学习笔记------选择器】

选择器引擎Sizzle

jQuery从1.3版本开始，使用了新的选择器引擎Sizzle 它是jQuery作者John Resig开发的DOM选择引擎。

选择器和过滤器

第一类，选择器（selector）。即根据给定的选择符，从DOM文档树找到相关的元素节点，并存储到结果集中

第二类，过滤器（filter）。根据表达式的条件，在结果集中过滤元素。

由于可以直接使用document.getElementsByTagName()方法进行选择，因此对于类型选择器来说，直接使用选择即可。

类型选择器相互之间还可以组成各种形式的复合选择器。例如：

*

E F

E~F

E+F

E>F

E/F

E

虽然这些特殊形式的类型选择器由多个选择器构成，但是它们都可以从文档直接选择，故我们可以统一把它们归为选择器类型。而对于ID选择器和Class选择器来说：

如果它们在selector字符串的起始位置，那么它们也可以完成选择功能。例如$(“#id”)、$(“.class”)

如果它们不在起始位置，那么就应该作为筛选器来实现。如：$(“div#id”)

Sizzle引擎结构

jQuery的CSS选择器引擎Sizzle共有1000多行代码，占据了jQuery框架四分之一的份额。这些代码被直接调用的匿名函数封闭在一个独立的空间中，外界是无法访问的。通过下面的代码可以把引擎接口传递给jQuery空间下的四个公共函数

jQuery.find =Sizzle;

jQuery.filter =Sizzle.filter;

jQuery.expr = Sizzle.selectors

jQuery.expr[“:”] =jQuery.expr.filters;

操作类数组

1定位元素

jQuery定义了get()和index()方法来定位元素，它们是集合操作最基本的方法。另外，jQuery还定义了get(index)和eq(index)方法，以读取指定位置的元素。

区别：get(index)方法读取集合中的元素，它与直接通过[i]来读取元素的方法是完全相同的。eq(index)方法克隆集合中的元素，也就是说不修改数组元素。

简单选择器

#id

element

.class

*

selector,selector2,selectorN

如果选择器包含特殊字符，则可以在jQuery中使用两个斜杠对特殊字符进行转义。

如：#a.b

#a:b

#[div]

它们的id特性值都包含了特殊的字符，如果不进行处理，jQuery在解析时会因误解而不能够达到目的。

$(“#a\\.b”);

$(“#a\\:b”);

$(“#\\[ab\\]”);

但是我要使得原生的javascript的getElementById就不用顾虑这个问题。

选择指定类元素

js实现

document.getElementByClassName= function(className){

var el = [],

_el = document.getElementsByTagName(“*”);

for(var i=0;i<_el.length;i++){

if(_el.className==”className”){

el[el.length] =_el.[i];

}

}

return el;

}

关系 选择器

ancestor descendant	在给定的祖先元素下匹配所有的后代元素。
parent>child	在给定的父元素下匹配所有子元素。parent表示任何选择器，child表示匹配元素的选择器，并且它是第一个选择器的子元素。
prev+next	匹配所有紧接在prev元素后的next元素。next表示有效选择器并且紧接着prev选择器
prev~sibling	匹配prev元素之后的所有siblings元素。siblings做为一个选择器，并且它作为第一个选择器的同辈。

子元素选择器

:nth-child	匹配父元素下的第N个子或奇偶元素
:first-child
:last-child
:only-child

:nth-child(event); //偶

:nth-child(odd); //奇

:nth-child(3n); //匹配第3个及其后面间隔3的每个元素

:nth-child(2); //匹配第2个元素

:nth-child(3n+1); //匹配第1个及后面间隔3的每个元素

:nth-child(3n+2); //匹配第2个及后面间隔3的每个元素

:eq()是从0算起，而:nth-child是从1开始的

定位过滤器

:first	匹配找到的第一个元素，如：“tr:first”
:last	匹配找到的最后一个元素，如：“tr:last”
:not	去除所有与给定选择器匹配的元素如，$(“input:not(:checked)”)，可以匹配所有未选中的input元素。
:even
:odd
:eq	索引从0开始的元素
:gt	索引大于，索引从0开始
:lt	索引小于，索引从0开始
:header	h1 h2 h3之类的元素
:animated	所有正在执行动画效果的元素。

内容过滤器

:contains	匹配包含给定文本的元素，如“div:contains(‘图片’)”匹配包含“图片”的div元素
:empty	不含子元素或文本的空元素
:has	匹配含有选择器所匹配的元素的元素，如$(‘div:has(p)’)
:parent	匹配含有子元素或者文本的元素

可见过滤器

:hidden	匹配所有不可见元素，或者type为hidden的元素
:visible	匹配所有的可见元素

属性选择器

[attribute]	匹配包含给定属性的元素
[attribute=value]	匹配属性等于特定值的元素。属性值的引号在大多数情况下是可选的，如果属性值中包含”]”，需要加引号以避免冲突。
[attribute!=value]	不含有指定属性，或属性不等于特定值的元素。等价于:not([attr=value])
[attribute^=value]	以某值开始的
[attribute$=value]	匹配给定的属性是以某些值结束的元素
[attribute*=value]	匹配给定的属性是以包含某些值的元素
[selector] [selector] [selector]	复合属性选择器，需要在同时满足多个条件时使用，并且关系

表单选择器

:input	匹配所有input textarea select button元素
:text	单行文本框
:password	密码框
:radio	单选按钮
:checkbox	复选框
:submit	匹配提交按钮
:image	匹配图像域
:reset	匹配所有重置按钮
:button	匹配所有按钮
:file	匹配所有文件域
:hidden	匹配所有不可见元素，

高级表单选择器

:enable	匹配所有可用元素
:disable	匹配所有不可用元素
:checked	匹配所有选中的被选元素：复选框、单选框（不包括select中的option）
:selected	匹配所有选中的option