JQuery 选择器
一、什么是选择器
jQuery选择器继承了CSS与path的语法部分。充许通过标签名,属性名或内容对DOM元素进行选择,不必担心浏览器的选择
1.选择器的优势:代码更简单,完善的检测机制
二、jQuery选择器详解:
1.根据获取的页面中元素不同,可以将jQuery选择器分为:基本选择器,层次选择器,过滤选择器,表单选择器,而过滤选择器又可分:简单过滤选择器,内容过滤选择器,可见性过滤选择器,属性过滤选择器,子元素过滤选择器,表单对象过滤选择器
1.根据获取的页面中元素不同,可以将jQuery选择器分为:基本选择器,层次选择器,过滤选择器,表单选择器,而过滤选择器又可分:简单过滤选择器,内容过滤选择器,可见性过滤选择器,属性过滤选择器,子元素过滤选择器,表单对象过滤选择器
A.基本选择器:由元素ID,Class,元素名,多个选择符组成,可实现大多数页面的查找
语法:
选择器 | 功能 | 返回值 |
#id | 根据给定的ID匹配一个元素 | 单个元素 |
element | 根据给定的ID匹配所以元素 | 元素集合 |
.class | 根据给定的类匹配元素 | 元素集合 |
* | 匹配所以元素 | 元素集合 |
selector | 将每一个选择器匹配到元素合并 | 元素集合 |
核心代码:
$(function(){
$("#divOne").css("display","block"); //ID匹配元素
$("#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");
$("#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: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: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[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.表单选择器
可快速定位表单对象