JQuery語法

• jQuery 語法是通過選取 HTML 元素，並對選取的元素執行某些操作

• 基礎語法： $(selector).action()

  • 美元符號定義 jQuery
  • 選擇符（selector）”查詢”和”查詢” HTML 元素

  • jQuery 的 action() 執行對元素的操作

    - $(this).hide() - 隱藏當前元素 
    - $("p.test").hide() - 隱藏所有 class="test" 的 <p> 元素
    

JQuery選擇器

• jQuery 選擇器允許您對 HTML 元素組或單個元素進行操作。
• jQuery 選擇器基於元素的 id、類、型別、屬性、屬性值等”查詢”（或選擇）HTML 元素。 它基於已經存在的 CSS 選擇器，除此之外，它還有一些自定義的選擇器。

• Query 中所有選擇器都以美元符號開頭：$()。

• 元素選擇器

  • jQuery 元素選擇器基於元素名選取元素。
    
    • $(“p”)
• #id 選擇器
  
  • jQuery #id 選擇器通過 HTML 元素的 id 屬性選取指定的元素。
• .class 選擇器
  
  • jQuery 類選擇器可以通過指定的 class 查詢元素。
• $(“*”)
  
  • 選取所有元素
• $(this)
  
  • 選取當前 HTML 元素
• $(“p.intro”)
  
  • 選取 class 為 intro 的 <p> 元素
• $(“p:first”)
  
  • 選取第一個<p> 元素
• $(“ul li:first”)
  
  • 選取第一個 <ul>
    元素的第一個 <li> 元素
• $(“ul li:first-child”)
  
  • 選取每個<ul>元素的第一個<li>元素
• $(“[href]”)
  
  • 選取帶有 href 屬性的元素
• $(“a[target=’_blank’]”)
  
  • 選取所有 target 屬性值等於 “_blank” 的 <a>元素
  • 選取所有 target 屬性值不等於 “_blank” 的 <a> 元素
• $(“:button”)
  - 選取所有 type=”button” 的<input> 元素 和 <button>元素
• $(“tr:even”)
  
  • 選取偶數位置的 <tr>
    元素
• $(“tr:odd”)
  
  • 選取奇數位置的 <tr>元素

JQuery事件

• jQuery 是為事件處理特別設計的。
• 頁面對不同訪問者的響應叫做事件。
• 事件處理程式指的是當 HTML 中發生某些事件時所呼叫的方法。
• $(document).ready() 方法
  
  • 允許我們在文件完全載入完後執行函式

• 滑鼠事件

  • click() 方法是當按鈕點選事件被觸發時會呼叫一個函式

    $("p").click(function(){
      $(this).hide();
    }); 
    

• dblclick() 方法當雙擊元素時觸發 事件，或規定當發生 dblclick 事件時執行的函式

  $("p").dblclick(function(){
    $(this).hide();
  });
  

• mouseenter() 當滑鼠指標穿過元素時觸發

      $("#p1").mouseenter(function(){
          alert('您的滑鼠移到了 id="p1" 的元素上!');
      });
  

• mouseleave() 當滑鼠指標離開元素時，會發生 mouseleave 事件。

      $("#p1").mouseleave(function(){
          alert("再見，您的滑鼠離開了該段落。");
      });
  

• mousedown()當滑鼠指標移動到元素上方，並按下滑鼠按鍵時，會發生 mousedown 事件。

      $("#p1").mouseup(function(){
          alert("滑鼠在段落上鬆開。");
      });
  

• hover()方法用於模擬游標懸停事件。

  • 當滑鼠移動到元素上時，會觸發指定的第一個函式(mouseenter);

  • 當滑鼠移出這個元素時，會觸發指定的第二個函式(mouseleave)。

    $("#p1").hover(
        function(){
            alert("你進入了 p1!");
        },
        function(){
            alert("拜拜! 現在你離開了 p1!");
        }
    );
    

• focus()
• 當元素獲得焦點時，發生 focus 事件。

• 當通過滑鼠點選選中元素或通過 tab 鍵定位到元素時，該元素就會獲得焦點。focus() 方法觸發 focus 事件。

      $("input").focus(function(){
            $(this).css("background-color","#cccccc");
      });
  

• blur() 當元素失去焦點時，發生 blur 事件。

JQuery效果

隱藏與顯示：

• 隱藏和顯示 HTML 元素：

      $("#hide").click(function(){
        $("p").hide();
      });
  
      $("#show").click(function(){
        $("p").show();
      });
  

