【jQuery基础学习】01 jQuery选择器

关于CSS选择器

jQuery选择器涉及到CSS，CSS技术使得网页的结构与表现样式完全分离。

同样CSS也需要找到某个网页的结构才能改变其样式，这就是CSS选择器。

常用的CSS选择器如下：

标签选择器

以文档元素作为选择符

a{
text-decoration:none;
}

ID选择器

以文档元素的唯一标识符ID作为选择符

#myNameDiv{
font-size:14px;
width:120px;
}

类选择器

以文档元素的class作为选择符

div.note{
font-size:14px;
}
.noDivNote{
font-size:10px;
}

群组选择器

多个选择符应用同样的样式规则

td,p,div,a{
font-size:14px;
}

后代选择器

元素的任意后代元素

#parentElement a{
color:red;
}

通配选择器

以文档的所有元素作为选择符

*{
font-size:14px;
}

　　以上选择器为主流浏览器支持的，此外CSS还有伪类选择器、子选择器、临近选择器和属性选择器。(理论上来说，现在都应该是支持了的，这本书大概2012年的)

关于jQuery选择器

jQuery选择器与CSS选择器的写法极为相似，只不过jQuery选择器还能操作行为而已。而jQuery中操作CSS样式的部分比单纯的CSS更为强大，并且拥有跨浏览器的兼容性。

jQuery选择器来操作对比一般的DOM操作的优势，不仅仅体现在简洁明了方面，也在于获取网页中不存在的元素也不会报错。

因为jQuery选择器选择出来的永远是jQuery对象，所以在判断是否取到值的时候，不能直接if判断，而是判断$("#divId").length>0。

基本选择器

标签选择器 $("div")

ID选择器　 $("#myId")

类选择器 $(".myClass")

群组选择器 $("div,span,p.myClass,#myId")

通配选择器 $("*")

层次选择器

后代选择器 $(div span) 选取div里所有的span

下级选择器 $(div>span) 选取div里为span的下一级元素

相邻元素选择器 $(div+span) 选取紧挨着div元素后面的下一个span元素，等价于$(div).next("span")

同级元素选择器 $(div~span ) 选取div元素后面的所有span元素，等价于$(div).nextALL("span")

　　扩展一下$(div).siblings("span")选取的是div元素同级的所有的span元素，不分前后，而上面的同级元素选择器只能选择div后面的元素

过滤选择器

:first 选取第一个元素,如$(div:first)就是选取所有div元素中的第一个div元素

:last 选取最后一个元素

:even 选取索引是偶数的所有元素，元素从0开始

:odd 选取索引是奇数的所有元素，元素从0开始

:eq(index) 选取索引等于index的元素

:gt(index) 选取索引大于index的元素

:lt(index) 选取索引小于index的元素

:header 选取所有的标题元素，如h1,h2,h3

:animated 选取当前正在执行动画的所有元素

:focus 选取当前获取焦点的元素

内容过滤选择器

:contains(text) 选取含有文本内容为text的元素，如$(div:contains('Troy'))

:empty 选取不包含子元素或者文本的空元素

:has(selector) 选取含有选择器所匹配的元素的元素

:not(selector) 去除所有与给定选择器匹配的元素

:parent 选取含有子元素或者文本的元素

可见性过滤选择器

:hidden 选取所有隐藏的元素

:visible 选取所有可见的元素

属性过滤选择器

[attribute] 选择拥有此属性的元素

[attribute=value] 选择属性的值为value的元素

[attribute!=value] 选择属性的值不为value的元素

[attribute1][attributeN] 选取同时满足多种属性的元素

------------------------------------我是一个分割线，我就觉得我应该出现在这里了，虽然我不知道为什么----------------------

[attribute^=value] 选择属性的值以value开始的元素

[attribute$=value] 选择属性的值以value结束的元素

[attribute*=value] 选择属性的值含有value的元素

[attribute|=value] 选取属性等于给定字符串或者以该字符串为前缀的元素（就是该字符串后面跟着一个"-"的元素）

[attribute~=value] 选取属性用空格分隔的值中包含一个给定的值的元素

<div title="en"></div>
//能选取到：$('div[title*="en"]'),$('div[title^="en"]'),$('div[title|="en"]')

<div title="en-UK"></div>
//能选取到：$('div[title*="en"]'),$('div[title^="en"]'),$('div[title|="en"]')

<div title="english"></div>
//能选取到：$('div[title*="en"]'),$('div[title^="en"]')

<div title="en uk"></div>
//能选取到：$('div[title*="en"]'),$('div[title^="en"]'),$('div[title~="en"]')

<div title="uken"></div>
//能选取到：$('div[title*="en"]'),$('div[title$="en"]')

子元素过滤选择器

:nth-child(index/even/odd/equation) 选取每个父元素下的的第index个子集元素或者奇偶元素，且index从1算起，而:eq(index)只能匹配一个元素

:first-child 选取每个父元素的第1个子元素

:last-child 选取每个父元素的最后一个子元素

:only-child 如果此元素是其父元素的唯一一个子元素则匹配

表单对象属性过滤选择器

:enabled 选取所有可用的元素

:disabled 选取所有不可用的元素

:checked 选取所有被选中的元素（单选框，复选框）

:selected 选取所有被选中的元素（下拉列表）

表单选择器

:input 选取所有input，textarea，select，button的元素，不仅仅是input

:text 选取所有单行的文本框

:password 选取所有的密码框

:radio 选取所有的单选框

:checkbox 选取所有的多选框

:submit 选取所有的提交按钮

:image 选取所有的图像

:reset 选取所有的重置按钮

:button 选取所有的按钮

:file 选取所有的上传域

:hidden 选取所有不可见元素

选择器注意事项

对于 . # ( ) [ ]等特殊字符可以通过在前面加\\形成转义字符，如$("#id\\[sad\\]")

好吧，终于写完了。又是这个点，o(︶︿︶)o 唉！