jQuery 教程

jQuery是一套跨瀏覽器的JavaScript庫，簡化HTML與JavaScript之間的操作。由約翰·雷西格（John Resig）在2006年1月的BarCamp NYC上發(fā)布第一個版本。目前是由Dave Methvin領(lǐng)導(dǎo)的開發(fā)團隊進行開發(fā)。全球前10000個訪問最高的網(wǎng)站中，有65%使用了jQuery，是目前最受歡迎的JavaScript庫。

jQuery

jQuery教程

認識jQuery

  • jQuery 是一個 JavaScript 庫。
  • jQuery 極大地簡化了 JavaScript 編程。
  • jQuery 很容易學(xué)習(xí)。
  • jQuery 是為事件處理特別設(shè)計的。
  • jQuery 擁有可操作 HTML 元素和屬性的強大方法。
  • 通過 jQuery，可以很容易地添加新元素/內(nèi)容。
  • 通過 jQuery，可以很容易地刪除已有的HTML元素。
  • 通過 jQuery，可以很容易地對 CSS 元素進行操作
  • 官方網(wǎng)站
  • 官方API
  • w3school教程

引入jQuery

jQuery 庫可以通過一行簡單的標記被添加到網(wǎng)頁中。

本地引入

下載地址

<head>
    <script src="jquery.js"></script>
</head>

Google CDN

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>

Microsoft CDN

<head>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
</head>

jQuery 語法

jQuery 語法是為 HTML 元素的選取編制的，可以對元素執(zhí)行某些操作。

基礎(chǔ)語法$(selector).action()

  • 美元符號定義 jQuery
  • 選擇符（selector）“查詢”和“查找” HTML 元素
  • jQuery 的 action() 執(zhí)行對元素的操作

示例

  • $(this).hide() - 隱藏當(dāng)前元素
  • $("p").hide() - 隱藏所有段落
  • $(".test").hide() - 隱藏所有 class="test" 的所有元素
  • $("#test").hide() - 隱藏所有 id="test" 的元素

jQuery選擇器

jQuery 元素選擇器

  • jQuery 使用 CSS 選擇器來選取 HTML 元素。
  • $("p") 選取<p>元素。
  • $("p.intro") 選取所有 class="intro" 的<p>元素。
  • $("p#demo") 選取所有 id="demo" 的<p>元素。

jQuery 屬性選擇器

  • jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素。
  • $("[href]") 選取所有帶有 href 屬性的元素。
  • $("[href='#']") 選取所有帶有 href 值等于 "#" 的元素。
  • $("[href!='#']") 選取所有帶有 href 值不等于 "#" 的元素。
  • $("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結(jié)尾的元素。

jQuery CSS 選擇器

  • jQuery CSS 選擇器可用于改變 HTML 元素的 CSS 屬性。
  • 下面的例子把所有<p>元素的背景顏色更改為紅色：$("p").css("background-color","red");

jQuery事件函數(shù)

jQuery 事件處理方法是 jQuery 中的核心函數(shù)。
事件處理程序指的是當(dāng) HTML 中發(fā)生某些事件時所調(diào)用的方法。術(shù)語由事件“觸發(fā)”（或“激發(fā)”）經(jīng)常會被使用。
通常會把 jQuery 代碼放到 <head>部分的事件處理方法中：

實例：

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

jQuery效果

隱藏/顯示

  • jQuery hide()演示一個簡單的 jQuery hide() 方法。
  • jQuery hide()另一個 hide() 演示。如何隱藏部分文本。
  • jQuery toggle()通過 jQuery，您可以使用 toggle() 方法來切換 hide() 和 show() 方法。

語法：

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

可選的 speed 參數(shù)規(guī)定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。可選的 callback 參數(shù)是hide，show，toggle等方法完成后所執(zhí)行的函數(shù)名稱。

淡入淡出

  • jQuery fadeIn() 用于淡入已隱藏的元素。
  • jQuery fadeOut() 方法用于淡出可見元素。
  • jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。
    如果元素已淡出，則 fadeToggle() 會向元素添加淡入效果。
    如果元素已淡入，則 fadeToggle() 會向元素添加淡出效果。
  • jQuery fadeTo() 方法允許漸變?yōu)榻o定的不透明度（值介于 0 與 1 之間）。

