3.1 jQuery入门

3.1.1 理解jQuery的设计

几乎每个初次学习jQuery的读者都会发现,jQuery提供了一个$()函数,该函数专门用于获取页面上的DOM元素。看下面的jQuery入门示
例。

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> jQuery入门 </title>
</head>
<body>
	<div id="lee"></div>
	<script type="text/javascript" src="../jquery-3.1.1.js">
	</script>
	<script type="text/javascript">
		var target = $("#lee")
		target.html("我要学习jQuery")
			.height(60)
			.width(160)
			.css("border", "2px solid black")
			.css("background-color", "#ddddff")
			.css("padding", 20);
	</script>
</body>
</html>

这段代码中的第一行粗体字代码使用$()函数获取页面上id为lee的DOM对象,后面的粗体字代码依次调用height、width、css 等方法处理该对象,程序的运行结果如图3.1所示。
从这个运行结果可以发现,使用jQuery动态操作HTML页面非常简单。但读者很容易产生疑惑:程序中那些粗体字代码如何来理解?
程序中的target对象到底是什么?怎么会有height()、width()、css()这些方法呢?
事实是,上面这个程序已经体现了jQuery的优雅设计!程序中的target对象并不是DOM对象,而是一个jQuery对象,因此它可以调用height()、width()、css()等方法。由此可见,jQuery的$()函数并非简单地获取DOM元素,$()函数不仅可以获取页面上一个或多个DOM元素,而且还要将这些DOM元素包装成jQuery对象,这样即可面向jQuery对象编程,调用jQuery对象的方法了。$()函数其实是jQuery()函数的简化别名。
研究了上面这个程序后,即可明白jQuery的设计:使用jQuery之后,JavaScript操作的不再是HTML元素对应的DOM对象,而是包装DOM对象的jQuery对象。JavaScript通过调用jQuery对象的方法来改变它所包装的DOM对象的属性,从而实现动态更新HTML页面。由此可见,使用

jQuery动态更新HTML页面步骤

jQuery动态更新HTML页面只需如下两个步骤:

获取jQuery对象。jQuery对象通常是对DOM对象的包装。
调用jQuery对象的方法来改变自身。当jQuery对象被改变时,jQuery包装的DOM对象随之改变,HTML页面的内容也就随之更新了。

还有一点需要指出,jQuery很多改变自身属性的方法都有返回值,就是返回该对象本身,因此可以连续多次调用改变自身属性的方法。例如在上面的程序中连续调用height()、width()、css()方法来改变target对象。
以上就是使用jQuery的基本思路,开发者只要掌握两点即可:
①获取jQuery对象;
②jQuery有哪些可用的方法,这也是本章将要详细介绍的。
下面将从jQuery的下载和安装开始讲起。

本文重点

jQuery提供了一个$()函数,该函数专门用于获取页面上的DOM元素
$()函数其实是jQuery()函数的简化别名。
jQuery的$()函数并非简单地获取DOM元素,$()函数不仅可以获取页面上一个或多个DOM元素,而且还要将这些DOM元素包装成jQuery对象,这样即可面向jQuery对象编程,调用jQuery对象的方法了。
jQuery很多改变自身属性的方法都有返回值,就是返回该对象本身,因此可以连续多次调用改变自身属性的方法

jQuery动态更新HTML页面步骤

jQuery动态更新HTML页面只需如下两个步骤:

获取jQuery对象。jQuery对象通常是对DOM对象的包装。
调用jQuery对象的方法来改变自身。当jQuery对象被改变时,jQuery包装的DOM对象随之改变,HTML页面的内容也就随之更新了。

开发者只要掌握两点即可:
①获取jQuery对象;
②jQuery有哪些可用的方法。

原文链接: 3.1 jQuery入门 3.1.1 理解jQuery的设计