• 語法：

  • $(selector).hide(speed,callback);

  • $(selector).show(speed,callback);

    • 可選的 speed 引數規定隱藏/顯示的速度，可以取以下值：”slow”、”fast” 或毫秒。

    • 可選的 callback 引數是隱藏或顯示完成後所執行的函式名稱。

      $("button").click(function(){
        $("p").hide(1000);
      });
      

• toggle() 方法來切換 hide() 和 show() 方法。
• 語法：
  
  • $(selector).toggle(speed,callback);
  • 說明：就是顯示和隱藏兩種功能進行切換

淡入淡出：

• fadeIn() 用於淡入已隱藏的元素。

• 語法：

  • $(selector).fadeIn(speed,callback);

    • 可選的 speed 引數規定效果的時長。它可以取以下值：”slow”、”fast” 或毫秒。.

    • 可選的 callback 引數是 fading 完成後所執行的函式名稱。

      $("button").click(function(){
        $("#div1").fadeIn();//直接顯示
        $("#div2").fadeIn("slow");//直接顯示
        $("#div3").fadeIn(3000);//3s後顯示
      });
      

• fadeOut() 方法用於淡出可見元素。
• 語法：
  
  • $(selector).fadeOut(speed,callback); //引數和列子同淡入
• fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。
  
  • 如果元素已淡出，則 fadeToggle() 會向元素新增淡入效果。
  • 如果元素已淡入，則 fadeToggle() 會向元素新增淡出效果。
• 語法：
  
  • $(selector).fadeToggle(speed,callback);//就是兩種狀態相互切換舉例和引數解釋同淡入、、、這裡不做解釋
• fadeTo() 方法允許漸變為給定的不透明度（值介於 0 與 1 之間）。

• 語法：

  • $(selector).fadeTo(speed,opacity,callback);

    • 必需的 speed 引數規定效果的時長。它可以取以下值：”slow”、”fast” 或毫秒。
    • fadeTo() 方法中必需的 opacity 引數將淡入淡出效果設定為給定的不透明度（值介於 0 與 1 之間）。

    • 可選的 callback 引數是該函式完成後所執行的函式名稱。

      $("button").click(function(){
        $("#div1").fadeTo("slow",0.15);
        $("#div2").fadeTo("slow",0.4);
        $("#div3").fadeTo("slow",0.7);
      });//就是把顏色變淡
      

滑動

• slideDown() 方法用於向下滑動元素。

• 語法：

  • $(selector).slideDown(speed,callback);

    • 可選的 speed 引數規定效果的時長。它可以取以下值：”slow”、”fast” 或毫秒。

    • 可選的 callback 引數是滑動完成後所執行的函式名稱。

      $("#flip").click(function(){
        $("#panel").slideDown();
      });
      

• slideUp() 方法用於向上滑動元素。
• 語法：
  
  • $(selector).slideUp(speed,callback);//引數和舉例參照向下滑動例項
• slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進行切換。
  
  • 如果元素向下滑動，則 slideToggle() 可向上滑動它們。
  • 如果元素向上滑動，則 slideToggle() 可向下滑動它們。
• 語法：
  
  • $(selector).slideToggle(speed,callback);//向上、向下滑動進行切換

動畫：

• animate() 方法用於建立自定義動畫。

• 語法：

  • $(selector).animate({params},speed,callback);

    • 必需的 params 引數定義形成動畫的 CSS 屬性。
    • 可選的 speed 引數規定效果的時長。它可以取以下值：”slow”、”fast” 或毫秒。

    • 可選的 callback 引數是動畫完成後所執行的函式名稱。

       $("button").click(function(){
            $("div").animate({left:'250px'});
      });
      

• animate() - 操作多個屬性

      可以用 animate() 方法來操作所有 CSS 屬性嗎？
  
  是的，幾乎可以！不過，需要記住一件重要的事情：當使用 animate() 時，必須使用 Camel 標記法書寫所有的屬性名，比如，必須使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。  
  $("button").click(function(){
        $("div").animate({
          left:'250px',
          opacity:'0.5',
          height:'150px',
          width:'150px'
        });
      });
  

• animate() - 使用相對值也可以定義相對值（該值相對於元素的當前值）。需要在值的前面加上 += 或 -=：

      $("button").click(function(){
        $("div").animate({
          left:'250px',
          height:'+=150px',//點選效果會一致增加
          width:'+=150px'
        });
      });
  

