果你想成为一名优秀的 java 架构师，看这里 → 乐字节免费公开课（腾讯课堂）

如需要跟多资料请点击下方图片⬇（扫码加好友→备注 66）

主要内容

Jquery 对象

​ jQuery 是一套兼容多浏览器的 javascript 脚本库. 核心理念是写得更少，做得更多，使用 jQuery 将极大的提高编写 javascript 代码的效率，帮助开发者节省了大量的工作，让写出来的代码更加优雅，更加健壮，” 如虎添翼 ”。同时网络上丰富的 jQuery 插件也让我们的工作变成了 ” 有了 jQuery，一切 so easy。” – 因为我们已经站在巨人的肩膀上了。

​ jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布，吸引了来自世界各地的众多 JavaScript 高手加入，由 Dave Methvin 率领团队进行开发。如今，jQuery 已经成为最流行的 javascript 框架，在世界前 10000 个访问最多的网站中，有超过 55% 在使用 jQuery。

Jquery 的下载与安装

下载

​ http:// jquery.com/ 下载

版本

​ jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7,or 8. (不支持 ie6 7 8, 如果需要下载 1.X)

​（1）完整版 : jquery-2.1.4.js –> 学习版本 (学习源码 想高手学习是最好学习方法)

​（2）压缩版 : jquery-2.1.4.min.js –> 开发版本 (压缩版，减少传输)

​ 目前使用版本：jquery-3.4.1.js

优点

​（1）提供了强大的功能函数

​（2）解决浏览器兼容性问题

​（3）实现丰富的 UI 和插件

​（4）纠正错误的脚本知识

​ ……

安装

​ 在页面引入即可

<script src="js/jquery-3.4.1.js" type="text/javascript" ></script>

Jquery 核心

​ <font color=”red”> $ 符号在 jQuery 中代表对 jQuery 对象的引用, “jQuery” 是核心对象。</font> 通过该对象可以获取 jQuery 对象，调用 jQuery 提供的方法等。只有 jQuery 对象才能调用 jQuery 提供的方法。

$ <==> jQuery

Dom 对象 与 Jquery 包装集对象

​ 明确 Dom 对象和 jQuery 包装集的概念, 将极大的加快我们的学习速度。原始的 Dom 对象只有 DOM 接口提供的方法和属性，通过 js 代码获取的对象都是 dom 对象；而通过 jQuery 获取的对象是 jQuery 包装集对象，简称 jQuery 对象，只有 jQuery 对象才能使用 jQuery 提供的方法。

Dom 对象

​ javascript 中获取 Dom 对象，Dom 对象只有有限的属性和方法：

var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");

Jquery 包装集对象

​ 可以说是 Dom 对象的扩充. 在 jQuery 的世界中将所有的对象, 无论是一个还是一组, 都封装成一个 jQuery 包装集, 比如获取包含一个元素的 jQuery 包装集：

var jQueryObject = $("#testDiv");

Dom 对象 转 Jquery 对象

​ Dom 对象转为 jQuery 对象，只需要利用 $() 方法进行包装即可

var domDiv = document.getElementById('mydiv');  // 获取 Dom 对象
mydiv = $(domDiv);

Jquery 对象 转 Dom 对象

​ jQuery 对象转 Dom 对象，只需要取数组中的元素即可

// 第一种方式 获取 jQuery 对象
var jqueryDiv = jQuery('#mydiv');
// 第二种方式 获取 jQuery 对象
jqueryDiv = $('#mydiv');
var dom = jqueryDiv[0]; // 将以获取的 jquery 对象转为 dom

​ 通过遍历 jQuery 对象数组得到的对象是 Dom 对象，可以通过 $() 转为 jQuery 对象

$('#mydiv').each(function() {// 遍历
       var jquery = $(this);    
});

案例：

<div id="mydiv">write less, do more</div>

<script type="text/javascript">
    console.log("------------- 获取 dom 对象 ------------------")
    // dom 对象
    var domDiv = document.getElementById("mydiv");
    console.log(domDiv);
    
    console.log("------------- 获取 jquery 对象 ------------------")
    // 获取 jquery 对象
    // 第一种方式
    var jqueryDiv = jQuery('#mydiv');
    console.log(jqueryDiv);
    // 第二种方式
    jqueryDiv = $('#mydiv');
    console.log(jqueryDiv);
    
    console.log("-------------dom 转 jquery------------------")
    // dom 转 jquery 包装集 / 对象
    var obj = $(domDiv);
    console.log(obj);
        
    console.log("-------------jquery 转 dom------------------")
    // jquery 对象转 dom 对象
    var dom = $('#mydiv')[0]; // 获取 jquery 对象转为 dom
    // 或
    var dom2 = jqueryDiv[0]; // 将 jquery 对象转为 dom
    console.log(dom);
    console.log(dom2);
    
    /* this 代表了 dom 对象，不是 jquery 对象 */
    console.log("-------------dom 转 jquery------------------")
    $('#mydiv').each(function() {
   // 通过 id 选择器选择了 id 为 mydiv 的所有元素然后进行遍历
   // 那么遍历出的每个元素就是 id 为 mydiv 的标签元素
   // 而 this 就代表了当前的这个元素
        var jquery = $(this);    
    });
    
    console.log("-------------jquery 转 dom------------------")
    $('#mydiv').each(function() {var dom3 = this;});
</script>

console.log("-------------jquery 转 dom------------------")
$('#mydiv').each(function() {var dom3 = this;});

文章持续更新，可以微信搜索「云璈公子」阅读，回复【资料】【面试】【简历】有我准备的一线大厂面试资料和简历模板，同时我的 GitHub https://github.com/1170300826… 有互联网一线大厂面试指南。