jQuery权威指南第二版学习笔记（第一章）

最新推荐文章于 2024-04-21 14:50:59 发布

_panda_

最新推荐文章于 2024-04-21 14:50:59 发布

阅读量622

点赞数

分类专栏： jQuery权威指南第二版学习笔记文章标签： HTML 前端 jquery

本文链接：https://blog.csdn.net/qq_18832439/article/details/48210449

版权

jQuery权威指南第二版学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1：搭建jQuery开发环境
由于jQuery是一个完整的JavaScript文件库，因此，搭建jQuery开发环境十分简单，无须安装任何文件，只需要先在jQuery官方网站下载最新的文件库，然后将该文件库引入页面中的＜head＞元素间即可。
2：下载jQuery文件库
在jQuery的官方网站（http://jquery.com）下载最新版本的jQuery文件库，其网站页面如图。现在最新的应该jQuery2.1.4.js.我们使用min就可以。不过书籍用的是1.8.2如图1-1所示。
3：引入jQuery文件库
下载完jQuery框架文件后，并不需要任何的安装，仅需要使用＜script＞文件导入标记，将jQuery框架文件jquery-2.1.4.min.js导入页面中即可。假设该文件下载后保存在项目文件夹Jscript中，那么，在页面的＜head＞＜/head＞中加入如下代码：在页面的头部分加入上述代码后，便完成了jQuery框架的引入，现在可以开始我们的jQuery之旅了
<script src="JScript/jquery-1.8.2.min.js"
type="text/javascript">

4：编写第一个简单的jQuery程序
（1）功能描述当页面加载时，以居中的方式在页面中显示“您好！欢迎来到jQuery的精彩世界。”字样。
（2）实现代码新建一个HTML文件1-1.html,加入如下代码：
<!DOCTYPE html>
<html>
<head>

<title>第一个简单的jQuery程序</title>

<style type="text/css">
div{ padding:8px 0px;font-size:12px;
text-align:center;border:solid 1px #888;}
</style>
<script src="JScript/jquery-1.8.2.min.js"
type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div").html("您好！欢迎来到jQuery的精彩世界。");
});
</script>
</head>
<body>
<div></div>
</body>
</html>
效果图大家可以自己试试啦，很简单的。这里就不贴图了╮(╯▽╰)╭
5：代码分析
（1）：该段代码类似于传统的JavaScript代码：
$(document).ready(function() {
$("div").html("您好！欢迎来到jQuery的精彩世界。");
});
类似于js的
window.onload=function(){
// .....
}
当是执行时间不同：$(document).ready在页面框架下载完毕后就执行；而window.onload必须在页面全部加载完毕（包含图片下载）后才能执行。很明显前者的执行效率高于后者。 ❑执行数量不同：$(document).ready可以重复写多个，并且每次执行结果不同；而window.onload尽管可以执行多个，但仅输出最后一个执行结果，无法完成多个结果的输出。
（2）$(document).ready(function(){})可以简写成$(function(){})，因此下面的代码是等价的。
$(document).ready(function() {
$("div").html("您好！欢迎来到jQuery的精彩世界。");
});
// 两段代码功能相同，下面极大的简化了代码的书写。
$(function(){

		$("div").html("您好！欢迎来到jQuery的精彩世界。");

$("div").html("您好！欢迎来到jQuery的精彩世界。");
});
6：jQuery程序的代码风格
“$”美元符的使用在jQuery程序中，使用最多的莫过于“$”美元符了，无论是页面元素的选择、功能函数的前缀都须使用该符号，可以说它是jQuery程序的标志。例如下列代码：上述代码表示1000毫秒后，在ID号为"tip"的元素中显示"hello world"字样。
7：事件操作链接式书写
<!DOCTYPE html>
<html>
<head>
<title>jQuery事件的链式写法</title>
<script src="JScript/jquery-1.8.2.min.js"
type="text/javascript"></script>
<style type="text/css">
.iframe{ border:solid 1px #888;font-size:13px;} .
.title{ padding:6px;background-color:#EEE;} .
.content{ padding:8px 0px;font-size:12px;
text-align:center;display:none;} .
.curcol{ background-color:#CCC}
</style>
<script type="text/javascript">
$(function() {
$(".content").html("您好！欢迎来到jQuery的精彩世界。");
$(".title").click(function() { $(this).addClass("curcol") .next(".content").css("display", "block");
$(this).addClass("curcol")
.next(".content").css("display", "block");
});
});
</script>
</head>
<body>
<div class="iframe">
<div class="title">标题</div>
<div class="content"></div>
</div>
</body>
</html>
其中刷红的代码分析，当用户单击Class名称为"title"的元素时，自身增加名称为"curcol"的样式；
同时，将接下来的Class名称为"content"元素显示出来。可以看出两个功能的实现通过“.”符号链接在一起。

8：jQuery访问DOM对象
1.什么是DOM对象每一个页面都是一个DOM（Document Object Model，文本对象模型）对象，通过传统的JavaScript方法访问页面中的元素，就是访问DOM对象。
2.jQuery控制DOM对象在介绍使用jQuery控制DOM对象前，先通过一个简单的示例，说明如何用传统的JavaScript方法访问DOM对象。
9：jQuery控制页面CSS
1. jQuery框架中通过自带JavaScript编程，提供全部CSS 3下的选择器，开发者可以首先定义自己的样式文件，然后通过jQuery中的addClass()方法，将该样式轻松地添加到页面中指定的某元素中，而不用考虑浏览器的兼容性。
小结：本章通过循序渐进的方式，首先介绍jQuery的基本功能，然后介绍jQuery库的下载、引入，以及简单的应用方法；通过一些简单的小示例，介绍了jQuery控制DOM对象和页面CSS样式，使读者对jQuery在页面中的功能应用有一个大致的了解，为下一章节进一步学习jQuery库的详细对象和方法奠定基础。

_panda_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery权威指南第二版学习笔记（第一章）

1：搭建jQuery开发环境由于jQuery是一个完整的JavaScript文件库，因此，搭建jQuery开发环境十分简单，无须安装任何文件，只需要先在jQuery官方网站下载最新的文件库，然后将该文件库引入页面中的＜head＞元素间即可。2：下载jQuery文件库在jQuery的官方网站（http://jquery.com）下载最新版本的jQuery文件库，其网站页面如图。现在最新的
复制链接

扫一扫