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

JavaScript高级编程任务1 jQuery开发基础知识 教学内容1.1 JavaScript简介1.2 jQuery概述1.3 jQuery选择器1.4 jQuery中元素的查找操作1.5 jQuery中操作DOM元素的几个基本方法1.6 jQuery中的事件机制1.7 实例开发-实现输入框外围的阴影 1.3 jQuery选择器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的背景色为黄色。 层级选择器包含选择器格式：$(ancestor descendant)选定的是最后一级后代选择器所指定的元素，这组元素必须包含在祖先选择器指定的元素内部，可以是祖先元素的直接子元素，也可以是其它级别的后代元素。子对象选择器格式：$(parentchild)选定的是子元素选择器所指定的元素，这组元素必须是父元素选择器指定的元素的直接子元素。若是省略子元素选择器，则表示选择指定父元素内部的所有子元素，相当于$(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(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匹配每个父元素下的最后一个子元素 伪类选择器:first-child和:first补充示例：对于图示代码，若是使用$(divp:first)，只选择第一个div内部第一个段落，若是使用$(divp:first-child)，则选择两个div内部的第一个段落 思考问题若页面中只有图示的元素：若是使用$(divp:first)，会选取哪些元素？使用$(div:first)呢？使用$(divp:first-child)呢？使用$(div:first-child)