高二下北京理工大学出版社移动Web前端开发课件第8章 火爆的JQuery
2023-01-09
|
35页
|
53人阅读
|
0人下载
普通
内容正文：
本章简介：
第8章 火爆的JQuery
JQuery是快速的、小巧的、功能丰富的JavaScript库，它使HTML文档遍历、事件处理、动画和Ajax等操作更加简单，在许多浏览器中均支持Jquery使用。它结合了多功能性和可扩展性，jQuery改变了数百万人编写
JavaScript的方式。一0000000000000000000000000000000
课堂学习目标
理解JQuery框架的使用方式
掌握JQuery基础语法
掌握JQuery选择器、事件和动画效果
掌握JQuery中对html和css的操作方法
掌握JQueryMobile框架的使用
能够利用JQuery语言完成静态页面的动态效果
能够利用JQuery mobile制作出移动端页面
8.1 JQuery入门
8.1.1认识JQuery
8.1.2使用JQuery的选择器
8.1.3使用JQuery的事件
8.1.4 JQuery实训
8.1.1认识JQuery
在本案例中，应用JQuery的元素html写入方法，在页面中输出Hello JQuery样式的文字，Hello JQuery文字并不出现在HTML页面的body标签里面，而是通过函数调用的形式，写入到页面文档中。效果如图8.1所示
1．需求分析
图8.1 JQuery代码实现效果图
2．设计思路
（1）设计网页的整体布局，并引入JQuery脚本。
（2）利用CSS美化页面。
（3）通过编写JQuery脚本程序实现文本输出功能。
实现步骤
打开sublime新建html页面，进行html代码的开发，把css和JQuery内嵌到页面文件中，代码如下所示：
图8.2 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
......
<style type="text/css">
div{
pading:8px 0px;
font-size: 16px;
text-align: center;
border:solid 1px #888;
}
</style>
<script type="text/javascript" src="js/jquery-3.3.1.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("div").html("Hello Jquery!");
});
</script>
</head>
<body>
<div></div>
</body>
</html>
知识点讲解
JQuery是由美国人John Resing于2006年创建的一个开源项目。越来越多的技术开发者加入到了JQuery的使用行列，因此随着技术队伍的壮大，JQuery拥有了全球最为广发的使用群体。JQuery是迄今为止最强大的JavaScrpt库，在此基础上构建了一些功能强大的框架如：JQuery Mobile。Query的宗旨是：Write less,do more。
1）JQuery的基本功能
（1）访问和操作DOM模型
使用JQuery库，可以很方便的操作和方位文档对象模型。DOM是HTML代码在客户端显示的中转解析模型。客户端看到的页面其实并不是由HTML生成的，而是由DOM解析生成的。从服务器下载的HTML代码到客户端本地浏览器后，浏览器把HTML代码解析成文档对象模型（DOM），从而把页面展现在用户面前。因此对DOM的操纵才是改变页面最直接和最根本的操作方法。
（2）控制页面样式
通过JQuery操作CSS层叠样式表，让页面的显示更加丰富和多样化。通过JavaScript控制样式一般都是行内样式，操作起来比较繁琐。高度封装的JQuery操作样式表更加简单，而且其还能够完美解决由于浏览器不兼容问题出现的页面样式走形。
（3）对页面事件的处理
引入JQuery框架后，对页面的事件处理变得简单。通过JavaScript控制页面事件时，往往需要注意代码编写的位置。而引入JQuery后，全都放在head标签即可，并通过document.ready方法完美解决页面加载顺序导致的代码执行顺序问题。实现了先加载页面后加载方法的分布式加载。
2）JQuery的下载与环境搭建
在JQuery的官方网站（http://jquery.com）下载最新版的JQuery文件库。搭建JQuery开发环境会十分简单。JQuery不需要安装任何软件，只需要在html的<head></head
资源预览图
1
2
3
4
5
6
由于学科网是一个信息分享及获取的平台，不确保部分用户上传资料的 来源及知识产权归属。如您发现相关资料侵犯您的合法权益，请联系学科网，我们核实后将及时进行处理。