JQuery學習筆記

一. jQuery教程

1. jQuery簡介

jQuery是一個JavaScript函數庫。

宗旨：“寫的少，做的多”。

jQuery 的功能概括

1、html 的元素選取

2、html的元素操作

3、html dom遍歷和修改

4、js特效和動畫效果

5、css操作

6、html事件操作

7、ajax異步請求方式

8、Utilities

2. jQuery引用方式

1. 從 jquery.com 下載 jQuery 庫並安裝

Production version - 用於實際的網站中，已被精簡和壓縮。

Development version - 用於測試和開發（未壓縮，是可讀的代碼）

<head>
	<script src="jquery-1.10.2.min.js" type="text/javascript></script>
</head>
/* 在 HTML5 中，可以不必添加type="text/javascript。因爲JavaScript 是 HTML5 以及所有現代瀏覽器中的默認腳本語言！*/

2. 通過 CDN（內容分發網絡）引用

BootCDN、百度、又拍雲、新浪、谷歌和微軟的服務器都存有 jQuery

// 例如BootCDN
<head>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
</head>jQuery引用方式

3. jQuery語法

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

$: jQuery標識符

selector: 選擇符，查詢和查找HTML元素

action(): 執行對元素的操作

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

jQuery入口函數（文檔就緒事件）：

