jquery是一個js庫,極大的簡化了js程式設計.jquery是一個寫的更少,但做的更多的輕量級js庫.
jquery位于一個js檔案中,其中包含了所有jquery函數,可以用如下标記把jquery添加到網頁中:
<head>
<script src="jquery.js"></script>
</head>
有2個版本的jquery可供下載下傳,一個精簡過的(production version),另一份是未壓縮的(development version)供調試和閱讀.都可以從jquery.com下載下傳.
如果不想在本地存放jquery庫,可以從google或microsoft加載cdn jquery核心檔案:
jquery文法執行個體:
$(this).hide() 隐藏目前html元素,$("#test").hide()隐藏id="test"的元素;
$("p").hide() 隐藏所有<p>元素, $(".test").hide()隐藏所有class="test"元素
其中美元符号$定義jquery.
為了防止在完全加載文檔之前就運作jquery代碼,可以将jquery代碼放置在document ready函數中:
$(document).ready(function(){
....
});
jquery選擇器:
使用xpath來選擇給定屬性的元素:$("[href]") 選取所有帶有href屬性的元素,$("[href='x']")選取所有帶有href值等于"#"的元素,$("[href$='.jpg']")選取所有href值以'.jpg'結尾的元素;
css選擇器可以用以改變html元素的css屬性:
$("p").css("background-color","red)
如果網頁中含有多個頁面,希望共享js代碼便于dry或重構,可以吧jquery函數放到獨立的.js檔案中:
<script type="text/javascript" src="share.js"></script>
jquery使用$作為jquery的簡寫方式,為了避免和其他js庫沖突(prototype也是用$),可以使用noconflict方法來解決該問題. var jq = jquery.noconflict();
當遵循如下原則時,代碼更便于維護:
1.把所有jquery代碼放置于事件處理函數中
2.把所有事件處理函數放置于文檔就緒事件處理器中
3.把jquery代碼放置于單獨的js檔案中
4.如果存在名稱沖突,則重命名jquery庫
hide和show隐藏和顯示節點
toggle切換hide和show,顯示被隐藏的元素,并隐藏已顯示的元素;
fadein用于淡入已隐藏的元素
fadeout用于淡出可見元素
fadetoggle和toggle類似
fadeto方法允許漸變為給定的不透明度
slidedown和slideup用于向下和向上滑動元素
slidetoggle類似
animate方法用于建立自定義動畫
stop用于停止動畫或效果
以上大部分方法都可以帶一個callback函數,該函數将在目前動畫100%完成之後執行;
可以用連結(chaining)技術,允許我們在相同的元素上運作多條jquery命名,一條接着另一條,如果要連結一個動作,隻需要簡單地把該動作追加到之前的動作上.
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)