jquery基礎知識第一講之認識jquery
jQuery是一個優(yōu)秀的JavaScript庫,它憑借簡潔地語法和跨平臺的兼容性,極大地簡化了開發(fā)人員遍歷HTML文檔,操作DOM,處理事件,執(zhí)行動畫和開發(fā)Ajax操作。
jQuery優(yōu)勢:
1.輕量級
2.強大的選擇器
3.出色的DOM操作的封裝
4.可靠的事件處理機制
5.完善的Ajax
6.不污染頂級變量
7.出色的瀏覽器兼容性
8.鏈式操作方式
9.隱式迭代
10.行為層與結(jié)構(gòu)層分離
11.豐富的插件支持
12.完善的文檔
13.開源
(1)編寫簡單的jQuery代碼:
注:$ 就是jQuery的簡寫形式。
<!-- 引入 jQuery --> <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { //等待DOM元素加載完畢.(可能DOM元素關聯(lián)的文件沒有加載完) alert("Hello World!"); //彈出一個框 }); $(document).ready(function () { //可以同時編寫多個 alert("Hello again!"); }); $(function () { //簡寫形式 alert("Hello jQuery!"); }); </script>
(2)jQuery的代碼風格
注:鏈式操作。
1、對同一個對象不超過3次操作的,可以寫成一行?! ?nbsp;
2、對于同一個對象操作較多的,建議每行寫一個操作。
3、對于多個對象的少量操作,可以每個對象寫一行,如果涉及子元素,可以考慮適當?shù)目s進。
4、對于多個對象的較多操作,可以結(jié)合2,3條。
添加必要的注釋。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>1-4-3</title> <style type="text/css"> #menu { width:300px; } .has_children{ background : #555; color :#fff; cursor:pointer; } .highlight{ color : #fff; background : green; } div{ padding:0; } div a{ background : #888; display : none; float:left; width:300px; } </style> <!-- 引入 jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //等待dom元素加載完畢. $(document).ready(function(){ $(".has_children").click(function(){ $(this).addClass("highlight") //為當前元素增加highlight類 .children("a").show().end() //將子節(jié)點的a元素顯示出來并重新定位到上次操作的元素 .siblings().removeClass("highlight") //獲取元素的兄弟元素,并去掉他們的highlight類 .children("a").hide(); //將兄弟元素下的a元素隱藏 }); }); </script> </head> <body> <div id="menu"> <div class="has_children"> <span>第1章-認識jQuery</span> <a>1.1-JavaScript和JavaScript庫</a> <a>1.2-加入jQuery</a> <a>1.3-編寫簡單jQuery代碼</a> <a>1.4-jQuery對象和DOM對象</a> <a>1.5-解決jQuery和其它庫的沖突</a> <a>1.6-jQuery開發(fā)工具和插件</a> <a>1.7-小結(jié)</a> </div> <div class="has_children"> <span>第2章-jQuery選擇器</span> <a>2.1-jQuery選擇器是什么</a> <a>2.2-jQuery選擇器的優(yōu)勢</a> <a>2.3-jQuery選擇器</a> <a>2.4-應用jQuery改寫示例</a> <a>2.5-選擇器中的一些注意事項</a> <a>2.6-案例研究——類似淘寶網(wǎng)品牌列表的效果</a> <a>2.7-還有其它選擇器么?</a> <a>2.8-小結(jié)</a> </div> <div class="has_children"> <span>第3章-jQuery中的DOM操作</span> <a>3.1-DOM操作的分類</a> <a>3.2-jQuery中的DOM操作</a> <a>3.3-案例研究——某網(wǎng)站超鏈接和圖片提示效果</a> <a>3.4-小結(jié)</a> </div> </div> </body> </html>
(3)DOM對象與jQuery對象
DOM(Document Object Model,文檔對象模型),每一個DOM都可以表示成一棵樹。JavaScript中的getElementById或者getElementByTagName來獲取元素節(jié)點,這樣的DOM元素就是DOM對象。
jQuery對象是通過jQuery包裝DOM對象后產(chǎn)生的對象。jQuery對象是jQuery獨有的,可以使用jQuery中的方法,但不能使用DOM對象的方法。
注:jQuery對象都是通過$()函數(shù)制造出來的,$()函數(shù)就是一個jQuery對象的制造工廠。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>1-4</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- 引入 jQuery --> <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //等待dom元素加載完畢. $(document).ready(function () { var domObj = document.getElementsByTagName("h3")[0]; // Dom對象 var $jQueryObj = $(domObj); //jQuery對象 alert("DOM對象:" + domObj.innerHTML); alert("jQuery對象:" + $jQueryObj.html()); }); </script> </head> <body> <h3>例子</h3> <p title="選擇你最喜歡的水果.">你最喜歡的水果是?</p> <ul> <li>蘋果</li> <li>橘子</li> <li>菠蘿</li> </ul> </body> </html>
DOM對象與jQuery對象可以相互轉(zhuǎn)換,案例如下:
1.DOM對象方式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>1-6-2</title> <!-- 引入 jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //等待dom元素加載完畢. $(document).ready(function () { var $cr = $("#cr"); //jQuery對象 var cr = $cr.get(0); //DOM對象獲取 2種方式 $cr[0] 或者 $cr.get(0) $cr.click(function () { if (cr.checked) { //DOM方式判斷 alert("感謝你的支持!你可以繼續(xù)操作!"); } }) }); </script> </head> <body> <input type="checkbox" id="cr" /> <label for="cr">我已經(jīng)閱讀了上面制度.</label> </body> </html>
2.jQuery對象方式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>1-6-1</title> <!-- 引入 jQuery --> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> //等待dom元素加載完畢. $(document).ready(function () { var cr = document.getElementById("cr"); //DOM對象 var $cr = $(cr); //jQuery對象 $cr.click(function () { if ($cr.is(":checked")) { //jQuery方式判斷 alert("感謝你的支持!你可以繼續(xù)操作!"); } }) }); </script> </head> <body> <input type="checkbox" id="cr" /> <label for="cr">我已經(jīng)閱讀了上面制度.</label> </body> </html>
以上就是關于jquery學習的第一課,希望大家繼續(xù)關注。
相關文章
EasyUI 中combotree 默認不能選擇父節(jié)點的實現(xiàn)方法
下面小編就為大家?guī)硪黄狤asyUI 中combotree 默認不能選擇父節(jié)點的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11iframe異步加載實現(xiàn)點擊左邊菜單加載右邊內(nèi)容實例講解
iframe異步加載想必很多朋友對你都不會陌生,接下來將實現(xiàn)這樣一個功能左邊菜單不能刷新的情況下,異步加載右邊的內(nèi)容頁面,感興趣的你可以參考下本文或許對你有所幫助2013-03-03jquery.uploadify插件在chrome瀏覽器頻繁崩潰解決方法
這篇文章主要介紹了jquery.uploadify插件在chrome瀏覽器頻繁崩潰解決方法,十分的實用,遇到相同問題,需要解決的朋友可以參考下2015-03-03