教学课件任务1 jQuery开发基础知识-2 jQuery选择器及元素的查找方法.pptx
《教学课件任务1 jQuery开发基础知识-2 jQuery选择器及元素的查找方法.pptx》由会员分享,可在线阅读,更多相关《教学课件任务1 jQuery开发基础知识-2 jQuery选择器及元素的查找方法.pptx(22页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、教材配套资源页完整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基本选择器
2、: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的元素,在控制台中输出
3、元素的个数和元素的文本内容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选定的是子元素选择器所指定的
4、元素,这组元素必须是父元素选择器指定的元素的直接子元素。若是省略子元素选择器,则表示选择指定父元素内部的所有子元素,相当于$(parent*)8n相邻选择器u格式:$(prev+next)u选定的是next选择器所指定的元素,该元素必须是prev选择器指定元素的下一个相邻元素。n兄弟选择器u格式:$(prevsiblings)u选定的是siblings选择器所指定的元素,这组元素必须是位于prev选择器指定元素的后面,且与prev选择器指定元素同级,若是省略siblings,则选择prev选择器指定元素后面的所有兄弟元素。9n使用jQuery选择器获取的结果都是以伪数组的方式存在的,如果需要精
5、准找到其中的一个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开
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 教学课件任务1 jQuery开发基础知识-2 jQuery选择器及元素的查找方法 教学 课件 任务 jQuery 开发 基础知识 选择器 元素 查找 方法
限制150内