jquery九⼤选择器的⽤法举例
1：基本选择器
改变 id 为 one 的元素的背景⾊为 #0000FF"
$("#one").css("background","#0000FF");
改变元素名为 <div> 的所有元素的背景⾊为 #00FFFF"
$("div").css("background","#00FFFF");
改变 class 为 mini 的所有元素的背景⾊为 #FF0033"
$(".mini").css("background","#FF0033");
改变所有元素的背景⾊为 #00FF33"
$("*").css("background","#00FF33");
改变所有的<span>元素和 id 为 two 的元素的背景⾊为 #3399FF"，注意，多个选择器并列使⽤时中间⽤逗号隔开。 $("span,#two").css("background","#3399FF");
2：层次选择器
改变 <body> 内所有 <div> 的背景⾊为 #0000FF"
//祖先元素和后代元素的关系
$("body div").css("background","#0000FF");
改变 <body> 内⼦ <div> 的背景⾊为 #FF0033"
//⽗元素和⼦元素的关系
$("body>div").css("background","#FF0033");
改变 id 为 one 的下⼀个 <div> 的背景⾊为 #0000FF"
$("#one+div").css("background","#0000FF");
改变 id 为 two 的元素后⾯的所有兄弟<div>的元素的背景⾊为 # #0000FF"
//获取指定元素的后⾯所有兄弟元素
$("#two~div").css("background","#0000FF");
改变 id 为 two 的元素所有 <div> 兄弟元素的背景⾊为 #0000FF"
//获取指定元素的所有兄弟元素
$("#two").siblings("div").css("background","#0000FF");
3：基础过滤选择器
改变第⼀个 div 元素的背景⾊为 #0000FF"
$("div:first").css("background","#0000FF");
改变最后⼀个 div 元素的背景⾊为 #0000FF"
$("div:last").css("background","#0000FF");
改变class不为 one 的所有 div 元素的背景⾊为 #0000FF"
$("div:not(.one)").css("background","#0000FF");
改变索引值为偶数的 div 元素的背景⾊为 #0000FF"
$("div:even").css("background","#0000FF");
改变索引值为奇数的 div 元素的背景⾊为 #0000FF"
$("div:odd").css("background","#0000FF");
改变索引值为⼤于 3 的 div 元素的背景⾊为 #0000FF"
$("div:gt(3)").css("background","#0000FF");
改变索引值为等于 3 的 div 元素的背景⾊为 #0000FF"
$("div:eq(3)").css("background","#0000FF");
改变索引值为⼩于 3 的 div 元素的背景⾊为 #0000FF"
$("div:lt(3)").css("background","#0000FF");
改变所有的标题元素的背景⾊为 #0000FF"
jquery是什么选择器$(":header").css("background","#0000FF");
改变当前正在执⾏动画的所有元素的背景⾊为 #0000FF"
function mover(){
$("#mover").slideToggle("slow",mover);
}
mover();
$("#b10").click(function(){
$(":animated").css("background","#0000FF");
};
4：内容选择器
改变含有⽂本 ‘di’ 的 div 元素的背景⾊为 #0000FF"
$("div:contains('di')").css("background","#0000FF");
改变不包含⼦元素(或者⽂本元素) 的 div 空元素的背景⾊为"
$("div:empty").css("background","#0000FF");
改变含有 class 为 mini 元素的 div 元素的背景⾊为 #0000FF"
$("div:has(.mini)").css("background","#0000FF");
改变含有⼦元素(或者⽂本元素)的div元素的背景⾊为 #0000FF"
$("div:parent").css("background","#0000FF");
改变不含有⽂本 di 的 div 元素的背景⾊"
$("div:not(:contains('di'))").css("background","#0000FF");
5：可见度过滤选择器
改变所有可见的div元素的背景⾊为 #0000FF"
$("div:visible").css("background","#0000FF");
选取所有不可见的元素, 利⽤ jQuery 中的 show() ⽅法将它们显⽰出来, 并设置其背景⾊为 #0000FF" $("div:hidden").show().css("background","#0000FF");
选取所有的⽂本隐藏域, 并打印它们的值"
/*
* <input type="hidden" value="hidden_1">
<input type="hidden" value="hidden_2">
<input type="hidden" value="hidden_3">
<input type="hidden" value="hidden_4">
*/
var $inputs = $("input:hidden");
//javascript的变历⽅法
// for(var i=0;i<$inputs.length;i++){
// var input = $inputs[i];
//
// alert(input.value);
// }
/*
* each(function(index,domEle){})
* * jquery中的普通遍历⽅法，需要jquery对象来调⽤
* * 回调函数：function(index,domEle){}
* * index：获取到的标签的索引值
* * domEle：dom对象
*/
//js的变历⽅法⽰例
$inputs.each(function(index,domEle){
//alert(domEle.value);
//alert($(domEle).val());
//alert(this.value); //this代表的是domEle对象
alert($(this).val());
});
});
/*
* jquery.each(object,function(index,domEle){})
* * 全局遍历函数，不需要jquery对象来调⽤
* * object：要遍历的数组或对象
* * 回调函数：function(index,domEle){}
* * index：获取到的标签的索引值
* * domEle：dom对象
*/
$.each($inputs,function(index,domEle){
alert(domEle.value);
});
6：属性过滤器
含有属性title 的div元素"
$("div[title]").css("background","#0000FF");
属性title值等于test的div元素"
$("div[title=test]").css("background","#0000FF");
属性title值不等于test的div元素(没有属性title的也将被选中)"
$("div[title!=test]").css("background","#0000FF");
属性title值 以te开始 的div元素."
$("div[title^=te]").css("background","#0000FF");
属性title值 以est结束 的div元素.."
$("div[title$=est]").css("background","#0000FF");
属性title值 含有es的div元素."
$("div[title*=es]").css("background","#0000FF");
选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素"
//多个属性过滤选择器并列使⽤，就这样并列放置就OK
$("div[id][title*=es]").css("background","#0000FF");
7：⼦元素过滤选择器
每个class为one的div⽗元素下的第2个⼦元素"
:nth-child()⼦元素过滤选择器，使⽤时需在其前⾯增加空格
:nth-child()⼦元素过滤选择器，其索引值是从"1"开始
$("div[class=one] :nth-child(2)").css("background","#0000FF");
每个class为one的div⽗元素下的第⼀个⼦元素"
$("div[class=one] :first-child").css("background","#0000FF");
每个class为one的div⽗元素下的最后⼀个⼦元素"
$("div[class=one] :last-child").css("background","#0000FF");
如果class为one的div⽗元素下的仅仅只有⼀个⼦元素，那么选中这个⼦元素" $("div[class=one] :only-child").css("background","#0000FF");
8：表单对象属性过滤器
利⽤ jQuery 对象的 val() ⽅法改变表单内可⽤ <input> 元素的值"
<input type="text" value="不可⽤值1" disabled="disabled">
<input type="text" value="可⽤值1" >
<input type="text" value="不可⽤值2" disabled="disabled">
<input type="text" value="可⽤值2" >
$("input[type=text]:enabled").val("xxx");
利⽤ jQuery 对象的 val() ⽅法改变表单内不可⽤ <input> 元素的值"
$("input[type=text]:disabled").val("xxx");
利⽤ jQuery 对象的 length 属性获取多选框选中的个数"
<input type="checkbox" name="items" value="美容" >美容
<input type="checkbox" name="items" value="IT" >IT
<input type="checkbox" name="items" value="⾦融" >⾦融
<input type="checkbox" name="items" value="管理" >管理
alert($("input[type=checkbox]:checked").length);
利⽤ jQuery 对象的 text() ⽅法获取下拉框选中的内容"
<select name="job" id="job" multiple="multiple" size=4>
<option >程序员</option>
<option>中级程序员</option>
<option>⾼级程序员</option>
<option>系统分析师</option>
</select>
<select name="edu" id="edu">
<option>本科</option>
<option>博⼠</option>
<option>硕⼠</option>
<option>⼤专</option>
</select>
$("select option:selected").each(function(index,domEle){
alert($(domEle).text());
};
9：表单选择器
$(":image")匹配所有的图像域
$(":reset")匹配所有重置按钮
$(":button")匹配所有按钮
$(":file")匹配所有⽂件域
$("input:hidden")匹配所有不可见元素，或type为hidden的元素，这个选择器不限于表单标签，那些style为hidden的元素也会被匹配。$("input:enabled")匹配所有可⽤的input元素，即不带属性disabled="disabled"
$("input:disabled")和上⾯相反
$("input:checked")匹配所有选择的元素（包括，复选框，单选框，但不包括select的option）
$("select option:selected")匹配所有选择的option元素。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论