第2章：jQuery选择器

1、第2章：jQuery选择器教学目标o 掌握$( )工厂函数的语法规则o 掌握一些CSS选择符的使用o 掌握jQuery独特的自定义选择符o 掌握jQuery的DOM遍历以及如何取得目标元素一、DOM模型1. DOM是什么？ Document object model文档对象模型，是一种与浏览器、系统平台和语言无关的接口，它允许通过程序和脚本来访问和更新文档的内容、结构和样式，且文档处理的结果可以合并回到页面。 DOM充当了JS与网页之间的接口，它以对象网络而非纯文本的形式来表现HTML。 jQuery最大的特性之一是它能够简化在最大的特性之一是它能够简化在DOM中选择元素的任务。中选择元素的任

2、务。一、DOM模型找出以上图中的：祖先元素和后代元素、父元素和子元素、同辈元素一、DOM模型(DOM树)一、DOM模型（DOM对象）二、jQuery工厂函数1. jQuery工厂函数是jQuery的核心函数，其其简写简写形式为形式为$，也是标识符，也是标识符jQuery的别名。的别名。2. jQuery对象是指使用jQuery工厂函数包装DOM元素所产生的对象。 示例1：document是DOM中的一个元素，转化成jQuery对象，应该是$(document) 示例2：document.getElementById(“UserName”)转化成jQuery对象为$(“#UerName”)二、j

3、Query工厂函数3. 将DOM元素转化成jQuery对象： 在将方法连缀到$( )工厂函数后面时，包装在jQuery对象中的元素会被自动、隐匿地自动、隐匿地循环遍历循环遍历。 所有能在CSS样式表中使用的选择符，都能用$( )转化成jQuery对象。 有3种基本的选择符：标签名、ID和类。二、jQuery工厂函数4. jQuery对象必须使用jQuery特有的操作方法。 例如：$(“#UserName”).val( )(jQuery操作操作方法方法） 例如：document.getElementById(“UserName”).value (DOM操作操作方法方法)二、jQuery工厂函数三

4、、选择器选择器标签选择器css选择器基本选择器过滤选择器层级选择器表单域选择器id选择器属性选择器类选择器紧邻同辈选择器子元素选择器相邻同辈选择器后代元素选择器自定义选择器CSS选择器CSS选择器o 子元素组合符（代码清单2-1）n a bn a bn a + bn a bo 伪类选择符（代码清单2-2）n 否定式伪类CSS选择器CSS选择器o属性选择符n定义：通过html元素的属性选择元素，例如$(imgalt)n属性选择符中的标识： 用符号表示开始 用$符号表示结尾 *表示位于字符串中的任意位置的值 !表示相反的值CSS选择器o 属性选择符示例（代码清单2-32-5） 自定义选择器o自定义

5、选择符n定义：与CSS中伪类选择符语法相同，即选择符以一个冒号(:)开头。n示例：$(div.horizontal:eq(1) 自定义选择器自定义选择器n :nth-child( )jQuery中唯一从1开始计数的选择符，并且与eq/even/ odd不同，它是相对于当前元素的父相对于当前元素的父元素而非当前选择的元素而非当前选择的所有所有元素元素来计算位置的。n 对比代码清单2-6和2-7的显示效果。n :contains( )基于上下文内容的选择符，见代码清单2-8。层级选择器o 子元素选择器:$(“parent child”)o 后代元素选择器:$(“ancestor descendan

6、t”)o 紧邻后面同辈元素选择器:$(“prev + next”)o 相邻后面同辈元素选择器:$(“prev siblings”)层级选择器o 示例与练习：n $(“ul.topnav li”).css(“border”, “3px double red”)n $(“form input”).css(“border”, “2px dotted blue”)表单域选择器表单域选择器o 示例formFilters.htmlo 注：.each(function(index, Elem)方法用于遍历一个jQuery对象，并以每个匹配元素(index, Elem)作为上下文来执行函数function，其

7、中当前匹配的DOM元素也可使用this关键字来指代。如果function函数返回false值，则将停止each遍历过程。简单过滤选择器简单过滤选择器o 示例basicFilters.html四、DOM遍历方法及工具o 前面所讲的jQuery选择器可以帮助我们取得所需元素，而这也正是jQuery DOM遍历的专长。有了这些方法及工具，就可以在DOM树中轻松获取目标元素对象。o 对比jQuery选择器与DOM遍历：n$(tr:even).addClass(alt);n$(tr).filter(:even).addClass(alt);o filter(选择器)n 当传入一个选择器，可以从元素集合中

8、迭代筛选出与该选择器匹配的元素子集，并返回由这个元素子集包装成的jQuery对象。n 示例： $(“div”).filter(“.middle”).css(“border-color”, “red”);四、DOM遍历方法及工具o filter(函数)n 当传入一个函数时，可以从元素集合中迭代筛选出使该函数返回值为true的元素子集，并返回由这个元素子集包装成的jQuery对象。n 示例：$(“div”). filter(function(index) return index=1 | $(this).attr(“id”)=“three”; ).css(“border”, “3px double

9、 red”);n 见代码清单2-9四、DOM遍历方法及工具o 读懂以下.filter( )方法检查DOM元素的应用示例：filterByExprFn.html四、DOM遍历方法及工具o遍历同辈元素n第一组：a) .next(selector)：在DOM树中搜索紧跟某元素之后的单个同辈元素，根据需要还可以指定一个选择器对同辈元素进一步筛选。b) .nextall(selector)c) .nextUntil(selector)：直至第一个与selector选择器匹配的同辈元素（但不包含该元素）。n示例：见代码清单2-10和2-11n第二组：a) .prev(selector)b) .prevAl

