JavaScript之jQuery学习三部曲【上篇】

最新推荐文章于 2024-01-13 08:37:19 发布

跳探戈的小龙虾

最新推荐文章于 2024-01-13 08:37:19 发布

阅读量2.1k

点赞数 31

分类专栏： JavaScript从小白到精通文章标签： jquery javascript 前端前端框架 html5

本文链接：https://blog.csdn.net/qq_52736131/article/details/123717433

版权

JavaScript从小白到精通专栏收录该内容

13 篇文章 25 订阅

订阅专栏

III. jQuery对象的概念和一些基本操作

📘 jQuery对象的介绍

📘 jQuery对象的获取方法

📘 jQuery对象的一些常用操作方法

📘 jQuery对象与DOM对象之间的相互转化

序言：

jQuery的知识过于繁多，因此jQuery的知识将会由三篇文章为大家呈现，三篇文章具有一定的连贯性，如果想要从0掌握jQuery，请完整跟进三篇文章，若只需要一些零碎知识点，可以选择性阅读。

最后我要强调一下，三部曲均面向“小白”，但这个小白指的是学过JavaScript，但没学过jQuery的小白，如果JavaScript也完全不了解的朋友，请先学习JavaScript，JavaScript我也有相应的博客。

本期是jQuery的第一篇文章：【上篇】，主要从jQuery的使用原因/背景；jQuery库的下载、导入和基本语法入手。

I. jQuery的介绍

📗 jQuery是什么？

在学习一个新知识点之前，先知道它是用来干什么的，往往比学习它本身更为重要。那么首先一个问题自然而然的产生了：jQuery是什么？

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。

ok，一句话概括，jQuery就是一个库，什么是库？这对于学过其他编程语言的朋友应该不难理解，如果是只学过js的朋友，这里简单解释一下：

库文件是计算机上的一类文件，提供给使用者一些开箱即用的变量、函数或类。

那么如果套用在jQuery身上，一个更通俗的解释就有了：

jQuery是一个JavaScript文件，这个文件里封装好了各种函数、类和变量，我们可以把这个文件引入到我们的代码中，并直接使用封装好的函数、类与变量。

📗 为什么要学习jQuery？

知道了jQuery是一个库文件而已，那么为什么我们要去学习一个专门的JavaScript文件呢？这个库有什么样的好处呢？

1️⃣ 出色的DOM操作的封装。

2️⃣ 轻量级的javascript框架，极大的简化了js的编程。

3️⃣ 丰富的插件支持。

4️⃣ 对单个样式操作的支持的css方法，提供了一种简洁统一的操作样式的方法。

这部分大家在后续的学习过程中，会有更深层次的体会。如果看完了这一部分，你对jQuery是什么还没有一个具体的印象，不要紧，继续看下去，实战之后你就会真正理解它。

II. jQuery库的下载与导入

📕 jQuery库的下载

看完第一部分，大家都知道了jQuery是一个js文件，那么可以到哪里下载呢？

首先不推荐大家去官网，官网点开的jQuery文件都直接被解析成源码，基本上无法下载成文件形式，这里给大家另一个网址：jQuery各个版本下载地址

但是大家又犯难了，下载哪个版本呢？这里我给出结论：

如果是为了学习起见，下载1.7.2或1.8.3是比较好用的；如果是为了其他作用，例如开发移动端等特殊场景，需要挑选其他的jQuery版本，于是为了更方便大家学习，我直接给1.7.2版本的下载链接(提取码：dxzj)：【点我下载1.7.2jQuery】

📕 jQuery库的导入

下载了压缩包文件之后，我们解压它，能看到四个文件：

那我们要导入哪一个呢？排除法做一下，肯定只剩下前两个：jQuery.js和jQuery.min.js，那么到底是哪一个？那就要了解一下jQuery.js和jQuery.min.js的区别：

(1) jquery.js是完整的未压缩的jQuery库，文件比较大，一般用于阅读学习源码或修改源码，一般不用于线上项目。
(2) jquery.min.js是由完整版的jQuery库经过压缩得来，压缩后功能与未压缩的完全一样，只是将其中的空白字符、注释、空行等与逻辑无关的内容删除，并进行一些优化。这个版本一般用于网站引用使用，减小文件体积，降低网站流量，提升访问速度等。

ok，结论就是引入jquery.min.js，那么我们引入就好了，如果不知道怎么引入js文件的话，我给出引入js文件的语法格式：

<script src="jQuery的路径"></script>

我们用下面这段代码检验自己是否引入成功(放在引入语句下面)(复制使用，暂时无需理解它)：

<script>
    $(document).ready(function () {
        alert("Hello jQuery!");
    });
</script>

如果成功了，应该能看到下面这个弹窗：

III. jQuery对象的概念和一些基本操作

📘 jQuery对象的介绍

首先，学习这部分之前，如果不知道什么是DOM对象的朋友，请先去看我的DOM对象的文章，之后再来看这部分。

学过DOM对象，我们知道对于任意一个网页，它的所有元素组合在一起形成了一颗DOM树：

