jQuery 学习之路（1）：引子
一、主流 javascript 庫
除 jQuery 外，還有 Prototype、Dojo、YUI、ExtJS、MooTools ，其中 Prototype 較老，結(jié)構(gòu)設(shè)計較為松散，ExtJS 界面很棒但需要商業(yè)授權(quán)，MooTools 也是值得學(xué)習(xí)的一個 js 庫，Dojo 有一些特殊功能，也可以考慮學(xué)習(xí)，YUI 的文檔很完備，語法也規(guī)范。對我個人而言，選擇性依次為 jQuery >?MooTools >?ExtJS > Dojo > YUI > Prototype。
jQuery 的口號是 "write less,do more."。它的優(yōu)點是使用了鏈?zhǔn)讲僮骱碗[式迭代大量減少了代碼量，將行為操作從 html 代碼中剝離出來利于分工合作和后期維護(hù)，此外強(qiáng)大的選擇器也是其一大優(yōu)勢。
jQuery 的界面庫有 jQuery UI 和 easy UI，學(xué)完 jQuery 可以去考慮繼續(xù)學(xué)習(xí)這兩個。
?
二、欲善其事，先利其器
先選擇一個便于學(xué)習(xí) jQuery 的 IDE，可以使用?Dreamweaver 8，它擁有一個可以智能提示 jquery 書寫的插件，叫?jQuery_API .mxp，通過 Dreamwearver 的 "命令"——>"擴(kuò)展管理" 可以安裝使用。Dreamweaver 8 是 Macromedia 公司出的最后一版，2005年 Macromedia 公司被 Adobe 公司收購，Dreamweaver 開始從 CS3 開始命令，使用最新的 CS6 版本即內(nèi)置支持 jQuery 智能提示。?
其次，并不一定要去下載 jQuery 庫到本地，可以直接使用下面兩個在線鏈接地址：
http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.jshttp://ajax.microsoft.com/ajax/jquery/jquery-1.11.0.min.js http://ajax.microsoft.com/ajax/jquery/jquery-2.1.0.min.js從上面可以看出，jQuery 提供了 1.x 和 2.x 的版本，區(qū)別在于，2.x 版本不再支援 IE 6/7/8 ，所以體積更小。不過考慮到現(xiàn)在 xp 和 win8 上的默認(rèn) IE 版本仍然在這個區(qū)間，還是建議使用 1.x 的庫，而 jQuery 團(tuán)隊也聲明未來將同時支援 1.x 和 2.x 的升級。
?
三、第一個 jQuery 代碼
<html> <head><meta http-equiv="content-type" content="text/html;charset=utf-8"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> </head> <body><script>$(document).ready(function(){$("body").html("Hello,World!");});</script> </body> </html>? 這里有兩個問題需要提一下：一是以前的寫法是 <script?type="text/javascript"></script>，但在 HTML5 中 javascript 已經(jīng)是默認(rèn)腳本，不必寫出； 二是關(guān)于 $(document).ready(function(){ ... }); 函數(shù)的意義，表示等待所有文檔加載完成，再執(zhí)行里面的代碼。它還可以簡寫成如下形式： $(function(){ ... });
?
四、關(guān)于 DOM 對象和 jQuery 對象
簡單粗暴的說，jQuery 對象就是 DOM 對象 的集合，jQuery 隱式迭代的特性就是建立在此基礎(chǔ)之上。 簡單例子如下：
<html> <head><meta http-equiv="content-type" content="text/html;charset=utf-8"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script> $(function(){var dom_obj = document.getElementById('id'); var jquery_obj = $('#id');alert(dom_obj.innerHTML);alert(jquery_obj.html()); alert(jquery_obj[0].innerHTML); //將 jquery 對象轉(zhuǎn)化成 dom 對象 alert($(dom_obj).html()); //將 dom 對象轉(zhuǎn)化成 jquery 對象 });</script> </head> <body><span id='id'>Hello,World!</span> </body> </html>上面四個 alert 語句輸出的都是 "Hello,World!"，可見 DOM 對象和 jQuery 對象是可以互相轉(zhuǎn)化的，這樣在需要的時候，我們就可以結(jié)合兩者來快速完成一些功能。需要注意的是，使用 if(document.getElementById('id')){} 這樣的代碼可以判斷該元素是否存在，而使用 if($('#id')){} ?則不可以，它永遠(yuǎn)返回一個對象，當(dāng)元素不存在時，只是長度為0的集合對象罷了，所以要么轉(zhuǎn)化成 dom 對象來判斷，要么根據(jù)其 jquery 對象的長度來判斷。
?
五、參考資料
官方文檔已經(jīng)非常詳盡：http://api.jquery.com/
?
?jQuery Easy UI從1.3.3到現(xiàn)在的最新版本1.3.4都是基于jQuery2.0的，而jQuery2.0是不支持IE6、7、8的了，所以jQueryEasyUI1.3.3后的版本都不支持IE6、7、8。如果想繼續(xù)兼容IE8以前的版本，只能使用jQueryEasyUI1.3.2或以前的版本了，但是可能得注意一些EasyUI的API可能會有差異。
?
ie下報缺少標(biāo)識符、字符串或數(shù)字，在firefox及其他下均無問題，郁悶的找了半天也沒結(jié)果，使用Companion。js也不行。最好google了一下：
原因及解決方法
1.原因：一般出現(xiàn)在類的定義時在最后一個屬性或方法后加了逗號，在Firefox是無所謂的，而IE下就會出錯，而且提示得云里霧里，要除錯都很難。?
2.解決方法:去掉這個逗號…..
?
六、關(guān)于通過DOM操作添加新控件，新控件不能觸發(fā)事件的問題，可以參考：http://blog.csdn.net/a15937822658/article/details/13091159
轉(zhuǎn)載于:https://www.cnblogs.com/tianyajuanke/p/3716105.html
總結(jié)
以上是生活随笔為你收集整理的jQuery 学习之路（1）：引子的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： SQLServer导入Excel截断数据
- 下一篇： 【自用】nginx.conf