瀏覽器中的Javascript（jQuery）

時間 2019-11-06

標籤瀏覽器 javascript jquery 欄目瀏覽器简体版

原文原文鏈接

以很是流行的jQuery框架，描述瀏覽器中的Javascript。

jQuery的理念是write less, do more!它之因此能作到這點主要是由於下面的這幾個特性：

強大的選擇器
出色的DOM操做封裝
可靠的事件處理機制
完善的ajax
出色的瀏覽器兼容性
行爲和內容的分離

仍是先來看一下，咱們永遠的Hello World！吧

<html>

<head>

<title>jQuery Demo</title>

$(document).ready(function() {

alert("Hello World!");

});

</script>

</head>

</html>

jQuery選擇器

jQuery選擇器繼承了CSS選擇器的方式，它們之間是及其相似的。

下面以例子說明：

基本選擇器

$("#one").css("background", "#bbffaa"); //改變id爲one的元素的背景色

$(".mini").css("background", "#bbffaa"); //改變class爲mini的全部元素的背景色

$("div").css("background", "#bbffaa"); //改變全部div節點元素的背景色

$("*").css("background", "#bbffaa"); //改變全部元素的背景色

$("span, #two").css("background", "#bbffaa"); //改變全部span元素和id爲two元素的背景色

層次選擇器

$("div span") ; //選取div裏面的全部span元素

$("div > span") ; //選取div裏面的全部span子元素

$(".one + div") ; //選取class爲one的下一個div元素

$("#two ~ div") ; //選取id爲two的元素後面的全部div兄弟元素

過濾選擇器

$("div:first") ; //選取全部div元素中的第一個div元素

$("div:last") ; //選取全部div元素中的最後一個div元素

$("input:not(.myclass)") ; //選取全部class不是myclass的input元素

$("input:even") ; //選取全部索引是偶數的input元素

$("input:odd") ; //選取全部索引是奇數的input元素

$("input:eq(1)") ; //選取索引是等於1的input元素

$("input:gt(1)") ; //選取索引是大於1的全部input元素

$("input:lt(1)") ; //選取索引是小於1的全部input元素

$(":header") ; //選取網頁中全部的<h1>,<h2>,<h3>........

$("div:animated") ; //選取正在執行動畫的div元素

內容過濾器

$("div:contains('我')") ; //選取包含有文本 ‘我’ 的全部div元素

$("div:empty") ; //選取不包括子元素（包括文本元素）的空div元素

$("div:has(p)") ; //選取包含p元素的全部div元素

$("div:parent") ; //選取擁有子元素（包括文本元素）的div元素

可見性過濾選擇器

$(":hidden") ; //選取全部不可見元素。包括<input type="hidden">, <div styple="display:none;" >,

<div styple="visibility:hidden;"> 等元素，若是隻想選取<input>元素，可使用 $("input : hidden") ;

$("div:visible") ; //選取全部可見的div元素

ps：全部的選擇器選擇的結果都是對象，不可能出現null，undefined。好比 $("#one"),即便文檔中不存在id爲one的元素，其結果也是一

個對象，實際上是一個空的數組對象。

屬性過濾選擇器

$("div[title]"); //選取含有屬性title的div元素

$("div[title = test]"); //選取屬性title值爲"test"的div元素

$("div[title != test]"); //選取屬性title值不爲"test"的div元素

$("div[title ^= te]"); //選取屬性title值以"te"開始的div元素

$("div[title $= est]"); //選取屬性title值以"est"結束的div元素

$("div[title *= est]"); //選取屬性title值含有"est"的div元素

$("div[id][title *= est]"); //選取含有屬性id，且屬性title值含有"est"的div元素

子元素過濾選擇器

$("div.one :nth-child(2)"); //選取每一個class爲one的div父元素下的第二個子元素

$("div.one :first-child"); //選取每一個class爲one的div父元素下的第一個子元素

$("div.one :last-child"); //選取每一個class爲one的div父元素下的最後一個子元素

$("div.one :only-child"); //選取每一個class爲one的div父元素下只有一個子元素

ps:nth-child()是很經常使用的子元素選擇器，詳細以下：

(1) :nth-child(even) 能選取每一個父元素下的索引值爲偶數的元素

