jQuery(2)——选择器

jQuery选择器

            选择器是行为与文档内容之间连接的纽带，选择器的最终目的就是能够轻松找到文档中的元素

• jQuery选择器能够快速地找出特定的DOM元素，然后为它们添加相应的行为，而无需担心浏览器是否支持这一选择器
• jQuery的行为规则都必须在获取元素后才能生效
• CSS选择器找到元素后添加样式，jQuery选择器找到元素后添加行为
• jQuery选择器具有完善的处理机制，即使网页上不存在某个元素也不会报错

          $()获取的永远是对象，即使网页上没有此元素，所以用jQuery检查某个元素在网页上是否存在要根据获取到元素的长度来判断

if($("#td").length>0){
.......
}

//或转换成DOM对象来判断

if($("#tt")[0]){
......
}

//以下方法是错误的 错误的 错误的
if($("#tt")){
......
}

  jQuery选择器分为四种：基本选择器、层次选择器、过滤选择器、表单选择器

基本选择器

$("#myElement")   //选取id为myElement的元素
$(".myClass")     //选取所有class为myClass的元素
$("div")          //选取所有<div>元素
$("*")            //选取所有元素
$("div,span,p.myClass")  //选取所有<div>、<span>和class为myClass的<p>

层次选择器

  用于通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素、同辈元素等

$("div span") //选取<div>里所有的span元素
$("#main >*") //选取id为main元素的所有子元素
$(".one+div") //选取class为one的下一个<div>同辈元素  可用next()方法代替
$("#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\]")     转义[]