jquery常用选择器.docx
jquery常用选择器层次选择器: $('div p');/选取div下的所有的p元素 $('div>p').css('border','1px solid red');/只选取div下的直接子元素 /相邻的元素 $('div p).css('border','1px solid red');与$('div').nextAll('p')等价;/表示div后面的 所有p兄弟元素 $('div *').css('border','1px solid red');/表示div后面的所有兄弟元素 $('div +p').css('border','1px solid red');与$('div').next('p')等价/这种写法表示div后 只找紧挨着的第一个兄弟元素,并且该元素是p。 获得兄弟元素的方法: next; /当前元素之后的紧邻着的第一个兄弟元素 nextAll;/当前元素之后的所有兄弟元素 prev;/当前元素之前的紧邻着的兄弟元素 prevAll;/当前元素之前的所有兄弟元素 siblings;/当前元素的所有兄弟元素 基本过滤选择器: $('p:first')与$('p').first是等价的。获取所有p元素中的第一个P元素 $('p:last')与$('p').last $('p:eq(2)')在所有的p元素中找到索引为2的元素 $('p:even')选取所有奇数的p标签 $('p:odd')选取所有偶数的p标签 $('p:not(.tst)').css;选取所有的不应用.tst这种样式的p元素not后面写一个选择器名称 $('p:gt(1)')选取所有索引值大于1的p元素 $('p:lt(3)')选取所有索引值小于3的p元素。 $(':header')选取页面上所有的h1-h6的元素。 属性过滤选择器: $("divid")选取有id属性的<div> $("divtitle=test")选取title属性为“test”的<div>,jQuery中没有对getElementsByName 进行封装,用$("inputname=abc") $("divtitle!=test")选取title属性不为“test”的<div> 还可以选择开头、结束、包含等,条件还 可以复合。 表单对象属性选择器: $("#form1 :enabled")选取id为form1的表单内所有启用的元素 $("#form1 :disabled")选取id为form1的表单内所有禁用的元素 $(“input:checked”)选取所有选中的元素,这个中间不能加空格. $("select :selected")选取所有选中的选项元素 表单滤选择器: $('#form1:enabled');/这个表示能够启用的且id为form1的标签 $('#form1 :enabled');/这个表示能够启用的且id为form1下的所有启用的元素。 $('input:checked') $('input:disabled') $ ('select:selected') $(“:input")选取所有<input>、<textarea>、<select>和<button>元素。和$("input")不一样, $("input")只获得<input> $(":text")选取所有单行文本框,等价于 $("inputtype=text"),$(inputtype=text'),$(:text'); $(“:password”)选取所有密码框。 内容过滤选择器: :contains(text):过滤出包含给定文本的元素。 :empty包含没有子元素的或者是内容为空的元素。 :has(selecttor) :parent 获得有子元素的元素。 可见性过滤器: :hidden 选取所有不可见元素包括:(如果直接写:hidden则会包含headtitlescriptstyle.) 1.表单元素type=“hidden” 2.设置css的display:none 3.高度和宽度明确设置为0的元素。 4.父元素时隐藏的,所以子元素也是隐藏的 visibility: hidden 与opacity为0不算,因为还占位所以不认为是hidden.(与之前版本 jQuery不太一样,1.3.2之前) :visible 选取所有可见元素 子元素过滤选择器: first-child 与first的区别:first只能选取第一个,而first-child,则能选取每个子元素的第一个元素。 last-child: only-child:匹配当前父元素中只有一个子元素的元素。 nth-child:对比eq来理解,eq值匹配一个,nth-child为每个父元素都要匹配一个子元素。 nth-child(index),index从1开始 nth-child(even) nth-child(odd) nth-child(3n),选取3的倍数的元素 nth-child(3n+1)满足3的倍数+1的元素 注意: 1.通过jQuery选择器选择的对象本身就是一个jQuery对象,选择器具有隐式迭代 的作用,例如: $('p').click(function alert(this.innerText); ); 是为所有的p都注释了click事件。 2.无论选择器选择了几个元素返回的一个元素都是一个集合对象,如果没有找到相应的元素,则这个集合对象的length值为0,如果选择到了元素,这个length的元素就是选择的元素的索引值。所以也根据这个属性来判断元素是否存在。例如: Iif($('#div').length>0)/判断元素是否存在 3.在事件中this还是表示当前触发事件的元素的对象,但是这里的this是dom对象而不是jQuery对象。如果需要执行jQuery中的方法或属性时,应该把this转换为jQuery对象 转换方式为:$(this);