10、l(selector)c) .prevUntil(selector)四、DOM遍历方法及工具o遍历同辈元素n第三组：.siblings(selector)：用于搜索选中元素的所有其他同辈元素。n第四组：.addBack( )：用于在当前元素集合中加入内部jQuery栈中之前选中的那一组元素。n示例：见代码清单2-12n第五组：.end( )用于获取内部jQuery栈中之前选中的那一组元素。n示例：见代码清单2-14和2-15（连缀方法）四、DOM遍历方法及工具o遍历祖先/父元素n.parents(selector)：用于获取每个选中元素的所有祖先元素，根据需要还可以使用选择器selector进

11、一步筛选。n.parent(selector)：在DOM树中查找每个选中元素的父元素。n.closest(selector)：首先检查当前选中的元素是否与selector匹配，若匹配，则返回该元素本身；不匹配，则沿着DOM树继续向上遍历文档，一层一层向上查找其祖先节点，直至找到与selector匹配的第一个元素。四、DOM遍历方法及工具o遍历后代/子元素n.children(selector)方法：获取选中元素的子元素集合，根据需要还可以指定selector选择器来进一步筛选。示例：$(“form”).children(“:checkbox:checked”)n.contents( )方法：获

12、取选中元素的子节点集合（含文本节点）。n.find(selector)方法：用于从选中元素的后代元素中搜索与selector选择器匹配的元素。示例：$(“p”).find(“span”).addclass(“demo”)n 比较代码清单2-13与2-12的不同遍历方法四、DOM遍历方法及工具四、DOM遍历方法及工具o虽然多数jQuery方法都能返回一个jQuery对象，但也有可能需要访问所需的DOM元素，以便使用JavaScript脚本进一步操作。n.get( )方法方法 作用：获取所有相匹配的DOM元素集合。 格式：.get(index)或index 说明：index指定元素在集合中的位置（

13、值从0开始）；未指定index参数，表示返回所有元素的列表。 示例：foobar以下各语句的返回值是什么？a. $(“li”).get(0)b. $(“li”)0c. $(“li”).get( )四、DOM遍历方法及工具n.index( )方法 作用：取得匹配元素相对于其同辈元素或jQuery对象集，以及匹配元素中与指定元素对应的DOM节点的索引值。 格式：a. .index( )b. .index(selector)c. .index(element) 说明：a. selector是一个选择器，表示在其中查找元素的jQuery对象集。b. element表示DOM元素或在jQuery对象集中

14、查找到的第一个元素。四、DOM遍历方法及工具 示例1：foobar以下语句都表示查找id为“bar”的li元素，请说明index中各参数是什么类型？a.$(“li”).index(document.getElementById(“bar”);b. $(“li”).index($(“#bar”);c.$(“#bar”).index(“li”);d. $(“#bar”).index( ); 示例2：完成练习 get-index.html四、DOM遍历方法及工具n.each( )方法 作用：用于遍历一个jQuery对象，并以每个匹配元素作为上下文来执行一个函数。 格式：.each(function(

15、index, el) 说明：a.参数function(index, el)表示针对每个匹配元素执行的函数，每次执行该函数时都会向它传递这两个参数；b. index是整数（从0开始），表示当前匹配的DOM元素在元素集合中的索引值；c.el表示当前匹配的DOM元素，可用this来代替。四、DOM遍历方法及工具 示例：foobarbaz以下代码的输出结果是？$(“li”).each(function(index)alert(index+”:”+$(this).text( );if(index=1) return false;);四、DOM遍历方法及工具n.selector和context属性 格式：$(selector, context) 说明：a. selector表示选择器b. context是可选参数，用于指定待查找的上层DOM元素集合、jQuery对象或文档；若未指定该参数，则在当前文档中查找。 示例：读懂应用示例objectAccess.html四、DOM遍历方法及工具练习1&2：o 依据Exercise.html文件，对以下题目使用jQuery脚本进行简单编写。练习1：1. 给h1设置#0200BE的背景色2. 把p中包含“is”内容的背景色设置成#B2E0FF3. 将列表中的第3个子元素设置成黄色背景、红色字体、大小