### jQuery定义 jQuery是js的一个库，<b>封装</b>了我们开发过程中常用的一些方法，方便我们调用，提高开发效率。 ### jQuery的两大特点 * 链式编程：比如`.show()`和`.html()`可以连写成`.show().html()`。 * 隐式迭代：隐式 对应的是 显式。隐式迭代的意思是：在方法的内部进行循环遍历，而不用我们自己再进行循环，简化我们的操作，方便我们调用。 ### js中的DOM对象和jQuery对象比较（重点） ~~~ //js的入口函数 window.onload = function(){ alert(1); } //jQuery的入口函数 $(function(){ alert(1); }) ~~~ #### 二者区别 通过jQuery获取的元素是一个<b>数组</b>,数组中包含着原生JS中的DOM对象。 针对下面这样一个div结构： ~~~ <div></div> <div class="box"></div> <div id="box"></div> <div class="box"></div> <div></div> ~~~ 通过原生 js 获取这些元素节点的方式是： ~~~ var myBox = document.getElementById("box"); //通过 id 获取单个元素 var boxArr = document.getElementsByClassName("box"); //通过 class 获取的是数组 var divArr = document.getElementsByTagName("div"); //通过标签获取的是数组 ~~~ 通过 jQuery 获取这些元素节点的方式是：（获取的都是数组） ~~~ //获取的都是数组，里面包含着原生 JS 中的DOM对象。 var jqBox1 = $("#box"); var jqBox2 = $(".box"); var jqBox3 = $("div"); ~~~ #### 二者的相互转换 1.DOM对象转为jQuery对象: ~~~ $(js对象); ~~~ 举例： ~~~ //假设myBox、boxArr、divArr都是js对象 var box1 = $(myBox) var box2 = $(boxArr) var box3 = $(divArr) ~~~ 2.DOM对象转为DOM对象（重点） ~~~ jQuery对象[index]; //如下 //$div为jQuery对象 var $div = $(".container>div"); $("#ul1>li").click(function(){ var clickindex = $(this).index(); if(clickindex!=index){ //此处就是通过jQuery对象加索引值转换的 $div[index].style.display="none"; $div[clickindex].style.display="block"; index=clickindex; } }) ~~~