jQuery基础之二 -- 选择器
转载：http://blog.csdn.net/zzq58157383/article/details/7645294
在Dom编程中我们只能使用有限的函数根据id或者TagName获取Dom对象. 在jQuery中则完全不同,jQuery提供了异常强大的选择器用来帮助我们获取页面上的对象, 并且将对象以jQuery包装集的形式返回.
性能优化： 相比于通过 ClassName 来选择，应该优先考虑用 TagName 搭配 ClassName 来选择，或是在页面只有少量对象时用唯一性的 ID 来选择，而且要尽量避免不必要的调用
1.基本选择器：通过元素id、class和标签名等来查找DOM元素
- $("#id") 选取id为“id”的元素
- $(".class") 选取所有class为“class”的元素
- $("p") 选取所有的<p>元素
- $("*") 选取页面所有的元素
- $("div, span, p.myClass") 选取所有的<div>,<span>和拥有class为myClass的元素
2.层次选择器： 通过DOM元素之间的层次关系来获取特定元素
- 后代元素： $("ancestor descendant") $("div span")选取所有<div>里的所有的元素名是<span>后代元素
- 子元素： $("parent > child") $("div > span")选取所有<div>元素下元素名是<span>的子元素
- 相邻元素： $("prev + next") $(".one + div")选取class为"one"的元素的下一个<div>元素 等价于$(".one").next("div")
- 兄弟元素： $("prev ~ siblings") $("#two ~ div")选取id为"two"的元素后面的所有<div>兄弟元素 等价于$("#two").nextAll("div")
- $("#prev").siblings("div")选取#prev所有的同辈/兄弟元素，无论前后位置
3.过滤选择器：通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪选择器语法相同，以一个冒号（：）开头
- 基本过滤：
- ：first $("div:first")选取所有<div>元素中第一个<div>元素
- ：last $("div:last")选取所有<div>元素中最后一个<div>元素
- ：not(selector) $("input:not(.myClass)")选取class不是myClass的<input>元素
- :even $("input:even")选取索引是偶数的<input>元素，索引从0开始
- :odd $("input:odd")选取索引是奇数的<input>元素，索引从0开始
- :eq(index) $("input:eq(1)")选取索引等于1的<input>元素
- :gt(index) $("input:gt(1)")选取索引大于1（不包括1）的<input>元素
- :lt(index) $("input:lt(1)")选取索引小于1（不包括1）的<input>元素
- :header $(":header")选取网页中所有的<h1>,<h2>,<h3>...
- :animated $("div:animated")选取正在执行动画的<div>元素
- 内容过滤：
- :contains(text) $("div:contains('我')")选取含有文本‘我’的<div>元素
- :empty $("div:empty")选取不包含子元素（包括文本元素）的<div>空元素
- :has(selector) $("div:has(p)")选取含有<p>元素的<div>元素
- :parent $("div:parent")选取拥有子元素（包括文本元素）的<div>元素
- 可见性过滤：
- ：hidden $(":hidden")选取所有不可见的元素，包括<input type="hidden"/>, <div style="display:none;"/>和<div style="visibility:hidden;"/>等元素
- $("input:hidden")选取所有不可见的<input>元素
- ：visible $("div：visible")选取所有可见的<div>元素
- 属性过滤：
- [attribute] $("div[id]")选取拥有属性id的<div>元素
- [attribute=value] $("div[title=test]")选取属性title等于"test"的<div>元素
- [attribute!=value] $("div[title=test]")选取属性titlei不等于"test"（包括没有title属性的元素）的<div>元素
- [attribute^=value] $("div[title^=test]")选取属性title以"test"开头的<div>元素
- [attribute$=value] $("div[title$=test]")选取属性title以"test"结尾的<div>元素
- [attribute*=value] $("div[title*=test]")选取属性title包含"test"的<div>元素
- [selector1][selector2]... $("div[id][title$=test]")选取拥有属性id,并且属性title以"test"结尾的<div>元素
- 子元素过滤：
- :nth-child(index/enen/odd/equation)选取每个父元素下的第index个子元素或者奇偶元素（index从1开始算），：eq(index)是从0开始算的，且只匹配一个元素
- :nth-child(enen)选取每个父元素下的索引值是偶数的元素
- :nth-child(odd)选取每个父元素下的索引值是奇数的元素
- :nth-child(2)选取每个父元素下的索引值等于2的元素
- :nth-child(3n)选取每个父元素下的索引值是3的倍数的元素（n从0开始）
- :nth-child(3n+1)选取每个父元素下的索引值是（3n+1） 的元素（n从0开始）
- :first-child $("ul li:first-child")选取每个<ul>中第1个<li>元素
- :last-child $("ul li:last-child")选取每个<ul>中最后1个<li>元素
- :only-child $("ul li:only-child")在<ul>中选取是惟一子元素的<li>元素
- 表单对象属性过滤：
- :enabled $("#form1:enabled")选取id为"form1"的表单内的所有可用元素
- :disabled $("#form2:disabled")选取id为"form2"的表单内的所有不可用元素
- :checked $("input:checked")选取所有被选中的<input>元素
- :selected $("select :selected")选取所有被选中的选项元素
4.表单选择器：
- :input $(":input")选取所有<input>、<textarea>、<select>、<button>元素
- :text $(":text")选取所有的单行文本框
- :password $(":password")选取所有的密码框
- :radio $(":radio")选取所有的单选框
- :checkbox $(":checkbox")选取所有的复选框
- :button $(":button")选取所有的按钮
- :submit $(":submit")选取所有的提交按钮
- :reset $(":reset")选取所有的重置按钮
- :image $(":image")选取所有的图像按钮
- :file $(":file")选取所有的上传域
- :hidden $(":hidden")选取所有不可见的元素
jQuery选择器注意：
1.选择器中含有 “.”, "#", "(", "]"等特殊字符要进行转义，如$('#id\\#b'); 选取id为id#b的元素
2.选择器中含有空格问题
var a=$('.test :hidden'); 带空格的是后代选择器，选取class为‘test’的元素里面的隐藏元素
var b=$('.test:hidden'); 不带空格的是过滤选择器，选取隐藏的class为‘test’的元素