爲了防止文檔在完全加載（就緒）之前運行 jQuery 代碼，即在 DOM (所有HTML標籤）加載完成後纔可以對 DOM 進行操作。如果在文檔沒有完全加載之前就運行函數，操作可能失敗。

$(document).ready(function(){
    //  開始寫jQuery代碼...
})；

//   更簡潔的寫法
$(function(){
    // 寫代碼...
})

javaScript入口函數

JavaScript 的 window.onload 事件是等到所有內容，包括外部圖片之類的文件加載完後，纔會執行。

window.onload = function(){
    // 執行代碼
}

4. jQuery選擇器

基於已存在的css選擇器和一些自定義的選擇器

元素選擇器（標籤選擇器）

$(document).ready(function(){
  $("button").click(function(){       // 選中所有button標籤   點擊事件
    $("p").hide();                    // 選擇所有p標籤   隱藏方法
  });
});

#id 選擇器

$(document).ready(function(){
    $("button").click(function(){
        $("#test").hide();
    });
});

.class 選擇器

$(document),ready(function(){
    $("button").click(function(){
        $(".test").hide();
    });
});

等多實例：

$("*") 選取所有元素

$(this) 選取當前元素例如點擊事件爲一個按鈕，那麼當前元素就是該按鈕

$(“p.test”) 選取class=test的

標籤元素

$(“p:first”) 選取所有

標籤中的第一個

$(“ul li:first”) 選取第一個

元素

$(“ul li:first-child”) 選取每個

元素

$("[href]") 選取帶有href屬性的元素屬性選擇器，注意有中括號

$(“a[target=’_blank’]”) 選取所有target屬性值爲’_blank’的標籤元素

$(":button") 選取所有type="button"的元素和元素

$(“button”) 選取所有標籤元素

$(“tr:even”) 選取偶數位置的元素包含表頭

$(“tr:odd”) 選取奇數位置的元素不包含表頭

5. jQuery事件

事件就是頁面對不同訪問者的響應；

事件處理程序就是指當HTML中發生某些事件時所調用的方法；

常見DOM事件：

鼠標事件：

click：當單擊元素時，發生 click 事件。

$("p").click(function(){
    alert("段落被點擊了");
});
//  click()方法觸發click事件，function可選，規定點擊事件發生時運行的函數

dbclick：用法類似單擊，僅當雙擊時觸發。

mouseenter：當鼠標指針穿過（進入）被選元素時，會發生 mouseenter 事件。

mouseleave：當鼠標指針離開被選元素時，會發生 mouseleave 事件。

$(document).ready(function(){
  $("p").mouseenter(function(){
    $("p").css("background-color","yellow");
  });
  $("p").mouseleave(function(){
    $("p").css("background-color","lightgray");
  });
});
//  mouseenter事件一般與mouseleave事件一起使用

**注意：**mouseenter事件與 mouseover 事件不同，mouseenter 事件只有在鼠標指針進入被選元素時被觸發，mouseover 事件在鼠標指針進入任意子元素時也會被觸發。

mouseleave事件與 mouseout 事件不同，mouseleave 事件只有在鼠標指針離開被選元素時被觸發，mouseout 事件在鼠標指針離開任意子元素時也會被觸發。

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

mouseup：當在元素上鬆開鼠標按鈕時，會發生 mouseup 事件。

hover()方法用於模擬光標懸停事件，當鼠標移動到元素上時，會觸發指定的第一個函數(mouseenter);當鼠標移出這個元素時，會觸發指定的第二個函數(mouseleave)。

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

鍵盤事件：

keypress：鍵被按下（不會觸發所有的鍵，例如ALT、CTRL、SHIFT、ESC等）

$("input").keypress(function(){
    $("span").text(i+=1);
});

keydown：鍵按下的過程 (event.which屬性返回被按下鍵的鍵碼，若是keypress事件則拿到ASCII碼) 兼容性問題有時候是keyCode

$("input").keydown(function(event){
    $("div").html("key:" + event.which);
});

keyup：鍵被鬆開

$("input").keydown(function(){
    $("input").css("background-color","yellow");
  });
  $("input").keyup(function(){
    $("input").css("background-color","pink");
  });

三種鍵盤事件的區別：

1.keydown：在鍵盤上按下某鍵時發生,一直按着則會不斷觸發（opera瀏覽器除外）, 它返回的是鍵盤代碼;
2.keypress：在鍵盤上按下一個按鍵，併產生一個字符時發生, 返回ASCII碼。注意: shift、alt、ctrl等鍵按下並不會產生字符，所以監聽無效 ,換句話說, 只有按下能在屏幕上輸出字符的按鍵時keypress事件纔會觸發。若一直按着某按鍵則會不斷觸發。

3.keyup：用戶鬆開某一個按鍵時觸發, 與keydown相對, 返回鍵盤代碼.

傳遞數據給事件處理函數


var validKeys = { start: 65, end: 90  };
$("#keys").keydown( validKeys, function(event){
    var keys = event.data;  //拿到validKeys對象.
    return event.which >= keys.start && event.which <= keys.end;
} );

表單事件：

submit：提交表單時會觸發submit事件，該事件只適用於元素

$("form").submit(function(){
    alert("是否確認提交？");
});

阻止submit按鈕的默認行爲(使用event.preventDefault()方法阻止表單被提交)：

$("form").submit(function(event){
    event.preventDefault();
    alert("阻止表單提交");
  });

change: 當元素的值改變時觸發 change 事件（僅適用於表單字段）。

$("input").change(function(){
    alert("文本已被修改");
});
//  當input輸入框中輸入內容然後按下回車或者點擊輸入框外部時，change事件觸發

focus：當元素獲得焦點時（當通過鼠標點擊選中元素或通過 tab 鍵定位到元素時），發生 focus 事件。

$("input").focus(function(){
    $("span").css("display","inline").fadeOut(2000);
  });
//  輸入框獲得焦點時，<span>標籤元素的css樣式改爲行內塊元素，2秒內淡出

blur：當元素失去焦點時觸發blur事件。

$("input").blur(function(){
    alert("輸入框失去了焦點");
  });

文檔/窗口事件：

load：當指定的元素已加載時，觸發改事件；該事件適用於任何帶有 URL 的元素（比如圖像、腳本、框架、內聯框架）以及 window 對象。根據不同的瀏覽器（Firefox 和 IE），如果圖像已被緩存，則也許不會觸發 load 事件。

load()方法在jQuery1.8版本已廢棄！！！

$("img").load(function(){
    alert("圖片已載入");
  });

unload：當用戶離開頁面時，會發生 unload 事件。unload() 方法只應用於 window 對象。

當發生以下情況下，會觸發 unload 事件：

點擊某個離開頁面的鏈接

在地址欄中鍵入了新的 URL

使用前進或後退按鈕

關閉瀏覽器窗口

重新加載頁面

unload() 方法在 jQuery 版本 1.8 中被廢棄，在 3.0 版本被移除！！！！！！！！！

resize：當調整瀏覽器窗口大小時，發生 resize 事件。

$(window).resize(function(){
    $("span").text(x+=1);
  });
  // 統計窗口大小調整的次數（窗口大小變化過程中實時變化）

scroll：當用戶滾動指定的元素時，會發生 scroll 事件。scroll 事件適用於所有可滾動的元素和 window 對象（瀏覽器窗口）。

 $("div").scroll(function(){
    $("span").text(x+=1);
  });
// 滾動統計意義不大

二、jQuery效果

1. 隱藏/顯示

簡單的hide()方法：

$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
// 點擊當前元素即可隱藏

隱藏文本（不止在某一個標籤中）：

$(document).ready(function(){
  $(".ex .hide").click(function(){
    $(this).parents(".ex").hide("slow");
  });
});

隱藏與顯示：

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

帶參數的隱藏與顯示：

$(selector).hide(speed, callback); show也一樣

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

可選的 callback 參數說明：

1.$(selector)選中的元素的個數爲n個，則callback函數會執行n次；

2.callback函數名後加括號，會立刻執行函數體，而不是等到顯示/隱藏完成後才執行，只

會調用一次，如果不加括號，元素顯示或隱藏後調用函數，纔會調用多次；

3.callback既可以是函數名，也可以是匿名函數；

toggle()方法切換隱藏與顯示：

$(selector).toggle(speed, callback);

$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});

