教学课件任务1 jQuery开发基础知识-2 jQuery选择器及元素的查找方法.pptx

教材配套资源页完整PPT课件教学课件任务1 jQuery开发基础知识-2 jQuery选择器及元素的查找方法1任务1 jQuery开发基础知识2n1.1 JavaScript简介n1.2 jQuery概述n1.3 jQuery选择器n1.4 jQuery中元素的查找操作n1.5 jQuery中操作DOM元素的几个基本方法n1.6 jQuery中的事件机制n1.7 实例开发-实现输入框外围的阴影3njQuery中所有选择器的写法都是jQuery(选择器)，简写为$(选择器)，括号中的选择器写法与css样式表选择器的写法一致，所有选择器得到的jQuery对象都是一个DOM元素的伪数组。n基本选择器：uID选择器、标记名选择器、类选择器、通用选择器、组选择器n层级选择器：u包含选择器、子对象选择器、相邻选择器和兄弟选择器4njavaScript提供了document对象的原生方法getElementById()获取页面中指定ID值的元素，例如获取id是bt2的button按钮，代码为udocument.getElementById(bt2)n使用jQuery获取，代码为$(#bt2)n注意：当使用ID选择器时，jQuery会返回0个或者1个DOM元素，如果页面中有多个元素使用了相同的ID，也只能返回第一个元素5n示例1-9u使用id选择器获取右图中id为list_1的元素，在控制台中输出元素的个数和元素的文本内容u观察运行结果，说明问题6n示例1-10u使用标记名选择器获取页面中的li元素，输出元素的个数和元素的内容u使用text()方法有什么特点？n示例1-11u使用js代码完成获取li元素，输出元素个数和内容为li设置上下边距10像素，使用js和jQuery代码设置所有li的背景色为黄色。7n包含选择器u格式：$(ancestor descendant)u选定的是最后一级后代选择器所指定的元素，这组元素必须包含在祖先选择器指定的元素内部，可以是祖先元素的直接子元素，也可以是其它级别的后代元素。n子对象选择器u格式：$(parentchild)u选定的是子元素选择器所指定的元素，这组元素必须是父元素选择器指定的元素的直接子元素。若是省略子元素选择器，则表示选择指定父元素内部的所有子元素，相当于$(parent*)8n相邻选择器u格式：$(prev+next)u选定的是next选择器所指定的元素，该元素必须是prev选择器指定元素的下一个相邻元素。n兄弟选择器u格式：$(prevsiblings)u选定的是siblings选择器所指定的元素，这组元素必须是位于prev选择器指定元素的后面，且与prev选择器指定元素同级，若是省略siblings，则选择prev选择器指定元素后面的所有兄弟元素。9n使用jQuery选择器获取的结果都是以伪数组的方式存在的，如果需要精准找到其中的一个DOM元素，则需要使用过滤器eq()方法或者伪类选择器:eq()n用法：u$(selector).eq(index)u$(selector:eq(index)u两者作用相同10选择器选择器说明说明:first匹配找到的第一个元素:last匹配找到的最后一个元素:not去除所有与给定选择器匹配的元素，例如$(p:not(divp)选择不包含在div内部的所有段落:even匹配所有索引值为偶数的元素，例如$(p:even):odd匹配所有索引值为奇数的元素:gt(索引值索引值)匹配所有大于给定索引值的元素，索引值从0开始:lt(索引值索引值)匹配所有小于给定索引值的元，索引值从0开始:nth-child(索引索引值值)匹配其父元素下所有子元素中的第N个或奇偶元素，括号中索引值最小为1而不是0；还可以使用2n表示偶元素或者2n+/-1表示奇元素；也可使用3n或3n+1选取相应位置的子元素:first-child匹配每个父元素下的第一个子元素。:first选择器只匹配指定元素中的第一个，而:first-child为每个父元素匹配第一个子元素例如：$(div:first-child)，匹配所有父元素下的第一个div元素，结果可能有多个$(“div:first “)，匹配所有div中的第一个，结果最多有1个:last-child匹配每个父元素下的最后一个子元素11n补充示例：u对于图示代码，若是使用$(divp:first)，只选择第一个div内部第一个段落，若是使用$(divp:first-child)，则选择两个div内部的第一个段落12n若页面中只有图示的元素：u若是使用$(divp:first)，会选取哪些元素？u使用$(div:first)呢？u使用$(divp:first-child)呢？u使用$(div:first-child)呢？u$(div:first-child)呢？u$(div:first)呢？13n对于下面代码，若是使用$(div:first-child)，将会选择哪些元素？使用$(div:first)呢？n若是将div2中的div移至第一个段落后面，使用$(div:first-child)会选择哪些元素？14n应用示例u页面中有6个段落，使用jQuery代码设置偶数序号的段落背景为黄色，字号为2remu若是使用样式代码要如何完成？15n查找操作，是指根据某个选择器选定的一组元素，去获取页面中的另一组元素。基于DOM树形结构，可以从一个节点轻松的找到其余的节点，常用的方法有查找后代元素、查找祖先元素、查找兄弟元素等等。n【注意】u所有的查找方法都可以使用参数缩小查找结果的范围，参数可以是基本选择器或者带过滤器的选择器，但是不能使用层级选择器。16n直接查找子元素children()u格式：$(selector).children(filter)。u方法返回被选元素的所有直接子元素，可以使用filter指定需要的具体的子元素（类名、id、标记名都可）n查找后代元素find()u格式：$(selector).find(filter)。ufind()方法返回被选元素中指定的后代元素，该方法沿着DOM元素的后代向下遍历，直至最后一个后代的所有路径。17n查找直接父元素parent()方法u格式：$(selector).parent(filter)。u获取每个匹配元素的直接父元素，获取的结果不论有几个元素，都是以组的方式存在。u例如：$(span).parent(p)，查找的是span元素的父元素p，如果span元素的父元素不是段落，则查找不会返回，如果段落不是span元素的父元素，则查找也不会返回。n查找祖先元素parents()方法u格式：$(selector).parents(filter)。u该方法沿着DOM树向上遍历每个层级，直至文档根元素的所有路径，默认情况下最后一个找到的一定是根元素html。18n页面元素结构如下图所示u$(img).parents().length的结果是几？都包含哪些元素节点？1. 使用nodeName获取节点名称观察2. 如果对$(img).eq(1)操作，结果如何？3. 将第2个img从div中移出后单独为其添加一个父元素div，$(img).parents()结果如何？19n向上查找兄弟元素u查找上一个相邻的兄弟元素prev()方法，$(selector).prev(filter)u查找前面所有的兄弟元素prevAll()方法，$(selector).prevAll(filter)n向下查找兄弟元素u查找下一个相邻的兄弟元素next()方法，$(selector).next(filter)u查找后面所有的兄弟元素nextAll()方法，$(selector). nextAll(filter)n查找兄弟元素-siblings()方法u$(selector).siblings(filter)20n要从body下面第一个段落元素的子元素span开始找到body中第二个段落元素的子元素an使用向上查找父元素和向下查找子元素实现u$(span).parent().parent().children(p:eq(1).children(a)n使用向上查找祖先元素和向下查找后代元素实现u$(span).parents(body).find(a)n使用查找兄弟元素的方法实现u$(span).parent().next().children(a)21本课件制作整理者：郭迎春 仅可用于教学、学习、交流使用 如内容、图片、字体等有侵权，请联系删除。 22