我们会用DOM的语法获取元素，处理元素，那自然而然的，这种方法获取的元素被称为DOM对象。于是与之对应的jQuery对象是：

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

也就是说，我们的jQuery对象，内核还是DOM对象，但是我们现在不要内核，我们看表面，那么表面就是一个jQuery对象。它的好处是给我们提供了一系列更方便的DOM操作！

📘 jQuery对象的获取方法

// 1.获得 id=XXX 的元素对象（id可以是标签的id或CSS样式id），很常用，需熟练掌握
var $jquery_obj1 = $("#XXX") 

// 2.获得样式class的名字是.abc的元素对象，很常用，需熟练掌握
var $jquery_obj2 = $(".abc") 

// 3.获得某个标签的所有元素，下面以div标签为例，选择所有的div元素，常用，需掌握
var $jquery_obj3 = $("div")

// 4.获得input标签中name='xxx'的元素对象（xxx是任意名称），比较常用
var $jquery_obj3 = $("input[name='xxx']")   

// 5.组合拳：表示获得ID是xxx的元素，该元素同时还使用了类样式xxx，并且限定获取的是某个标签(例如span)

var $jquery_obj4 = $("#a,.b,span")

这些语法其实不难掌握，因为我们会发现，例如以id获取元素，格式和我们书写css是一致的，唯一需要注意的是，jQuery变量最好是以$符号开头，虽然不以这个开头不会报错，但是这是一种规范的写法，也这是区分jQuery对象与普通JavaScript对象的依据。

📘 jQuery对象的一些常用操作方法

获取了jQuery对象，我们总得干点什么吧？那就是对这些对象进行操作，那么有哪些操作呢，我们看下面的代码：

// 1.获取或设置jQuery对象中的html内容
var $jquery_obj1 = $("#paragraph1")
// 获取
alert($jquery_obj1.html())
// 修改
$jquery_obj1.html("跳探戈的小龙虾")

// 2.读取或设置jQuery对象的属性值(以修改ID属性为例)
var $jquery_obj2 = $("#paragraph2")
$jquery_obj2.attr("id","blue")

// 3.删除jQuery对象的某个属性(以删除class属性为例)
var $jquery_obj3 = $("#paragraph3")
$jquery_obj3.remove("class")

上面部分是一些常用的jQuery对象的操作，关于jQuery对象其他的一些知识点：创建对象、插入和删除对象，我们放在下一篇博客讲解！

把上面的部分整合在一个完整的HTML代码中，大家就可以体验一把jQuery的乐趣了：

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery_learning_1</title>
    <style>
        #blue {
            color: blue;
        }

        .red {
            color: red;
        }
    </style>
</head>

<body>
    <p id="paragraph1">
        今天你学jQuery了吗
    </p>
    <p id="paragraph2">
        jQuery好用吗？确实好用
    </p>
    <p id="paragraph3" class="red">
        那就继续学下去吧！
    </p>
    <script src="jquery.min.js"></script>
    <script>
        // 1.获取或设置jQuery对象中的html内容
        var $jquery_obj1 = $("#paragraph1")
        // 获取
        alert($jquery_obj1.html())
        // 修改
        $jquery_obj1.html("学了学了")

        // 2.读取或设置jQuery对象的属性值(以修改ID属性为例)
        var $jquery_obj2 = $("#paragraph2")
        $jquery_obj2.attr("id", "blue")

        // 3.删除jQuery对象的某个属性(以删除class属性为例)
        var $jquery_obj3 = $("#paragraph3")
        $jquery_obj3.removeAttr("class")


    </script>
</body>

</html>

记得修改里面的jquery.min.js的路径，如果懒得动手复制，点这里也可以查看运行结果：【点我揭晓】

📘 jQuery对象与DOM对象之间的相互转化

拿到一个jQuery对象，我们可以转换成一个DOM对象，拿到一个DOM对象，同样可以转换成一个jQuery对象，于是最后分享一下如何把一个jQuery对象和一个DOM对象之间进行互换：

// 1.jQuery对象转DOM对象：两种常用语法
var $jquery_obj1 = $("#xxx") ; //jQuery对象 
var dom_obj1 = $jquery_obj[0]; //第一种转换语法
var dom_obj2 = $jquery_obj.get(0) //第二种转换语法

// 2.DOM对象转jQuery对象
var dom_obj3 = document.getElementById("xxx"); //DOM对象 
var $jquery_obj2 = $(dom_obj3); //转换语法

以上是本期的全部内容，喜欢的小伙伴们可以三连支持一下！💓💓💓！这是jQuery系列的第一篇，三连越多，更新越快！

另外本期博客参与了【新星计划】，还请大家支持一下🌟🌟🌟！

跳探戈的小龙虾

关注

31
点赞
踩
27

收藏

觉得还不错? 一键收藏
打赏
1
评论
JavaScript之jQuery学习三部曲【上篇】

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery库的知识过于繁多，因此我一改过去的习惯，将jQuery的知识按照一定的划分方法进行分割，以三篇文章来把整个jQuery的基础知识给大家讲明白，文风依旧小白向，大家0基础一样可以学(不过要有js基础，jQuery可以0基础)...
复制链接

扫一扫