jquery九大选择器的用法举例

2019年5月24日 0条评论 1,337次阅读 0人点赞

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”

$(“: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