(2) :nth-child(odd) 能選取每一個父元素下的索引值爲奇數的元素

(3) :nth-child(2) 能選取每一個父元素下的索引值爲2的元素

(4) :nth-child(3n) 能選取每一個父元素下的索引值爲3的倍數的元素（n從0開始）

:eq(index)只匹配一個元素，而:nth-child(index)將爲每一個符合條件的父元素匹配子元素，而且:nth-child(index)，中的index是從1開始，

而:eq(index)中的index是從0開始。

表彈對象屬性過濾選擇器

$("#form1 input:enabled"); //選取id爲form1的元素內可用的input元素

$("#form1 input:disabled"); //選取id爲form1的元素內不可用的input元素

$("input:checked"); //選取全部被選中的多選框

$("select:selected"); //選取全部被選中的下拉列表的對象

表單選擇器

$("#form1 :input"); //選取id爲form1的元素內全部的input, textarea, select和button元素。注意和 $("#form1 input") 的區別。

$("#form1 :text"); //選取id爲form1的元素內全部的單行文本框

$("#form1 :password"); //選取id爲form1的元素內全部的密碼框

相似的還有：

$("#form1 :radio");

$("#form1 :checkbox");

$("#form1 :submit");

$("#form1 :image");

$("#form1 :reset");

$("#form1 :button");

$("#form1 :file");

$("#form1 :hidden");

選擇器的注意事項：

（1）選擇器中的特殊字符的處理

處理特殊字符要用到轉義符轉義，如$("#id\\#b"); $("#id\\[1\\]");

(2) 選擇器中的空格

$(".test :hidden"); // 選取class爲test的元素裏面隱藏的元素

$(".test:hidden"); // 選取隱藏的class爲test的元素

jQuery中的DOM操做

插入節點

$("p").append("<b>你好!</b>"); // 向全部的p元素裏面的內容末尾追加html內容

$( "<b>你好!</b>" ).appendTo("p"); // 和append功能相同，只是顛倒了順序

$("p").prepend("<b>你好!</b>"); // 向全部的p元素裏面的內容前面追加html內容

$(" <b>你好!</b> ").prependTo("p"); // 和prepend功能相同，只是顛倒了順序

$("p").after("<b>你好!</b>"); // 向全部的p元素後面追加html內容

$( "<b>你好!</b>" ).insertAfter("p"); // 和after功能相同，只是顛倒了順序

$("p").before("<b>你好!</b>"); // 向全部的p元素前面追加html內容

$(" <b>你好!</b> ").insertBefore("p"); // 和before功能相同，只是顛倒了順序

刪除節點

$("ul li:eq(1)").remove(); // 獲取第二個li元素節點後，將它從網頁中刪除

ps: 當某個節點被remove方法刪除後，該節點包含的全部後代節點同時被刪除，這個方法的返回值是一個指向已被刪除節點的引用。

另外remove方法也能夠經過傳遞參數選擇性的刪除節點：

$("ul li:eq(1)").remove("li[title=菠蘿]"); // 將li元素屬性等於菠蘿的li元素刪除

$("ul li:eq(1)").empty(); // 獲取第二個li元素節點後，清空元素裏面的內容

複製節點

$("ul li").click(function() {

$(this).clone().appendTo("ul");

}); // 複製當前節點，並把它加到ul元素中

ps：上面的方法，複製節點後，被複制的新節點不具備任何的行爲。若是須要新元素也具備複製功能（本例是單擊事件），則可使用

$("ul li").click(function() {

$(this).clone(true).appendTo("body");

});

只須要在clone方法的參數中加上true，就可讓複製的新元素綁定以前的事件。

替換節點

$("p").replaceWith("<strong>你最不喜歡的水果是？</strong>"); // 將全部p元素及其內部的內容用指定的html替換

也能夠用replaceAll來實現一樣的功能，只是顛倒了操做，如：

$(" <strong>你最不喜歡的水果是？</strong> ").replaceAll("p");

包裹節點

$("strong").wrap("<b></b>"); //用b標籤將strong元素包裹起來

獲得以下結果：

<b><strong>你最不喜歡的水果是？</strong></b>

$("strong").wrapAll("<b></b>"); //該方法將全部匹配的元素用一個元素包裹起來。它不一樣於wrap方法，wrap()是將全部的元

