1:选择器
1.1:基本选择器
1.1.1 id选择器-》$("#one").css("background","#bbffaa");
1.1.2 class选择器-》$(".mini").css("background","#bbffaa");
1.1.3 标签选择器-》$("div").css("background","#bbffaa");
1.1.4 通配符选择器-》$("*").css("background","#bbffaa");
1.1.5组合选择器-》$("div,span").css("background","#bbffaa");
1.1.6 --->$("span,#two').css("background","#bbffaa"); span中id为two的
1.2 :层次选择器
1.2.1 后代选择器-》$('body div') .css("background","#bbffaa"); body中所有的div
1.2.2 子选择器-》$('div>span') .css("background","#bbffaa");div中的span(是子,不是所有的)
1.2.3下一个选择器-》$('div +span').css("background","#bbffaa"); div中下一个span(只是第一个)
1.2.4 后面所有选择器-》$('#two ~div').css("background","#bbffaa"); id为two元素后面的所有div
1.3 过滤选择器
1.3.1 :first $('div:first').css("background","#bbffaa");所有div中第一个div
1.3.2 :last $('div:last').css("background","#bbffaa");所有div中最后一个div
1.3.3 :not(a) $('input:not(.myclass)').css("background","#bbffaa"); 选取class不是myclass的所有input元素
1.3.4 :even $('input:even').css("background","#bbffaa"); 索引为偶数的input元素
1.3.5 :odd $('input:odd').css("background","#bbffaa"); 索引为奇数的input元素
1.3.6 :eq(index) $('input:eq(1)').css("background","#bbffaa"); 索引为1的input元素
1.3.7 :gt(index) $('input:gt(1)').css("background","#bbffaa"); 索引大于1的input元素(不包括1)
1.3.8 :lt(index) $('input:lt(1)').css("background","#bbffaa"); 索引小于1的input元素(不包括1)
1.3.9 :header $(':header ').css("background","#bbffaa"); 所有header元素
1.3.10 :animated $('div:animated ').css("background","#bbffaa"); 正在执行动画的div
1.4 内容过滤选择器
1.4.1 :contains(text) $('div:contains(di) ').css("background","#bbffaa"); 文本中包含di的所有div
1.4.2 :empty $('div:empty').css("background","#bbffaa");没包含任何元素的div
1.4.3 :has(.class) $("div:has(.mini)").css("background","#bbffaa"); class为mini的div元素
1.4.4 :parent $("div:parent").css("background","#bbffaa"); 有子元素的div ,包括含有文本
1.5 可见过滤选择器
1.5.1 :hidden 选择所有不可见的元素,包括 type=hidden,style="visibility:hidden",style="display:none"
如果只想选择input标签 可以,$("input:hidden")
1.5.2 :visible $("div:visible")..css("background","#bbffaa");所有可见元素
1.6 属性过滤选择器
1.6.1 [a] $("div[title]") .css("background","#bbffaa"); 改变含有title的div
1.6.2 $("div[title=text]") .css("background","#bbffaa"); 改变含有title=test的div
1.6.3 $("div[title!=text]") .css("background","#bbffaa"); 改变含有title!=test的div
1.6.4 $("div[title^=text]") .css("background","#bbffaa"); 改变含有title以text开始的div
1.6.5 $("div[title$=text]") .css("background","#bbffaa"); 改变含有title以text结束的div
1.6.6$("div[title*=text]") .css("background","#bbffaa"); 改变含有title中包含text的div
1.6.7$("div[id] [title*=text]") .css("background","#bbffaa"); 改变含有属性id,并且title中包含text的div
1.7 表单选择器
:input
:test
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
1.8 子元素过滤器
1.8.1 $('div.one :nth-child(2)').css("background","#bbffaa"); 修改每个class为one的div父元素下第二个元素
1.8.2 $('div.one :first-child').css("background","#bbffaa");修改每个class为one的div父元素下第一个元素
1.8.3 $('div.one :last-child').css("background","#bbffaa");修改每个class为one的div父元素下最后一个元素
1.8.4 $('div.one :only-child').css("background","#bbffaa");修改每个class为one的div父元素下只有一个子元素