JQuery选择器

几种常用的JQuery选择器：基本选择器、层次选择器、过滤选择器、表单选择器等

基本选择器

1.标签选择器

　　$("div").css("background","#eee");//改变所有<div>标签的背景色

2.id选择器

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

3.类选择器

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

4.群组选择器

　　$(".book-one, .book-two, #header p").css("background","#eee");//使用逗号分隔，同时选取多种类型的元素

　　$(".book.inactive").css("display","none");//选取同时具有book类和inactive类的元素

5.通配选择器

　　$("*").css("border","1px solid #eee");//选取页面中的所有元素，设置边框样式

层次选择器

　 $("ul li").css("border","1px solid #eee");//选取所有ul标签内的所有li 标签，为他们添加边框样式

　 $("body>p").css("display","none");//选取body元素内的所有直接子元素p

　　$(".one+div").css("background","#eee");//选取class为one的下一个<div>同辈元素

　　$(".#two~div").css("background","#eee");//选取id为two的元素后面所有的<div>同辈元素

过滤选择器

1.基本过滤选择器

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

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

　　$("div:not(.one)").css("background","#eee");//改变class不为one的div元素的背景色

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

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

　　$("div:eq(3)").css("background","#eee");//改变索引值为3的div元素的背景色

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

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

　　$(":header").css("background","#eee");//改变所有的标题元素，如<h1>,<h2>,<h3>等的背景颜色

　　$(":animated").css("background","#eee");//改变当前正在执行动画元素的背景颜色

　　$(":focus").css("background","#eee");//改变当前获取焦点的元素的背景色

2.内容过滤选择器

　　$("div:contains(我)").css("background","#eee");//改变含有文本“我”的div元素的背景色

　　$("div:empty").css("background","#eee");//改变不含子元素（包括文本元素）的div空元素的背景色

　　$("div:has('.one')").css("background","#eee");//改变含有class为one的div元素的背景色

　　$("div:parent").css("background","#eee");//改变含有子元素的div元素的背景色

3.可见性过滤选择器

　　$("div:visible").css("background","#eee");//改变所有可见的div元素的背景色

　　$("div:hidden").show(3000);//显示隐藏的div元素，3000ms

4.属性过滤选择器

　　$("div[title]").css("background","#eee");//改变含有属性title的div元素的背景色

　　例：<div title="test">title为test的div元素</div>

　　$('div[title="test"]').css("background","#eee");//改变属性title值等于“test”的div元素的背景色

　　$('div[title！="test"]').css("background","#eee");//改变属性title值不等于“test”的div元素的背景色

　　$('div[title^="te"]').css("background","#eee");//改变属性title值以“te”开始的div元素的背景色

　　$('div[title$="est"]').css("background","#eee");//改变属性title值以“est”结束的div元素的背景色

　　$('div[title*="es"]').css("background","#eee");//改变属性title值含有“es”的div元素的背景色

　　$('div[id][title*="es"]').css("background","#eee");//改变含有属性id，并且属性title值含有“es”的div元素的背景色

5.子元素过滤选择器

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

　　注：:nth-child(even)能选取每个父元素下的索引值是偶数的元素

　　　　:nth-child(odd)能选取每个父元素下的索引值是奇数的元素

　　　　:nth-child(3n)能选取每个父元素下的索引值是3的倍数的元素（n从1开始）

　　$("div.one:first-child").css("background","#eee');//改变class为one的div父元素下的第一个子元素的背景色

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

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

6.表单对象属性过滤选择器

　　:enabled 选取所有的可用元素

　　:disabled 选取所有的不可用元素

　　:checked 选取所有的被选中元素（单选框、复选框）

　　:selected 选取所有被选中的选项元素（下拉列表）

　　例：$("#form1 input:enabled").val("这里变化了！");//改变id为form1的表单内可用<input>元素的值

　　　　$("#form1 input:disabled").val("这里变化了！");//改变id为form1的表单内不可用的<input>元素的值

　　　　$("input:checked").length;//获取多选框选中的个数

　　　　$("select:selected").text();//获取下拉框选中的内容

表单选择器

　　$(":input")选取所有的<input>,<textarea>,<select>,<button>元素

　　$(":text")选取所有的单行文本框

　　$(":password")选取所有的密码框

　　$(":radio")选取所有的单选框

　　$(":checkbox")选取所有的复选框

　　$(":submit")选取所有的提交按钮

　　$(":image")选取所有的image按钮

　　$(":reset")选取所有的重置按钮

　　$(":button")选取所有的按钮

　　$(":file")选取所有的上传域

　　$(":hidden")选取所有的不可见元素