jQuery——基礎篇(1)

(1)、Ajax常用架構 Ext,DWR, prototype, jQuery
 Ext 架構庫能夠做出很絢麗的頁面，但是這個庫本身很大(500k) 不适合于大型網站，适合于公司内部網站 
(2)、jQuery 操作DOM 和傳統js操作DOM對比
 js腳本
  var external_links = document.getElementById('external_links');
 var links = external_links.getElementsByTagName('a');
 for (var i=0;i < links.length;i++) {
     var link = links.item(i);
     link.onclick = function() {
         return confirm('You are going to visit: ' + this.href);
     };
 }
 
 jQuery腳本
 $('#external_links a').click(function() {
     return confirm('You are going to visit: ' + this.href);
 });(3)、 $() 函數的四種用法  (1)、$() 函數傳回一個含有所有與 CSS 選擇器比對的元素的 jQuery 對象。jQuery 對象 類似于數組，但是它附帶有大量特殊的 jQuery 函數。
 比方說，您可以通過調用 click 函數把 click 處理函數指定給 jQuery 對象中的所有元素。
 (2)、還可以向 $() 函數傳遞一個元素或者一個元素數組，該函數将把這些元素封裝在一個 jQuery 對象中。比方說 window 對象。
 $(window).load(function() {
     // alert();
 });
 (3)、有的時候，您希望首先完成圖檔加載，但是在大多數情況下，您隻需加載超文本标志語言（Hypertext Markup Language，HTML）就可以了。通過在文檔中建立特殊的 ready 事件，
 $(document).ready(function() {
     // do this stuff when the HTML is all ready
 });
 
 (4)、使用字元串來建立元素。結果會産生一個包含該元素的 jQuery 對象
 $('<p></p>')  //等價$('p')
     .html('Hey World!')
     .css('background', 'yellow')
     .appendTo("body"); 在前一個例子中您可能已經注意到，jQuery 中的另一個功能強大的特性就是方法連結（method chaining）。每次對 jQuery 對象調用方法時，方法都會傳回相同的 jQuery 對象。
 這意味着如果您需要對 jQuery 對象調用多個方法，那麼您不必重新鍵入選擇器就可以實作這一目的：
 $('#message').css('background', 'yellow').html('Hello!').show();
 
(4)、jQuery 選擇器
 jQuery提供兩種方式來選擇html的elements，第一種是用CSS和Xpath選擇器聯合起來形成一個字元串來傳送到jQuery的構造器（如：$("div > ul a")）；
 第二種是用jQuery對象的幾個methods(方法)。這兩種方式還可以聯合起來混合使用。
 $(document).ready(function() {
  $("#orderedlist > li").addClass("blue");
 });這樣，所有orderedlist中的li都附加了樣式"blue"。
 精确簡單的選擇對象
 $('#element');// 相當于document.getElementById("element") 
 $('.element');//Class
 $('p');//html标簽
 $("form > input");//子對象
 $("div,span,p.myClass");//同時選擇多種對象
 $("tr:odd").css("background-color", "#bbbbff");//表格的隔行背景
 $(":input");//表單對象
 $("input[name='newsletter']");//特定的表單對象 find each 使用
  find() 讓你在已經選擇的element中作條件查找,是以 $("#orderedlist).find("li") 就像 $("#orderedlist li")一樣。each()方法疊代了所有的li，并可以在此基礎上作更多的處理。
  $(document).ready(function() {
  $("#orderedlist").find("li").each(function(i) {
   $(this).html( $(this).html() + " BAM! " + i );
  });
 }); //選擇了所有的"form"元素，并在其中的第一個上call了一個reset()。
 $(document).ready(function() {
  $("#reset").click(function() {
   $("form")[0].reset();
  });
 }); //文檔中所有的form元素，并對它們都執行了一次reset()。
 $(document).ready(function() {
  // use this to reset several forms at once
  $("#reset").click(function() {
   $("form").each(function() {
    this.reset();
   });
  });
 });(5)、jQuery 簡化Ajax 調用 $.ajax() 函數。您可以指定 xml、script、html 或者 json，jQuery 将自動為回調函數準備合适的結果，這樣您便可以立即使用該結果。
  還可以指定 beforeSend、error、success 或者 complete 回調函數，向使用者提供更多有關 Ajax 體驗的回報。
 eg:
 $.ajax({
   url: 'aServlet.do?method=save&name='+$("#name"),
   type: 'GET',
   dataType: 'xml',
   timeout: 1000,
   error: function(){
       alert('Error loading XML document');
   },
   success: function(xml){
       // do something with xml
   }
 }); success: function(xml){
     $(xml).find('item').each(function(){
         var item_text = $(this).text();
 
         $('<li></li>')
             .html(item_text)
             .appendTo('ol');
     });
 }
 當 success 回調函數傳回 XML 文檔後，您可以使用 jQuery 檢索這個 XML 文檔，其方式與檢索 HTML 文檔是一樣的