[TOC] # 2.1 jQuery 的下载 官网地址:[https://jquery.com/](https://jquery.com/) 版本: ~~~ ●1x :兼容IE 678等低版本浏览器，官网不再更新 ●2x :不兼容IE 678等低版本浏览器,官网不再更新 ●3x :不兼容IE 678等低版本浏览器，是官方主要更新维护的版本 ~~~ 各个版本的下载:[https://code.jquery.com/](https://code.jquery.com/) ## 2.2 jQuery的使用步骤 1.引入jQuery文件 2.使用即可 ## 2.3 jQuery的入口函数 (新方法)此处是页面DOM加载完成的入口 ~~~ $(function (){ ..... //此处是页面DOM加载完成的入口 }) ; ~~~ （传统）此处是页面DOM加载完成的入口 ~~~ $ (document).ready (function() { ... //此处是页面DOM加载完成的入口 }); ~~~ 1.等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成, jQuery帮我们完成了封装。 2.相当于原生js中的DOMContentLoaded. 3.不同于原生js中的load事件是等页面文档、外部的js文件、Css文件、 图片加载完毕才执行内部代码。 4.更推荐使用第一种方式。  ## 2.4 jQuery的顶级对象$ 1.$是jQuery的别称,在代码中可以使用jQuery代替$ ,但一般为了方便,通常都直接使用$. 2.$是jQuery的顶级对象,相当于原生JavaScript中的window.把元素利用$包装成jQuery对象,就可以调用 jQuery的方法。 # 2.5 jQuery对象和DOM对象 1.用原生JS获取来的对象就是DOM对象 2\. jQuery方法获取的元素就是jQuery对象。 3\. jQuery对象本质是:利用$对DOM对象包装后产生的对象(伪数组形式存储)。 ~~~ <script> <div></div> <span></span> //1.DOM对象：用原生js获取过来的对象就是dom 对象 varmy Div = document.querySelector('div'); //myDiv 是DOM对象 varmy Span = document.querySelector('span'); // mySpan 是DOM对象 console.dir(myDiv); //2.jQuery对象：用jQuery方式获取过来的对象就是Query对象。本质：通过$把DOM元素进行了包装。 $('div'); //$('div'); 就是jQuery对象 $('span'); //$('span'); 就是jQuery对象 console.dir($('div')); //3.Query 对象只是使用Query 方法，DOM 对象使用则使用原生的JavaScript 属性和方法 //myDiv.style.display = 'none'; //myDiv.hode();myDiv是一个dom兑现不能使用jQuery里面的hide方法 //$('div').style.display = 'none';//$('div')是一个jQuery对象不能使用原生js的属性和方法 </script> ~~~ # 2.5 jQuery 对象和DOM对象 DOM对象与jQuery对象之间是可以相互转换的。 因为原生js比jQuery更大,原生的一-些属性和方法jQuery没有给我们封装要想使用这些属性和方法需要把 jQuery对象转换为DOM对象才能使用。 1. DOM对象转换为jQuery对象:$(DOM对象) ~~~ $('div') ~~~ 2. jQuery对象转换为DOM对象(两种方式) ~~~ $('div') [index] index 是索引号 $('div').get(index) index 是索引号 ~~~