jQuery网页特效任务驱动式教程-全套PPT课件.pptx

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.1 JavaScript简介1.1.2 文档对象模型DOMDOM是Document Object Model的缩写，中文为文档对象模型HTML文档为树形结构也称为文档树，而DOM 把HTML文档进一步细化为带有标记元素、属性和文本节点的节点树，起始于文档根节点（ document对象是根元素对象，代表整个文档），每个标记元素、标记的属性、标记中的文本都是树中的一个Node节点，每一个节点都是一个对象。通过DOM可以获取每一个节点对象，从而对其进行各种操作DOM树形结构示例下面代码对应的文档树如图所示（示例1-1）作业：绘制文档树存在某个页面文档代码如下，请大家手写绘制文档树提交到作业中各种类型的DOM节点获取DOM节点信息childNodes是一个元素节点所有子节点的集合，包含文本节点和子元素节点等attributes是一个元素节点的所有属性节点的集合获取并输出DOM节点信息1.2 jQuery概述jQuery是javaScript框架，可以帮助开发者使用很少的javaScript代码实现漂亮的页面效果能够实现如下功能：选择页面元素，使用其提供的选择器（与CSS选择器非常相似）即可获取需要检查或操作的文档元素动态更改页面样式：通过控制CSS改变文档中某个部分的类或者个别样式属性动态更改页面内容：可以使用少量代码更改网页内容，对整个文档结构都能重写或扩展响应事件、实现各种特效等1.2.1 安装jQueryjQuery项目主要包括jQuery Core（核心库）、 jQuery UI（界面库）、Sizzle（CSS选择器）和QUnit（测试套件）四部分1.2.1 下载jQueryjQuery官方网站提供了很多版本的jQuery,目前主要有三个大版本：1.x：兼容ie678，使用最为广泛，官方制作BUG维护，功能不再新增，一般项目使用1.x版本就可以了，最终版1.12.4（2016年5月20日）2.x：不兼容ie678，很少使用，最终版2.2.4（2016年5月20日）3.x：不兼容ie678，只支持最新浏览器，很多老的jQuery插件不支持这个版本，目前该版本是官方主要更新维护的，最新版3.5.1/jquery-info122/jquery-info1221.2.1 安装jQuery使用jQuery库不需要安装，只要把下载的库文件放到站点中即可，需要在html页面文档首部使用script/script标记添加，添加方式如下：script type=text/javascript src=jquery/jquery-1.11.3.min.js/script对于已经下载的库文件，添加时建议使用相对路径，引入库文件的script/script之间，不允许写其他代码。添加了库文件之后，若是不建立独立的jQuery文件（.js），而是在当前html页面文件中直接添加jQuery代码，则使用如下格式：script type=text/javascript //此处写jQuery代码/scriptjQuery的入口函数及简单应用观察左边代码能否正常获取并输出段落的内容，为什么？系统是否报错？为什么？示例1-3不能正常获取，原因是页面元素没有加载就执行了脚本代码。在jQuery中，不管是否获取到元素，$()函数都会返回一个jQuery对象，这个jQuery对象拥有length属性，表示找到多少个匹配的DOM元素，为0就是没找到，对于一个不存在的元素应用text()方法时，获得的结果为空串，所以尽管没有获取到指定的元素，但是给定的代码并不存在任何语法问题。修改方案之一：将脚本代码放到页面元素之后在jQuery库中，$是jQuery的别名，如$()等效于jQuery()，jQuery()函数是jQuery库文件的接口函数，所有jQuery操作都必须从该接口函数切入。jQuery的ready事件无论使用js还是jQuery进行开发，如果希望操作DOM文档元素，则必须确保在DOM载入完成后开始执行JavaScript中通过使用window.onload事件（window.onload=function(){……}）确保先载入DOM元素之后再执行函数体内容在jQuery中DOM元素载入完成后触发的事件是ready，可以有下面几种写法：最繁琐的写法：$(document).ready(function(){……})，语义为匹配文档中document节点