码迷,mamicode.com
首页 > Web开发 > 详细

jQuery选择器

时间:2017-05-10 22:24:28      阅读:328      评论:0      收藏:0      [点我收藏+]

标签:基本选择器   logs   span   过滤   示例   blog   style   esc   jquery选择器   

1.基本选择器

//改变id为one的元素背景颜色
$("#one").css("background","#bbffaa");

//改变class为mini的所有元素的北京颜色
$(".mini").css("background","#bbffaa");

//改变元素名是div 的所有元素的背景色
$("div").css("background","#bbffaa");

//改变所有元素的背景颜色
$("*").css("background","#bbffaa");

//改变所有的<span>元素和id为two的元素的背景颜色
$("span,#two").css("background","#bbffaa");

2.层次选择器//选取ancestor元素里的所有descendant(后代)元$("ancestor descendant")

//选取parent元素下的child(子)
$("parent>child")
//选取紧接在prev元素后的next元素
$("prev+next")
//选取prev元素之后的所有siblings元素
$("prve~siblings")
//示例
// 改变<body>内所有<div>的背景色
$("body div").css("background","#bbffaa");
//改变<body>内子<div>元素的背景颜色
$("dody>div").css("background","#bbffaa");
//改变class为one的下一个<div>同辈元素的背景颜色
$(".one_div").css("background","#bbffaa");
//改变id为two的元素后面的所有<div>同辈元素的背景颜色
$("#two~div").css("backround","#bbffaa");
// 等价关系 $(".one+div") $(".one").next("div");
// 等价关系 $("#prev~div") $("#prev").nextAll("div");

3.过滤选择器

1)基本过滤选择器

//  :first  选取第1个元素  
$("div:first")//选取所有<div>元素中的第一个元素
//  :last 选取最后一个元素
$("div:last")//选取所有<div>元素中的最后一个<div>元素
//  :not(selector)
$("input:not(.myClass)")选取class不是myClass的<input>元素
//  :even 
$("input:even")//选取索引是偶数的<input>元素
//  :odd  
$("input:odd")//选取索引是奇数的<input>元素
//:eq(index)
$("input:eq(1)")选取索引等于1的<input>元素
//:gt(index) 
$("input:gt(1)")//选取索引大于1的<input>元素(大于1不包括1)
//:lt
$("input:lt(1)")//选取索引小于1的<input>元素(小于1不包括1)

 

jQuery选择器

标签:基本选择器   logs   span   过滤   示例   blog   style   esc   jquery选择器   

原文地址:http://www.cnblogs.com/zzzzzzzsy/p/6838424.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!