jquery總結（待更新）

首先要添加jquery庫

<script type="text/javascript" src="jquery.js"></script>

---

選擇器：

基本：

$("\*"): 全部元素
$("#lastname"): id="lastname" 的元素
$(".intro"): 全部 class="intro" 的元素
$("p"): 全部<p>元素
$(".intro.demo"): 全部 class="intro"且 class="demo" 的元素
$("th,td,.intro"): 全部帶有匹配選擇的元素

層級：

$("parent > child"): 這個子元素組合器(E > F)和(E F)都做爲後代組合，可是他們有所不一樣，更具體的是(E > F)它只會選擇第一級的後代。
$("ancestor descendant"): 即(E F)一個元素的後代多是該元素的一個孩子，孫子，曾孫等。
$( "prev + next" ): 用於篩選緊跟在 "prev" 後面的元素的選擇器。其中重要的一點既要考慮下一個相鄰兄弟選擇器（ prev + next ）和通常兄弟選擇器（prev ~ siblings ）所選擇到的元素，必須在同一個父元素下。
$( "prev ~ siblings" ): 一個選擇器來過濾第一選擇器之後的兄弟元素,跟隨其的全部同級元素。

基本篩選：

$("p:first"): 第一個 <p> 元素
$("p:last"): 最後一個 <p> 元素
$("tr:even"): 全部偶數

元素
$("tr:odd"): 請輸入代碼)全部奇數 元素
$("ul li:eq(3)"): 列表中的第四個元素（index 從 0 開始）
$("ul li:gt(3)"): 列出index大於3的元素
$("ul li:lt(3)"): 列出index 小於 3 的元素
$("input:not(:empty)"): 全部不爲空的 input 元素
$(":header"): 全部標題元素 <h1> - <h6>
$(":animated"): 全部動畫元素

內容篩選：

$(":contains('W3School')"): 包含指定字符串的全部元素
$(":empty")無子（元素）: 節點的全部元素
$(":has(selector)"): 若是表達式 $('div:has(p)') 匹配一個 <div>，那麼應有一個<p>存在於 <div>後代元素中的任何地方，不是直接的子元素也能夠。

可見性篩選：

$("p:hidden"): 全部隱藏的<p>元素
$("table:visible"): 全部可見的表格

屬性選擇器：

$("[href]"): 全部帶有 href 屬性的元素
$("[href='#']"): 全部 href 屬性的值等於 "#" 的元素
$("[href!='#']"): 全部 href 屬性的值不等於 "#" 的元素
$("[href$='.jpg']"): 全部 href 屬性的值包含以 ".jpg" 結尾的元素
$("input[name~='man']"): 查找全部屬性中含有 'man' 這個單詞的文本框，而且修改其文本值
$("input[name$='letter']"): 查找全部的屬性名稱以「letter」的結束，並把他們的文字輸入
$("input[name^='letter']"): 選擇指定屬性是以給定字符串（letter）開始的元素
$("input[id][name$='man']"): 查找那些有 id 屬性，而且 name 屬性以 man 結尾的輸入框

表單：

$(":input"): 全部 <input> 元素
$(":text"): 全部 type="text" 的 <input> 元素
$(":password"): 全部 type="password" 的 <input> 元素
$(":radio"): 全部 type="radio" 的 <input> 元素
$(":checkbox"): 全部 type="checkbox" 的 <input> 元素
$(":submit"): 全部 type="submit" 的 <input> 元素
$(":reset"): 全部 type="reset" 的 <input> 元素
$(":button"): 選擇全部按鈕元素和 type="button" 的 <input> 元素
$(":image"): 全部 type="image" 的 <input> 元素
$(":file"): 全部 type="file" 的 <input> 元素
$(":enabled"): 全部可用的 <input>元素（未被禁用的元素）
$(":disabled"): 全部禁用的 <input>元素
$(":selected"): 全部被選取的 <input>元素
$(":checked"): 全部被選中的 <input>元素（被勾選的元素）
$(":focus"): 選擇當前獲取焦點的元素

---

事件：

瀏覽器事件

• .resize()
  當瀏覽器window的尺寸改變時，window元素上綁定的resize事件將被觸發
  當窗口大小改變時（或改變後），查看窗口的寬度：

  $(window).resize(function() {
      $('body').prepend('<div>' + $(window).width() + '</div>');
  });

• scroll()

  當用戶在元素內執行了滾動操做，就會在這個元素上觸發scroll事件。

  $(window).scroll(function () {
      $("span").css("display", "inline").fadeOut("slow");
  });

事件綁定

• .on()
  方法是將事件處理程序綁定到文檔（document）的首選方法. .on()方法事件處理程序到當前選定的jQuery
  對象中的元素。
  在jQuery1.7中，.on()方法 提供綁定事件處理的全部功能。爲了幫助從舊的jQuery事件方法轉換過來，查
  看.bind(), .delegate(), 和 .live().要刪除的.on()綁定的事件，請參閱.off()。要綁定一個事件，並
  且只運行一次，而後刪除本身， 請參閱.one(). (on()取代bind()和delegate())

  Example: 經過使用 .stopPropagation()，防止提交事件的冒泡行爲，可是並不由止提交行爲。

  $("form").on("submit", function(event) {
    event.stopPropagation();
  });

• .off() off()方法移除用.on()綁定的事件處理程序。

• .bind() 向匹配元素附加一個或更多事件處理器

  $('#foo').bind('click', function() { alert('User clicked on "foo."');});

• .trigger()
  trigger()函數用於**在每一個匹配元素上觸發指定類型的事件。
  此外，你還能夠在觸發事件時爲事件處理函數傳入額外的參數。
  使用該函數能夠手動觸發執行元素上綁定的事件處理函數，也會觸發執行該元素的默認行爲。
  以表單元素<form>爲例，使用trigger("submit")能夠觸發該表單綁定的submit事件，也會執行表單
  submit事件的默認行爲——表單提交操做。

表單事件

• .blur() 一個元素失去焦點將觸發blur事件。
  起初，這個事件僅適用於表單元素，如元素<input>。在最新的瀏覽器中，這個事件適用範圍已經擴大到
  包括全部元素類型。一個元素能夠經過鍵盤命令失去焦點，好比tab鍵，或用鼠標點擊網頁上的其餘地方。

  $('#target').blur(function() { alert('Handler for .blur() called.');});

• .change()觸發、或將函數綁定到指定元素的 change事件
  一個元素的值改變的時候將觸發change事件。此事件僅限用於<input>元素，<textarea>和<select>
  元素。對於下拉選擇框，複選框和單選按鈕，當用戶用鼠標做出選擇，該事件當即觸發，但對於其餘類型
  的input元素，該事件觸發將推遲，直到元素失去焦點纔會觸點。

  $('.target').change(function() {
      alert('Handler for .change() called.');
  });

• .click()觸發、或將函數綁定到指定元素的 click 事件

• .dblclick()觸發、或將函數綁定到指定元素的 double click 事件一個元素被雙擊時將觸發 dblclick事件。任何HTML元素均可以收到此事件。

  $('#target').dblclick(function() {
      alert('Handler for .dblclick() called.');
  });