jquery选择器

1：基础选择器

/*基础选择器*/
$("#one").css("background","#bbffaa"); //改变id为one的元素的背景色
$(".mini").css("background","red");//改变class为.mini的元素的背景色
$("div").css("background","blue");//改变所有div元素的背景色
//$("*").css("background","yellow");//改变所有元素的背景色
$("span,#two").css("background","#bbffaa");//改变所有span元素和id为two的元素的背景色

2：层次选择器

/*层次选择器*/
$("body div").css("background","#bbffaa");//改变body里所有div的背景色
$("body > div").css("background","red");//改变body内子div元素的背景色
$(".one + div").css("background","green");//改变class为.one的下一个div元素的背景色   等价于$(".one").next("div");
$("#two ~ div").css("background","#FF0066");//改变id为two的元素后面的所有div兄弟元素的背景色
//$("#two").siblings("div")  不受前后顺序先知，获取所有同辈的节点

3：过滤选择器

/*过滤选择器*/
//基础过滤选择器
$("div:first").css("background","green"); //改变所有div中第一个div的背景色
$("div:last").css("background","red"); //改变所有div中最后一个div的颜色
$("div:not(.one)").css("background","red");//改变class不是one的div元素的颜色
$("div:even").css("background","#000000");//改变索引值为偶数的div元素的背景色
$("div:odd").css("background","#FFFFFF");//改变索引值为奇数的div元素的背景色
$("div:eq(3)").css("background","#4b0082");//改变索引值等于3的div元素的背景色
$("div:gt(3)").css("background","#FFFFFF");//改变索引值大于3的div元素的背景色
$('div:lt(3)').css("background","#4b0082");//改变索引值小于3的div元素的背景色
$(':header').css("background","#bbffaa");//改变书喲有标题元素，例如<h1><h2>...这些
$(':animated').css("background","#bbffaa");//改变当前正在执行动画的元素的背景色
//内部过滤器
$("div:contains(in)").css("background","red");//改变含有文本in的div元素的背景色    好像中文不支持呀  用到时  百度
$('div:empty').css("background","#4b0082");//改变不包含子元素或者文本为空的元素
$('div:parent').css("background","#000000");//改变包含子元素或文本的div
$('div:has(.mini)').css("background","red")//改变含有class为.mini元素的div元素的背景色
//可见性过滤选择器
$(':hidden').css("background","red");//改变所有不可见元素的背景色
$('div:hidden').show(3000);//显示隐藏的div元素     $('input:hidden')
//$(':visible').css("background","red");//改变所有可见元素的背景色
//$('div:visible')  $('input:visible')
//属性过滤选择器
//$('div[title]').css();//改变含有属性title的div原色的背景色  这里可以使title属性、id属性、name属性等等
//$('div[title=test]').css();//改变属性title值等于test的div元素的背景色
//$('div[title!=test]').css();//改变属性title值不等于test的div元素的背景色
//$('div[title^=te]').css();//改变属性title值以te开始的div元素的背景色
//$('div[title$=te]').css();//改变属性title值以te结束的div元素的背景色
//$('div[title*=es]').css();//改变属性title值含有es的div元素的背景色
//$('div[id][title*=es]').css();//改变含有属性id并且属性title值含有es的div元素的背景色    可以一层层递增
//子元素过滤选择器
//$('div.one :nth-child(2)').css();//改变每个class为one的div父元素下的第2个子元素的背景色
/*
* :nth-child(even)     能够选取每个父元素下的索引值是偶数的元素
* :nth-child(odd)      能够选取每个父元素下的索引值是奇数的元素
* :nth-child(3n)       能够选取每个父元素下的索引值是3的倍数的元素(n从0开始)
* :nth-child(3n+1)     能够选取每个父元素下的索引值是3n+1的元素(n从0开始)
* */
//$('div.one :first-child').css();//改变每个class为one的div父元素下的第1个子元素的背景色
//$('div.one :last-child').css();//改变每个class为one的div父元素下的最后1个子元素的背景色
//$('div.one :only-child').css();//如果class为one的div父元素下只有一个子元素，那么则改变这个子元素的背景色
/*
* eq(index)只匹配一个元素，而:nth-child将为每一个符合条件的父元素匹配子元素  eq(index)是从0开始 :nth是从1开始
* */

4：表单选择器

//表单属性过滤选择器
$('#form1 input:enabled').val("改变可用input值了");//改变表单内容可用的input值
$('#form1 input:disabled').val("改变不可用input值了");//改变表单内容不可用的input值
//alert($('input:checked').length);//获取多选框选中的个数
//alert($('select :selected').text());//获取下拉框选中的内容
/*
* :input
* :text   获取所有单行文本
* :password
* :radio
* :checkbox
* :submit
* :image
* :reset   获取所有的重置按钮
* :button
* file    获取所有的上传域
* */

 

本文出自 “小浩” 博客，请务必保留此出处http://zhangchi.blog.51cto.com/5214280/1214986