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及其樣式即可以了
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章