語法：

$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);

可選的 speed 參數(shù)規(guī)定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。可選的 callback 參數(shù)是hide，show，toggle等方法完成后所執(zhí)行的函數(shù)名稱。fadeTo() 方法中必需的 opacity 參數(shù)將淡入淡出效果設(shè)置為給定的不透明度（值介于 0 與 1 之間）。

滑動

  • jQuery slideDown() 方法用于向下滑動元素。
  • jQuery slideUp() 方法用于向上滑動元素。
  • jQuery slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進行切換。
    如果元素向下滑動，則 slideToggle() 可向上滑動它們。
    如果元素向上滑動，則 slideToggle() 可向下滑動它們。

語法：

$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);

可選的 speed 參數(shù)規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是滑動完成后所執(zhí)行的函數(shù)名稱。

動畫

  • jQuery animate() 方法用于創(chuàng)建自定義動畫。
    提示：默認地，所有 HTML 元素都有一個靜態(tài)位置，且無法移動。
    如需對位置進行操作，要記得首先把元素的 CSS position 屬性設(shè)置為 relative、fixed 或 absolute！

語法：

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

必需的 params 參數(shù)定義形成動畫的 CSS 屬性。
可選的 speed 參數(shù)規(guī)定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數(shù)是動畫完成后所執(zhí)行的函數(shù)名稱。

下面的例子演示 animate() 方法的簡單應(yīng)用；它把 <div> 元素移動到左邊，直到 left 屬性等于 250 像素為止：

$("button").click(function(){
  $("div").animate({left:'250px'});
});
  • jQuery animate() - 操作多個屬性

操作多個屬性

實例：

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

提示：可以用 animate() 方法來操作所有 CSS 屬性嗎？

是的，幾乎可以！不過，需要記住一件重要的事情：當(dāng)使用 animate() 時，必須使用 Camel 標記法書寫所有的屬性名，比如，必須使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。同時，色彩動畫并不包含在核心 jQuery 庫中。
如果需要生成顏色動畫，您需要從 jQuery.com 下載 Color Animations 插件。

  • jQuery animate() - 使用相對值

也可以定義相對值（該值相對于元素的當(dāng)前值）。需要在值的前面加上 += 或 -=：

實例：

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});
  • jQuery animate() - 使用預(yù)定義的值

您甚至可以把屬性的動畫值設(shè)置為 "show"、"hide" 或 "toggle"：

實例

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});
  • jQuery animate() - 使用隊列功能

默認地，jQuery 提供針對動畫的隊列功能。這意味著如果您在彼此之后編寫多個 animate() 調(diào)用，jQuery 會創(chuàng)建包含這些方法調(diào)用的“內(nèi)部”隊列。然后逐一運行這些 animate 調(diào)用。

實例：

$("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");
});

jQuery 停止動畫

jQuery stop() 方法用于在動畫或效果完成前對它們進行停止。stop() 方法適用于所有 jQuery 效果函數(shù)，包括滑動、淡入淡出和自定義動畫。

語法

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

可選的 stopAll 參數(shù)規(guī)定是否應(yīng)該清除動畫隊列。默認是 false，即僅停止活動的動畫，允許任何排入隊列的動畫向后執(zhí)行。
可選的 goToEnd 參數(shù)規(guī)定是否立即完成當(dāng)前動畫。默認是 false。
因此，默認地，stop() 會清除在被選元素上指定的當(dāng)前動畫。

參考

jQuery Callback 函數(shù)

Callback 函數(shù)在當(dāng)前動畫 100% 完成之后執(zhí)行。如果您希望在一個涉及動畫的函數(shù)之后來執(zhí)行語句，請使用 callback 函數(shù)。否則會出錯

jQuery - Chaining

通過 jQuery，您可以把動作/方法鏈接起來。
Chaining 允許我們在一條語句中允許多個 jQuery 方法（在相同的元素上）。

實例：

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

