jquery總結

jQuery是繼prototype之後又一個優秀的Javascrīpt框架


prototype就像Java，而jquery就像ruby


其宗旨是——WRITE LESS,DO MORE,寫更少的代碼,做更多的事情


jQuery是一個快速的，簡潔的javaScript庫


使用戶能更方便地處理HTML documents、events、實現動畫效果，並且方便地爲網站提供AJAX交互


jQuery的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇


jQuery能夠使用戶的html頁保持代碼和html內容分離


輕量級的js庫(壓縮後只有21k) ，這是其它的js庫所不及的，它兼容CSS3，還兼容各種瀏覽器 


1.$()


$("div p"); // (1) 得到所有標籤下的P元素


$("div.container"); // (2) 得到class 爲container的元素


　　 $("div#msg"); // (3) 得到標籤下面id爲msg的元素


$("table a",context); // (4) 得到context爲上下文的table裏面所有的連接元素


2.創建Jquery對象


var a = $("#cid"); 


var b = $("hello");


var c = document.createElement("table"); 


var tb = $(c); 


3.表現和邏輯分離


$(document).ready(function(){ 


　　alert("hello"); 


});


4.事件


　　$(document).ready(function(){ 


　　
$("#clear").click(


　　 function(){ 


　　 alert("i am about to clear the table"); 


　　 }


　　 ); 




　　 $("form[0]").submit(validate); 


　　}); 




　　function validate(){ 


　　//do some form validation 


　　}


5.函數重載


    $("#msg").html(); 返回指定元素的HTML值


　　$("#msg").html("hello"); 將hello這串字符設置到指定元素中


6.ajax


    $.get("search.do",{id:1},rend); 


　　function rend(xml){ 


　　alert(xml); 


　　} (1) 


　　$.post("search.do",{id:1},rend); 


　　function rend(xml){ 


　　alert(xml); 


　　} (2) 


　　$("#msg").ajaxStart(function(){ 


　　this.html("正在加載。。。。"); 


　　});(3) 


　　$("#msg").ajaxSuccess(function(){ 


　　this.html("加載完成！"); 


　　});(4) 


　　第一個參數是異步請求的url，第二個爲參數，第三個回調方法


　　3，4的方法會在指定的Dom對象上綁定響應ajax執行的事件


    當然，jquery的AJAX相關的函數不僅是這些


7.漸入淡出


    $("#msg").show("fast"); 


　　$("#msg").hide("slow"); 


　　$("#msg").fadeIn();


　　$("#msg").fadeOut();


8.plugin


只需要在你的元素的class上加上Jtip,並引入jtip.js及其樣式即可以了