• animate() - 使用預定義的值
  
  • 您甚至可以把屬性的動畫值設定為 “show”、”hide” 或 “toggle”：
    $("button").click(function(){
$("div").animate({
height:'toggle'
});});

• animate() - 使用佇列功能

  • Query 提供針對動畫的佇列功能。這意味著如果您在彼此之後編寫多個 animate() 呼叫，jQuery 會建立包含這些方法呼叫的”內部”佇列。然後逐一執行這些 animate 呼叫。

    $("button").click(function(){
      var div=$("div");
      div.animate({height:'300px',opacity:'0.4'},"slow");
      div.animate({width:'300px',opacity:'0.8'},"slow");
      div.animate({height:'100px',opacity:'0.4'},"slow");
      div.animate({width:'100px',opacity:'0.8'},"slow");
    });
    

停止動畫：

• stop() 方法用於停止動畫或效果，在它們完成之前。
• stop() 方法適用於所有 jQuery 效果函式，包括滑動、淡入淡出和自定義動畫。
• 語法：；
  
  • $(selector).stop(stopAll,goToEnd);
  • 可選的 stopAll 引數規定是否應該清除動畫佇列。預設是 false，即僅停止活動的動畫，允許任何排入佇列的動畫向後執行。
  • 可選的 goToEnd 引數規定是否立即完成當前動畫。預設是 false。

Callback方法：

• Callback 函式在當前動畫 100% 完成之後執行。

  • 許多 jQuery 函式涉及動畫。這些函式也許會將 speed 或 duration 作為可選引數。
  • 例子：$(“p”).hide(“slow”)

  • speed 或 duration 引數可以設定許多不同的值，比如 “slow”, “fast”, “normal” 或毫秒。

        $("button").click(function(){
          $("p").hide("slow",function(){
            alert("段落現在被隱藏了");
          });
        });
    

鏈（Chaining）：