提示：當(dāng)進行鏈接時，代碼行會變得很差。不過，jQuery 在語法上不是很嚴格；您可以按照希望的格式來寫，包含折行和縮進。

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

jQuery HTML

jQuery DOM 操作：jQuery 中非常重要的部分，就是操作 DOM 的能力。

jQuery 提供一系列與 DOM 相關(guān)的方法，這使訪問和操作元素和屬性變得很容易。

提示：DOM = Document Object Model（文檔對象模型）

DOM 定義訪問 HTML 和 XML 文檔的標準：“W3C 文檔對象模型獨立于平臺和語言的界面，允許程序和腳本動態(tài)訪問和更新文檔的內(nèi)容、結(jié)構(gòu)以及樣式。”

jQuery - 獲得內(nèi)容和屬性

獲得內(nèi)容 - text()、html() 以及 val()

  • text() - 設(shè)置或返回所選元素的文本內(nèi)容
  • html() - 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標記）
  • val() - 設(shè)置或返回表單字段的值

實例:

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

獲取屬性 - attr()

實例:

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

jQuery - 設(shè)置內(nèi)容和屬性

設(shè)置內(nèi)容 - text()、html() 以及 val()

我們將使用前一章中的三個相同的方法來設(shè)置內(nèi)容：

  • text() - 設(shè)置或返回所選元素的文本內(nèi)容
  • html() - 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標記）
  • val() - 設(shè)置或返回表單字段的值

實例：

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

text()、html() 以及 val() 的回調(diào)函數(shù)

回調(diào)函數(shù)由兩個參數(shù)：被選元素列表中當(dāng)前元素的下標，以及原始（舊的）值。然后以函數(shù)新值返回您希望使用的字符串。

實例：

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

設(shè)置屬性 - attr()

實例:(改變（設(shè)置）鏈接中 href 屬性的值)

$("button").click(function(){
  $("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});

attr() 方法也允許您同時設(shè)置多個屬性

實例：（同時設(shè)置 href 和 title 屬性）

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.w3school.com.cn/jquery",
    "title" : "W3School jQuery Tutorial"
  });
});

attr() 的回調(diào)函數(shù)

回調(diào)函數(shù)由兩個參數(shù)：被選元素列表中當(dāng)前元素的下標，以及原始（舊的）值。然后以函數(shù)新值返回您希望使用的字符串。

實例：（帶有回調(diào)函數(shù)的 attr() 方法）

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

jQuery - 添加元素

添加新的 HTML 內(nèi)容

  • append() - 在被選元素的結(jié)尾插入內(nèi)容
  • prepend() - 在被選元素的開頭插入內(nèi)容
  • after() - 在被選元素之后插入內(nèi)容
  • before() - 在被選元素之前插入內(nèi)容

實例：

$("p").append("Some appended text.");
$("p").prepend("Some prepended text.");
$("img").after("Some text after");
$("img").before("Some text before");

append() 和 prepend() 、after() 和 before()方法能夠通過參數(shù)接收無限數(shù)量的新元素。可通過 text/HTML、jQuery 或者 JavaScript/DOM 來創(chuàng)建。、

實例：

function appendText()
{
var txt1="<p>Text.</p>";               // 以 HTML 創(chuàng)建新元素
var txt2=$("<p></p>").text("Text.");   // 以 jQuery 創(chuàng)建新元素
var txt3=document.createElement("p");  // 以 DOM 創(chuàng)建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // 追加新元素
}

function afterText()
{
var txt1="<b>I </b>";                    // 以 HTML 創(chuàng)建新元素
var txt2=$("<i></i>").text("love ");     // 通過 jQuery 創(chuàng)建新元素
var txt3=document.createElement("big");  // 通過 DOM 創(chuàng)建新元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // 在 img 之后插入新元素
}

jQuery - 刪除元素

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

實例：

$("#div1").remove();
$("#div1").empty();
  • 過濾被刪除的元素
    jQuery remove() 方法也可接受一個參數(shù)，允許您對被刪元素進行過濾。
    該參數(shù)可以是任何 jQuery 選擇器的語法。
    下面的例子：

實例：（刪除 class="italic" 的所有<p>元素）

