第一章-jquery选择器

1、JQUERY COURSE基础教程，学习标准基础教程，学习标准学习是一种态度！学习是一种态度！驾驭命运的舵是奋斗。不抱有一丝幻想，不放弃一点驾驭命运的舵是奋斗。不抱有一丝幻想，不放弃一点机会，不停止一日努力机会，不停止一日努力 n#id （idid选择器）选择器）n根据给定的id匹配一个元素n注：如果选择器中包含特殊字符，可以用“”转义n$(“#div1”)n.class（类选择器）（类选择器）n根据给定的类匹配元素n$(“.class1”)nselector1,selector2 （群组选择器）（群组选择器）n将每一个选择器匹配到的元素合并后一起返回n$(“div1,span”)n* （通配

2、选择器）（通配选择器）n匹配所有元素n$(“*”)nelement（选择器）（选择器）n根据给定的元素名匹配所有元素n$(“div”)nelement（选择器）（选择器）n根据一个div中同时有两个class的元素名匹配元素n$(“.left.right”)（一）基础选择器（一）基础选择器（二）层级选择器（二）层级选择器nancestor descendant （后代选择器）（后代选择器）n在给定的祖先元素下匹配所有的后代元素n$(“form input”)nparent child （子选择器）（子选择器）n在给定的父元素下匹配所有的子元素n$(“form input”)nprev next

3、（临近选择器）（临近选择器）n匹配所有紧接在 prev 元素后的 next 元素n$(“label + input”)nprev siblingsn匹配 prev 元素之后的所有 siblings 元素n$(“prev input”)（三）等价关系（三）等价关系n选择器：$(.one + div) n方法：$(.one).next(div);n选择器：$(#pre div) n方法：$(#pre).nextAll(div);n$(div).is(:checked)n$(div).attr(checked) = checkedn$(.left.right)n$(divclass=“left ri

4、ght”)同等关系同等关系同等关系同等关系同等关系同等关系同等关系同等关系（三）基本过滤选择器（三）基本过滤选择器n:firstn获取第一个元素n$(“li”).first()n:lastn获取最后个元素n$(“li”).last()n:notn去除所有与给定选择器匹配的元素n$(input:not(:checked) n:evenn匹配所有索引值为偶数的元素，从 0 开始计数n$(li:even)n:oddn匹配所有索引值为奇数的元素，从 0 开始计数n$(li:odd)（三）基本过滤选择器（三）基本过滤选择器n:eqn匹配一个给定索引值的元素n$(li:eq(1)n:gtn匹配所有大于给定

5、索引值的元素(不包含)n$(“li:gt(1)n:ltn匹配所有小于给定索引值的元素(不包含)n$(“li:lt(1)n:headern匹配如 h1, h2, h3之类的标题元素n$(:header)n:animatedn匹配所有正在执行动画效果的元素n$(:animated).css(background-color,blue);（三）基本过滤选择器（三）基本过滤选择器n:animatedn匹配所有正在执行动画效果的元素n$(:animated).css(background-color,blue);案例如下：案例如下：nnn$(function()nDivSlideToggle()n$(:

6、animated).css(background,red);n);nfunction DivSlideToggle()n$(.show-box).slideToggle();nsetTimeout(DivSlideToggle(),1000);nnnndjfljsljfklsdjfklsdjflksdjfklsdjfklsdjklfjdklsfjs（四）内容过滤选择器（四）内容过滤选择器ncontainsn匹配包含给定文本的元素n注：有无都没关系n$(“div:contains(text)”).css();nemptyn匹配所有不包含子元素或者文本的空元素n$(“div:empty”)nhas

7、n匹配含有选择器所匹配的元素的元素n$(“div:has(span)”)nparentn匹配含有子元素或者文本的元素n$(“div:parent”)（五）可见性过滤选择器（五）可见性过滤选择器nhiddenn匹配所有不可见元素，或者type为hidden的元素n$(“tr:hidden”)n注：的type=“hidden”也可以用这个选择nvisiblen匹配所有的可见元素n$(“tr:visible”)（六）属性过滤选择器（六）属性过滤选择器nattributen匹配包含给定属性的元素n$(“divid”)nattribute=valuen匹配给定的属性是某个特定值的元素n$(divid=d

8、iv2) 或 $(divid=div2) 或 $(divid=“div2”)nattribute!=valuen匹配所有不含有指定的属性，或者属性不等于特定值的元素(此选择器等价于:not(attr=value)n$(“divid!=div2”) 或 $(divid!=div2) 或 $(divid!=“div2”)nattribute=valuen匹配给定的属性是以某些值开始的元素n$(“divid=d”) 或 $(“divid=d”) 或 $(divid=“d”)nattribute$=valuen匹配给定的属性是以某些值结尾的元素n$(“divid$=2”) 或 $(“divid$=2”

9、) 或 $(divid$=“2”)（六）属性过滤选择器（六）属性过滤选择器nattribute*=valuen匹配给定的属性是以包含某些值的元素n$(“divid*=iv”)nattribute_selector1attribute_selector2n复合属性选择器，需要同时满足多个条件时使用n$(divid=div2class=class1)（七）子元素过滤选择器（七）子元素过滤选择器nnth-childn匹配其父元素下的第N个子或奇偶元素n注：:eq(index) 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！可以使用:nth

10、-child(even):nth-child(odd):nth-child(3n):nth-child(2):nth-child(3n+1):nth-child(3n+2)nfirst-childn匹配第一个子元素n$(ul li:first-child)nlast-childn匹配最后一个子元素n$(ul li:last-child)nonly-childn如果某个元素是父元素中唯一的子元素，那将会被匹配n$(“ul li:only-child”)（八）表单过滤选择器（八）表单过滤选择器n:input (disabled=“disabled”不可编辑状态)n匹配所有匹配所有 input, t

11、extarea, select input, textarea, select 和和 button button 元素元素n$(“#from :input”) 一个from表单里边所有的元素n$(“#from:input”) id为from的input表单n$(“#from input”) 一个from表单里边只有input的元素n:textn匹配所有的单行文本框n$(“:text”)n:passwordn匹配所有密码框n$(:password)n:radion匹配所有单选按钮n$(:radio)（八）表单过滤选择器（八）表单过滤选择器n:checkbox (checked=“checked”

12、选中)n匹配所有复选框n$(“:checkbox”)n:submitn匹配所有提交按钮n$(“:submit”)n:imagen匹配所有图像域n$(“:image”)n:resetn匹配所有重置按钮n$(“reset”)（八）表单过滤选择器（八）表单过滤选择器n:buttonn匹配所有按钮n$(“:button”)n:filen匹配所有文件域n$(“:file”)n:hiddenn匹配所有不可见元素，或者type为hidden的元素n$(“input:hidden”)n$(“tr:hidden”)nIE8中有个bug 如果你的代码中只写了一个hidden ie8中弹出的个数是两个，FF是一个n

13、【附加内容：Select 下拉框 multiple=multiple （把select 变成多选）】（九）表单对象属性过滤选择器（九）表单对象属性过滤选择器n:enabledn匹配所有可用元素n$(“input:enabled”)n:disabledn匹配所有不可用元素n$(input:disabled)n:checkedn匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)n$(input:checked)n:selectedn匹配所有选中的option元素n$(select option:selected)Text() 和和 html() 区别区别nntxt = &ltnhtml = “n nn$(#div01).html(测试); n$(#div02).text(测试); n页面显示： n