• 通過 jQuery，可以把動作/方法連結在一起。
• Chaining 允許我們在一條語句中執行多個 jQuery 方法（在相同的元素上）。
• 語法：
  
  • $(“#p1”).css(“color”,”red”).slideUp(2000).slideDown(2000);//顏色先變紅、再向上滑動、最後向下滑動

JQuery HTTML

獲取內容和屬性：

• DOM = Document Object Model（文件物件模型）
• text() - 設定或返回所選元素的文字內容
• html() - 設定或返回所選元素的內容（包括 HTML 標記）

• val() - 設定或返回表單欄位的值

  $("#btn1").click(function(){
      alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
   alert("HTML: " + $("#test").html());
  });
  $("#btn1").click(function(){
    alert("值為: " + $("#test").val());
  });
  

• attr() 方法用於獲取屬性值。

   $("button").click(function(){
    alert($("#runoob").attr("href"));
  });
  

設定內容和屬性：

• text()、html() 以及 val() 的回撥函式

• 回撥函式有兩個引數：被選元素列表中當前元素的下標，以及原始（舊的）值。然後以函式新值返回您希望使用的字串。

  $("#btn1").click(function(){
      $("#test1").text(function(i,origText){
          return "舊文字: " + origText + " 新文字: Hello world! (index: " + i + ")"; 
      });
  });
  

• attr() 方法也用於設定/改變屬性值。

  $("button").click(function(){
      $("#runoob").attr({
          "href" : "http://www.runoob.com/jquery",
          "title" : "jQuery 教程"
      });
  });
  

• attr() 的回撥函式

  • 方法 attr()，也提供回撥函式。回撥函式有兩個引數：被選元素列表中當前元素的下標，以及原始（舊的）值。然後以函式新值返回您希望使用的字串。

    $("button").click(function(){
      $("#runoob").attr("href", function(i,origValue){
        return origValue + "/jquery"; 
      });
    });
    

新增元素：

• append() - 在被選元素的結尾插入內容
• prepend() - 在被選元素的開頭插入內容
• after() - 在被選元素之後插入內容

• before() - 在被選元素之前插入內容

  • ppend() 和 prepend() 方法能夠通過引數接收無限數量的新元素。可以通過 jQuery 來生成文字/HTML（就像上面的例子那樣），或者通過 JavaScript 程式碼和 DOM 元素。

    function appendText()
    {
        var txt1="<p>文字。</p>";// 使用 HTML 標籤建立文字
        var txt2=$("<p></p>").text("文字。");  // 使用 jQuery 建立文字
        var txt3=document.createElement("p");
        txt3.innerHTML="文字。"; // 使用 DOM 建立文字 text with DOM
        $("body").append(txt1,txt2,txt3); // 追加新元素
    }
    

刪除元素：

• remove() - 刪除被選元素（及其子元素）
• empty() - 從被選元素中刪除子元素

• remove() 方法也可接受一個引數，允許您對被刪元素進行過濾。該引數可以是任何 jQuery 選擇器的語法。下面的例子刪除 class=”italic” 的所有 <p> 元素：

  $("p").remove(".italic");
  $("#div1").empty();
  

獲取並設定CSS類：

• addClass() - 向被選元素新增一個或多個類
• removeClass() - 從被選元素刪除一個或多個類
• toggleClass() - 對被選元素進行新增/刪除類的切換操作

• css() - 設定或返回樣式屬性

  $("button").click(function(){
    $("h1,h2,p").addClass("blue");
    $("div").addClass("important");
  });
  

CSS()方法：

• css() 方法設定或返回被選元素的一個或多個樣式屬性。
• 如需返回指定的 CSS 屬性的值，請使用如下語法：
  
  • css(“propertyname”);//獲取其值
• 如需設定指定的 CSS 屬性，請使用如下語法：
  
  • css(“propertyname”,”value”);//設定值
• 如需設定多個 CSS 屬性，請使用如下語法：
  
  • css({“propertyname”:”value”,”propertyname”:”value”,…});

尺寸：

• width() 方法設定或返回元素的寬度（不包括內邊距、邊框或外邊距）。
• height() 方法設定或返回元素的高度（不包括內邊距、邊框或外邊距）。
• innerWidth() 方法返回元素的寬度（包括內邊距）。
• innerHeight() 方法返回元素的高度（包括內邊距）。
• outerWidth() 方法返回元素的寬度（包括內邊距和邊框）。
• outerHeight() 方法返回元素的高度（包括內邊距和邊框）。
  

JQuery遍歷

• 下圖展示了一個家族樹。通過 jQuery 遍歷，您能夠從被選（當前的）元素開始，輕鬆地在家族樹中向上移動（祖先），向下移動（子孫），水平移動（同胞）。這種移動被稱為對 DOM 進行遍歷。
  
• <div> 元素是 <ul>的父元素，同時是其中所有內容的祖先。
• <ul> 元素是 <li> 元素的父元素，同時是 <div> 的子元素
• 左邊的<li>元素是<span> 的父元素，<ul>的子元素，同時是 <div> 的後代。
• <span>元素是<li> 的子元素，同時是 <ul>和 <div> 的後代。
• 兩個<li>元素是同胞（擁有相同的父元素）。
• 右邊的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同時是 <div>的後代。
• <b> 元素是右邊的 <li>的子元素，同時是<ul> 和 <div> 的後代。

祖先：（向上遍歷 DOM 樹 ）

• parent() 方法返回被選元素的直接父元素。

  $(document).ready(function(){
    $("span").parent();
  }); 
  

• parents() 方法返回被選元素的所有祖先元素，它一路向上直到文件的根元素 (<html>)。

  $(document).ready(function(){
    $("span").parents("ul");
  });//所有 `<span> `元素的所有祖先，並且它是` <ul> `元素
  

• parentsUntil() 方法返回介於兩個給定元素之間的所有祖先元素。

  $(document).ready(function(){
    $("span").parentsUntil("div");
  });//返回介於 `<span> `與 `<div> `元素之間的所有祖先元素
  

後代：（向下遍歷 DOM 樹）

• children() 方法返回被選元素的所有直接子元素。

  • 該方法只會向下一級對 DOM 樹進行遍歷。

    $(document).ready(function(){
      $("div").children("p.1");
    }); //返回類名為 "1" 的所有 <p> 元素，並且它們是 <div> 的直接子元素
    

• find() 方法返回被選元素的後代元素，一路向下直到最後一個後代。

  $(document).ready(function(){
    $("div").find("span");
  });//返回屬於 <div> 後代的所有 <span> 元素;如果是星號就表示所有子元素
  

同胞(siblings):

• siblings() 方法返回被選元素的所有同胞元素

  $(document).ready(function(){
    $("h2").siblings();
  });//返回 <h2> 的所有同胞元素
  

• next() 方法返回被選元素的下一個同胞元素。
• nextAll() 方法返回被選元素的所有跟隨的同胞元素。

• nextUntil() 方法返回介於兩個給定引數之間的所有跟隨的同胞元素。

  $(document).ready(function(){
    $("h2").nextUntil("h6");
  });//返回介於 <h2> 與 <h6> 元素之間的所有同胞元素
  

• prev(), prevAll() 以及 prevUntil() 方法的工作方式與上面的方法類似，只不過方向相反而已：它們返回的是前面的同胞元素（在 DOM 樹中沿著同胞元素向後遍歷，而不是向前）。

過濾：

• first() 方法返回被選元素的首個元素。

  $(document).ready(function(){
    $("div p").first();
  });//選取首個 <div> 元素內部的第一個 <p> 元素
  

• last() 方法返回被選元素的最後一個元素

• eq() 方法返回被選元素中帶有指定索引號的元素。

  • 索引號從 0 開始，因此首個元素的索引號是 0 而不是 1。

    $(document).ready(function(){
      $("p").eq(1);
    });//選取第二個 <p> 元素（索引號 1）
    

• filter() 方法允許您規定一個標準。不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回

  $(document).ready(function(){
    $("p").filter(".url");
  });//返回帶有類名 "url" 的所有 <p> 元素
  

• not() 方法返回不匹配標準的所有元素。
  
  • 提示：not() 方法與 filter() 相反。

AJAX

• AJAX = 非同步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
• load() 方法從伺服器載入資料，並把返回的資料放入被選元素中
• 語法：
  
  • $(selector).load(URL,data,callback);
    
    • 必需的 URL 引數規定您希望載入的 URL。
  • 可選的 data 引數規定與請求一同傳送的查詢字串鍵/值對集合。
  • 可選的 callback 引數是 load() 方法完成後所執行的函式名稱。

• 可選的 callback 引數規定當 load() 方法完成後所要允許的回撥函式。回撥函式可以設定不同的引數：

  • responseTxt - 包含呼叫成功時的結果內容
  • statusTXT - 包含呼叫的狀態

  • xhr - 包含 XMLHttpRequest 物件

    $("button").click(function(){					 $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
       if(statusTxt=="success")
      alert("外部內容載入成功!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
      });
    });
    

