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(index)
$("input:lt(1)")//选取索引小于1的<input>元素(小于1不包括1)
//:header
$(":header") //选取网页中所有的<h1>，<h2>，<h3>......
// :animated
$("div:animated")//选取正在执行动画的<div>元素
// :focus
$(':focus')//选取当前获取焦点的元素
//基本过滤选择器示例
$('div:first').css('background','#bbffaa');//改变第1个<div>元素的背景颜色
$('div:last').css('background','#bbffaa');//改变最后1个<div>元素的背景颜色
$('div:not(.one)').css('background','#bbffaa');//改变class不为one的<div>元素的背景色
$('div:even').css('background','#bbffaa');//改变索引值为偶数的<div>元素的背景色
$('div:odd').css('background'.'#bbffa');//改变索引为基数的<div>元素的背景色
$('div:eq(3)').css('background','#bbffaa');//改变索引值等于3的<div>元素的背景色
$('div:gt(3)').css('background','#bbffaa');//改变索引值大于3的<div>元素的背景色
$('div:li=t(3)').css('background','#bbffaa');//改变索引值小于3的<div>元素的背景色
$(':header').css('background','#bbffaa');//改变所有的标题元素，例如<h1>,<h2>...这些元素的背景色
$(':animated').css('background','#bbffaa');//改变当前正在执行动画的元素的背景色
$(':focus').css('background','#bbffaa');//改变当前获取焦点的元素的背景色
2)内容过滤选择器
// :contains(text) 选取含有文本内容为"text" 的元素
// :empty 选取不包含子元素或者文本的空元素
// :has(selector) 选取含有选择器 所匹配的元素的元素
// :parent 选取含有子元素或者文本的元素
// 改变含有文本"di" 的<div> 元素的背景色
$('div:contains(di)').css('background','#bbffaa');
//改变不包含子元素(包括文本元素)的<div>空元素的背景色
$('div:empty').css('backgrund','#bbffaa');
//改变含有class为mini元素的<div>元素的背景色
$("div:has('.mini')").css('background','bbffaa');
//改变含有子元素(包括文本元素)的<div>元素的背景颜色
$('div:parent').css('background'.'#bbffaa');
3)可见性过滤选择器
可见性过滤选择权是根据元素的可见和不可见状态来选择相应的元素。
// :hidden 选取不可以见的元素 // :visible 选取所有可见的元素 //改变所有可见的<div>元素的背景色 $('div:visible').css('background','#FF6500'); //显示隐藏的<div>元素 $('div:hidden').show(3000);
4.属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。
// [attrbute] 选取拥有此属性的元素
// [attrbute=value]选取属性值为value的元素
// [attrbute!=value]选取属性的值不等于value的元素
//[attribute^=value]选取属性的值以value开始的元素
//[attribute$=value]选取属性的值以value结束的元素
//[attrbute*=value]选取属性值含有value的元素
//[attrbute|=value]选取属性等于给定字符串或以该字符为前缀(该字符串后跟一个连字符'-')的元素
//[attrbute~=value]选取属性用空格分隔的值中包含一个给定值的元素
//[attrbute1][attrbute2][attrbuteN]
//用属性选择器合并成一个符合属性选择器，满足多个条件。每选择一次，缩小一次范围
//示例
//改变含有属性title的<div>元素的背景颜色
$('div[title]').css('background','#bbffaa');
//改变属性title值等于'test'的<div>元素的背景色
$('div[title=test]').css('background','#bbffaa');
//改变属性title值不等于test的<div>元素的背景色
$('div[title!=test]').css('background'.'#bbffaa');
//改变属性title值以'te'开始的<div>元素的背景色
$('div[title^=te]').css('background','#bbffaa');
//改变属性title值以'est'结束的<div>元素的背景颜色
$('div[title$=est').css('background','#bbffaa');
//该变属性title值含有'es'的<div>元素的背景色
$('div[title*=es]').css('background','#bbffaa');
//改变含有属性id，并且属性title值含有'es'的<div>元素的背景色
$('div[id][title*=es]').css('background','#bbffaa');
//改变属性title等于en或以en为前缀的元素的背景色
$("div[title|='en']").css("background","#bbffaa")
//改变属性title用空格分隔的值中包含字符uk的元素的背景色
$("div[title~='uk']").css("background","#bbffaa")
5.子元素过滤器
子元素过滤器选择器的过滤规则相对于其它的选择器稍微有些复杂，不过没关系,只要将元素的
父元素和子元素区分清楚，那么使用起来也非常简单，另外还要注意它与普通的过滤器的区别
//:nth-child(index/even/odd/equation) 选取每个父元素下的第index个子元素或者奇偶元素.(index从1算起)
//:first-child 选取每个元素的第1个子元素
//:last-child 选取每一个父元素的最后一个子元素
//:only-child 如果某个元素是它父元素中惟一的子元素，那么将会被匹配。如果父元素中含有其他元素，则不会被匹配
//:nth-child(even)
//:nth-child(odd)
//:nth-child(2)
//:nth-child(3n)
//:nth-child(3n+1)
//改变每一class为one的<div>父元素下的第2个子元素的背景
$("div.one :nth-child(2)"),css('background','#bbffaa');
//改变每个class为one的<div>父元素下的第1个子元素的背景色
$('div.one:first-child').css('background','#bbffaa');
//改变每个class为one的<div>父元素下的最后一个子元素的背景色
$('div.one:last-child').css('background','#bbffaa');
//如果class为one的<div>父元素下只有一个子元素,那么则改变这个子元素的背景色
$('div.one:only-child').css('background','#bbffaa');
6.表单对象属性过滤选择器
此选择器主要是对所选择的表达进行过滤，例如选择被选中的下拉框，多选框等元素。
// :enabled 选取所有可用元素
// :disabled 选取所有不可用元素
// :checked 选取所有被选中的元素(单选框,复选框)
// :selected 选取所有被选中的选项元素(下拉列表）
//示例
// $('#form1 input:enabled').val('这里变化了');
// $('#form1 input:disabled').val('这里变化了!');
// 获取多选框选中的个数
//$('input:checked').length;
//获取下拉框选中的内容
$('select :selected').text();
表单选择器
// :input 选取所有的 <input> 、<select>、<button>
// :text 选取所有的单行文本框
// :password 选取所有的密码框
// :radio 选取所有的单选框
// :checkbox 选取所有的多选框
// :submit 选取所有的多选框
// :image 选取所有的图像按钮
// :reset 选取所有的重置按钮
// :button 选取所有的按钮
// :file 选取所有的上传域
// :hidden 选取所有不可见元素
// 如果想得到表单内表单元素的个数,代码如下:
$("#form1:input").length;
//如果想得到表单内单行文本框的个数,代码如下:
$("#form1:text").length;
//如果想得到表单内密码框的个数,代码如下:
$("#form1:password").length;
// 同理，其他表单选择器的操作与此类似