系列选择器理论

1、系列选择器理论2回顾 jQuery是什么？一个优秀的Javascrpt框架 jQuery的核心函数有哪些？jQuery(expression, context)jQuery(elements)jQuery(callback)jQuery(html, ownerDocument)3本章任务 掌握jQuery选择器 操作页面元素属性和样式 4 使用jQuery选择器获取页面元素 操作元素的属性和样式本章目标5操作属性 attr attr(“属性名”) 取得属性的值 attr(“属性名”, “属性值”) 修改属性的值 removeAttr(“属性名”) 删除属性例：$(“#divTest”).att

2、r(“id”);$(“#divTest”).attr(“class”, “hidden”);6操作样式 css css(“样式名”) 取得样式的值 css(“样式名”, “样式值”) 修改样式的值例：$(“#divTest”).css(“background”);$(“#divTest”).css(“background”,”blue”);7操作样式 addClass/removeClass/toggleClass addClass(“css类名”) 添加一个css类 removeClass(“css类名”) 删除一个css类 toggleClass (“css类名”) 切换css类例：$(“

3、#divTest”).addClass(“highlight”);$(“#divTest”).removeClass(“highlight”);8操作样式 addClass(“css类名”) vs attr(“class”, “css类名”) 例执行$(“#divTest”).attr(“class”,”other”);后而执行$(“#divTest”).addClass(“other”);后 9jQuery选择器 基本选择器.class再探 使用.class选择器如何取得上面所示的层？$(“.test”) or $(“.other”) 10jQuery选择器 层次选择器 ancestor d

4、escendant 在给定的祖先元素下匹配所有的后代元素 例：$(“#divTest p”) parent child 在给定的父元素下匹配所有的子元素 例：$(“#divTestp”)11jQuery选择器 基本过滤器选择器选择器说明说明实例实例:first取得第一个元素$(“div:first”):last取得最后一个元素$(“div:last”):even匹配所有索引值为偶数的元素$(“div:even”):odd匹配所有索引值为奇数的元素$(“div:odd”):eq匹配一个给定索引值的元素$(“div:eq(2)”):gt匹配所有大于给定索引值的元素$(“div:gt(2)”):lt

5、匹配所有小于给定索引值的元素$(“div:lt(2)”)12jQuery选择器 表单选择器选择器选择器说明说明:input匹配所有 input, textarea, select 和 button 元素:text匹配所有的单行文本框:password匹配所有密码框:radio匹配所有单选按钮:checkbox匹配所有复选框:submit匹配所有提交按钮:file匹配所有文件域:hidden匹配所有不可见元素，或者type为hidden的元素13jQuery选择器 其它选择器选择器说明说明:contains匹配包含给定文本的元素:checked匹配所有选中的被选中元素(复选框、单选框等，不包括s

6、elect中的option):selected匹配所有选中的option元素14jQuery筛选 查找选择器选择器说明说明children(expr)取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。find(expr)搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。parent(expr)取得一个包含着所有匹配元素的唯一父元素的元素集合。siblings(expr)取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。15jQuery筛选 判断选择器选择器说明说明is(expr)用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。如果没有元素符合，或者表达式无效，都返回false。 例：is(“:hidden”)hasClass(class) 检查当前的元素是否含有某个特定的类，如果有，则返回true。这其实就是 is(. + class)。例：hasClass(“highlight”)16 jQuery的选择器有