### 2. 淡入淡出

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

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

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

fadeOut(): 語法及參數相同，用法相同。

fadeToggle(): 切換淡入淡出，參數與用法相同。

fadeTo(): 漸變爲給定的不透明度（值介於 0 與 1 之間）

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

必需的 speed 參數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。

必需的 opacity 參數將淡入淡出效果設置爲給定的不透明度（值介於 0 與 1 之間）。

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

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.7);
  });
});
//  0爲完全透明，1爲不透明，保持原本顏色

3. 滑動(摺疊)

slideDown(): 向下滑動元素；下拉

$(selector).slideDown(speed, callback); 參數及用法相同

slideUp()：向上滑動元素；收起

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideUp("slow");
  });
});

slideToggle(): 切換上滑下滑狀態

4. 動畫

animate(): 創建自定義動畫；

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

必需的 params 參數定義形成動畫的 CSS 屬性。

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

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

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'250px'});
  });
});
//  實現div盒子右移的效果（單個屬性）
//  注意：默認情況下，所有的 HTML 元素有一個靜態的位置，且是不可移動的。 如果需要改變爲，我們需要將元素的 position 屬性設置爲 relative, fixed, 或 absolute!

animate(): 可以同時操作多個屬性

$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({
            left:'250px',
            opacity:0.5,
            height:'150px',
            width:'150px'
        },'slow');
    });
});
//  animate()方法幾乎可以操縱所有css屬性，不過，需要記住一件重要的事情：當使用 animate() 時，必須使用 Camel 駝峯 標記法書寫所有的屬性名，比如，必須使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。同時，色彩動畫並不包含在覈心 jQuery 庫中。

animate(): 使用相對值(該值相對於元素的當前值)

//  代碼類似，此處只寫有變化處
$("div").animate({
    left:'250px',
    height:'+=150px',
    width:'-=150px'
});
//  由於是相對於當前值的變化，所以多次運行時將會有持續變化的效果

animate(): 使用預定義的值，如’show’, ‘hide’, 'toggle’等

$("div").animate({
    height:'toggle'
});

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");
});
//  按順序執行一條後再執行下一條

5. 停止動畫

