1 JQuery基本概念

JQuery实际是JavaScript的一个框架，可以用来简化JS的开发。截取下百度百科给出的概念：

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

JavaScript框架：本质上就是js文件，内部封装了一些js代码而已，方便用户操作。举个自定义JS框架的简单例子：

1）写一个HTML，通过元素id获取内容并弹出信息提示窗；
2）封装一个js文件，其中将“通过元素id获取内容”js代码封装为get。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义JS框架</title>
    <script src="js/myJs.js"></script>
</head>
<body>
    <div id="div1">div1...</div>
    <div id="div2">div2...</div>

    <script>
        //1、根据id获取元素对象
        // var div1 = document.getElementById("div1")
        // var div2 = document.getElementById("div2");
        var div1 = get("div1")
        var div2 = get("div2");
        //2、获取标签体内容
        alert(div1.innerHTML);
        alert(div2.innerHTML);

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

//封装一个方法，获取元素对象，根据id获取
function get(id) {
    return  document.getElementById(id);
}

2 JQuery快速入门

快速入门步骤：1）下载JQuery文件；-》2）在项目中导入JQuery的js文件；-》3）使用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插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.5.1

【jquery-xxx.js与jquery-xxx.min.js的区别】：

	jquery-xxx.js	jquery-xxx.min.js
版本	开发版本，给开发人员看的，缩进和注释比较友好；	生产版本，程序中使用，没有缩进；
体积	体积大	体积小，程序加载快一些

2）导入JQuery的js文件：导入的是min.js文件

3）使用JQuery：实现第一节中举例内容

写一个HTML，使用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获取元素对象
    var div1 = $("#div1"); //$是方法对象名称，括号内传递是选择器，#根据id找
    alert(div1.html());

    var div2 = $("#div2"); //$是方法对象名称，括号内传递是选择器，#根据id找
    alert(div2.html());

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

3 JQuery对象和JS对象的区别与转换

以上两节的内容，一个是通过js原生代码获取的JS对象，一个是通过$符获取的JQuery对象，二者有什么区别吗？能否互相转换？首先看下二者操作的对比：分别通过js和JQuery方式获取名称叫div的所有html元素对象，并修改标签体内容：

<!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>
    //1、通过js方式获取名称叫div的所有html元素对象
    var divs = document.getElementsByTagName("div");
    alert(divs.length); //divs：object HTMLCollection，可当做数组使用
    //对divs中所有的div标签体内容变为aaa
    for (var i = 0; i < divs.length; i++) {
        divs[i].innerHTML = "aaa";
    }
    //--------------------------------------------
    //2、通过JQuery方式获取名称叫div的所有html元素对象
    var $divs = $("div");
    alert($divs.length);//$divs：object Object，可当做数组使用
    //对divs中所有的div标签体内容变为bbb
    $divs.html("bbb"); //方便很多

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

由以上我们可以发现：

1）JQuery对象在操作时更方便；
2）JQuery对象和js对象方法不通用；
3）两者相关要进行转换： JQuery---> js: JQuery对象[索引] 或 JQuery对象.get(索引) eg:

———————————————————————————————————————

本文为博主原创文章，转载请注明出处！

JavaWeb——JQuery之基本概述与快速入门实践总结（JQuery各版本区别、JQuery对象和JS对象的区别与转换）

1 JQuery基本概念

2 JQuery快速入门

3 JQuery对象和JS对象的区别与转换