jQuery是一個(gè)js的框架。
什么是框架呢？框架就是封裝。
以吃飯舉例：
要想吃飯那么你就得買菜、洗菜、切菜、炒菜、盛菜、端菜，最后就能吃到菜，而如果你到飯館去吃飯，那么你只需要點(diǎn)菜，然后就等著吃飯。那么飯館就是一種封裝，也就是框架。
同樣，如果你自己用js來開發(fā)，那么等同于自己做菜；如果用jQuery來開發(fā)，那么相當(dāng)于飯館點(diǎn)菜；
去飯店點(diǎn)菜都需要菜單，菜單就是飯館提供給我們的接口，每個(gè)飯館的菜單都不一樣，只有菜單上有的菜你才可以點(diǎn)。
同樣，jQuery的手冊(cè)就是jQuery的菜單，這里詳細(xì)列出了哪些方法可以使用；
飯館分好多種，有五星級(jí)酒店，也有小飯館；那么js的框架也分好多種，有重量級(jí)的也有輕量級(jí)的；
jQuery是js框架中的一種，其他的還有prototype等，jQuery是一個(gè)輕量級(jí)的框架，但是功能卻非常犀利，所以應(yīng)該是一個(gè)經(jīng)濟(jì)實(shí)惠且味道不錯(cuò)的飯館。
為什么要用框架？ 呵呵，想想你為什么要去飯館就可以了。因?yàn)槿ワ堭^省事啊，只要坐那喊過來服務(wù)員，點(diǎn)完菜就等著上菜就行了，一個(gè)字“省事”，為啥不是一個(gè)字呢？
同樣，用jQuery可以省去很多的工作，如果用js自己開發(fā)的話可能需要巴拉巴拉敲半天，而用jQuery可能一兩行代碼就OK了。
jQuery提供了些什么菜單給我們呢？想想平常我們經(jīng)常用js干的一些事是什么？
一個(gè)經(jīng)常的案例是鼠標(biāo)點(diǎn)擊提交按鈕的時(shí)候，對(duì)表單進(jìn)行一些驗(yàn)證，驗(yàn)證通過則提交；又或者是一組tab標(biāo)簽，鼠標(biāo)放上去的時(shí)候當(dāng)前的標(biāo)簽要高亮，代碼如下；
1 <body> 2 <div id="main"> 3 <div id="like" class="rightbar"> 4 <h2>猜你喜歡</h2> 5 <ul> 6 <li>海飛絲洗頭膏</li> 7 <li class="red">六神花露水</li> 8 <li>舒膚佳香皂</li> 9 <li>心相印紙巾</li>10 <li>哇哈哈礦泉水</li>11 <li>王老吉</li>12 </ul>13 </div>14 <div id="hot" class="rightbar">15 <h2>熱門推薦</h2>16 <ul>17 <li>融氏橄欖油</li>18 <li>幫寶適紙尿褲</li>19 <li>有機(jī)大米</li>20 <li>妙潔垃圾袋</li>21 <li>優(yōu)樂美奶茶</li>22 <li>親親果凍</li>23 </ul>24 </div>25 <div id="inner"></div>26 </div>27 <script type="text/javascript" language="javascript">28 var hot = document.getElementById("hot");29 var li = hot.getElementsByTagName("li");30 for(var i in li) {31 li[i].onmouseover = function() {32 this.style.color = "red";33 };34 li[i].onmouseout = function() {35 this.style.color = "black";36 };37 }38 </script>39 </body>
總結(jié)這些經(jīng)常的案例會(huì)發(fā)現(xiàn)，這里基本上包含三個(gè)要素：一個(gè)是事件，如onmouseover，onmouseout等，一個(gè)是選擇，如document.getElementById("hot");hot.getElementsByTagName("li");等；第三個(gè)是操作，如this.style.color = "red";this.style.color = "black";等。
那么jQuery就是對(duì)這三個(gè)要素進(jìn)行封裝，提供給我們更強(qiáng)大的事件支持，更強(qiáng)大的選擇器，更強(qiáng)大快捷的操作。
jQuery另外還提供兩個(gè)強(qiáng)大的封裝，一個(gè)是Ajax，一個(gè)是動(dòng)畫。
jQuery除了支持js原生態(tài)的事件外（寫法不一樣，原生態(tài)前面有on，jQuery沒有on，如onmouseover對(duì)應(yīng)的jQuery事件是mouseover），如click(),mouseover(),mouseout(),change(),focus(),scroll(),submit()等等，還支持事件綁定bind(),一次性事件綁定one(),解除綁定unbind(),事件委派live(),解除事件委派die(),事件切換hover(),toggle()等等，這里只做介紹，以后再詳細(xì)分析。
jQuery的選擇器非常強(qiáng)大，基本的如按標(biāo)簽名選擇，如$("p")、按id號(hào)選擇$("#id")、按類名選擇$(".class")，這些之外還支持上下級(jí)選擇$("#id p")、按序號(hào)選擇$("div :first")、按屬性選擇$("div [name=box]")、按單屬性選擇$("div :hidden");$("input :checked")等等。
操作功能也非常強(qiáng)大，常用的有html(),val(),css(),attr(),append()等等，還有很多這里不一一列出。
還有Ajax和動(dòng)畫功能，非常的強(qiáng)大，這里具體不聊，以后單個(gè)詳細(xì)分析。
簡(jiǎn)單介紹就到這里，最后貼出上面的代碼用jQuery改寫后的代碼。
1 <script type="text/javascript" language="javascript"> 2 $("#hot li").hover( 3 function() { 4 $(this).css("color","red"); 5 }, 6 function() { 7 $(this).css("color","black"); 8 } 9 );10 </script>
