• 1. 1选择器JQuery系列
  • 2. 2回顾 jQuery是什么? 一个优秀的Javascrīpt框架 jQuery的核心函数有哪些? jQuery(expression, [context]) jQuery(elements) jQuery(callback) jQuery(html, [ownerDocument])
  • 3. 3本章任务掌握jQuery选择器 操作页面元素属性和样式
  • 4. 4使用jQuery选择器获取页面元素 操作元素的属性和样式本章目标
  • 5. 5操作属性attr attr(“属性名”) 取得属性的值 attr(“属性名”, “属性值”) 修改属性的值 removeAttr(“属性名”) 删除属性 例: $(“#divTest”).attr(“id”); $(“#divTest”).attr(“class”, “hidden”);
  • 6. 6操作样式css css(“样式名”) 取得样式的值 css(“样式名”, “样式值”) 修改样式的值 例: $(“#divTest”).css(“background”); $(“#divTest”).css(“background”,”blue”);
  • 7. 7操作样式addClass/removeClass/toggleClass addClass(“css类名”) 添加一个css类 removeClass(“css类名”) 删除一个css类 toggleClass (“css类名”) 切换css类 例: $(“#divTest”).addClass(“highlight”); $(“#divTest”).removeClass(“highlight”);
  • 8. 8操作样式addClass(“css类名”) vs attr(“class”, “css类名”) 例 执行$(“#divTest”).attr(“class”,”other”);后 而执行$(“#divTest”).addClass(“other”);后
  • 9. 9jQuery选择器基本选择器.class再探 使用.class选择器如何取得上面所示的层? $(“.test”) or $(“.other”)
  • 10. 10jQuery选择器层次选择器 ancestor descendant 在给定的祖先元素下匹配所有的后代元素 例:$(“#divTest p”) parent > child 在给定的父元素下匹配所有的子元素 例:$(“#divTest>p”)
  • 11. 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)”)
  • 12. 12jQuery选择器表单选择器选择器说明:input匹配所有 input, textarea, select 和 button 元素:text匹配所有的单行文本框:password匹配所有密码框:radio匹配所有单选按钮:checkbox匹配所有复选框:submit匹配所有提交按钮:file匹配所有文件域:hidden匹配所有不可见元素,或者type为hidden的元素
  • 13. 13jQuery选择器其它选择器说明:contains匹配包含给定文本的元素:checked匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option):selected匹配所有选中的option元素
  • 14. 14jQuery筛选查找选择器说明children([expr])取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。find(expr)搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。parent([expr])取得一个包含着所有匹配元素的唯一父元素的元素集合。siblings([expr])取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。
  • 15. 15jQuery筛选判断选择器说明is(expr)用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。 如果没有元素符合,或者表达式无效,都返回'false'。 例:is(“:hidden”)hasClass(class)检查当前的元素是否含有某个特定的类,如果有,则返回true。 这其实就是 is("." + class)。 例:hasClass(“highlight”)
  • 16. 16jQuery的选择器有哪些? 如何操作元素的属性? attr(“class”, “ClassName”)与addClass(“ClassName”)的区别总结
  • 17. 17作业作业: 作业.txt