stop()方法：在動畫或效果完成之前停止，適用於所有 jQuery 效果函數，包括滑動、淡入淡出和自定義動畫等。

$(selector).stop(stopAll, goToEnd);

可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false，即僅停止活動的動畫，允許任何排入隊列的動畫向後執行。

可選的 goToEnd 參數規定是否立即完成當前動畫。默認是 false。

$("div").animate({left:'100px'},5000);
    $("div").animate({fontSize:'3em'},5000);
  });
  $("#stop").click(function(){
    $("div").stop();       //  停止當前激活動畫，後續可在此激活
  });
  $("#stop2").click(function(){
    $("div").stop(true);   //  停止所有動畫
  });
  $("#stop3").click(function(){
    $("div").stop(true,true); //停止所有動畫且顯示當前激活動畫的最終完成效果（未激活的不顯示）
  });

6. 鏈（Chaining）

相同的元素上運行多條 jQuery 命令（點方法鏈接，語法不是很嚴格，可以在鏈接的過程中換行縮進）

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

三、jQuery HTML

### 1. 捕獲

獲得內容：

text() 設置或返回所選元素的文本內容

html() 設置或返回所選元素的內容（包括HTML標籤）

val() 設置或返回表單字段的值（即表單裏面的value值）

// 若 <p id="test">這是段落中的 <b>粗體</b> 文本。</p>
$("#btn1").click(function(){
    alert("Text:"  + $("#test").text());  // 顯示  這是段落中的 粗體 文本。
});
$("#btn2").click(function(){
    alert("HTML:"  +  $("#test").html());  // 顯示 這是段落中的 <b>粗體</b> 文本。
});

獲取屬性：

attr() 獲取屬性的值，例如鏈接

//  <a href="http://www.runoob.com" id="runoob"></a>
$("button").click(function(){
    alert($("#runoob").attr("href"));    // 顯示 www.runoob.com
  });
// 建議：對於 HTML 元素本身就帶有的固有屬性，在處理時，使用 prop 方法。
      // 對於 HTML 元素我們自己自定義的 DOM 屬性，在處理時，使用 attr 方法。
<a href="#" id="link1" action="delete" rel="nofollow">刪除</a>
//  這個例子裏 <a> 元素的 DOM 屬性有: href、id 和 action，很明顯，前兩個是固有屬性，而後面一個 action 屬性是我們自己自定義上去的，<a> 元素本身是沒有這個屬性的。

2. 設置

設置內容：

text() html() val() 直接在括號裏面放入想要設置的內容

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
  });
  $("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
  });
  $("#btn3").click(function(){
    $("#test3").val("RUNOOB");
  });

text()、html() 以及 val() 的回調函數

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

$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text(function(i,origText){    //  origText 原始文本，i 原始文本下標
      return "舊文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
  });

  $("#btn2").click(function(){
    $("#test2").html(function(i,origText){
      return "舊 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
    });
  });

});

設置屬性：

attr() 可以同時設置多個屬性值

$("button").click(function(){
    $("#runoob").attr({             
        "href": "http://www.runoob.com";
        "title": "jQuery 教程"
    });
});
//  同時修改多個屬性時用字典的方式
//  修改單個屬性時
$("#runoob").attr("href", "http://www.runoob.com");

attr() 的回調函數:

$("button").click(function(){
    $("#runoob").attr("href",function(i, origValue){
        return origValue + "/jQuery";
    });
});
// 直接修改了href的鏈接地址

3. 添加元素

四種添加新的HTML內容（包括文本與標籤）的jquery方法

append() ：在被選元素結尾插入內容（仍然在選中元素的內部）

$("p").append("追加文本")
//  若原文本爲“段落。”，那麼新文本爲“段落。追加文本”

prepend()：在被選元素的開頭插入內容（仍然在選中元素的內部）

$("p").prepend("<b>在開頭追加文本</b>")
//  顯示爲在原文本開頭加入加粗版的“在開頭追加文本”

