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

我是波哩个波

已于 2022-03-10 16:13:43 修改

阅读量664

点赞数 1

分类专栏： # jQuery从入门到精通文章标签： jquery 前端 javascript 前端框架

于 2022-01-04 13:11:12 首次发布

本文链接：https://blog.csdn.net/ligonglanyuan/article/details/122300349

版权

jQuery从入门到精通专栏收录该内容

9 篇文章 1 订阅

订阅专栏

jQuery入门

jQuery下载和引入

jQuery的下载

官网地址：jQuery

官方API：jQuery API Documentation

jQuery API中文文档：jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm | jQuery API 中文文档 | 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命名规范允许出现的字符有：数字、字母、下划线、

<script src="jquery.js"></script>
<script type="text/javascript">
        console.log($);
        console.log(jQuery);
        console.log($===jQuery);
</script>

$。

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

var $ = "我是字符串";

var $ = 123;

function $() {
    alert("我是函数$");
}

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

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

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

<script src="jquery.js"></script>
<script type="text/javascript">
        console.log($);
        console.log(jQuery);
        console.log($===jQuery);
</script>

显示的结果如下：

从结果中可以得出结论： $代表的就是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操作返回值

<script src="jquery.js"></script>

<div>我是第1个div</div>
<div class="box">我是第2个div</div>
<div id="box">我是第3个div</div>
<div class="box">我是第4个div</div>
<div>我是第5个div</div>
<script>
    // 通过js获取页面元素节点
    var box = document.getElementById("box");
    var cboxs = document.getElementsByClassName("box");
    var divs = document.getElementsByTagName("div");
    console.log(box);
    console.log(cboxs);
    console.log(divs);
    console.log("------------------------")

    // 通过jQuery获取页面元素
    var jbox = $("#box");
    var jCboxs = $(".box");
    var jdivs = $("div");
    console.log(jbox);
    console.log(jCboxs);
    console.log(jdivs);

    var arr = [1, 2, 3, 4, 5];
    console.log(arr)
</script>

案例：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"))

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

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

DOM对象转成jQuery对象

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

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

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

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

如何使用jQuery

使用步骤

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

版本介绍

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文件，会报错：

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

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

jQuery的入口函数

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

<script type="text/javascript">
	//原生js的入口函数。页面上所有内容加载完毕， 才执行。
	//不仅要等文本加载完毕， 而且要等图片也加载完毕， 才执行函数。
    window.onload = function () {
        alert("hello");
    }
</script>

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

写法：

<script type="text/javascript">
	//文档加载完毕， 图片不加载的时候， 就可以执行这个函数。
    $(document).ready(function () {
        alert("hello");
    })
</script>

<script type="text/javascript">
    //文档加载完毕， 图片不加载的时候， 就可以执行这个函数。
    $(function () {
        alert("hello");
    })
</script>

<script type="text/javascript">
    //文档加载完毕， 图片也加载完毕的时候， 再执行这个函数。
    $(window).ready(function () {
        alert("hello");
    })
</script>

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

区别一：书写个数不同：

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

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

区别二：执行时机不同：

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

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

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

我是波哩个波

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
4
评论
【前端系列教程之jQuery】02_jQuery入门、设计思想理解

jQuery入门jQuery下载和引入jQuery的下载官网地址：jQuery 官方API：jQuery API Documentation jQuery API中文文档：jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm | jQu...
复制链接

扫一扫