网页设计与制作 教学课件 作者 朱金华 第10章 jQuery.pptx

《网页设计与制作 教学课件 作者 朱金华 第10章 jQuery.pptx》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第10章jQuery教学目标1.理解jQuery的基本功能。2.掌握jQuery语法。3.掌握jQuery的基本选择器4.掌握jQuery对元素的访问方法，包括访问元素属性、访问元素内容、获取或设置元素值以及元素样式的操作方法。5.掌握节点的增删改查方法，包括如何创建、插入、复制、替换、包裹、遍历和删除节点的方法。、层次选择器、过滤选择器和表单选择器的使用方法。教学目标6.掌握jQuery中的常用事件使用方法。7.掌握基本动画、滑动动画、淡入淡出动画的使用方法。8.自行熟悉自定义动画。9.掌握jQueryUI的交互性插件（拖动、放置、缩放、复选、排序）的使用方法。

2、10.掌握jQuery微型插件（折叠面板、日历、对话框、进度条、滑动模块、标签页）的使用方法。教学内容1.jQuery概述（10.1）2.jQuery选择器（10.2）3.jQuery操作DOM(10.3)4.jQuery中的事件(10.4)5.jQuery动画与特效(10.5)6.jQueryUI插件(10.6)教学重点和难点重点：jQuery选择器、对元素的操作、jQuery常用事件的使用方法、jQuery动画动画、jQueryUI常用交互插件和微件的使用。难点：区别jQuery选择器和CSS选择器、对元素的操作、自定义动画、jQueryUI微件复杂的参数使用

3、。教学目标6.掌握jQuery中的常用事件使用方法。7.掌握基本动画、滑动动画、淡入淡出动画的使用方法。8.自行熟悉自定义动画。9.掌握jQueryUI的交互性插件（拖动、放置、缩放、复选、排序）的使用方法。10.掌握jQuery微型插件（折叠面板、日历、对话框、进度条、滑动模块、标签页）的使用方法。教学内容1.jQuery概述（10.1）2.jQuery选择器（10.2）3.jQuery操作DOM(10.3)4.jQuery中的事件(10.4)5.jQuery动画与特效(10.5)6.jQueryUI插件(10.6)教学重点和难点重点：jQuery选择器、对元素

4、的操作、jQuery常用事件的使用方法、jQuery动画动画、jQueryUI常用交互插件和微件的使用。难点：区别jQuery选择器和CSS选择器、对元素的操作、自定义动画、jQueryUI微件复杂的参数使用。导入：因为jQuery是继prototype之后又一个优秀的JavaScript框架。它是轻量级的JS库，它兼容CSS3，还兼容各种浏览器（IE、Firefox、Safari、Opera、Chrome等）。jQuery使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势

5、是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的HTML页面保持JS代码和HTML内容分离，也就是说，不用再在HTML里面插入一堆JS来调用命令了，只需定义id即可。jQuery由美国人JohnResig于2006年创建的一个开源项目，至今已吸引了来自世界各地的众多JavaScript高手加入其团队，jQuery是继Prototype之后又一个优秀的JavaScript框架，其宗旨是：Writeless，domore。10.1jQuery概述1.访问和操作DOM元素2.控制页面样式3.对页面事件的处理4.大量

6、插件在页面中的运用5.与Ajax技术的完美结合10.1.1jQuery的基本功能基础语法是：$(selector).action()美元符号定义jQuery选择符（selector）“查询”和“查找”HTML元素jQueryaction()执行对元素的操作实例：$(this).hide()-隐藏当前元素$("p").hide()-隐藏所有段落$("p.test").hide()-隐藏所有class="test"的段落$("#test").hide()-隐藏所有id="test"的元素提示：jQuery使用的语法是XPath与CSS选择器语法的组合。有了CSS

7、基础就不难学习jQuery的选择器了。10.1.2jQuery语法10.1.3jQuery实例10.2jQuery选择器根据所获取页面中元素的不同，可以将jQuery选择器为分：基本选择器、层次选择器、过滤选择器和表单选择器四大类，其中，在过滤选择器中又可分为：基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器和表单对象属性过滤选择器6种。10.2.1基本（Basics）选择器10.2.2层次（Hierarchy）选择器层次选择器通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中某类关系可以

8、方便快捷地