$("p").remove(".italic");

jQuery - 獲取并設(shè)置 CSS 類

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

實例：

.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}

//add單個class
$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

//add多個class
$("button").click(function(){
  $("#div1").addClass("important blue");
});

//remove class
$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

//添加/刪除類的切換操作
$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});
  • css() - 設(shè)置或返回樣式屬性

返回 CSS 屬性

語法：css("propertyname");
實例：$("p").css("background-color");

設(shè)置 CSS 屬性

語法：css("propertyname","value");
實例：$("p").css("background-color","yellow");

設(shè)置多個 CSS 屬性

語法：css({"propertyname":"value","propertyname":"value",...});
實例：$("p").css({"background-color":"yellow","font-size":"200%"});

jQuery - 尺寸

  • width()設(shè)置或返回元素的寬度（不包括內(nèi)邊距、邊框或外邊距）。

  • height()設(shè)置或返回元素的高度（不包括內(nèi)邊距、邊框或外邊距）

  • innerWidth()返回元素的寬度（包括內(nèi)邊距）。

  • innerHeight()返回元素的高度（包括內(nèi)邊距）

  • outerWidth()返回元素的寬度（包括內(nèi)邊距和邊框）

  • outerHeight()返回元素的高度（包括內(nèi)邊距和邊框）

  • outerWidth(true) 返回元素的寬度（包括內(nèi)邊距、邊框和外邊距）

  • outerHeight(true) 返回元素的高度（包括內(nèi)邊距、邊框和外邊距）

更多實例

//返回文檔（HTML 文檔）和窗口（瀏覽器視口）的寬度和高度
$(document).width();
$(document).height();
$(window).width();
$(window).height()

//設(shè)置指定的`<div>`元素的寬度和高度 
$("#div1").width(500).height(500);

jQuery 遍歷

jQuery 遍歷，意為“移動”，用于根據(jù)其相對于其他元素的關(guān)系來“查找”（或選取）HTML 元素。以某項選擇開始，并沿著這個選擇移動，直到抵達您期望的元素為止。

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

遍歷方法中最大的種類是樹遍歷（tree-traversal）。

jQuery 遍歷 - 祖先

向上遍歷 DOM 樹

parent()

返回被選元素的直接父元素。該方法只會向上一級對 DOM 樹進行遍歷。

實例：

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

parents()

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

實例:(返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素)

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

parentsUntil()

返回介于兩個給定元素之間的所有祖先元素。

實例：（返回介于 <span> 與 <div> 元素之間的所有祖先元素）

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

jQuery 遍歷 - 后代

向下遍歷 DOM 樹

children()

返回被選元素的所有直接子元素。該方法只會向下一級對 DOM 樹進行遍歷。

實例：

$(document).ready(function(){
  $("div").children();
});

實例：（例子返回類名為 "1" 的所有 <p> 元素，并且它們是 <div> 的直接子元素）

$(document).ready(function(){
  $("div").children("p.1");
});

find()

返回被選元素的后代元素，一路向下直到最后一個后代。

實例:

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

實例:(返回 <div> 的所有后代)

$(document).ready(function(){
  $("div").find("*");
});

jQuery 遍歷 - 同胞

在 DOM 樹中水平遍歷

siblings()

返回被選元素的所有同胞元素。

實例:

$(document).ready(function(){
  $("h2").siblings();
});

實例:(返回屬于 <h2> 的同胞元素的所有 <p> 元素)

$(document).ready(function(){
  $("h2").siblings("p");
});

next()

返回被選元素的下一個同胞元素。該方法只返回一個元素。

實例:

$(document).ready(function(){
  $("h2").next();
});

nextAll()

返回被選元素的所有跟隨的同胞元素。

實例:

$(document).ready(function(){
  $("h2").nextAll();
});

nextUntil()

返回介于兩個給定參數(shù)之間的所有跟隨的同胞元素。

實例:(返回介于 <h2> 與 <h6> 元素之間的所有同胞元素)

$(document).ready(function(){
  $("h2").nextUntil("h6");
});

prev()

返回被選元素的前一個同胞元素。該方法只返回一個元素。類比于next()

