第2章：jQuery选择器试题.pptx

第2章：jQuery选择器;教学目标;一、DOM模型;一、DOM模型;一、DOM模型(DOM树);一、DOM模型（DOM对象）;二、jQuery工厂函数;二、jQuery工厂函数;二、jQuery工厂函数;二、jQuery工厂函数;三、选择器;CSS选择器;CSS选择器;CSS选择器;CSS选择器;CSS选择器;自定义选择器;自定义选择器;自定义选择器;层级选择器;层级选择器;表单域选择器;表单域选择器;简单过滤选择器;简单过滤选择器;四、DOM遍历方法及工具;filter(选择器) 当传入一个选择器，可以从元素集合中迭代筛选出与该选择器匹配的元素子集，并返回由这个元素子集包装成的jQuery对象。 示例： $(“div”).filter(“.middle”).css(“border-color”, “red”);;filter(函数) 当传入一个函数时，可以从元素集合中迭代筛选出使该函数返回值为true的元素子集，并返回由这个元素子集包装成的jQuery对象。 示例： $(“div”). filter(function(index) { return index==1 || $(this).attr(“id”)==“three”; }).css(“border”, “3px double red”); 见代码清单2-9;读懂以下.filter( )方法检查DOM元素的应用示例：filterByExprFn.html;遍历同辈元素 第一组： .next([selector])：在DOM树中搜索紧跟某元素之后的单个同辈元素，根据需要还可以指定一个选择器对同辈元素进一步筛选。 .nextall([selector]) .nextUntil([selector])：直至第一个与selector选择器匹配的同辈元素（但不包含该元素）。 示例：见代码清单2-10和2-11 第二组： .prev([selector]) .prevAll([selector]) .prevUntil([selector]);遍历同辈元素 第三组： .siblings([selector])：用于搜索选中元素的所有其他同辈元素。 第四组： .addBack( )：用于在当前元素集合中加入内部jQuery栈中之前选中的那一组元素。 示例：见代码清单2-12 第五组：.end( )用于获取内部jQuery栈中之前选中的那一组元素。 示例：见代码清单2-14和2-15（连缀方法）;遍历祖先/父元素 .parents([selector])：用于获取每个选中元素的所有祖先元素，根据需要还可以使用选择器selector进一步筛选。 .parent([selector])：在DOM树中查找每个选中元素的父元素。 .closest(selector)：首先检查当前选中的元素是否与selector匹配，若匹配，则返回该元素本身；不匹配，则沿着DOM树继续向上遍历文档，一层一层向上查找其祖先节点，直至找到与selector匹配的第一个元素。;遍历后代/子元素 .children([selector])方法：获取选中元素的子元素集合，根据需要还可以指定selector选择器来进一步筛选。 示例：$(“form”).children(“:checkbox:checked”) .contents( )方法：获取选中元素的子节点集合（含文本节点）。 .find(selector)方法：用于从选中元素的后代元素中搜索与selector选择器匹配的元素。 示例：$(“p”).find(“span”).addclass(“demo”) 比较代码清单2-13与2-12的不同遍历方法;四、DOM遍历方法及工具;示例： ul li id=“foo”foo/li li id=“bar”bar/li /ul 以下各语句的返回值是什么？ $(“li”).get(0) $(“li”)[0] $(“li”).get( );.index( )方法 作用：取得匹配元素相对于其同辈元素或jQuery对象集，以及匹配元素中与指定元素对应的DOM节点的索引值。 格式： .index( ) .index(selector) .index(element) 说明： selector是一个选择器，表示在其中查找元素的jQuery对象集。 element表示DOM元素或在jQuery对象集中查找到的第一个元素。;示例1： ul li id=“foo”foo/li li id=“bar”bar/li /ul 以下语句都表示查找id为“bar”的li元素，请说明index 中各参数是什么类型？ $(“li”).index(document.getElementById(“bar”))