jQuery选择器
选择器是行为与文档内容之间连接的纽带，选择器的最终目的就是能够轻松找到文档中的元素
- jQuery选择器能够快速地找出特定的DOM元素，然后为它们添加相应的行为，而无需担心浏览器是否支持这一选择器
- jQuery的行为规则都必须在获取元素后才能生效
- CSS选择器找到元素后添加样式，jQuery选择器找到元素后添加行为
- jQuery选择器具有完善的处理机制，即使网页上不存在某个元素也不会报错
$()获取的永远是对象，即使网页上没有此元素，所以用jQuery检查某个元素在网页上是否存在要根据获取到元素的长度来判断
1 if($("#td").length>0){ 2 ....... 3 } 4 5 //或转换成DOM对象来判断 6 7 if($("#tt")[0]){ 8 ...... 9 } 10 11 //以下方法是错误的 错误的 错误的 12 if($("#tt")){ 13 ...... 14 }
jQuery选择器分为四种：基本选择器、层次选择器、过滤选择器、表单选择器
基本选择器
1 $("#myElement") //选取id为myElement的元素 2 $(".myClass") //选取所有class为myClass的元素 3 $("div") //选取所有<div>元素 4 $("*") //选取所有元素 5 $("div,span,p.myClass") //选取所有<div>、<span>和class为myClass的<p>
层次选择器
用于通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素、同辈元素等
1 $("div span") //选取<div>里所有的span元素 2 $("#main >*") //选取id为main元素的所有子元素 3 $(".one+div") //选取class为one的下一个<div>同辈元素 可用next()方法代替 4 $("#two ~ div")//选取id为two的元素后面的所有<div>同辈元素 可用nextAll()方法代替
过滤选择器
//基本过滤选择器 :first //$("div:first") 选取所有<div>元素中的第一个<div>元素 :last //$("div:last") 选取所有<div>元素中的最后一个<div>元素 :even //$("tr:even") 选取索引是偶数(0、2、4.....)的<tr>元素 (注意：因为选择多个元素是为数组，所以索引从0开始) :odd //$("tr:odd") 选取索引是奇数(1、3、5.....)的<tr>元素 :not(selector) //$("input:not(.myClass)") 选取class不是myClass的<input>元素 :eq(index) //$("input:equ(1)") 选取索引等于1的<input>元素 :gt(index) //$("input:gt(1)") 选取索引大于1的<input>元素 :lt(index) //$("input:lt(1)") 选取索引小于1的<input>元素 :header //$(":header")选择网页中所有的标题元素 <h1> <h2> <h3> ..... :animated //$("div:animated") 选取正在执行动画的<div>元素 :focus //$(":focuse") 选取当前获取焦点的元素 //内容过滤器 :contains(text) //$("div:contains("我")") 选取含文本“我”的<div>元素 :has(selector) //$("div:has(p)) 选取含有<p>元素的<div>元素 :empty //$("td:empty") 选取所有不包含子元素（包括文本元素）的<td>元素 :parent //$("div:parent") 选择拥有子元素(包括文本元素)的div元素 //可见性过滤器 :hidden //$(":hidden") 选取所有不可见的元素; 如果只想选取input元素,用$("iput:hidden") :visible //$("div:visible") 选取所有可见的<div>元素 //属性过滤器 $("div[id]") //选取拥有属性id的div元素 $("div[title='test']") //选取tile为test的div元素 $("div[title!='test']") //选取tile不等于test的div元素 $("div[title^='test']") //选取tile以test开始的div元素 $("div[title$='test']") //选取tile以test结束的div元素 $("div[title*='test']") //选取tile包含test的div元素 $("div[id][title$='test']") //选取拥有属性id，并且title已test结束的div元素 多个属性联合选择 //子元素过滤选择器 :nth-child() // $("ul li:nth-child(even)") $("ul li:nth-child(odd)") $("ul li:nth-child(2)") $("ul li:nth-child(3n)")--n从1开始 :first-child // $("ul li:first-child") 选取每一个ul中的第一个li元素 :last-child // $("ul li:last-child") 选取每一个ul中的最后一个li元素 :only-child // $("ul li:only-child") 选取是唯一子元素的li元素 //表单对象属性过滤器 :enabled //$("#form1 :enabled") 选取id为form1的表单中的所有可用元素 :disabled //$("#form1 :disabled") 选取id为form1的表单中的所有不可用元素 :checked //$("input :checked") 选取所有被选中的<input>元素 :selected //$("select option :selected") 选取所有被选中的选项元素
表单选择器
$(":input") //选择所有的表单输入元素，包括input, textarea, select 和 button
$(":text") //选择所有的单行文本框
$(":password") //选择所有的密码框
$(":radio") // 选择所有的单选框
$(":checkbox") // 选择所有的多选框
$(":submit") // 选择所有的提交按钮
$(":image") // 选择所有的图像按钮
$(":reset") // 选择所有的重置按钮
$(":button") // 选择所有的按钮
$(":file") // 选择所有的上传域
$(":hidden") // 选择所有的不可见元素
PS: 如果选择器中含有特殊符号，如 . # () [] 等，需用 \ 转义
<div id="id#b">aa</div> //$("#id\#b") 转义#
<div id="id[1]">bb</div> //$("#id\[1\]") 转义[]