jQuery的各种选择器(适合新手查阅)

//基本选择器

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

$(".mini").css("background-color","#bbffaa");//改变class为mini的元素背景色

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

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

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

//层次选择器

$("body div").css("background-color","#bbffaa");//改变bodY内所有的div背景色

$("body>div").css("background-color","#bbffaa");//改变body内子div元素的背景色

$(".one").next("div").css("background-color","#bbffaa");//改变class为one的下一个div的背景色

$("#two").nextAll("div").css("background-color","#bbffaa");//改变class为one的所有div的背景色

//过滤选择器(下标从0开始)

$("div:first").css("background-color","#bbffaa");//改变第一个div元素的背景色

$("div:last").css("background-color","#bbffaa");//改变最后一个div元素的背景色

$("div:not('.one')").css("background-color","#bbffaa");// 改变class不为one的div背景色

$("div:even").css("background-color","#bbffaa");//改变索引值为偶数的div元素的背景色

$("div:odd").css("background-color","#bbffaa");//改变索引值为奇数的div元素的背景色

$("div:eq(3)").css("background-color","#bbffaa");//改变索引值等于3的div元素的背景色

$("div:gt(3)").css("background-color","#bbffaa");//改变索引值大于3的div元素的背景色

$("div:lt(3)").css("background-color","#bbffaa");//改变索引值小于3的div元素的背景色

//内容过滤选择器

$("div:contains('id')").css("background-color","#bbffaa");//改变含有文本id的div元素的背景色

$("div:empty").css("background-color","#bbffaa");//改变包含空元素的div的背景色

$("div:has(mini)").css("background-color","#bbffaa");//改变含有class为mini的ｄｉｖ的背景色

//可见性过滤选择器

$(":hidden").show(100000);//选取所有不可见的元素

$(":visible").css("background-color","#bbffaa");//选取可见的元素

//属性过滤选择器

$("div[id]").css("background-color","#bbffaa");//改变具有属性为id的div的背景色

$("div[id=test]").css("background-color","#bbffaa");//改变具有id等于test的div的背景色

$("div[id!=test]").css("background-color","#bbffaa");//改变具有id不等于test的div的背景色

$("div[id^=test]").css("background-color","#bbffaa");//改变具有id以test开头的div的背景色

$("div[id$=test]").css("background-color","#bbffaa");//改变具有id以test为结尾的div的背景色

$("div[id*=test]").css("background-color","#bbffaa");//改变具有id含有test的div的背景色

$("div[id][title*=test]").css("background-color","#bbffaa");//改变属性具有id并且title等于test的div的背景色

//子元素过滤选择器(下标从1开始)

$("div.one:nth-child(2)").css("background-color","#bbffaa");//改变class等于one的div元素下的第二个子元素的背景色

$("div.one:first-child").css("background-color","#bbffaa");//改变class等于one的div元素下的第一个子元素的背景色

$("div.one:last-child").css("background-color","#bbffaa");//改变class等于one的div元素下的最后一个子元素的背景色

$("div.one:only-child").css("background-color","#bbffaa");//如果class等于one的div元素下只有一个子元素,那么就改变这个子元素的背景色