素單獨包裹。

$("strong").wrapInner("<b></b>"); //將每一個匹配的元素的子內容（包括文本節點）用其餘結構化的標記包裹起來。

屬性操做

$("p").attr("title"); //獲取全部p元素的title值

$("p").attr("title", "newtitle"); //設置全部p元素的title值爲newtitle

$("p").attr({"title": "newtitle", "name": "newname"}); //同時設置一個元素的多個屬性值

$("p").removeAttr("title"); //刪除全部p元素的屬性title

樣式操做

$("p").attr("class", "high"); // 設置p元素的class值爲high

$("p").addClass("another"); // 對p元素追加樣式another，結果至關於：<p class="high another">你最不喜歡的水果是？</p>

$("p").removeClass("high"); // 移除p元素的class值爲high

$("p").removeClass("high").removeClass("another"); // 移除p元素的class值爲high和another

$("p").removeClass("high another") // 功能同上

$("p").toggleClass("another") // 切換樣式another，即若是存在此樣式，則刪除，若是不存在此樣式，則添加

$("p").hasClass("another") // 判斷是否存在class值another，存在返回true，不存在返回false

ps:CSS標準規定，若是給一個元素添加了多個class值，那麼就至關於合併了他們的樣式；若是不一樣的class設置了同同樣式屬性，則後者

覆蓋前者。

設置和獲取html、文本和值

$("p").html(); // 獲取p元素裏面的html代碼

$("p").html("<strong>你最喜歡的水果是？</strong>"); // 設置p元素裏面的html代碼

$("p").text(); // 獲取p元素裏面的文本內容

$("p").text("你最喜歡的水果是？"); // 設置p元素裏面的文本內容

ps: html()方法只能能夠用於html和xhtml文檔，但不能用於xml文檔；text()方法能夠用於上面的全部文檔。

val()方法相似於javascript中的value屬性，能夠用來設置和獲取元素的值，不管元素是文本框，下拉列表，仍是單選框均可以返回元素的值。若是元素是多選，則返回一個包含全部選擇值的數組。

$("#name").val(); // 獲取id爲name的輸入框的值

$("#name").val("nange"); // 設置id爲name的輸入框的值爲nange

遍歷節點

$("p").children(); // 獲取p元素的子元素。注意，只是p元素的子元素，不包括任何的下級後代元素，好比孫子元素

$("p").next(); // 獲取p元素的下一個同輩元素

$("p").prev(); // 獲取p元素的上一個同輩元素

$("p").siblings(); // 獲取p元素先後全部的同輩元素

$("p").closest("li"); // 獲取與p元素最近的li元素。查找方法是：首先查找當前元素是否匹配，若是匹配這返回自己，不匹配則

向上查找父元素，逐級向上，直到查找到匹配的元素爲止。若是什麼都沒找到則返回一個空的jQuery對象。

ps:其餘還有不少遍歷節點的方法，這裏不在贅述，好比，

each() : // 對 jQuery 對象進行迭代，爲每一個匹配元素執行函數

end() : // 結束當前鏈中最近的一次篩選操做，並將匹配元素集合返回到前一次的狀態

filter() : // 將匹配元素集合縮減爲匹配選擇器或匹配函數返回值的新元素

find() : //得到當前元素集合中每一個元素的後代，經過選擇器、jQuery 對象或元素來篩選

is() : //根據選擇器檢查當前匹配元素集合，若是存在至少一個匹配元素，則返回 true

last() : //將匹配元素集合縮減爲集合中的最後一個元素

parent() : // 得到當前匹配元素集合中每一個元素的父元素，由選擇器篩選（可選）

prevAll() : // 得到匹配元素集合中每一個元素以前的全部同輩元素，由選擇器進行篩選（可選）

slice() : // 將匹配元素集合縮減爲指定範圍的子集

等等，還有不少，更多的函數請查看文檔。

CSS-DOM操做

$("p").css("color"); // 獲取p元素樣式的顏色

$("p").css("color", "red"); // 獲取p元素樣式的顏色

$("p").css({"fontSize":"30px", "backgroundColor":"#888888"}); // 同時設置多個樣式屬性