prevAll()

返回被選元素的所有前面的同胞元素。類比于nextAll()

prevUntil()

返回介于兩個給定參數(shù)之間的所有前面的同胞元素。類比于nextUntil()

jQuery 遍歷 - 過濾

縮寫(小)搜索元素的范圍

jQuery first()

返回被選元素的首個元素。

實例：（選取首個 <div> 元素內(nèi)部的第一個 <p> 元素）

$(document).ready(function(){
  $("div p").first();
});

jQuery last()

返回被選元素的最后一個元素。

實例:(選擇最后一個 <div> 元素中的最后一個 <p> 元素)

$(document).ready(function(){
  $("div p").last();
});

jQuery eq()

返回被選元素中帶有指定索引號的元素。

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

實例:(選取第二個 <p> 元素（索引號 1）)

$(document).ready(function(){
  $("p").eq(1);
});

jQuery filter() 方法

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

實例:(返回帶有類名 "intro" 的所有 <p> 元素)

$(document).ready(function(){
  $("p").filter(".intro");
});

jQuery not() 方法

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

實例:(返回不帶有類名 "intro" 的所有 <p> 元素)

$(document).ready(function(){
  $("p").not(".intro");
});

jQuery - AJAX

AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
簡短地說，在不重載整個網(wǎng)頁的情況下，AJAX 通過后臺加載數(shù)據(jù)，并在網(wǎng)頁上進行顯示。

關(guān)于 jQuery 與 AJAX
jQuery 提供多個與 AJAX 有關(guān)的方法。

通過 jQuery AJAX 方法，您能夠使用 HTTP Get 和 HTTP Post 從遠程服務(wù)器上請求文本、HTML、XML 或 JSON - 同時您能夠把這些外部數(shù)據(jù)直接載入網(wǎng)頁的被選元素中。

jQuery - AJAX load() 加載

jQuery load()

jQuery load() 方法是簡單但強大的 AJAX 方法。從服務(wù)器加載數(shù)據(jù)，并把返回的數(shù)據(jù)放入被選元素中。

語法：$(selector).load(URL,data,callback);
必需的 URL 參數(shù)規(guī)定您希望加載的 URL。
可選的 data 參數(shù)規(guī)定與請求一同發(fā)送的查詢字符串鍵/值對集合。
可選的 callback 參數(shù)是 load() 方法完成后所執(zhí)行的函數(shù)名稱。

實例：（把文件 "demo_test.txt" 的內(nèi)容加載到指定的 <div> 元素中）

$("#div1").load("demo_test.txt");

實例：（把 "demo_test.txt" 文件中 id="p1" 的元素的內(nèi)容，加載到指定的 <div>元素中）

$("#div1").load("demo_test.txt #p1");

可選的 callback 參數(shù)規(guī)定當(dāng) load() 方法完成后所要允許的回調(diào)函數(shù)。回調(diào)函數(shù)可以設(shè)置不同的參數(shù)：

responseTxt - 包含調(diào)用成功時的結(jié)果內(nèi)容
statusTXT - 包含調(diào)用的狀態(tài)
xhr - 包含 XMLHttpRequest 對象

實例：

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

jQuery - AJAX get() 和 post() 方法

HTTP 請求：GET vs. POST
兩種在客戶端和服務(wù)器端進行請求-響應(yīng)的常用方法是：GET 和 POST。

  • GET - 從指定的資源請求數(shù)據(jù)
  • POST - 向指定的資源提交要處理的數(shù)據(jù)
  • GET 基本上用于從服務(wù)器獲得（取回）數(shù)據(jù)。注釋：GET 方法可能返回緩存數(shù)據(jù)。
  • POST 也可用于從服務(wù)器獲取數(shù)據(jù)。不過，POST 方法不會緩存數(shù)據(jù)，并且常用于連同請求一起發(fā)送數(shù)據(jù)。

jQuery $.get() 方法

通過 HTTP GET 請求從服務(wù)器上請求數(shù)據(jù)。

