Web前端技术(JavaScript+jQuery) 课件 任务17 使用jQuery实现弹出窗口输出“Hello jQuery”

Web前端技术主讲人：XXX

XXX学院任务17使用jQuery实现弹出窗口输出“HellojQuery”【知识目标】

了解什么是jQuery；

了解jQuery的特点；

掌握jQuery的获取；

掌握jQuery的基本语法；

掌握jQuery的使用；

了解jQuery对象与DOM对象相互转换的方法。【技能目标】

能够获取jQuery库文件；

能够在Web页面引入并应用jQuery。【素质目标】

培养学生自主探究的能力；

培养学生的学习兴趣。教学目标知识导图jQuery概述什么是jQueryjQuery是一个快速、简洁的JavaScript库，于2006年1月由JohnResig（约翰瑞思格）发布。jQuery设计的宗旨是“writeLess，DoMore”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery具有以下特点。（1）轻量级。jQuery库文件非常小，才几十KB，不会影响页面加载速度。（2）DOM选择器非常丰富。jQuery提供了非常丰富的DOM选择器，让开发者能够快速选取页面DOM元素。（3）链式表达式。jQuery提供链式操作，可以把多个操作写在一行代码里，更加简洁。（4）事件、样式、动画支持。jQuery支持事件、样式、动画操作，应用非常便捷。（5）AJAX操作支持。jQuery简化了AJAX操作，能够快速完成前台与后端的异步数据通信。（6）浏览器兼容性好。jQuery基本兼容了现代主流的浏览器。（7）插件丰富。jQuery具有丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等。（8）可扩展性强。jQuery提供了扩展接口：jQuery.extend(object)，可以在jQuery的命名空间增加新函数。jQuery的获取1.通过jQuery官网下载jQuery库文件（1）进入jQuery官网（https://jQ/）（2）单击菜单栏的“Download”进入下载页面下载jQuery文件。2.通过CDN引入jQuery库文件CDN（ContentDeliveryNetwork，内容分发网站）是互联网中免费提供文本、图片、脚本、应用程序或其他资源的网络服务器。以下为几个常用CDN最新版本的jQuery引用地址。（1）jQueryCDN:https://code.jQ/jQuery-3.7.0.min.js（2）新浪CDN:/js/jQuery/3.1.0/jQuery-3.1.0.min.js（3）staticfileCDN：/jQuery/3.7.0/jQuery.min.js（4）又拍云CDN:///libs/jQuery/jQuery-2.0.3.min.js例如，下面的语句从jQueryCDN引入压缩版的jQuery库文件。<scriptsrc=”https://code.jQ/jQuery-3.7.0.min.js”></script>jQuery基本语法1.通过jQuery官网下载jQuery库文件（1）进入jQuery官网（https://jQ/）（2）单击菜单栏的“Download”进入下载页面下载jQuery文件。2.通过CDN引入jQuery库文件CDN（ContentDeliveryNetwork，内容分发网站）是互联网中免费提供文本、图片、脚本、应用程序或其他资源的网络服务器。以下为几个常用CDN最新版本的jQuery引用地址。（1）jQueryCDN:https://code.jQ/jQuery-3.7.0.min.js（2）新浪CDN:/js/jQuery/3.1.0/jQuery-3.1.0.min.js（3）staticfileCDN：/jQuery/3.7.0/jQuery.min.js（4）又拍云CDN:///libs/jQuery/jQuery-2.0.3.min.js例如，下面的语句从jQueryCDN引入压缩版的jQuery库文件。<scriptsrc=”https://code.jQ/jQuery-3.7.0.min.js”></script>jQuery的获取1.通过jQuery官网下载jQuery库文件（1）进入jQuery官网（https://jQ/）（2）单击菜单栏的“Download”进入下载页面下载jQuery文件。2.通过CDN引入jQuery库文件CDN（ContentDeliveryNetwork，内容分发网站）是互联网中免费提供文本、图片、脚本、应用程序或其他资源的网络服务器。以下为几个常用CDN最新版本的jQuery引用地址。（1）jQueryCDN:https://code.jQ/jQuery-3.7.0.min.js（2）新浪CDN:/js/jQuery/3.1.0/jQuery-3.1.0.min.js（3）staticfileCDN：/jQuery/3.7.0/jQuery.min.js（4）又拍云CDN:///libs/jQuery/jQuery-2.0.3.min.js例如，下面的语句从jQueryCDN引入压缩版的jQuery库文件。<scriptsrc=”https://code.jQ/jQuery-3.7.0.min.js”></script>jQuery的获取jQuery的基本语法：

$(selector).action()参数说明如下。$：美元符号用于定义jQuery。selector：HTML元素对象。action：执行对元素的操作。示例代码如下。$("p").hide();//隐藏所有的<p>元素jQuery的使用在使用jQuery的过程中，通常是在页面DOM加载完成后，才去执行相应代码，其语法格式如下。$(document).ready(function(){//页面加载完成后执行的代码});上述语法格式的简写形式如下。$(function(){//页面加载完成后执行的代码});【案例】单击按钮弹出“HellojQuery!”jQuery对象什么是jQuery对象jQuery对象是通过jQuery库中的选择器选取一个或多个DOM元素后返回的对象。（注意：jQuery对象无法使用DOM对象的任何方法,同样DOM对象也不能使用jQuery里的任何方法。）例如：$(“#id”).innerHTML//写法错误，可使用$(“#id”).html()代替$(“#id”).checked//写法错误，可使用$(“#id”).attr(“checked”)代替DOM对象转成jQuery对象对于DOM对象，只需要用$()

把DOM对象包裹起来，就可以获得一个jQuery对象。例如：letname=document.getElementById("name");//name是DOM对象let$name=$(name);//$name是jQuery对象

说明：DOM对象转成jQuery对象，就可以使用jQuery的相关方法。jQuery对象转成DOM对象jQuery对象属于类数组对象，其内部会将DOM对象作为数组元素。jQuery对象转换成DOM对象有以下两种方法。（2）obj.get(index)<div>第1个div元素</div><script>letresult=$('div').get(0).innerHTML;alert(result);//输出结果：第1个div元素</script>（1）obj[index]<div>第1个div</div><div>第2个div</div><script>//获取jQuery对象letdivs=$('div');//通过索引的方式，将jQuery对象转换成DOM