前端备忘录--JQuery选择器

基本选择器

　　基本选择器是最常用的选择器,也是最简单的选择器.

$("#test")     //选取id为test的元素
$(".test")     //选取class为test的元素
$("div.test")  //选取class为test的div元素
$("div")       //选取所有的div元素
$("*")         //选取所有元素
$("div,p")     //选取所有div元素和p元素

一般使用基本选择器就可以完成大部分工作

层次选择器

　　如果希望通过元素之间的层次关系来获取特定元素,比如后代元素,子元素,相邻元素等,那就需要使用层次选择器

$("div p")  //选取div里所有的p元素
$("div>p")  //选取div的子元素中所有的p元素
//上面这两个是有区别的,前者选择的div下的后代元素,后者选择的是div下一级的子元素
$(".test + div") //选取class为test的下一个div同辈元素
$(".test ~ div")//选取class为test的元素后面所有的div同辈元素

　　层次选择器中,前两个比较常用,后两个不常用,一般会使用next()和nextAll()代替

过滤选择器

　　过滤选择器通过特定的规则开筛选出所需的DOM元素,这个稍微复杂些,又可分为以下几种

　　基本过滤选择器

$("div:first")      //选取所有div元素中的第一个div元素
$("div:last")       //选取所有div元素中的最后一个div元素
$("div:not(.test)") //选取所有div元素中class不为test的div元素
$("input:focus")    //选取当前获取焦点的input元素
$("div:eq(1)")      //选取所有div元素中索引是1的div元素
$("div:gt(1)")      //选取所有div元素中索引大于1的div元素
$("div:lt(1)")      //选取所有div元素中索引小于1的div元素
$("div:even")       //选取所有div元素中索引是偶数的div元素
$("div:odd")        //选取所有div元素中索引是奇数的div元素

　　内容过滤选择器

　　内容过滤器主要是通过它所包含的子元素或者文本内容来定位某些元素

$("div:contains("test")") //选取所有div元素中含有文本test的div元素
$("div:has(p)")           //获取含有p元素的div元素
$("div:empty")            //选取不包含子元素或者文本元素的div元素
$("div:parent")           //选取包含子元素或者文本元素的div元素

　　可见性过滤选择器

　根据元素的可见和不可见状态来选择相应的元素

$("div:hidden")    //选取所有不可见的div元素
$("div:visible")   //获取所有可见的div元素

　　属性过滤选择器

　属性过滤器的规则是通过元素的属性来获取响应的元素.

$("div[id=test]")                //选取属性id为test的div元素
$("div[class!=test]")            //选取属性class不为test的div元素
$("div[class^=test]")            //选取属性class以test开始的div元素
$("div[class$=test]")            //选取属性class以test结束的div元素
$("div[class*=test]")            //选取属性class类名中包含test的div元素
$("input[class=test][name=a]")   //选取属性class类名为test并且name为a的的input元素

　　表单对象属性过滤选择器

　　对所选择的表单元素进行筛选,比如下拉框,多选框等

$("#form1:enabled")         //选取id为form1的表单内的所有可用元素
$("#form1:disabled")        //选取id为form1的表单内的所有不可用元素
$("input:checked")          //选取所有被选中的input元素,适用于单选框,多选框
$("select option:selected") //选取所有被选中的option元素,适用于下拉框