jquery总结

 

 

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父元素下只有一个子元素