JQuery 选择器

JQuery 选择器

一、什么是选择器

jQuery选择器继承了CSS与path的语法部分。充许通过标签名，属性名或内容对DOM元素进行选择，不必担心浏览器的选择

1.选择器的优势：代码更简单，完善的检测机制

二、jQuery选择器详解：
1.根据获取的页面中元素不同，可以将jQuery选择器分为：基本选择器，层次选择器，过滤选择器，表单选择器，而过滤选择器又可分：简单过滤选择器，内容过滤选择器，可见性过滤选择器，属性过滤选择器，子元素过滤选择器，表单对象过滤选择器

A.基本选择器：由元素ID,Class，元素名，多个选择符组成，可实现大多数页面的查找

语法：

选择器	功能	返回值
#id	根据给定的ID匹配一个元素	单个元素
element	根据给定的ID匹配所以元素	元素集合
.class	根据给定的类匹配元素	元素集合
*	匹配所以元素	元素集合
selector	将每一个选择器匹配到元素合并	元素集合

核心代码：

$(function(){
$("#divOne").css("display","block");   //ID匹配元素

$("div  span").css("display","block");//元素名匹配

$(".clsFrame").css("display","block");//类匹配

$("*").css("display","block");//匹配所有

$("#divOne,span").css("display","block");}）；

 

B.层次选择器

通过DOM元素间的层次关系获取元素，主要层次关系为：后代，父子，相邻，兄弟关系

选择器	功能	返回值
ancestor descendant	根据祖先元素匹配所拥有的后代元素	元素集合
parent>child	根据父元素匹配所有的子元素	元素集合
prev+next	匹配在所有紧邻prev元素后的相邻元素	元素集合
pre~siblings	匹配在所有紧邻prev元素后的兄弟元素	元素集合

核心代码：

$(function(){
$("#divOne").css("display","block");  

$("div span"). css("display","block");  //匹配后代元素

$("div > span").css("display","block");/匹配子元素

$("#divMid+div").css("display","block");

$("#divMid）.next()" .css("display","block"); //匹配后面元素

$(#"divMid）.nextAll()" .css("display","block"); //匹配所有后面元素

$("#divMid").siliblings. .css("display","block");  //匹配所有相邻元素

}）

 

 

C.简单过滤选择器

选择器	功能
first()或：first	获取第一个元素
last()或：last	获取最后一个元素
:not（selector）	获取除给定元素的所有元素
:even	获取所有索引值为偶数的元素
:odd	获取所有索引值为奇数的元素
:eq(index),:gt(index)	获取指定索引值的元素
:header	获取所有标题类型的元素
:animated	获取正在执行动画效果的元素

$(function(){
$("li:first").addClass("getfocus"); //增加第一个元素类别

$("li:last").addClass("getfocus"); //增加最后一个元素类别

$("li:not(.NotClass)").addClass("getfocus");//增加去除所有给定选择器匹配的元素类别

$("li:even").addClass("getfocus");  //增加所有索引值为偶数的元素类别

依次类推

$(function(){

               animateIt();

               $("#spnMove.animated")..addClass("getfocus");//增加动画效果元素类别

})

 

D.内容过滤选择器

根据元素中的文字内容或所包含的子元素特种获取元素

选择器	功能
：contains(text)	获取包含给定元素的文本
：empty	获取所有不包含子元素或文本元素的空元素
：has(selector)	获取含有选择器所匹配的元素的元素

$(function(){
$("#div:contains('A')").css("display","block");  //显示包含给定文本的元素

$("div :empty"). css("display","block");  //显示不包含子元素或者文本的空元素

$("div has ( span)").css("display","block");//含有选择器所匹配的元素的元素

}）

 

可见性过滤选择器

根据元素是否可见特征获取元素

选择器	功能
：hidden	获取所有不可见的元素
：visible	获取所有隐藏的元素

核心代码：

 

F.属性过滤选择器

根据元素的某个属性获取元素，如ID号，或匹配属性值的内容，并以[]包含

选择器	功能
[attribute=value]	获取包含给定属性某个特定值的元素
[attribute^=value]	获取包含给定属性是以某个值开始的元素
[attribute$=vavlue]	获取给定的属性是以某些值结尾的元素
[attribute*=value]	获取给定的属性是以包含某些值结尾的元素
[attribute]	获取包含给定属性的元素

核心代码：

 

$(function(){
$("div[id]").show(100); //显示包含所有id属性的元素

$("div[title='A']").show(100); //显示包含所有title属性值为‘A’的元素

$("div[title^='A']").show(100); //显示包含所有title属性值以‘A’开始的元素

$("div[title$='C']").show(100); //显示包含所有 所有title属性值以‘C’结尾的元素

 

})

G.子元素过滤选择器与简单过滤相似

H.表单过滤选择器

通过表单对象中某对象属性的特种元素获取该类元素 如enable ,disable,checked,selected属性

选择器	功能
：enable	获取表单中所有属性可用的元素
:disable	获取表单中所有属性不可用的元素
:checked	获取表单中所有属性被选中的元素
:selected	获取表单中所有属性被选中options的元素

核心代码：

$(function(){

$("#form1 input:enable").addClass("getfocus");  //增加表单中所有属性为可用的元素类别

$("#form1 input:disable").addClass("getfocus");  //增加表单中所有属性为不可用的元素类别

$("#form1 input:checked").addClass("getfocus");  //增加表单中所有属性为 被选中 的元素类别

})

I.表单选择器

可快速定位表单对象