第一章-jquery选择器.ppt

JQUERY COURSE 基础教程，学习标准 学习是一种态度！！！ 驾驭命运的舵是奋斗。不抱有一丝幻想，不放弃一点机会，不停止一日努力 #id （id选择器） 根据给定的id匹配一个元素 注：如果选择器中包含特殊字符，可以用“\\”转义 $(“#div1”) .class（类选择器） 根据给定的类匹配元素 $(“.class1”) selector1,selector2 （群组选择器） 将每一个选择器匹配到的元素合并后一起返回 $(“div1,span”) * （通配选择器） 匹配所有元素 $(“*”) element（选择器） 根据给定的元素名匹配所有元素 $(“div”) element（选择器） 根据一个div中同时有两个class的元素名匹配元素 $(“.left.right”) （一）基础选择器 （二）层级选择器 ancestor descendant （后代选择器） 在给定的祖先元素下匹配所有的后代元素 $(“form input”) parent child （子选择器） 在给定的父元素下匹配所有的子元素 $(“form input”) prev next（临近选择器） 匹配所有紧接在 prev 元素后的 next 元素 $(“label + input”) prev siblings 匹配 prev 元素之后的所有 siblings 元素 $(“prev ~ input”) （三）等价关系 选择器：$(‘.one + div’) 方法：$(‘.one’).next(‘div’); 选择器：$(‘#pre ~ div’) 方法：$(‘#pre’).nextAll(‘div’); $(‘div’).is(:checked) $(‘div’).attr(checked) == checked‘ $(‘.left.right’) $(‘div[class=“left right”]’) 同等关系 同等关系 同等关系 同等关系 （三）基本过滤选择器 :first 获取第一个元素 $(“li”).first() :last 获取最后个元素 $(“li”).last() :not 去除所有与给定选择器匹配的元素 $(input:not(:checked)) :even 匹配所有索引值为偶数的元素，从 0 开始计数 $(li:even) :odd 匹配所有索引值为奇数的元素，从 0 开始计数 $(li:odd) （三）基本过滤选择器 :eq 匹配一个给定索引值的元素 $(li:eq(1)) :gt 匹配所有大于给定索引值的元素(不包含) $(“li:gt(1)) :lt 匹配所有小于给定索引值的元素(不包含) $(“li:lt(1)) :header 匹配如 h1, h2, h3之类的标题元素 $(:header) :animated 匹配所有正在执行动画效果的元素 $(:animated).css(background-color,blue); （三）基本过滤选择器 :animated 匹配所有正在执行动画效果的元素 $(:animated).css(background-color,blue); 案例如下： script src=js/jquery-1.7.2.min.js type=text/javascript/script script $(function(){ DivSlideToggle() $(:animated).css(background,red); }); function DivSlideToggle(){ $(.show-box).slideToggle(); setTimeout(DivSlideToggle(),1000); } /script div class=show-box style=display:none; pdjfljsljfklsdjfklsdjflksdjfklsdjfklsdjklfjdklsfjs/p /div （四）内容过滤选择器 contains 匹配包含给定文本的元素 注：有无’’都没关系 $(“div:contains(text)”).css(); empty 匹配所有不包含子元素或者文本的空元素 $(“div:empty”) has 匹配含有选择器所匹配的元素的元素 $(“div:has(span)”) parent 匹配含有子元素或者文本的元素 $(“div:parent”) （五）可见性过滤选择器 hidden 匹配所有不可见元素，或者type为hidden的元素 $(“tr:hidden”) 注：input的type=“hidden”也可以用这个选择 visible 匹配所有的可见元素 $(“