ps: 若是值是數字，將會自動轉換爲像素值。在css()方法中，若是屬性中帶有「-」符號，例如font-size屬性，若是在設置這些屬性值的時候

不加引號，那麼就要用駝峯式寫法，例如： $("p").css({fontSize:"30px", backgroundColor:"#888888"}); 若是帶上了引號，既能夠

寫成「font-size」，也能夠寫成「fontSize」。

可是建議加上引號，而且用駝峯式的寫法，這樣保持和javascript中一致，養成良好的習慣。

$("p").css("opacity", "0.5"); // 設置p元素的透明度。對透明度的設置，能夠直接使用此屬性，jQuery已經作好了兼容性處理

$("p").css("height"); // 獲取p元素的height屬性

$("p").height(); // 獲取p元素當前計算的高度值

$("p").height(100); // 設置p元素的高度爲100px

$("p").height("10em"); // height方法設置高度時，若是傳遞的是一個數字，則默認單位是px，若是是其餘單位，則必須傳遞字符串

ps: 在jQuery1.2版本之後的height()方法，能夠用來獲取window和document的高度。css()方法獲取的高度值與樣式設置值有關，有可能會獲得「auto」，也可能獲得「10px」，這樣的字符串；而height方法獲得的高度是實際頁面中的高度。

一樣地，width()方法和height()方法相似。

$("p").offset(); // 獲取p元素相對於文檔的偏移量，返回的對象包含兩個屬性，top和left。僅對可見元素有效

$("p").offset({"top":"10px", "left":"20px"}); // 設置p元素的相對偏移量

$("p").position(); // 返回第一個匹配元素相對於父元素（position樣式爲relative,absolute）的位置，與offset同樣返回對象包括top和left屬性

還有 scrollTop()和 scrollLeft()方法，做用分別是：設置或返回匹配元素相對滾動條頂部和左邊的偏移量。

jQuery中的事件和動畫

基本事件綁定

最重要的事件綁定的方式是利用bind()方法。調用格式爲：

bind(type, [,data], fn);

bind()方法有三個參數，具體以下：

第一個參數是事件類型，包括：blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover,

mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup和error等。還能夠是自定義的事件名稱。

第二個參數是可選參數，做爲event.data屬性值傳遞給事件對象的額外數據對象。

第三個參數則是用來綁定的處理函數。

ps：jQuery的事件綁定類型比普通的javascript事件綁定少了"on"。例如鼠標單擊事件在jQuery中對應的是click事件，而在javascript中對

應的是onclick()函數。

$("#btn").bind("click", function() {

alert("你點擊了名稱爲：" + $(this).val() + "的按鈕！");

});

ps:像click, mouseover和mouseout這類事件，在程序中常常會用到，jQuery提供了一套簡寫的方法。如上面的例子：

$("#btn") .click(function() {

alert("你點擊了名稱爲：" + $(this).val() + "的按鈕！");

});

他們之間惟一的區別就是，下面的寫法減小了代碼量。

合成事件

jQuery中有兩個合成事件——hover()和toggle()方法。他們都是jQuery的自定義方法。

hover()方法：

hover(enter, leave);

hover()方法用於模擬光標懸停事件。當光標移動到元素上時，會觸發指定的第一個函數（enter）；當光標移出元素時，會觸發指定的

第二個函數（leave）。

例如，當鼠標移動到class爲top的div元素上時，則顯示他下一個相鄰的兄弟節點class爲content的div元素；當鼠標移開時，則隱藏。以下：

$("div.top").hover(function() {

$(this).next("div.content").show();

}, function() {

$(this).next("div.content").hide();

});

上面的代碼效果與下面的代碼效果徹底相同：

$("div.top").mouseover(function() {

$(this).next("div.content").show();

});

$("div.top").mouseout(function() {

$(this).next("div.content").hide();

});

ps: css中有僞類選擇符，例如「:hover」，當用戶光標懸停在元素上時，會改變元素的外觀。在大多數符合規範的瀏覽器中，僞類選擇符可

以用於任何元素，然而在IE6中，僞類選擇符只能用於超連接。對於其餘元素可使用jQuery的hover()方法。

hover()方法準確來講是替代jQuery中的bind("mouseenter")和 bind("mouseleave")，而不是替代 bind("mouseover")和 bind("mouseout")。

toggle()方法：

