【前端系列教程之jQuery】02_jQuery入门、设计思想理解

谁借莪１个温暖的怀抱￠ 2024-04-28 13:12 71阅读 0赞

## jQuery入门 ##

### jQuery下载和引入 ###

#### jQuery的下载 ####

*  官网地址：[jQuery][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oiR5piv5rOi5ZOp5Liq5rOi_size_20_color_FFFFFF_t_70_g_se_x_16][]

*  官方API：[jQuery API Documentation][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oiR5piv5rOi5ZOp5Liq5rOi_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oiR5piv5rOi5ZOp5Liq5rOi_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

我们可以通过官网[jQuery][] 或者 [jquery下载所有版本（实时更新）][jquery] 下载jQuery；

#### jQuery的引入 ####

使用jQuery非常简单，只需要在html页面的<head></head>之间引入下载的jQuery类库即可。如：

注:引入jquery的标签对不可以写js代码  
将jQuery框架文件导入后，就可以使用jQuery的选择器和各种函数功能了。

### jQuery初体验 ###

#### jQuery实现动画 ####

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            body {
                margin-top: 10px;
                margin-left: 100px;
            }
    
            #bigDiv {
                width: 183px;
                height: 550px;
                overflow: hidden;
                background: url("images/customer.jpg");
            }
    
            #imgDiv {
                margin: 210px auto 0;
                text-align: center;
                font-size: 14px;
                user-select: none;
                cursor: pointer;
                color: orangered;
                font-weight: bold;
            }
    
            #imgDiv>img {
                margin-top: -3px;
                cursor: pointer;
            }
    
            #imgDiv p {
                line-height: 26px;
            }
    
            #imgDiv>div {
                display: none;
            }
        </style>
    </head>
    
    <body>
        <div id="bigDiv">
            <div id="imgDiv">
                <img src="images/reg.jpg" alt="">
                <div>
                    <p>点击注册</p>
                    <p>认证中心</p>
                </div>
                <img src="images/buy.jpg" alt="">
                <div>
                    <p>咨询</p>
                    <p>投诉</p>
                    <p>举报</p>
                    <p>退款</p>
                </div>
                <img src="images/sale.jpg" alt="">
                <div>
                    <p>安全中心</p>
                    <p>物流中心</p>
                    <p>资金流动</p>
                    <p>纠纷处理</p>
                </div>
                <img src="images/person.jpg" alt="">
                <div>
                    <p>修改资料</p>
                    <p>账号申诉</p>
                </div>
            </div>
        </div>
        <script src="jquery.min.js"></script>
        <script>
            $("#imgDiv>img").click(function () {
                $(this).next("div").slideToggle(300).siblings("div").slideUp(300);
            })
        </script>
    </body>
    
    </html>

对比以前JS的代码，是不是觉得jQuery实现非常简洁啊，jQuery的宗旨就是：**write less，do more**；

#### 隐式迭代 ####

在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用,这就叫做隐式迭代。

jQuery对象就是一个对象数组(伪数组)，对其调用方法其实是对这个数组中每个元素迭代调用这个方法，相当于使用了循环，遍历每个元素调用该方法。

比如添加单击事件:对于DOM对象获取到的多个元素,我们需要通过循环给其分别添加事件,但是jQuery对象则不需要,只要调用jQuery里面的点击事件方法,就可以给所有添加事件。

// JS给获取到的所有a标签添加鼠标单击事件:
    var aArr=document.getElementsByTagName('a');
    for(var i=0;i<aArr.length;i++){
    	aArr[i].onclick=function(){
    		alert("click me!");
    	}
    }
    
    // jQuery给获取到的所有a标签添加鼠标单击事件
    $("a").click(function(){
    	alert("click me！");
    });

#### 链式编程 ####

链式编程，是将多个操作（多行代码）通过点号"."链接在一起成为一句代码。

首先来看一个例子：

$("#myphoto").css("border","2px solid #FF0000").attr("alt","good");

对一个jQuery对象先调用了css()函数修改样式，然后使用attr()函数修改属性，这种调用方式像链一样，所以称为“链式操作”。

链式操作能够让代码变得简洁，因为往往可以在一条语句中实现以往多条语句才能完成的任务。比如如果不使用链式操作，需要用两条语句才能完成上面的任务：

$("#myphoto").css("border","2px solid #FF0000");
    
    $("#myphoto").attr("alt","good");

除了增加了代码量，还调用了两次选择器，降低了速度。

但是链式操作不应该太长，否则会造成语句难以理解，因为要查看jQuery对象当前的状态并不是容易的事，尤其如果涉及jQuery对象中元素的增删操作是更加难以判断。

并不是所有的jQuery函数都可以使用链式操作。这与链式操作的原理有关，之所以可以实现链式操作是因为其中的每个函数返回的都是jQuery对象本身。

链式编程可以使得代码可读性高，链式编程的原理就是返回一个this对象，就是返回本身，达到链式效果

### jQuery思想理解 ###

#### 设计思想 ####

jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他Javascript库的根本特点。

使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为$），然后得到被选中的元素。

jQuery设计思想之二，就是提供各种强大的过滤器，对结果集进行筛选，缩小选择结果

jQuery设计思想之三，就是最终选中网页元素以后，可以对它进行一系列操作，并且所有操作可以连接在一起，以链条的形式写出来

jQuery设计思想之四，就是使用同一个函数，来完成取值（getter）和赋值（setter），即"取值器"与"赋值器"合一。到底是取值还是赋值，由函数的参数决定。

jQuery设计思想之五，就是提供两组方法，来操作元素在网页中的位置移动。一组方法是直接移动该元素，另一组方法是移动其他元素，使得目标元素达到我们想要的位置。

jQuery设计思想之六：除了对选中的元素进行操作以外，还提供一些与元素无关的工具方法（utility）。不必选中元素，就可以直接使用这些方法。

jQuery设计思想之七，就是把事件直接绑定在网页元素之上。

最后，jQuery允许对象呈现某些特殊效果。

#### jQuery的$符号 ####

JS命名规范允许出现的字符有：数字、字母、下划线、

$。

JS命名规范允许作为变量命名开头的字符有：字母、下划线、$；但是，不允许以数字作为变量命名的开头。

var $ = "我是字符串";
    
    var $ = 123;
    
    function $() {
        alert("我是函数$");
    }

jQuery使用$的原因是： 书写简洁， 相对于其他字符与众不同， 容易被记住。

JQuery占用了两个变量： $ 和 jQuery。

当在代码中打印 $ 和 jQuery时：

显示的结果如下：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oiR5piv5rOi5ZOp5Liq5rOi_size_16_color_FFFFFF_t_70_g_se_x_16][]

从结果中可以得出结论： $代表的就是jQuery。

那么应该如何理解jQuery里面的 $ 符号呢？

$ 实际上表示的是一个函数名， 如下所示：

$() //调用上面我们自定义的函数$
    
    $(document).ready(function () {
    
    }) //调用入口函数
    
    $(function () {
    
    }) //调用入口函数
    
    $("#container") //调用id属性为container的元素
    
    $("div") //获取所有的div标签元素

如上方所示， jQuery里面的$函数， 根据传入参数的不同， 进行不同的调用， 实现不同的功能， 返回的jQuery对象。

jQuery这个js库， 除了 $ 之外， 还提供了另外一个函数：jQuery。

jQuery函数跟 $ 函数的关系： jQuery === $。

#### jQuery对象和DOM对象的相互转换 ####

第一次学习jQuery,经常分辨不清哪些是jQuery对象，哪些是 DOM对象，因此需要了解jQuery对象和DOM对象以及它们之间的关系。

**DOM对象**

文档对象模型简称DOM，是W3C组织推荐的处理可扩展置标语言的标准编程接口。

*  DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、 这些对象的行为和属性以及这些对象之间的关系。
 *  通过DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的 内容进行修改和删除，同时也可以创建新的元素。
 *  DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和VBScript 使用。
 *  DOM对象，即是我们用传统的方法(javascript)获得的对象。
 *  DOM准确说是对文档对象的一种规范标准(文档对象模型),标准只定义了属性和方法行为。

简单来说：DOM对象指的是，使用JavaScript操作DOM返回的结果。

**jQuery对象**

jQuery对象就是通过jQuery包装DOM对象后产生的对象。

jQuery对象是jQuery独有的，其可以使用jQuery里的方法，但是不能使用DOM的方法;反过来Dom对象也不能使用jQuery的方法。

简单来说：jQuery对象此处指的是：使用jQuery提供的操作DOM的方法返回的结果。

jQuery拿到DOM对象后又对其做了封装，让其具有了jQuery方法的jQuery对象，说白了，就是把DOM对象重新包装了一下。

**案例：DOM操作返回值和jQuery操作返回值**

**案例：jQuery对象和DOM对象API不能混搭**

// 通过js获取页面元素节点
    var box = document.getElementById("box");
    // DOM对象调用DOM API,没有问题
    box.style.background = "red";
    // DOM对象没有css(),报错box.css is not a function
    // box.css("background", "yellow");
    
    // 通过jQuery获取页面元素
    var jbox = $("#box");
    // jQuery对象调用jQuery API,没有问题
    jbox.css("background", "yellow");
    // jQuery对象调用DOM API,存在问题：Cannot set property 'background' of undefined
    jbox.style.background = "red";

**jQuery对象转成DOM对象**

jQuery对象不能使用DOM中的方法，但如果对jQuery对象提供的方法不熟悉，或者jQuery没有封装想要的方法，不得不使用DOM对象的时候，有两种处理方法。

（1）jQuery对象是一个类似数组的对象，可以通过\[index\]的方法得到相应的DOM对象。例如只有一个类名为“bind”的DIV，在控制台输出console.log($(".bind"))

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oiR5piv5rOi5ZOp5Liq5rOi_size_8_color_FFFFFF_t_70_g_se_x_16][]

