3.1 jQuery入门 3.1.1 理解jQuery的设计

发表于 更新于 分类于 ， ， ， Waline： 本文字数： 2.2k 阅读时长 ≈ 2 分钟

3.1 jQuery入门

3.1.1 理解jQuery的设计

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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页面只需如下两个步骤:

  1. 获取jQuery对象。jQuery对象通常是对DOM对象的包装。
  2. 调用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页面只需如下两个步骤:

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

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