toggle(fn1, fn2, fn3, ... fnN);

toggle()方法用於模擬鼠標連續單擊事件。第一次單擊觸發第一個函數fn1，第二次單擊觸發第二個函數fn2，若是有多個函數則依次觸發，

直到最後一個函數，而後依次再重複。

$("#btn").toggle(function() {

$(this).next("div.content").show();

}, function() {

$(this).next("div.content").hide();

});

toggle()方法在jQuery中還有另一個做用：切換元素的可見狀態。若是元素是可見的，單擊切換後則變爲隱藏；若是是隱藏的，單擊

切換後則變爲可見的。所以上面的代碼還能夠寫成以下方式：

$("#btn").toggle(function() {

$(this).next("div.content").toggle();

}, function() {

$(this).next("div.content").toggle();

});

事件冒泡

在頁面上能夠有多個事件，也能夠多個元素響應同一事件，假設頁面上有兩個元素，其中一個元素嵌套在另一個元素裏，而且都綁定了

click事件，同時body元素上也綁定了click事件。那麼會依次由內向外觸發click事件。這就是事件的冒泡。

可是有時候這並非咱們所想要的，所以咱們須要中止事件冒泡。咱們能夠將事件對象傳入處理函數，而後利用jQuery中提供的stopProgation()方法來中止事件冒泡。好比：

$("span").bind("click", function(event) {

alert($(this).html());

event.stopProgation(); // 中止事件冒泡

});

這樣就只會觸發span元素的click事件。

有時候咱們還須要阻止元素的默認行爲，好比，點擊超連接後會跳轉，點擊提交按鈕表單會提交。在jQuery中提供了preventDefault()方法來阻止元素的默認行爲。好比：

$("#sub").bind("click", function(event) {

var username = $("#username").val();

if (username == "") {

$("#msg").html("<p>用戶名不能爲空!</p>");

event.preventDefault(); // 阻止默認行爲（表單的提交）

}

});

ps: 若是想同時對事件對象中止冒泡和默認行爲，能夠在事件處理函數中返回false。這是對事件對象同時調用 stopProgation()和 preventDefault()方法的簡寫形式。

事件對象的屬性

jQuery對事件對象的經常使用屬性進行了封裝，以兼容各大主流了瀏覽器，而不須要判斷瀏覽器的類型：

① event.type() // 事件類型

② event. stopProgation() // 中止事件冒泡

③ event.preventDefault() // 阻止元素默認行爲

④ event. target() // W3C在mouseover和mouseout這兩個觸發的事件對象裏添加了一個叫relatedTarget的屬性，來表示與事件相關的DOM元素。mouseover中relatedTarget指向鼠標來自的元素，而mouseout中的relatedTarget指向的是鼠標去向的那個元素。

⑤ event.pageX(), event.pageY() // 得到光標所在的x座標和y座標

⑥ event.which() // 在單擊事件中獲取鼠標的左，中，右鍵。分別由1，2，3表示。

⑦ event.metaKey() // 爲鍵盤事件中獲取ctrl按鍵。

⑧ event.originalEvent() // 指向原始的事件對象

移除事件

使用unbind()方法就能夠實現這一點，語法結構：

unbind([type], [, data]);

第一個參數是事件類型，第二個參數是將要移除的函數，具體說明以下：

① 若是沒有參數，則移除全部綁定的事件

② 若是提供了事件類型的參數，則只刪除該類型的事件

③ 若是在綁定時傳遞的處理函數做爲第二個參數，則只有這個特定的時間內處理函數被刪除

另外對於只須要觸發一次，隨後就要當即解除綁定的狀況，jQuery提供了一種簡寫方法—— one()方法。它與bind()方法，語法結構相同。

模擬操做

上面的例子都是須要用戶點擊等方式去觸發事件，可是有時候咱們須要的模擬用戶操做，來達到單擊的效果。在jQuery中咱們能夠用trigger()方法來完成模擬操做。例以下面的方式就能夠觸發btn按鈕的click事件：

$("#btn").trigger("click");

能夠用直接簡寫的方式來達到效果：

$("#btn").click();

咱們還能夠觸發自定義事件：

$("#btn")bind("myclick", function() {

$("test").append("<p>自定義的事件！</p>");

});