after() ：在被選元素之後插入內容（在選中元素的外部）

$("img").before("<b>之前</b>");

before()：在被選元素之前插入內容（在選中元素的外部）

$("img").after("<i>之後</i>");

創建元素的幾種方法：

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);        // 追加新元素
}
//  三者創建出來的都是段落 “文本。”

append()/prepend()與after()/before()之間的區別：

<p>
  <span class="s1">s1</span>
</p>
<script>
$("p").append('<span class="s2">s2</span>');
</script>
// 結果是這樣的
<p>
  <span class="s1">s1</span>
  <span class="s2">s2</span>
</p>

// 而after()的結果是這樣的
<p>
  <span class="s1">s1</span>
</p>
<span class="s2">s2</span>

**總結：**append/prepend 是在選擇元素內部嵌入。after/before 是在元素外面添加。

4. 刪除元素

remove() - 刪除被選元素（及其子元素）

$("button").click(function(){
    $("#div").remove();
  });
  // 刪除div及其內部所有元素
  
  // 可以接受一個參數，允許對被刪元素進行過濾。
  $("p").remove(".italic");
  // 刪除所有類名爲italic的p標籤

empty() - 從被選元素中刪除子元素

$("button").click(function(){
    $("#div").empty();
  });
  // 刪除div裏面的所有元素，不包括div本身

5. CSS類

通過 jQuery，可以很容易地對 CSS 元素進行操作，獲取或設置

addClass() 方法：向被選元素添加一個或多個CSS類

// 向不同的元素添加 class 屬性
$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

// 向單個元素添加多個類屬性
 $("body div:first").addClass("important blue");

removeClass() - 從被選元素刪除一個或多個類

$("h1,h2,p").removeClass("blue");

toggleClass() - 對被選元素進行添加/刪除類的切換操作

$("h1,h2,p").toggleClass("blue");
// 有則刪除，沒有則添加

6. css()方法

css() 方法設置或返回被選元素的一個或多個樣式屬性。

返回 CSS 屬性：返回第一個匹配到元素的指定屬性

$("p").css("background-color");
// 若第一個匹配到的元素沒有該指定的屬性，則不返回或者返回不確定

設置 CSS 屬性：將所有匹配元素設置爲指定的屬性

$("p").css("background-color","yellow");
//   將所有p標籤 背景色 設置爲黃色，不管原標籤有沒有設置過背景色

//  同時設置多個css屬性     用字典的方式
$("p").css({"background-color":"yellow","font-size":"200%"});

7. 尺寸

通過 jQuery，很容易處理元素和瀏覽器窗口的尺寸

width() 方法設置或返回元素的寬度（不包括內邊距、邊框或外邊距）。

height() 方法設置或返回元素的高度（不包括內邊距、邊框或外邊距）。

innerWidth() 方法返回元素的寬度（包括內邊距）。

innerHeight() 方法返回元素的高度（包括內邊距）。

outerWidth() 方法返回元素的寬度（包括內邊距和邊框）。

outerHeight() 方法返回元素的高度（包括內邊距和邊框）。

/* <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>  */

$("button").click(function(){
    var txt="";
    txt+="div 寬度: " + $("#div1").width() + "</br>";
    txt+="div 高度: " + $("#div1").height() + "</br>";
    txt+="div 寬度，包含內邊距: " + $("#div1").innerWidth() + "</br>";
    txt+="div 高度，包含內邊距: " + $("#div1").innerHeight() + "</br>";
    txt+="div 寬度，包含內邊距和邊框: " + $("#div1").outerWidth() + "</br>";
    txt+="div 高度，包含內邊距和邊框: " + $("#div1").outerHeight() + "</br>;
    
    $("#div1").html(txt);
  });
  
  /* div 寬度: 300
	div 高度: 100
	div 寬度，包含內邊距: 320
	div 高度，包含內邊距: 120
	div 寬度，包含內邊距和邊框: 322
	div 高度，包含內邊距和邊框: 122
    div 寬度，包含內邊距、邊框和外邊距: 328
	div 高度，包含內邊距、邊框和外邊距: 128
  */

