本筆記翻譯自：可視JQuery
1.$()的用法
1.1 $(html) ＝>根據(jù)ＨＴＭＬ參數(shù)動態(tài)建立一個jquery對像
例子：$(”<div>hello</div>”).appendTo(”#body”),動態(tài)的創(chuàng)建一個div element插入到ID為
body的element中去
1.2 $(element) =>把節(jié)點對像轉(zhuǎn)化成一個jquery對像
例子:$(document.body).background( “black” );
1.3 $(function) =>是$(doucment).ready()的快捷鍵．當(dāng)頁面加載結(jié)束后才會執(zhí)行function．
$(function)可以調(diào)用多次，相當(dāng)于綁定多個$(function)
eg: $(function(){
//document is ready
})
1.4 $(expr,context)=>在一定的范圍（context）內(nèi)根據(jù)搜索條件(expr)搜索出jQuery對像
eg: 1. $(’span>p’) :找出所有span中的p結(jié)點．
2.$(’input:radio’,document.forms[0])搜索出第一個表單中的radio
2. $.extend(prop)向jquery命名空間中添加方法,用此方法可以方便的對jquery進(jìn)行擴展
$.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
alert($.min(3,6)); //顯示3
alert($.max(3,6));//顯示6
3. $.noConflict() 取消$代替jQuery.
例如:
jQuery.noConflict(); // Do something with jQuery
jQuery(”div p”).hide();
// Do something with another library’s $()
$(”content”).style.display = ‘none’;
4. each(function) 對所以符合條件的結(jié)點做為參數(shù)調(diào)用function
例如:
$(”img”).each(function(i){ this.src=”test” + i + “.jpg”; });
結(jié)果：<img/><img/>==》<img src=”test0.jpg”/><img src=”test1.jpg”/>
5．eq(pos)取得對像element數(shù)組的第Ｎ＋１個element
例如：$(”p”).eq(1)
<p>This is just a test.</p><p>So is this</p>=》<p>So is this</p>
6. get() 取得所有的element數(shù)組
例如: $(”img”).get();
<img src="test1.jpg"/> <img src="test2.jpg"/> ===>
[ <img src="test1.jpg"/> <img src="test2.jpg"/> ]
get(num)可以取得指定的element
例如:$("img").get(1)
<img src="test1.jpg"/> <img src="test2.jpg"/> ===>[<img src="test2.jpg"/> ]
7．index(subject) : 查找相應(yīng)節(jié)點的位置，從０開始計數(shù).如果沒找到返回-1
eg: <div id=”foobar”><b></b><span id=”foo”></span></div>
$("*").index( $('#foobar')[0] ) =>0
$("*").index( $('#foo')[0] ) => 2
$("*").index( $('#bar')[0] )=> -1
8. length 返回節(jié)點的個數(shù)
eg:<img src="test1.jpg"/> <img src="test2.jpg"/>
$("img").length => 2
同樣的方法還有size()
$("img").size() => 2;
9. lt(pos) 刪除一個節(jié)點
eg:<p>This is just a test.</p><p>So is this</p>
$("p").lt(1) ==>[ <p>This is just a test.</p> ]
10. addClass 給一個element添加class可以添加多個
eg: <p>Hello</p>
$("p").addClass("selected")=>[ <p class="selected">Hello</p> ]
$("p").addClass("selected highlight")=>
[ <p class="selected highlight">Hello</p> ]
11. attr(name) 取得element的指定屬性值
eg: <img src="test.jpg"/>
$("img").attr("src") =>test.jpg;
attr(key,value) 設(shè)置屬性
attr(key,function) 調(diào)用相應(yīng)的方法處理后的返回值用來設(shè)置屬性
attr(properties) 批量的設(shè)置element的屬性值
eg: <img/>
$("img").attr({ src: "test.jpg", alt: "Test Image" });
==> <img src="test.jpg" alt="Test Image"/>
$("img").attr("src","test.jpg")=><img src="test.jpg"/>
以下兩個方法等價:
$("img").attr("title", "${this.src}")
$("img").attr("title", function() { return this.src })
==><img src="test.jpg" title="test.jpg" />
12 html 取得element的html代碼
eg: <div><input/></div>
$("div").html() => <input/>;
html(val) 設(shè)置element的html代碼
eg: <div><input/></div>
$("div").html("<b>new stuff</b>") ==><div><b>new stuff</b></div>;
13 removeAttr(name) 刪除屬性
eg: <input disabled=”disabled”/>
$(”input”).removeAttr(”disabled”)=><input/>
14 removeClass(class) 刪除樣式，當(dāng)class是空時刪除所有的樣式，如果class為指定樣式則刪
指定樣式
eg: <p class=”highlight selected first”>Hello</p>
$(”p”).removeClass(”selected highlight”)=>[ <p class=”first”>Hello</p> ]
$(”p”).removeClass() =>[ <p>Hello</p> ]
15. text() 取得element中的內(nèi)容text(val) 設(shè)置element內(nèi)容text與html差不多，只是text會把<,>用
html標(biāo)識符替換
eg: <p><b>Test</b> Paragraph.</p><p>Paraparagraph</p>
$(”p”).text() =>Test Paragraph.Paraparagraph;
<p>Test Paragraph.</p>
$(”p”).text(”<b>Some</b> new text.”);==>
<p><b>Some</b> new text.</p>
$(”p”).text(”<b>Some</b> new text.”, true) ==>
<p>Some new text.</p>
16.toggleClass(class) 這是一個比較有用的方法，就是當(dāng)element存在參數(shù)中的樣式的時候
取消，如果不存在就設(shè)置此樣式
eg:<p>Hello</p><p class="selected">Hello Again</p>
$("p").toggleClass("selected")==>
[ <p class="selected">Hello</p>, <p>Hello Again</p> ]
17 val() 取得第一個element的vlaue值 val(val) 設(shè)置屬性的值
eg: <input type="text" value="some text"/>
$("input").val() == >"some text";
$("input").val("test")==><input type="text" value="test"/>;
18 after(content)給相關(guān)的element從后面插入節(jié)點
eg: <p>I would like to say: </p>
$("p").after("<b>Hello</b>")==><p>I would like to say: </p><b>Hello</b>
<b>Hello</b><p>I would like to say: </p>
$("p").after( $("b") )==><p>I would like to say: </p><b>Hello</b>;
21 before(content)與after相反是插入到前面
eg: <p>I would like to say: </p>
$("p").after("<b>Hello</b>")==>><b>Hello</b><p>I would like to say: </p
19 append(content) 與上面不同的是append是添加把content做為子element
eg: <p>I would like to say: </p>
$("p").append("<b>Hello</b>")＝＞<p>I would like to say: <b>Hello</b></p>;
eg: <p>I would like to say: </p><b>Hello</b>
$("p").append( $("b") )==>;
<p>I would like to say: <b>Hello</b></p>
20 appendto(content)與append剛好相反
<p>I would like to say: </p><div id="foo"></div>
$("p").appendTo("#foo")==>
<div id="foo"><p>I would like to say: </p></div>;
21 prepend(content) 添加到element里面的前部．與append的方位不一樣
<p>I would like to say: </p>
$("p").prepend("<b>Hello</b>")==><p><b>Hello</b>I would like to say: </p>;
22 prependTo(content) 與prepend的添加對像相反．
<p>I would like to say: </p><div id="foo"><b>Hello</b></div>
$("p").prependTo("#foo") ==>
<div id="foo"><p>I would like to say: </p><b>Hello</b></div>;
23 clone(deep) 克隆一個新的element．參數(shù)deep為flase里不包括子element
<b>Hello</b><p>, how are you?</p>
$("b").clone().prependTo("p")==><b>Hello</b><p><b>Hello</b>, how are you?</p>
24.empty() 刪除所有的內(nèi)部節(jié)點
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
$("p").empty()==>[ <p></p> ]
25. insertAfter(content) 與after差不多．
$(a).after(b) === $(b).insertAfter(a)
26. insertBefore(content) 與 before差不多
$(a).before(b) === $(b).insertBefore(a)
27. remove(expt) 刪除條件是expt的相應(yīng)的element,當(dāng)expt為空時．全部刪除
<p class="hello">Hello</p> how are <p>you?</p>
$("p").remove(".hello")==>how are <p>you?</p>;
28. wrap(html) 把節(jié)點插入到html生成的節(jié)點里面．要注意的是html節(jié)點中不能含有內(nèi)容只能
是節(jié)點的結(jié)構(gòu)．如果想加的話只能在嵌入后再插入內(nèi)容
<p>Test Paragraph.</p>
$("p").wrap("<div class='wrap'></div>")==>
<div class='wrap'><p>Test Paragraph.</p></div>
注html也可以直接用一個element代替
29 add(params) 在$所取到的節(jié)點數(shù)組中添加新的節(jié)點．
參數(shù)可以是expr, html,element
eg: 1.<p>Hello</p><span>Hello Again</span>
$(”p”).add(”span”)==>[ <p>Hello</p>, <span>Hello Again</span> ]
2.<p>Hello</p>
$(”p”).add(”<span>Again</span>”)==>
[ <p>Hello</p>, <span>Again</span> ]
3. <p>Hello</p><p><span id=”a”>Hello Again</span></p>
$(”p”).add( document.getElementById(”a”) )===>
[ <p>Hello</p>, <span id=”a”>Hello Again</span> ]
30 children(expr)取得子節(jié)點,當(dāng)expr為空時，取得所有的子節(jié)點
eg<div><span>Hello</span><p class=”selected”>Hello Again</p><p>And Again</p></div>
$(”div”).children()==>[><span>Hello</span><p class=”selected”>Hello Again</p><p>And
Again</p> ]
$(”div”).children(”.selected”)==>
[ <p class="selected">Hello Again</p> ]
31 contains(str)找出字節(jié)點中包含有str的節(jié)點．str起到過濾做用
eg: <p>This is just a test.</p><p>So is this</p>
$("p").contains("test")==>[ <p>This is just a test.</p> ]
32. filter(expression)過濾找出符合expression的節(jié)點
eg:<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
$("p").filter(".selected")==>><p class="selected">And Again</p>
$("p").filter(".selected, :first")==>
[ <p>Hello</p>, <p class="selected">And Again</p> ]
filter(filter_func)通過函數(shù)來選擇是否過濾，filter_func返回true表示過濾
<p><ol><li>Hello</li></ol></p><p>How are you?</p>
$("p").filter(function(index) { return $("ol", this).length == 0; })==>
[ <p>How are you?</p> ]
33. find（expr）從子節(jié)點找出符合expr的．與filter的區(qū)別是filter過濾掉＄數(shù)組中的節(jié)點
find過濾到的是子節(jié)點
eg: <p><span>Hello</span>, how are you?</p>
$("p").find("span")==>[ <span>Hello</span> ];
34. is(expr) 判斷是否符合條件，如果$數(shù)組的所有節(jié)點都不符合條件返回false，
只要有一個符合條件就返回true
eg: <form><p><input type="checkbox" /></p></form>
$("input[@type='checkbox']").parent().is("form")==>false
$("input[@type='checkbox']").parent().is("p")==>true
35 next(expr) 取得最近節(jié)點最近那個節(jié)點.expr為空時取得所有節(jié)點
eg:1.<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>
$("p").next()==>[ <p>Hello Again</p>, <div><span>And Again</span></div> ]
2.<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>
$("p").next(".selected")==>[ <p class="selected">Hello Again</p> ]
36. not(el),not(expr),not(elems)與add相反，刪除符合條件的節(jié)點．
eg:1. <p>Hello</p><p id="selected">Hello Again</p>
$("p").not( $("#selected")[0] )==>[ <p>Hello</p> ]
$("p").not("#selected")==>[ <p>Hello</p> ]
2.<div><p>Hello</p><p class="selected">Hello Again</p></div>
$("p").not( $("div p.selected") )==>[ <p>Hello</p> ]
37 parent(expr) 取得父節(jié)點
eg:1.<html><body><div><p><span>Hello</span></p><span>Hello
Again</span></div></body></html>
$("span").parents()==>[ <body>...</body>, <div>...</div>, <p><span>Hello</span></p> ]
2.<html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html>
$("span").parents("p")==>[ <p><span>Hello</span></p> ]
38 prev(expr) 與next相反,next取得是與節(jié)點相鄰后面的．prev取得相鄰前面的
eg: 1.<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>
$("p").prev(".selected")==>[ <div><span>Hello</span></div> ]
2.<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
$("p").prev()==>[ <div><span>Hello Again</span></div> ]
39 siblings(expr) 取得相鄰兩邊的節(jié)點是．next,與prev的結(jié)合體
jquery與dom相關(guān)的操作先講到這里，下回接著講CSS相關(guān)操作
40 1/. CSS(name)讀取樣式屬性值
eg:<p style=”color:red;”>Test Paragraph.</p>
$(”p”).css(”color”)==>”red”;
2/css(properties)設(shè)置style
eg:<p>Test Paragraph.</p>
$("p").css({ color: "red", background: "blue" })==>
<p style="color:red; background:blue;">Test Paragraph.</p>;
3/css(key, value)設(shè)置單個樣式屬性,如果設(shè)置的值是數(shù)字的話,會被自動轉(zhuǎn)化為像素單位
eg : <p>Test Paragraph.</p>
$("p").css("color","red")==><p style="color:red;">Test Paragraph.</p>;
$("p").css("left",30)==><p style="left:30px;">Test Paragraph.</p>;
41 1/height()取得當(dāng)前匹配節(jié)點數(shù)組中的第一個節(jié)點的高的值
eg: <p>This is just a test.</p>
$("p").height() ==>300;
2/ height(val) 設(shè)置所有匹配的節(jié)點的高,如果val的單位不是ex ,%,那么單位自動設(shè)為px
eg: <p>This is just a test.</p>
$("p").height(20)==><p style="height:20px;">This is just a test.</p>;
42 width() 設(shè)置寬度,width(val)設(shè)置高度.用法與height一樣
以上是基本的CSS的js用法,下面主要記錄jQuery的一些功能函數(shù)
43 $.browser 用于判斷瀏覽器的分別為safari,opera, msie, mozilla.這些方法要等DOM ready
后才能使用
eg: if($.browser.safari) {
$( function() { alert("this is safari!"); } ); }
44. $.each(obj, fn) 這個方法與$().each()不一樣,前者可以迭代任務(wù)數(shù)組與對像,后者只能迭代
jQuery對象
$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });
45 $.extend(target, prop1, propN)繼承多個對象.
target被擴展的對象.prop1,第一個父對象,propN其它被繼承的對象
eg: 1. var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
====>settings == { validate: true, limit: 5, name: "bar" }
2.var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend({}, defaults, options);
===>settings == { validate: true, limit: 5, name: "bar" }
46 $.grep(array, fn, inv)用fn過濾array,當(dāng)fn返回true時array元素保留在數(shù)組中
eg : $.grep( [0,1,2], function(i){ return i > 0; });
==>[1, 2]
47 $.map(array, fn)通過fn修改array中的值
當(dāng)函數(shù)返回值為null里,array元素將被刪除,當(dāng)返回是數(shù)組時,返回的數(shù)組將與原數(shù)組合并
eg: 1.$.map( [0,1,2], function(i){ return i + 4; });
==>[4, 5, 6]
2.$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
==>[2, 3]
3.$.map( [0,1,2], function(i){ return [ i, i + 1 ]; });
==>[0, 1, 1, 2, 2, 3]
48. $.merge(first, second)兩個數(shù)組進(jìn)行合并,刪除重復(fù)的值
$.merge( [0,1,2], [2,3,4] )==>[0,1,2,3,4]
$.merge( [3,2,1], [4,3,2] )==>[3,2,1,4]
49 $.trim(str)去除字符串兩端的空格,一個十分熟悉常用的方法
$.trim(" hello, how are you? ")==>"hello, how are you?";
主要記錄jQuery事件響應(yīng)的處理
50. bind(type, data, fn)對所有選定的element判斷事件,type是事件類型,data是參數(shù),fn是事處理方法
.
eg:1. $(”p”).bind(”click”, function(){ alert( $(this).text() ); });
2. function handler(event) { alert(event.data.foo); }
$(”p”).bind(”click”, {foo: “bar”}, handler)==>alert(”bar”)
51. blur() 觸發(fā)blur方法,blur(fn)設(shè)置blur函數(shù)
eg: <p>Hello</p>
$(”p”).blur( function() { alert(”Hello”); } );==>
<p onblur=”alert(’Hello’);”>Hello</p>
52. change(fn)設(shè)置onchange事件的方法
eg:<p>Hello</p>
$(”p”).change( function() { alert(”Hello”); } );==><p onchange=”alert(’Hello’);”
>Hello</p>
53 click()觸發(fā)onclick事件, click(fn)設(shè)置onclick方法
54. dblclick(fn)設(shè)置ondblclick方法
55.error(fn)設(shè)置error方法
56 focus()觸發(fā)onfocus,focus(fn)設(shè)置focus方法
eg:<p>Hello</p>
$(”p”).focus( function() { alert(”Hello”); } );
==><p onfocus=”alert(’Hello’);”>Hello</p>
57 hover(over, out) 設(shè)置mouse移入以及mouse移出時所觸發(fā)的事件.
eg: $("p").hover(function(){
$(this).addClass("over");
},function(){
$(this).addClass("out");
});
58 keydown(fn),keypress(fn),keyup(fn),按鍵盤相關(guān)的操作分別對應(yīng)onkeydown,
onkeypress,onkeyup.
59 mousedown(fn),mousemove(fn),mouseout(fn),mouseover(fn),mouseup(fn)這些是mouse
相關(guān)的操作分別對應(yīng)onmousedown,onmousemove,onmouseout,onmouseover,onmouseup.
60 load 當(dāng)element load事件發(fā)生時觸發(fā)
eg <p>Hello</p>
$("p").load( function() { alert("Hello"); } );==>
<p onload="alert('Hello');">Hello</p>
61.one(type, data, fn)與bind差不多,最大的區(qū)別是前者只運行一次后便不再響應(yīng).如果運行后
不想繼續(xù)運行默認(rèn)的方法只要fn中返回值return false就可以了.
eg: <p>Hello</p>
$("p").one("click", function(){ alert( $(this).text() ); });==>alert("Hello")
62.ready(fn)當(dāng)dom 結(jié)構(gòu)載入完畢的時候.用此方法時,請不要在onload方法里面寫代碼.不然就不
會觸發(fā)ready事件
eg .1.$(document).ready(function(){ Your code here... });
2.jQuery(function($) {
// Your code using failsafe $ alias here...
});
63.resize 設(shè)置onresize方法.當(dāng)大小改變時觸發(fā)
eg: <p>Hello</p>
$("p").resize( function() { alert("Hello"); } );
<p onresize="alert('Hello');">Hello</p>
64 scroll(fn) 設(shè)置onscroll方法
65.select()觸發(fā)onselect方法.select(fn)設(shè)置select方法
66. submit()提交表單,submit(fn)設(shè)置submit方法.
eg: $("#myform").submit( function() {
return $("input", this).val().length > 0; } );
<form id="myform"><input /></form>
67 toggle(even, odd),even當(dāng)偶數(shù)單擊時運行,odd當(dāng)奇數(shù)單擊時運行.用unbind(’click’)刪除
eg: $("p").toggle(function(){
$(this).addClass("selected");
},function(){
$(this).removeClass("selected");
});
68 trigger(type)觸發(fā)相應(yīng)的type方法
eg: <p click="alert('hello')">Hello</p>
$("p").trigger("click")==>alert('hello')
69 unbind(type, fn)與bind相反,
1.unbind()刪除所有的綁定.
eg:<p onclick="alert('Hello');">Hello</p>
$("p").unbind()==>[ <p>Hello</p> ]
2.unbind(type)刪除指定的綁定
eg:<p onclick="alert('Hello');">Hello</p>
$("p").unbind( "click" )==>[ <p>Hello</p> ]
3.unbind(type, fn)刪除指定type的指定fn
eg:<p onclick="alert('Hello');">Hello</p>
$("p").unbind( "click", function() { alert("Hello"); } )
==>[ <p>Hello</p> ]
70 unload(fn)當(dāng)頁面unload的時候觸發(fā)方法
eg: <p>Hello</p>
$("p").unload( function() { alert("Hello"); } );==>
<p onunload="alert('Hello');">Hello</p>
主要關(guān)于如何用jQuery處理特效 （70-76）
71. animate(params, speed, easing, callback)動畫特效.
params:是動畫的設(shè)置,用來表示動畫的展現(xiàn)以及結(jié)束,
speed:動畫的速率可以是(”slow”, “normal”, or “fast”)也可以是毫秒數(shù).eg: 1000
easing:默認(rèn)是’linear’,如想用其它參數(shù),就要添加jQuery的特效插件.
callback: 當(dāng)動畫完成時的調(diào)用的函數(shù).
eg:
1. $(”p”).animate({ height: ‘toggle’, opacity: ‘toggle’ }, “slow”);
2. $(”p”).animate({ left: 50, opacity: ’show’ }, 500);
3. $(”p”).animate({ opacity: ’show’}, “slow”, “easein”);
72. fadeIn(speed, callback),fadeOut(speed, callback),fadeTo(speed, opacity, callback)
淡入,淡出效果,speed表示速度,可以用”slow,normal,fast”代替,也可以直接寫毫秒數(shù). callback
表示淡入,淡出后的調(diào)用的函數(shù).fadeTo表示淡入到某個透明度。opacity (Number):取值范圍就0-1
eg:
$("p").fadeTo("slow", 0.5, function(){
alert("Animation Done.");
});
73. hide(),hide(speed, callback).前者是把element隱藏用的是display:none的樣式。后
者是把element的長，寬，以及透明度都改變。callback表示動畫完成后調(diào)用的函數(shù)。speed表示速度
eg: 1. <p>Hello</p>
$("p").hide()==>[ <p style="display: none">Hello</p> ]
2.$("p").hide("slow",function(){alert("Animation Done.");}); //動畫隱藏
74. show(),show(speed, callback)這兩個方法與前兩個方法的行為相反。
eg: 1. <p style="display: none">Hello</p>
$("p").show()==>[ <p style="display: block">Hello</p> ]
2. $("p").show("slow",function(){ alert("Animation Done.");}); //動畫展現(xiàn)
75.slideDown(speed, callback),slideUp(speed, callback)，slideToggle(speed, callback)
slideDown是高度從0慢慢增加，slideUp是高度慢慢減小到0。
slideToggle表示一個相反的狀態(tài)。如果當(dāng)前狀態(tài)是slideDown后的狀態(tài)，那么執(zhí)行
slideToggle與運行slideUp一樣。如果當(dāng)前狀態(tài)是slideUp后的狀態(tài)，那么執(zhí)行
slideToggle與運行slideDown一樣
76. toggle(),如果element是hide狀態(tài)則show之。如果當(dāng)前狀態(tài)是show狀態(tài)，則hide之.
eg: <p>Hello</p><p style="display: none">Hello Again</p>
$("p").toggle()==>
[ <p style="display: none">Hello</p>, <p style="display: block">Hello Again</p> ]
77.$.getScript(url, callback)下載腳本文件,并運行.
eg:
$.getScript("test.js", function(){
alert("Script loaded and executed.");
});
78.$.post(url, params, callback) 用post的方式下載一個頁面返回XMLHttpRequest
url: 請求的頁面
params:表示請求的要發(fā)送的參數(shù).
callback: 請求結(jié)束后,調(diào)用的方法
eg:$.post(”test.cgi”,
{ name: “John”, time: “2pm” },
function(data){
alert(”Data Loaded: ” + data);
}
);
79. ajaxStart(callback) 當(dāng)ajax請求發(fā)送前,將觸發(fā)callback.
eg;
$("#loading").ajaxStart(function(){
$(this).show();
});
80. ajaxSend(callback)當(dāng)ajax請求發(fā)送時觸發(fā)callback,參數(shù)是XMLHttpRequest和settings請求設(shè)置
eg:
$("#msg").ajaxSend(function(request, settings){
$(this).append("<li>Starting request at " + settings.url + "</li>");
});
81.ajaxComplete(callback)當(dāng)一個ajax請求完成時調(diào)用callback.回調(diào)參數(shù)為XMLHttpRequest和settings
請求設(shè)置
eg:
$("#msg").ajaxComplete(function(request, settings){
$(this).append("<li>Request Complete.</li>");
});
82.ajaxSuccess(callback)當(dāng)一個ajax請求成功時調(diào)用回調(diào)參數(shù)為XMLHttpRequest和settings請求設(shè)置
eg:$("#msg").ajaxSuccess(function(request, settings){
$(this).append("<li>Successful Request!</li>");
});
83.ajaxError(callback)當(dāng)一個ajax請求失敗時調(diào)用回調(diào)參數(shù)為XMLHttpRequest和settings請求設(shè)置
eg:$("#msg").ajaxError(function(request, settings){
$(this).append("<li>Error requesting page " + settings.url + "</li>");
});
84.ajaxStop(callback)當(dāng)所有的ajax請求結(jié)束時,將觸發(fā)callback
eg:$("#loading").ajaxStop(function(){
$(this).hide();
});
85.load(url, params, callback)加載url的內(nèi)容,并把得到的內(nèi)容插入到DOM中去.
注意:避免去獲取script腳本.可以用$.getScript
url:請求的頁面,params:發(fā)送的參數(shù).
callback: 調(diào)用完成后的回調(diào)函數(shù).
eg: <div id="feeds"></div>
$("#feeds").load("feeds.html")==>
<div id="feeds"><b>45</b> feeds found.</div>;
86.loadIfModified(url, params,callback)功能與85點的load方法一模一樣.唯一的區(qū)別是,
當(dāng)服務(wù)器端根據(jù)LastModify判斷出沒有什么改動的話.就不進(jìn)行請求.也不進(jìn)行dom插入.
87.serialize()這是一個十分有用的方法.一般用來序列化進(jìn)行ajax請求的參數(shù).十分方便
eg:
<input type='text' name='name' value='John'/>
<input type='text' name='location' value='Boston'/>
$("input[@type=text]").serialize();
==>name=John&location=Boston
聯(lián)系客服
