jQuery开发基础知识-2 jQuery选择器及元素的查找方法

JavaScript高级编程任务1

jQuery开发基础知识教学内容1.1JavaScript简介1.2jQuery概述1.3jQuery选择器1.4jQuery中元素的查找操作1.5jQuery中操作DOM元素的几个基本方法1.6jQuery中的事件机制1.7实例开发-实现输入框外围的阴影1.3jQuery选择器jQuery中所有选择器的写法都是jQuery(选择器)，简写为$(选择器)，括号中的选择器写法与css样式表选择器的写法一致，所有选择器得到的jQuery对象都是一个DOM元素的伪数组。基本选择器：ID选择器、标记名选择器、类选择器、通用选择器、组选择器层级选择器：包含选择器、子对象选择器、相邻选择器和兄弟选择器基本选择器-ID选择器javaScript提供了document对象的原生方法getElementById()获取页面中指定ID值的元素，例如获取id是bt2的button按钮，代码为document.getElementById('bt2')使用jQuery获取，代码为$('#bt2')注意：当使用ID选择器时，jQuery会返回0个或者1个DOM元素，如果页面中有多个元素使用了相同的ID，也只能返回第一个元素ID选择器应用示例1-9使用id选择器获取右图中id为list_1的元素，在控制台中输出元素的个数和元素的文本内容观察运行结果，说明问题基本选择器-标记名选择器示例1-10使用标记名选择器获取页面中的li元素，输出元素的个数和元素的内容使用text()方法有什么特点？示例1-11使用js代码完成获取li元素，输出元素个数和内容为li设置上下边距10像素，使用js和jQuery代码设置所有li的背景色为黄色。层级选择器包含选择器格式：$("ancestordescendant")选定的是最后一级后代选择器所指定的元素，这组元素必须包含在祖先选择器指定的元素内部，可以是祖先元素的直接子元素，也可以是其它级别的后代元素。子对象选择器格式：$("parent>child")选定的是子元素选择器所指定的元素，这组元素必须是父元素选择器指定的元素的直接子元素。若是省略子元素选择器，则表示选择指定父元素内部的所有子元素，相当于$("parent>*")层级选择器相邻选择器格式：$("prev+next")选定的是next选择器所指定的元素，该元素必须是prev选择器指定元素的下一个相邻元素。兄弟选择器格式：$("prev~siblings")选定的是siblings选择器所指定的元素，这组元素必须是位于prev选择器指定元素的后面，且与prev选择器指定元素同级，若是省略siblings，则选择prev选择器指定元素后面的所有兄弟元素。过滤器eq()和伪类选择器:eq()使用jQuery选择器获取的结果都是以伪数组的方式存在的，如果需要精准找到其中的一个DOM元素，则需要使用过滤器eq()方法或者伪类选择器:eq()用法：$(selector).eq(index)$("selector:eq(index)")两者作用相同jQuery中的伪类选择器选择器说明:first匹配找到的第一个元素:last匹配找到的最后一个元素:not去除所有与给定选择器匹配的元素，例如$("p:not(div>p)")选择不包含在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匹配每个父元素下的最后一个子元素伪类选择器:first-child和:first补充示例：对于图示代码，若是使用$("div>p:first")，只选择第一个div内部第一个段落，若是使用$("div>p:first-child")，则选择两个div内部的第一个段落思考问题若页面中只有图示的元素：若是使用$("div>p:first")，会选取哪些元素？使用$("div>:first")呢？使用$("div>p:first-child")呢？使用$("div>:first-child")呢？$("div:first-child")呢？$("div:first")呢？思考问题对于下面代码，若是使用$("div:first-child")，将会选择哪些元素？使用$("div:first")呢？若是将div2中的div移至第一个段落后面，使用$("div:first-child")会选择哪些元素？伪类选择器:even和:odd应用示例页面中有6个段落，使用jQuery代码设置偶数序号的段落背景为黄色，字号为2rem若是使用样式代码要如何完成？1.4jQuery中的元素查找操作查找操作，是指根据某个选择器选定的一组元素，去获取页面中的另一组元素。基于DOM树形结构，可以从一个节点轻松的找到其余的节点，常用的方法有查找后代元素、查找祖先元素、查找兄弟元素等等。【注意】所有的查找方法都可以使用参数缩小查找结果的范围，参数可以是基本选择器或者带过滤器的选择器，但是不能使用层级选择器。向下查找后代元素直接查找子元素children()格式：$(selector).children(filter)。方法返回被选元素的所有直接子元素，可以使用filter指定需要的具体的子元素（类名、id、标记名都可）查找后代元素find()格式：$(selector).find(filter)。find()方法返回被选元素中指定的后代元素，该方法沿着DOM元素的后代向下遍历，直至最后一个后代的所有路径。向上查找祖先元素查找直接父元素parent()方法格式：$(selector).parent(filter)。获取每个匹配元素的直接父元素，获取的结果不论有几个元素，都是以组的方式存在。例如：$("span").parent("p")，查找的是span元素的父元素p，如果span元素的父元素不是段落，则查找不会返回，如果段落不是span元素的父元素，则查找也不会返回。查找祖先元素parents()方法格式：$(selector).parents(filter)。该方法沿着DOM树向上遍历每个层级，直至文档根元素的所有路径，默认情况下最后一个找到的一定是根元素html。应用parents页面元素结构如下图所示$("img").parents().length的结果是几？都包含哪些元素节点？使用nodeName获取节点名称观察如果对$("img").eq(1)操作，结果如何？将第2个img从div中移出后单独为其添加一个父元素div，$("img").parents()结果如何？查找兄弟元素向上查找兄弟元素查找上一个相邻的兄弟元素prev()方法，$(selector).prev(filter)查找前面所有的兄弟元素prevAll()方法，$(selector).prevAll(filter)向下查找兄弟元素查找下一个相邻的兄弟元素next()方法，$(selector).next(filter)查找后面所有的兄弟元素nextAll()方法，$(selector).nextAll(filter)查找兄弟元素-siblings()方法$(selector).siblings(filter)查找方法应用举例要从body下面第一个段落元素的

子元素span开始找到body中第二个段落元素的