一、jQuery的基本选择器
下面是利用jQuery的基本选择器进行的演示,跟css的规则一致
元素名直接调用元素名
class用.classname
id用#idname
并列的直接用“,”隔开
$(function(){
//使用id选择器 选择id=btn1的元素
$("#btn1").click(function(){
//alert("btn1 is clicked...");
$("#one").css("background","#ffbbaa");
});
$("#btn2").click(function(){
//alert("btn1 is clicked...");
$(".mini").css("background","#ffbbaa");
});
$("#btn3").click(function(){
//alert("btn1 is clicked...");
$("div").css("background","#ffbbaa");
});
$("#btn4").click(function(){
//alert("btn1 is clicked...");
$("span,#two").css("background","#ffbbaa");
});
});
二、jQuery层次选择器
如果想通过DOM元素之间的层次关系来获取特定的元素,例如:后代元素,子元素,相邻元素,兄弟元素等,则需要使用层次选择器:
实际应用代码://$("body div").css("background","#ffbbaa");//body内所有div
//$("body > div").css("background","#ffbbaa");//body的所有子div
//$("#one+div").css("background","#ffbbaa");//id为one的所有相邻div
//$("#one~div").css("background","#ffbbaa");//id为one的所有兄弟div
//$("#one span").css("background","#ffbbaa");//不相邻选不上
//$("#one").nextAll("span").css("background","#ffbbaa");//id为one的后所有的span元素
//$("#one").nextAll("span:first").css("background","#ffbbaa");//id为one的后第一个span元素
三、过滤选择器
1.基本过滤选择器
:first 选取第一个元素
:last 选取最后一个元素
:not(selector) 去除所有与选择器匹配的元素
:even 选取所有索引为偶数的元素(从0开始)
:odd 选取所有索引为奇数的元素(从0开始)
:eq(index) 选取索引等于index的元素
:gt(index) 选取索引大于index的元素
:lt(index) 选取索引小于index的元素
:header 选取所有标题元素,如:h1,h2,h2...
:animated 选取当前正在执行动画的所有元素
如:$("span:first").css("background","#ffbbaa");//选取第一个span元素
$("div:animated").css("background","#ffbbaa");//选取执行动画的div
2.内容过滤选择器 主要规则体现在它所包含的子元素和文本内容上
:contains(text) 选取含有文本text的元素
:empty 选取不包含子元素或者文本的元素
:has(selector) 选取含有选择器所匹配元素的元素
:parent 选取含有子元素或者文本的元素
如:$("div:contains('move')").css("background","#ffbbaa");//选取含有move文本的div
3.可见性过滤选择器
:hidden 选择所有不可见元素
:visible 选择所有可见元素
4.属性过滤选择器
[attribute] 选择拥有此属性的元素
[attribute=value] 选择指定属性值为value的元素
[attribute!=value] 选择指定属性值不为value的元素
[attribute^=value] 选择以指定属性值为value开始的元素
[attribute$=value] 选择以指定属性值为value结束的元素
[attribute*=value] 选择包含指定属性值为value的元素
5.子元素过滤选择器 需要在:前输入一个空格
:nth-child(index/even/odd/equation) 选取每个父元素下的第index个子元素或者奇偶元素(index从1算起)
:first-child 选取每个父元素的第一个子元素
:last-child 选取每个父元素的最后一个子元素
:only-child 选取父元素的唯一的子元素
6.表单对象属性过滤选择器
:enabled 选择所有可用的元素
:disabled 选择所有不可用的元素
:checked 选择所有被选中的元素
:selected 选择所有选中的元素
7.表单选择器
:input 选取所有的input textarea select 和button元素
:text 选取所有的单行文本框
:password 选取所有的密码框元素
:radio 选取所有的单选框
:checkbox 选取所有的多选框
:submit 选取所有的提交按钮
:image 选取所有的图像按钮
:reset 选取所有的图像按钮
:button 选取所有的按钮
:file 选取所有的上传域
:hidden 选取所有的不可见元素