• get() 和 post() 方法用於通過 HTTP GET 或 POST 請求從伺服器請求資料
• $.get() 方法通過 HTTP GET 請求從伺服器上請求資料。
• 語法：
  
  • $.get(URL,callback);
    
    • 必需的 URL 引數規定您希望請求的 URL。
    • 可選的 callback 引數是請求成功後所執行的函式名。
• $.post() 方法通過 HTTP POST 請求從伺服器上請求資料。

• 語法：

  • $.post(URL,data,callback);

    • 必需的 URL 引數規定您希望請求的 URL。
    • 可選的 data 引數規定連同請求傳送的資料。

    • 可選的 callback 引數是請求成功後所執行的函式名。

      $("button").click(function(){
      $.post("/try/ajax/demo_test_post.php",
      {
          name:"菜鳥教程",
          url:"http://www.runoob.com"
      },
          function(data,status){
          alert("資料: \n" + data + "\n狀態: " + status);
          });
      });
      

JQuery其他

• noConflict() 方法會釋放會 $ 識別符號的控制，這樣其他指令碼就可以使用它了。
  意義：

  1.其他一些 JavaScript 框架包括：MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。
  2.其中某些框架也使用 $ 符號作為簡寫（就像 jQuery），如果您在用的兩種不同的框架正在使用相同的簡寫符號，有可能導致指令碼停止執行。
  $.noConflict();
  jQuery(document).ready(function(){
    jQuery("button").click(function(){
      jQuery("p").text("jQuery 仍然在工作!");
    });
  });//當然，您仍然可以通過全名替代簡寫的方式來使用 jQuery
  

• 您也可以建立自己的簡寫。noConflict() 可返回對 jQuery 的引用，您可以把它存入變數，以供稍後使用。請看這個例子：

  var jq = $.noConflict();
  jq(document).ready(function(){
    jq("button").click(function(){
      jq("p").text("jQuery 仍然在工作!");
    });
  });
  

• 如果你的 jQuery 程式碼塊使用$寫，並且您不願意改變這個快捷方式，那麼您可以把 $ 符號作為變數傳遞給 ready 方法。這樣就可以在函式內使用$號了 - 而在函式外，依舊不得不使用 “jQuery”：

  $.noConflict();
  jQuery(document).ready(function($){
    $("button").click(function(){
      $("p").text("jQuery 仍然在工作!");
    });
  });