如图，通过调试工具，我们可以清除的看到，jQuery对象是一个类数组对象，我们可以通过$(".bind")\[0\]获得DOM对象。

（2）另一种方法是jQuery本身提供的，通过get(index)方法得到相应的DOM对象。还是上面的.bind对象 ，我们可以通过 $(".bind").get(0)获得DOM对象。如图：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oiR5piv5rOi5ZOp5Liq5rOi_size_7_color_FFFFFF_t_70_g_se_x_16][]

**DOM对象转成jQuery对象**

对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。方式为$(DOM对象), 转换后，就可以任意使用jQuery中的方法了。

注意： 平时用的jQuery对象都是通过$()函数制造出来的，$()函数就是一个jQuery对象的制造工厂。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oiR5piv5rOi5ZOp5Liq5rOi_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

所有这些，都体现了jQuery对js的封装！

**【思考】JS跟jQuery的区别是什么？**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oiR5piv5rOi5ZOp5Liq5rOi_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

### 如何使用jQuery ###

#### 使用步骤 ####

*  第一步引入jQuery文件
 *  第二步入口函数
 *  第三步编写功能代码

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oiR5piv5rOi5ZOp5Liq5rOi_size_20_color_FFFFFF_t_70_g_se_x_16 5][]

#### 版本介绍 ####

**1.x**：兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了， 推荐使用版本1.8.3 和 1.11.3

**2.x**：不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x

**3.x**：不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。

**min**：压缩版，压缩过后，体积会更小

压缩指的是：把注释、空格、换行全部去掉，把变量名称尽可能的换成更加简短的字符。

压缩的主要目的：就是让文件变的更小。

平时开发过程中，这两个文件使用哪个都可以；但是，项目上线的时候，推荐使用压缩版。

**注意：引包注意点**

第一点：在使用jQuery之前，先把jQuery文件引到页面中来

如果在使用jQuery之前，没有引用jQuery文件，会报错：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oiR5piv5rOi5ZOp5Liq5rOi_size_9_color_FFFFFF_t_70_g_se_x_16][]

第二点：src路径一定要写正确

如果src路径写错，也会报错：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oiR5piv5rOi5ZOp5Liq5rOi_size_20_color_FFFFFF_t_70_g_se_x_16 6][]

#### jQuery的入口函数 ####

原生的JS的入口函数指的是：window.onload = function()\{\}: 如下所示：

而jQuery的入口函数， 有以下几种写法：

**写法：**

#### jQuery入口函数与js入口函数的区别 ####

区别一： 书写个数不同：

（1）JS的入口函数只能出现一次， 出现多次会存在事件覆盖的问题。

（2）jQuery的入口函数， 可以出现任意多次， 并不存在事件覆盖问题。

区别二：执行时机不同：

（1）JS的入口函数是在所有的文件资源加载完成后， 才执行。这些文件资源包括：页面文档、外部的JS文件、外部的CSS文件、图片等。

（2）jQuery的入口函数， 是在文档加载完成后就执行。 文档加载指的是：DOM树加载完成后， 就可以操作DOM了， 不用等到所有的外部资源都加载成功。

Ps： 文档加载的顺序为：从上往下， 边解析边执行。

[jQuery]: https://jquery.com/
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oiR5piv5rOi5ZOp5Liq5rOi_size_20_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/213b866caac641cdbca5e5803b2dfdfa.png
[jQuery API Documentation]: https://api.jquery.com/
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oiR5piv5rOi5ZOp5Liq5rOi_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/f1b6701121194f2d868a05619afbcd70.png
[jQuery API _ _ jQuery API _ _ jquery api _ _ jquery api chm]: https://jquery.cuishifeng.cn/
[jQuery API _ _ jQuery]: https://www.jquery123.com/
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oiR5piv5rOi5ZOp5Liq5rOi_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/575295109a594054bed1bbb2892d5036.png
[jquery]: http://www.jq22.com/jquery-info122
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oiR5piv5rOi5ZOp5Liq5rOi_size_16_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/25c448806e784b839e29d7248c989e5c.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oiR5piv5rOi5ZOp5Liq5rOi_size_8_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/53db1a90b2494b1c8611ad1f820c1ffc.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oiR5piv5rOi5ZOp5Liq5rOi_size_7_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/d07dc14429dd471fa5818b06b373fa5c.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oiR5piv5rOi5ZOp5Liq5rOi_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/ef65c41fdad344b2af7f506e9fe7f349.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oiR5piv5rOi5ZOp5Liq5rOi_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/10f036296f8043f6bc188fd94b2900da.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oiR5piv5rOi5ZOp5Liq5rOi_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/ea1857b90bb54a02ba83b152df71c477.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oiR5piv5rOi5ZOp5Liq5rOi_size_9_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/f25495cacc8d46a4895719ae99263729.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oiR5piv5rOi5ZOp5Liq5rOi_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/3bced568edc34fa789550c7b8401ef72.png