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