jQuery的概念

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。其使用的目的是为了简化JS开发

而对于JavaScript框架，其本质上就是一些js文件，封装了js的原生代码而已。

jQuery快速入门

1、下载jQuery

目前jQuery有三个大版本：

1.x版本：兼容ie678,使用最为广泛的，目前官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)

2.x版本：不兼容ie678，很少有人使用，目前官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)

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

我们在下载使用jQuery时会发现，一般会有两个js文件，一个是带.min的，另一个是不带.min的。

jquery-xxx.js 与 jquery-xxx.min.js区别：

1. jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些

2. jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。程序加载更快

所以我们一般在使用时导入的是第二个jquery-xxx.min.js的生产版本

2、导入JQuery的js文件

即导入min.js文件

之后在html文件的头部导入对该js文件的链接，如下所示：

<head>
    <meta charset="UTF-8">
    <title>jquery快速入门</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>

3、jQuery的使用

我们使用jQuery获取元素对象时，可以使用“$()”来作为一个选择器，对标签体中的内容进行获取。下面分别使用jQuery和不使用jQuery获取标签内容，作一个实际的对比。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery快速入门</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>

    <div id="div1">div1...</div>
    <div id="div2">div2...</div>

    <script>
        //通过jQuery对象获取指定ID对象
        var div1 = $("#div1");
        var div2 = $("#div2");
        //通过alert将结果输出（以jQuery形式获取值）
        alert(div1.html());
        alert(div2.html());

        /**
         * 以下是不使用jQuery的方法
         * */
        //不使用jQuery获取指定ID对象
        var div3 = document.getElementById("div1");
        var div4 = document.getElementById("div2");
        //不使用jQuery获取元素内容
        alert(div3.innerHTML);
        alert(div4.innerHTML);
    </script>

</body>
</html>

jQuery对象和JS对象区别与转换

相比于JS对象，jQuery对象在操作时更加方便，代码更加简洁

但是需要注意的是：jQuery对象和JS对象的方法是不通用的，那么我们如果想在jQuery中使用js方法，或在js中使用jQuery方法该怎么办呢？

因此，在这里和大家分享一下jQuery对象和JS对象之间的相互转换

jQuery转为js

使用jQuery对象[索引] 或者 jQuery对象.get(索引)将jQuery对象转化为js对象，即可使用js的方法。

详细使用如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery和js对象的相互转换</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>

    <div id="div1">div1...</div>
    <div id="div2">div2...</div>

    <script>
        /**
         * jQuery 转为 js
         * */
        //1、通过js方式获取名叫div的所有html元素对象
        var divs = document.getElementsByTagName("div");
        alert(divs.length); //可以将其当成数组来使用
        //对divs中所有div让其标签体内容变为“aaa”
        for (var i = 0;i<divs.length;i++){
            // divs[i].innerHTML = "aaa"
            $(divs[i]).html("ccc")      //将js对象divs[i]转化为jQuery对象
        }

    </script>
</body>
</html>

js转为jQuery

使用“$”符的括号中包含js对象，如：$(js对象)

之后就可以使用jQuery的方法了，

详细使用如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery和js对象的相互转换</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>

    <div id="div1">div1...</div>
    <div id="div2">div2...</div>

    <script>

        /**
         * js 转化为 jQuery
         * */
        //2、通过jQuery方式获取所有名叫div的所有html对象
        var $divs2 = $("div");
        alert($divs2);
        //对divs中所有div让其标签体内容变为“aaa”
        // $divs2.html("bbb");
        $divs2[0].innerHTML = "ddd";    //将jQuery对象对象转化为js
        $divs2.get(1).innerHTML = "eee"     //将jQuery对象对象转化为js

    </script>
</body>
</html>

好了，关于jQuery对象和JS对象区别与转换的相关内容就先和小伙伴们分享到这里，之后还会继续和小伙伴们分享jQuery的选择器、DOM操作以及jQuery的高级进阶内容。

觉得有用记得点赞关注哟！

灰小猿陪你一起进步！

【JQuery框架】JQuery对象和JS对象的区别和转换