想要觸發這個事件，能夠這樣：

$("#btn").trigger("myclick");

動畫效果

$("element").hide(); // 隱藏匹配元素

$("element").show(); // 顯示匹配元素

show()方法和hide()方法在不帶任何參數的狀況下，至關於css("display", "none/block/inline")，做用是當即顯示或隱藏元素。能夠爲方

法指定一個速度參數：

$("element").show("slow"); // 在600毫秒內顯示匹配元素，其餘參數還有normal和fast，分別對應400毫秒和200毫秒。

$("element").show(1000); // 在1000毫秒內顯示匹配元素。速度參數也能夠是數字，單位是毫秒。

$("element").fadeOut(); // 在指定的一段時間內改變元素的不透明度，直到元素徹底消失(display:none)。

$("element").fadeIn(); // 和fadeOut()方法相反。

$("element").slideUp(); // 將指定元素由下往上延伸顯示，只對不可見元素有效

$("element").slideDown(); // 和slideUp()方法相反。

ps: jQuery中的任何動畫效果，均可以指定三種速度參數，即「slow」、「normal」，「fast」（時間長度分別爲：0.六、0.四、0.2秒）。用數字表

示就不須要加引號。

自定義動畫方法animate() :

animate(params, speed, callback);

params:一個包含樣式屬性及值的映射。好比，{property:"value1", property:"value2", .....}
speed:速度參數，可選。
callback:在動畫完成時執行的函數，可選。

