教学课件任务1 jQuery开发基础知识-1 DOM和jQuery.pptx

教材配套资源页完整PPT课件教学课件任务1 jQuery开发基础知识-1 DOM和jQuery1任务1 jQuery开发基础知识2n1.1 JavaScript简介n1.2 jQuery概述n1.3 jQuery选择器n1.4 jQuery中元素的查找操作n1.5 jQuery中操作DOM元素的几个基本方法n1.6 jQuery中的事件机制n1.7 实例开发-实现输入框外围的阴影3n1.1.2 文档对象模型DOMuDOM是Document Object Model的缩写，中文为文档对象模型uHTML文档为树形结构也称为文档树，而DOM 把HTML文档进一步细化为带有标记元素、属性和文本节点的节点树，起始于文档根节点（ document对象是根元素对象，代表整个文档），每个标记元素、标记的属性、标记中的文本都是树中的一个Node节点，每一个节点都是一个对象。通过DOM可以获取每一个节点对象，从而对其进行各种操作4n下面代码对应的文档树如图所示（示例1-1）5n存在某个页面文档代码如下，请大家手写绘制文档树提交到作业中67n获取并输出DOM节点信息childNodes是一个元素节点所有子节点的集合，包含文本节点和子元素节点等attributes是一个元素节点的所有属性节点的集合8njQuery是javaScript框架，可以帮助开发者使用很少的javaScript代码实现漂亮的页面效果n能够实现如下功能：u选择页面元素，使用其提供的选择器（与CSS选择器非常相似）即可获取需要检查或操作的文档元素u动态更改页面样式：通过控制CSS改变文档中某个部分的类或者个别样式属性u动态更改页面内容：可以使用少量代码更改网页内容，对整个文档结构都能重写或扩展u响应事件、实现各种特效等9njQuery项目主要包括jQuery Core（核心库）、 jQuery UI（界面库）、Sizzle（CSS选择器）和QUnit（测试套件）四部分n1.2.1 下载jQueryujQuery官方网站提供了很多版本的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 http:/ /此处写jQuery代码11n在jQuery库中，$是jQuery的别名，如$()等效于jQuery()，jQuery()函数是jQuery库文件的接口函数，所有jQuery操作都必须从该接口函数切入。不能正常获取，原因是页面元素没有加载就执行了脚本代码。在jQuery中，不管是否获取到元素，$()函数都会返回一个jQuery对象，这个jQuery对象拥有length属性，表示找到多少个匹配的DOM元素，为0就是没找到，对于一个不存在的元素应用text()方法时，获得的结果为空串，所以尽管没有获取到指定的元素，但是给定的代码并不存在任何语法问题。修改方案之一：将脚本代码放到页面元素之后观察左边代码能否正常获取并输出段落的内容，为什么？系统是否报错？为什么？示例1-312n无论使用js还是jQuery进行开发，如果希望操作DOM文档元素，则必须确保在DOM载入完成后开始执行nJavaScript中通过使用window.onload事件（window.onload=function()）确保先载入DOM元素之后再执行函数体内容n在jQuery中DOM元素载入完成后触发的事件是ready，可以有下面几种写法：u最繁琐的写法：$(document).ready(function()，语义为匹配文档中document节点，然后为该节点绑定ready事件处理器，$()代表jQuery()u简化形式1：$().ready(function() u进一步简化为$(function()u使用ready事件修改示例1-313n哪个函数是jQuery库文件的接口函数？可以使用怎样的简化表示形式？n一个页面文档可以使用什么对象表示？n分别使用jQuery中ready事件的三种处理形式定义匿名函数，在页面加载基本完成时，在控制台输出“我们正在学习jQuery”14njQuery定义的ready事件与js定义的load事件都表示页面初始化行为，但是他们之间并非完全相同。nHTML文档加载的顺序u解析HTML结构u加载外部脚本和样式文件u解析并执行脚本代码（是指不包含在任何函数中的脚本代码，函数中的代码必须等待函数被调用之后才执行）u构造HTML DOM模型u加载图片等外部文件u页面加载完毕15n执行时机不同uload事件必须等到网页中全部内容都加载完毕后才执行，如果一个页面中包含了大容量的媒体文件，则会出现网页文档已经呈现出来，但因为网页数据还没有完全加载，导致load事件不能及时被触发，从而影响页面的可用性ujQuery的ready事件是在DOM结构绘制完毕之后就执行，它的执行先于外部媒体文件的加载，确保文档呈现和脚本初始化设置保持同步16n用法不同u对于JavaScript中的load事件而言，在任何一个页面文件中都只能被编写一次。例如，下面左侧代码只能影响最后一次指定的事件处理函数改写为因为onload是load事件的属性，作为属性来说，只要重新赋值，原来的值就被覆盖17n用法不同u对于jQuery的ready事件来说，可以在一个文档中多次定义，例如这种用法对于实现复杂页面中的复杂初始化设置时非常方便1819njQuery对象与DOM对象：ujQuery是在JavaScript基础上进行封装的，因此jQuery代码本质上也是 JavaScript代码，两者可以相互混合使用，用户不需要去区分每一行代码到底是jQuery代码还是JavaScript代码。ujQuery对象是通过jQuery包装DOM对象后产生的对象，和DOM对象是可以相互转换的，它们所操作的对象都是 DOM元素，不同之处是jQuery对象包含了多个DOM元素，而DOM对象本身就是一个DOM元素，也就是说jQuery对象是DOM元素的集合，也称为伪数组。20n假设页面中存在段落元素：学习jQueryn属性innerText属于DOM对象，用于获取指定元素内部的文本，使用下面的JavaScript代码可以获取段落中的文本：uvar p_text=document.getElementById(p1) . innerText;uconsole.log( p_text );n但是，如果使用下面代码：uconsole.log( $(#p1).innerText );n则执行结果为undefined，这是因为$(#p1)获取的结果是一个jQuery对象，该对象不能访问DOM对象的属性，因此系统无法获取并输出段落中的文本。21n假设页面中存在段落元素：学习jQueryn方法text()属于jQuery对象，用于获取指定元素内部的文本，使用下面的jQuery代码可以获取段落中的文本：uconsole.log( $(#p1).text() );n但是，如果使用下面代码：uvar p_text=document.getElementById(p1).text();uconsole.log(p_text);n执行代码时，会被告知出错，这是因为document.getElementById(p1)获取到的是一个DOM对象，该对象不能访问jQuery对象的方法。22njQuery对象转换为DOM对象可以使用两种方法。n方法1：u直接给jQuery对象添加下标，例如$(#p1)0.innerText；n方法2：u借助jQuery对象的get()方法，为get()方法传递一个下标值，例如$(#p1).get(0).innerText，此处需要注意的是get()是方法，后面跟定的是方法所使用的圆括号，不要误写为方括号。n两种方法的本质是相同的，都是通过给定一个下标从以数组方式存在的jQuery对象中取出一个DOM对象元素。23n直接把DOM对象传递给$()函数即可，$()函数就是jQuery对象的制造工厂，只要将需要转换的内容放入该函数内部，函数即可返回jQuery对象n例如：uvar p_text=document.getElementById(p1);uconsole.log( $(p_text).text() );n思考问题：u改写上面代码为uvar p=document.getElementById(p1);uconsole.log(p.text();u能否获取到段落的内容？为什么？24njQuery对象与DOM对象的相互转换，在很多功能实现中需要使用，例如大家所熟知的DOM对象中的this，在jQuery对象中使用时，必须使用$(this)将其转换为jQuery对象能够识别的形式，才能应用属于jQuery对象的方法、事件、属性等。25n页面中有一组单选按钮，在选择某个选项后判断哪个radio按钮被选中，然后获取其value属性值并在控制台输出。n要求u分别使用JavaScript和jQuery完成26本课件制作整理者：郭迎春 仅可用于教学、学习、交流使用 如内容、图片、字体等有侵权，请联系删除。 27