語法：$.get(URL,callback);
必需的 URL 參數(shù)規(guī)定您希望請求的 URL。
可選的 callback 參數(shù)是請求成功后所執(zhí)行的函數(shù)名。

實例:（使用 $.get() 方法從服務(wù)器上的一個文件中取回數(shù)據(jù)）

$("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

jQuery $.post() 方法

通過 HTTP POST 請求從服務(wù)器上請求數(shù)據(jù)。
語法：$.post(URL,data,callback);
必需的 URL 參數(shù)規(guī)定您希望請求的 URL。
可選的 data 參數(shù)規(guī)定連同請求發(fā)送的數(shù)據(jù)。
可選的 callback 參數(shù)是請求成功后所執(zhí)行的函數(shù)名。

實例:(使用 $.post() 連同請求一起發(fā)送數(shù)據(jù))

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

jQuery - noConflict() 方法

jQuery 和其他 JavaScript 框架
正如您已經(jīng)了解到的，jQuery 使用 $ 符號作為 jQuery 的簡寫。
如果其他 JavaScript 框架也使用 $ 符號作為簡寫怎么辦？
其他一些 JavaScript 框架包括：MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。
其中某些框架也使用 $ 符號作為簡寫（就像 jQuery），如果您在用的兩種不同的框架正在使用相同的簡寫符號，有可能導(dǎo)致腳本停止運行。

jQuery 的團隊考慮到了這個問題，并實現(xiàn)了 noConflict() 方法。

jQuery noConflict() 方法

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

實例,當(dāng)然，您仍然可以通過全名替代簡寫的方式來使用 jQuery：

$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍在運行！");
  });
});

您也可以創(chuàng)建自己的簡寫。noConflict() 可返回對 jQuery的引用，您可以把它存入變量，以供稍后使用。請看這個例子：

var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍在運行！");
  });
});

實例,如果你的 jQuery 代碼塊使用 $ 簡寫，并且您不愿意改變這個快捷方式，那么您可以把 $ 符號作為變量傳遞給 ready 方法。這樣就可以在函數(shù)內(nèi)使用 $ 符號了 - 而在函數(shù)外，依舊不得不使用 "jQuery"：

$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍在運行！");
  });
});
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 227,702評論 6贊 531
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,143評論 3贊 415
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
    開封第一講書人閱讀 175,553評論 0贊 373
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經(jīng)常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 62,620評論 1贊 307
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當(dāng)我...
    茶點故事閱讀 71,416評論 6贊 405
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 54,940評論 1贊 321
  • 城市分裂傳說
    那天，我揣著相機與錄音，去河邊找鬼。 笑死，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 43,024評論 3贊 440
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 42,170評論 0贊 287
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 48,709評論 1贊 333
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 40,597評論 3贊 354
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,784評論 1贊 369
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 38,291評論 5贊 357
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 44,029評論 3贊 347
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,407評論 0贊 25
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,663評論 1贊 280
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個月前我還...
    沈念sama閱讀 51,403評論 3贊 390
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 47,746評論 2贊 370

推薦閱讀更多精彩內(nèi)容

  • 警告請使用 document.write() 僅僅向文檔輸出寫內(nèi)容。如果在文檔已完成加載后執(zhí)行 document....
    鹿守心畔光閱讀 2,858評論 3贊 104
  • 通過jQuery，您可以選取（查詢，query）HTML元素，并對它們執(zhí)行“操作”（actions）。 jQuer...
    枇杷樹8824閱讀 668評論 0贊 3
  • 本文章是老馬jQuery視頻的講義和上課的代碼。具體觀看視頻地址：https://chuanke.baidu.co...
    IT老馬閱讀 2,586評論 3贊 14
  • 文本編輯器：EditPlus 文本編輯器，常用于文本編輯、轉(zhuǎn)碼、搜索、Hex查看。尤其是文本搜索，可以查詢所有子文...
    犀利兔子哥閱讀 554評論 0贊 0
  • 今年我第一次看《初戀這件小事》的電影，電影情節(jié)講述了學(xué)生時期的小水為了追求學(xué)霸學(xué)長阿亮努力變好變美的故事。 主人公...
    笑出聲來呀閱讀 302評論 0贊 3