ps: callback回調函數，適用於jQuery全部動畫效果分方法，$("element").slideDown("normal", function() { // 在此效果完成後作的事情});

中止動畫和判斷是否處於動畫狀態

stop()方法語法結構：

stop([clearQuery], [, gotoEnd]);

參數clearQuery和gotoEnd都是可選參數，爲boolean值。 clearQuery表示是否清空未執行完的動畫隊列，gotoEnd表明是否將正在執行的

動畫跳轉到末狀態。

$("element").is(":animated"); // 判斷元素是否處於動畫狀態

jQuery中的ajax

load()方法:

load(url, [, data], [, callback]);

參數說明：

url：請求的URL地址

data：可選，發送到服務器的key/value數據

callback：可選，請求完成時的回調函數，不管請求是否成功

$("#resText").load("test.html"); // 將請求的結果數據，設置到指定選擇器元素中

$("#resText").load("test.html .para"); // 只選擇class爲para的元素，設置到指定選擇器元素中

$("#resText").load("test.php", function() { // load方法傳遞方式是根據data參數決定的，無參傳遞則是GET

//.....

});

$("#resText").load("test.php", {name:"nange", age:"22"}, function() { // 有參則是POST

//.....

});

$("#resText").load("test.php", function(responseText, textStatus, XMLHttpRequest) {

// responseText ：請求返回的內容

// textStatus ：請求狀態：success， error， notmodified, timeout 4種

// XMLHttpRequest ： XMLHttpRequest對象

});

$.get()方法:

此方法採用GET方式來進行異步請求，它的結構爲：

$.get(url, [, data], [, callback], [, type]);

參數說明：

url: 請求地址

data: 可選，發送至服務器的key/value數據

callback: 可選，載入成功時的回調函數，自動將請求就結果和狀態傳遞給該方法

type: 可選，服務器返回內容的格式。包括：html，xml，script， json， text和_default

$.get("get1.do", {

userName : $("#userName").val(),

content : $("# content ").val()

}, function(data, textStatus) {

// data : 返回的內容

// textStatus : 請求狀態

});

ps : $.get()方法回調函數只有兩個參數。如上所示

$.post()方法:

和$.get()方法惟一區別就是傳遞的方式不一樣，爲POST方式

$.getScript()方法:

在須要時，動態的獲取javascript代碼

$.getScript("test.js", function() {

// ....

});

$.getJSON()方法:

用於加載JSON文件，與$.getScript()方法的用法相同

$.getJSON("test.json", function(data) {

//data : 返回的數據

});

$.ajax(options)方法:

$.ajax()方法是jQuery最底層的ajax實現，該方法只有一個參數，但在這個對象裏包含了$.ajax()方法所須要的請求設置以及回調函數

等信息，參數以key/value形式存在，全部的參數都是可選的，經常使用參數以下：

url: 發送請求的地址

type: 請求方式（POST/GET），默認爲GET

timeout: 設置請求超時的時間（毫秒）

data: 發送到服務器的數據。

dataType: 預期服務器返回的數據類型。若是不指定，jQuery將自動根據HTTP包MIME信息返回responseXML或responseText，並

做爲回調函數參數傳遞。

beforeSend: 發送請求前能夠修改XMLHttpRequest對象的函數，例如添加自定義HTTP頭。XMLRequest對象是惟一的參數。

complete: 請求完成後調用的回調函數（請求成功和失敗時均調用）。參數爲XMLHttpRequest和 textStatus。

success: 請求成功後調用的回調函數。參數爲data，textStatus。

error: 請求失敗時調用的回調函數。參數爲XMLHttpRequest，textStatus，errorThrown(捕獲的錯誤對象)

global: 默認爲true，表示是否觸發全局ajax事件。設置爲false，將不會觸發全局ajax事件，AjaxStart和AjaxStop可用於控制Ajax

事件

用$.ajax()方法能夠用來替換前面提到的全部方法，替換$.getJSON()方法以下：

$("#send").click(functiion() {

$.ajax({

type : "get",

url : "getjson.do",

dataType : "json",

success : function(data) {

$("#resText").empty();

var html = "";

$.each(data, function(commentIndex, comment) {

html += "<div class='comment'>" + comment["username"] + "<p class='para'>" + comment["content"] + " </p></div>"

});

$("#resText").html(html);

});

serialize()方法:

在表單提交採用ajax方法時，須要設置每一個字段的值，用於服務器提交，可是當字段不少時，此時就很是的麻煩了。使用序列化的方式

能夠使問題變得及其簡單，並且適用於任意多個字段。好比：

$("#send").click(function() {

$.get("test.php", $("#form1").serialize(), function(data, textStatus) {

$("#resText").html(data); // 將返回的數據添加到頁面上

});

由於此方法做用與jQuery對象，因此不止表單能使用它，其餘選擇器選取的元素也都能使用它，好比：

$(":checkbox, :radio").serialize(); // 將複選框和單選框的值序列化爲字符串形式，只會將選中的值序列化

serializeArray()方法:

此方法和serialize()方法相比，該方法不是返回字符串，而是返回JSON對象。

$(":checkbox, :radio").serializeArray(); // 返回JSON對象

$.param()方法:

它是serialize()方法的核心，用來對一個數組或對象按照key/value進行序列化。

好比將一個普通的對象序列化：

var obj = {a:1, b:2, c:3};

var k = $.param(obj);

alert(k); // 輸出a=1&b=2&c=3

ajax全局事件

ajax請求開始時，會觸發ajaxStart()方法的回調函數；當ajax請求結束時會觸發ajaxStop()方法的回調函數。這些方法都是全局方法，只要

有ajax請求就會觸發他們。好比：

<div id="loading">加載中......</div>

$("#loading").ajaxStart(function() {

$(this).show();

}).ajaxStop(function() {

$(this).hide();

});

ajax全局事件中還有幾個方法：

ajaxComplete(callback) : ajax請求完成時執行的函數

ajaxError(callback) : ajax請求發送錯誤時執行的函數

ajaxSend(callback) : ajax請求發送前執行的函數

ajaxSuccess(callback) : ajax請求成功時執行的函數

ps： 若是想使某個ajax請求不受全局方法的影響，那麼能夠：

$.ajax({

url : "test.html",

global : false // 不會觸發全局ajax事件

});

jQuery中的插件

jQuery提供了兩個用於擴展其功能的方法，即jQuery.fn.extend()方法和jQuery.extend()方法。

jQuery.fn.extend() 用於封裝對象方法的插件；jQuery.extend()用於封裝全局函數和選擇器的插件。這兩個方法都接受一個參數，

類型爲Object。Object的「名稱/值」對，分別表明函數名和函數主體。

好比寫一個color的插件：

;(function($) {

$.fn.extend({

"color" : function(value) {

if (value == "undefined") {

return this.css("color");

} else {

return this.css("color", value);

}

});

})(jQuery);

此時color()插件的功能就實現了，經過該插件就能夠獲取和設置元素的color值。

完結。。。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。