前端备忘录--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元素,适用于下拉框