系列选择器理论.pptVIP

1选择器JQuery系列

2回顾jQuery是什么？一个优秀的Javascrīpt框架jQuery的核心函数有哪些？jQuery(expression,[context])jQuery(elements)jQuery(callback)jQuery(html,[ownerDocument])

3本章任务掌握jQuery选择器操作页面元素属性和样式

4本章目标使用jQuery选择器获取页面元素操作元素的属性和样式

5attrattr(“属性名”)取得属性的值attr(“属性名”,“属性值”)修改属性的值removeAttr(“属性名”)删除属性例：$(“#divTest”).attr(“id”);$(“#divTest”).attr(“class”,“hidden”);操作属性

6操作样式csscss(“样式名”)取得样式的值css(“样式名”,“样式值”)修改样式的值例：$(“#divTest”).css(“background”);$(“#divTest”).css(“background”,”blue”);

7操作样式addClass(“css类名”)添加一个css类removeClass(“css类名”)删除一个css类toggleClass(“css类名”)切换css类addClass/removeClass/toggleClass01$(“#divTest”).addClass(“highlight”);$(“#divTest”).removeClass(“highlight”);例：02

8添加标题例添加标题执行$(“#divTest”).attr(“class”,”other”);后添加标题而执行$(“#divTest”).addClass(“other”);后添加标题divid=“divTest”class=“test”/div添加标题divid=“divTest”class=“other”/div添加标题divid=“divTest”class=“testother”/div操作样式addClass(“css类名”)vsattr(“class”,“css类名”)

9jQuery选择器基本选择器.class再探使用.class选择器如何取得上面所示的层？$(“.test”)or$(“.other”)divclass=“testother”/div

10层次选择器ancestordescendant在给定的祖先元素下匹配所有的后代元素例：$(“#divTestp”)parentchild在给定的父元素下匹配所有的子元素例：$(“#divTestp”)jQuery选择器#2022

11jQuery选择器基本过滤器选择器说明实例:first取得第一个元素$(“div:first”):last取得最后一个元素$(“div:last”):even匹配所有索引值为偶数的元素$(“div:even”):odd匹配所有索引值为奇数的元素$(“div:odd”):eq匹配一个给定索引值的元素$(“div:eq(2)”):gt匹配所有大于给定索引值的元素$(“div:gt(2)”):lt匹配所有小于给定索引值的元素$(“div:lt(2)”)

12jQuery选择器表单选择器选择器说明:input匹配所有input,textarea,select和button元素:text匹配所有的单行文本框:password匹配所有密码框:radio匹配所有单选按钮:checkbox匹配所有复选框:submit匹配所有提交按钮:file匹配所有文件域:hidden匹配所有不可见元素，或者type为hidden的元素

13jQuery选择器其它选择器说明:contains匹配包含给定文本的元素:checked匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option):selected匹配所有选中的option元素

14jQuery筛选查找选择器说明children([expr])取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。find(expr)搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。parent([expr])取得一个包含着所有匹配元素的唯一父元素的元素集合。siblings([expr])取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

15jQuery筛选判断选择器说明is(expr)用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。如果没有