四、jQuery遍歷

###1.遍歷

通過 jQuery 遍歷，您能夠從被選（當前的）元素開始，輕鬆地在家族樹中向上移動（祖先），向下移動（子孫），水平移動（同胞）。這種移動被稱爲對 DOM 進行遍歷。

注意：祖先是父、祖父、曾祖父等等。後代是子、孫、曾孫等等。同胞擁有相同的父。

2. 祖先

用parent()、parents()、parentsUntil()等方法向上遍歷 DOM 樹，以查找元素的祖先。

parent() 方法：返回被選元素的直接父元素（一般只有一個）

//  只更改span標籤的直接父級元素的樣式
$("span").parent().css({"color":"red","border":"2px solid red"});

parents() 方法：返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 ()。

$("span").parents().css({"color":"red","border":"2px solid red"});
// 從span一直向上到body到html爲止

//  加參數進行過濾  只更改祖先元素中的ul
$("span").parents("ul").css({"color":"red","border":"2px solid red"});

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

//  選定span，指定div，返回該兩者之間的屬於span的祖先元素
$("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});

3. 後代

用children()、find()向下遍歷 DOM 樹，查找後代元素

children() 方法：返回被選元素的所有直接子元素（一個或者多個）

$("div").children().css({"color":"red","border":"2px solid red"});

// 添加參數進行過濾
$("div").children("p.1").css({"color":"red","border":"2px solid red"});

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

// 所有後代
$("div").find("*").css({"color":"red","border":"2px solid red"});

// 指定的後代元素
$("div").find("span").css({"color":"red","border":"2px solid red"});

4. 同胞

有多種方法可以在DOM樹中進行水平遍歷

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

//  選擇h2的所有同胞元素並修改其樣式（不包括h2本身）
$("h2").siblings().css({"color":"red","border":"2px solid red"});

// 添加參數進行過濾
$("h2").siblings("p").css({"color":"red","border":"2px solid red"});

next() 方法：返回被選元素的下一個同胞元素，只會返回一個元素。

// h2的下一個同胞元素，
$("h2").next().css({"color":"red","border":"2px solid red"});

nextAll() 方法：返回被選元素的所有跟隨的同胞元素。

// h2後面的所有同胞元素
$("h2").nextAll().css({"color":"red","border":"2px solid red"});

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

// 選中的h2以及指定的h6之間的所有同胞元素
$("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});

prev(), prevAll() 以及 prevUntil() 方法的工作方式與上面的方法類似，只不過方向相反而已

5. 過濾

使用方法而不是參數來過濾數據

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

// 匹配div標籤下的p標籤，選擇其第一個
$("div p").first().css("background-color","yellow");

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

// 匹配div標籤下的p標籤，選擇其最後一個
$("div p").last().css("background-color","yellow");

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

// 匹配索引號爲1 的p標籤    <p> 攜帶索引號(index 1)。</p>
$("p").eq(1).css("background-color","yellow");

filter() 方法：返回與規定標準相匹配的元素。

// p標籤下類名爲url的所有元素
$("p").filter(".url").css("background-color","yellow");

not() 方法：返回與規定標準不匹配的所有元素。

//   p標籤下類名不爲url的所有元素
 $("p").not(".url").css("background-color","yellow");

五、Ajax

1. Ajax簡介

AJAX = 異步 JavaScript 和 XML

AJAX 是與服務器交換數據的技術，它在不重載全部頁面的情況下，實現了對部分網頁的更新。

jQuery 提供多個與 AJAX 有關的方法。

通過 jQuery AJAX 方法，您能夠使用 HTTP Get 和 HTTP Post 從遠程服務器上請求文本、HTML、XML 或 JSON - 同時您能夠把這些外部數據直接載入網頁的被選元素中。如果沒有jQuery，AJAX編程的實現有一些難度。

2. load()方法

jQuery load() 方法是簡單但強大的 AJAX 方法，它可以從服務器加載數據，並把返回的數據放入被選元素中。

語法：$(selector).load(URL,data,callback);

必需的 URL 參數規定您希望加載的 URL。

可選的 data 參數規定與請求一同發送的查詢字符串鍵/值對集合。

可選的 callback 參數是 load() 方法完成後所執行的函數名稱。

//   加載外部文件來更改指定元素內容
$("#div1").load("/try/ajax/demo_test.txt");

//   在URL參數中添加jQuery選擇器，指定加載外部文件中id爲p1的元素
 $("#div1").load("/try/ajax/demo_test.txt #p1");

callback函數的參數：

responseTxt - 調用成功時所調用的結果內容
statusTXT - 包含調用的狀態 sucess或error
xhr - 包含 XMLHttpRequest 對象

//  先執行函數裏面的內容，再執行頁面上內容的更改（例如本例是先跳出彈窗）
/*  本例中responseTxt爲"demo_test.txt"裏面的內容，statusTxt爲success時，xhr.status=200,xhr.statusText=ok;而當status爲error時，xhr.status=404,xhr.statusText=pag not found（錯誤情況的一個例子）
*/
$("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        alert("外部內容加載成功!");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
//

3. AJAX的get()和post()方法

HTTP請求GET —— 從指定的資源請求數據

HTTP請求POST—— 向指定的資源提交要處理的數據

GET 基本上用於從服務器獲得（取回）數據。註釋：GET 方法可能返回緩存數據。

POST 主要是提交數據，也可用於從服務器獲取數據。不過，POST 方法不會緩存數據，並且常用於連同請求一起發送數據。

$.get() 方法：通過 HTTP GET 請求從服務器上請求數據。

語法： $.get(URL, callback)；

必需的 URL 參數規定您希望請求的 URL。

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

//  data爲“demo_test.php”文件裏面的內容，狀態爲請求成功success或錯誤error
$.get("/try/ajax/demo_test.php",function(data,status){
			alert("數據: " + data + "\n狀態: " + status);
		});

$.post() 方法：通過 HTTP POST 請求向服務器提交數據。

語法：$.post(URL, data,callback);

必需的 URL 參數規定您希望請求的 URL。

可選的 data 參數規定連同請求發送的數據。字典的形式

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

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

六、jQuery的替代符號$有衝突時的解決辦法

1. jQuery 和其他 JavaScript 框架同時使用$

這時候兩個框架產生衝突，$符號不知道指代誰。

jQuery內置的noConflict() 方法解決此問題

noConflict() 方法會釋放對 $ 標識符的控制，這樣其他腳本就可以使用它了。

//   釋放$，此時別的框架可以使用
$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍然在工作!");
  });
});

// 創建自定義的jQuery簡寫
var jq=$.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍然在工作!");
  });
});

//  將$作爲參數傳遞後，函數內仍可以使用$，但函數外不能，只能使用jQuery
$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍然在工作!");
  });
});

七、JSONP

Jsonp(JSON with Padding) 是 json 的一種"使用模式"，可以讓網頁從別的域名（網站）那獲取資料，即跨域讀取數據。爲什麼我們從不同的域（網站）訪問數據需要一個特殊的技術(JSONP )呢？這是因爲同源策略。

同源策略，它是由Netscape提出的一個著名的安全策略，現在所有支持JavaScript 的瀏覽器都會使用這個策略。

所謂同源是指，域名，協議，端口相同。瀏覽器在執行一個腳本時會檢查這個腳本屬於哪個頁面，即檢查是否同源，只有同源時，該腳本纔會在相應的瀏覽器頁面運行。

jQuery中使用JSON：

$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
    
    var html = '<ul>';
    for(var i = 0; i < data.length; i++)
    {
        html += '<li>' + data[i] + '</li>';
    }
    html += '</ul>';
    $('#divCustomers').html(html); 
});

更多方法參見jQuery手冊！