jquery

JQuery

一．概要及基础

1.轻量级

2.强大的选择器

3.出色的dom操作的封装

4.可靠的事件处理机制

5.完善的ajax

6.不污染顶级变量

释放JQuery 对$符号的控制权

JQuery.noConflict();

7.出色的浏览器兼容性

8.链式操作方式

9.隐式迭代

10.行为层与结构层的分离

11.丰富的插件支持

12.完善的文档

13.开源

页面加载事件（可以写多个ready()）

$(document).ready(function(){

alert("hello world");

})

$(function(){

//Todo();

});

链式操作：JQuery 允许你在一句代码中操做任何与其相关联的元素，包括其子元素、父元

素等

//选择名称为myDiv 的元素，为其自身添加css1 的样式，然后再选择其所有子元素a，为其

移除css2 样式

$("#myDiv").addClass("css1").children("a").removeClass("css2");

Query 中获得一个对象的所有子元素内容

$("#myDiv").html()

JQuery 中的变量与DOM 中的变量

var $myVar = "";

var myVar = "";

DOM 对象转换成JQuery 对象

var obj = documnet.getElementById("myDiv");

var $obj = $(obj);

JQuery 对象转换成DOM 对象

var $obj = $("#myDiv");

var obj = $obj.get(0); //或者var obj = $obj[0];

二．选择器

JQuery 完善的处理机制

document.getElementById("test").style.color ="red"; //如果test 不存在，则页面出

现异常

$("#test").css("color","red"); //哪怕页面没有名称为test 的元素，也不会报错。它是

一个JQuery 对象

判断页面是否选择的对象

if( $(".class").length >0 ){

// todo something

}

基本选择器

$("#myDiv") //根据给定的ID 选择匹配的元素，返回：单个元素

$(".myClass") //根据给定的样式名称选择匹配的元素，返回：集合元素

$("div") //根据给定的元素名称选择匹配的元素，返回：集合元素

$("#myDiv,div.myClass,span") //根据给定的规则选择匹配的元素，返回：集合元素

$("*") //选择页面所有元素，返回：集合元素

层次选择器

$("div span") //选择所有DIV 元素下的所有SPAN 元素（所有后代元素），返回：集合元

素

$("div>span") //选择所有DIV 元素下的SPAN 子元素（仅子元素），返回：集合元素

$(".myClass+div") //选择样式名称为myClass 的下一个DIV 元素，返回：集合元素

$(".myClass+div") //等价于$(".myClass").next("div");

$(".myClass~div") //选择样式名称为myClass 之后的所有DIV 元素，返回：集合元素

$(".myClass~div") //等价于$(".myClass").nextAll();

$(".myClass").siblings("div") //选择样式名称为myClass 的元素的所有同辈DIV 元素

（无论前后），返回集合元素

过滤选择器（index从0开始）

$("div:first") //选择所有DIV 元素下的第一个DIV 元素，返回：单个元素

$("div:last") //选择所有DIV 元素下的最后一个DIV 元素，返回：单个元素

$("div:not(.myClass)") //选择所有样式不包括myClass 的DIV 元素，返回：集合元素

$("div:even") //选择所有索引是偶数的DIV 元素，返回：集合元素

$("div:odd") //选择所有索引是奇数的DIV 元素，返回：集合元素

$("div:eq(index)") //选择所有索引等于index 的DIV 元素，返回：集合元素

$("div:gt(index)") //选择所有索引大于index 的DIV 元素，返回：集合元素

$("div:lt(index)") //选择所有索引小于index 的DIV 元素，返回：集合元素

$(":header") //选择所有标题元素（h1,h2,h3），返回：集合元素

$("div:animated") //选择所有正在执行去画的DIV 元素，返回：集合元素

子元素过滤选择器（index从1开始）

$(":nth-child(index/even/odd)") //选择每个父元素下的第index/偶数/奇数个子元素，

返回：集合元素

$(":first-child") //选择每个父元素下的第一个子元素，返回：集合元素

$(":last-child") //选择每个父元素下的最后一个子元素，返回：集合元素

$("ul li:only-child") //在UL 元素中选择只有一个LI 元素的子元素，返回：集合元素

内容过滤选择器

$(":contains(text)") //选择所有内容包含text 的元素，返回：集合元素

$("div:empty") //选择所有内容为空的DIV 元素，返回：集合元素

$("div:has(span)") //选择所有含有SPAN 子元素的DIV 元素，返回：集合元素

$("div:parent") //选择所有含有子元素的DIV 元素，返回：集合元素

可见性选择器

$(":hidden") //选择所有不可见的元素（type="hidden"

），返回：集合元素

$(":visible") //选择所有可见的元素，返回：集合元素

属性过滤选择器

$("[id]") //选择所有含有id 属性的元素，返回：集合元素

$("[class=myClass]") //选择所有class 属性值是myClass 的元素，返回：集合元素

$("[class!=myClass]") //选择所有class 属性值不是myClass 的元素，返回：集合元素

$("[alt^=begin]") //选择所有alt 属性值以begin 开始的元素，返回：集合元素

$("[alt^=end]") //选择所有alt 属性值以end 结束的元素，返回：集合元素

$("[alt*=some]") //选择所有alt 属性值含有some 的元素，返回：集合元素

$("div[id][class=myClass]") //选择所有含有id 属性的并且class 属性值是myClass 的

元素，返回：集合元素

表单对象属性选择器

$("#myForm:enabled") //选择ID 属性为myForm 的表单的所有可用元素，返回：集合元素

$("#myForm:disabled") //选择ID 属性为myForm 的表单的所有不可用元素，返回：集合元

素

$("#myForm:checked") //选择ID 属性为myForm 的表单的所有所有被选中的元素，返回：

集合元素

$("#myForm:selected") //选择ID 属性为myForm 的表单的所有所有被选中的元素，返回：

集合元素

表单选择器

$(":input") //选择所有<input> <select> <button> <textarea>元素，返回：集合元素

$(":text") //选择所有单行文本框元素，返回：集合元素

$(":password") //选择所有密码框元素，返回：集合元素

$(":radio") //选择所有单选框元素，返回：集合元素

$(":checkbox") //选择所有复选框元素，返回：集合元素

$(":submit") //选择所有提交按钮元素，返回：集合元素

$(":image") //选择所有图片按钮元素，返回：集合元素

$(":reset") //选择所有重置按钮元素，返回：集合元素

$(":button") //选择所有按钮元素，返回：集合元素

$(":file") //选择所有上传域元素，返回：集合元素

$(":hidden") //选择所有不可见域元素，返回：集合元素

$(":text") //选择所有单选文本框元素，返回：集合元素

$(function(){

var $category = $("ul li:gt(5):not(:last)");

$category.hide();

var $toggleBtn = $("div.showmore >a");

$toggleBtn.click(funtion(){

if($category.is(":visible"))

{

$category.hide();

$(".showmore a span").css("backgroud", "url(down.gif)");

.text("显示全部");

$("ul li").removeClass("promoted");

}

else

{

$category.show();l

$(".showmore a span").css("background","url(up.gif)");

.text("简单显示");

$("ul li").filter(":contains(' 佳能'),:contains(' 尼康

')").addClass("promoted");

}

return false;

});

});

三．DOM操作

查找元素节点

var str = $("#myDiv").text(); //<div id="myDiv" title="hello">123</div>

alert(str); //结果：123

查找属性节点

var str = $("#myDiv").attr("title"); //<div id="myDiv" title="hello">123</div>

alert(str); //结果：hello

创建元素节点

var $li1 = $("<span></span>"); //传入元素标记，自动包装并创建第一个li 元素对象

var $li2 = $("<span></span>"); //第二个,创建时需要遵循XHTML 规则（闭合、小写）

$("#myDiv").append($li1); //往id 为myDiv 的元素中添加一个元素

$("#myDiv").append($li2); //结果：<div

id="myDiv"><span></span><span></span></div>

$("#myDIv").append($li1).append($li2); //客串：传说中的链式写法，省一行代码^_^

创建文本节点

var $li1 = $("<span>first</span>");

var $li2 = $("<span>second</span>");

$("#myDIv").append($li1).append($li2);

//结果：<div id="myDiv"><span>first</span><span>second</span></div>

创建属性节点

var $li1 = $("<span title="111">first</span>");

var $li2 = $("<span title="222">second</span>");

$("#myDIv").append($li1).append($li2);

//结果：<div id="myDiv"><span title="111">first</span><span

title="222">second</span></div>

插入节点

$("#myDiv").append("<span></span>"); //往id 为myDiv 的元素插入span 元素

$("<span></span>").appendTo("#myDiv"); //倒过来，将span 元素插入到id 为myDiv 的

元素

$("#myDiv").prepend("<span></span>"); //往id 为myDiv 的元素内最前面插入span 元

素

$("<span></span>").prependTo("#myDiv"); //倒过来，将span 元素插入到id 为myDiv 的

元素内的最前面

$("#myDiv").after("<span></span>"); //往id 为myDiv 的元素后面插入span 元素（同

级，不是子元素）

$("<span></span>").insertAfter("#myDiv"); //倒过来，将span 元素插入到id 为myDiv

的元素后面（同级，不是子元素）

$("#myDiv").before("<span></span>"); //往id 为myDiv 的元素前面插入span 元素（同

级，不是子元素）

$("<span></span>").insertBefore("#myDiv"); //倒过来，将span 元素插入到id 为myDiv

的元素前面（同级，不是子元素）

删除节点

$("#myDiv").remove(); //将id 为myDiv 的元素移除

清空节点

$("#myDiv").remove("span"); //将id 为myDiv 的元素内的所有span 元素移除

复制节点

$("#myDiv span").click( function(){ //点击id 为myDiv 的元素内的span 元素，触发

click 事件

$(this).clone().appendTo("#myDiv"); //将span 元素克隆，然后再添加到id 为myDiv 的

元素内

$(this).clone(true).appendTo("#myDiv"); //如果clone 传入true 参数，表示同时复制

事件

})

替换节点

$("p").replaceWith("<strong>您好</strong>"); //将所有p 元素替换成后者<p>您好

</p> –> <strong>您好</strong>

$("<strong>您好</strong>").replaceAll("p"); //倒过来写，同上

包裹节点

$("strong").wrap("<b></b>"); //用b 元素把所有strong 元素单独包裹起来<b><strong>

您好</strong></b><b><strong>您好</strong></b>

$("strong").wrapAll("<b></b>"); //用b 元素把所有strong 元素全部包裹起来

<b><strong>您好</strong><strong>您好</strong></b>

$("strong").wrapInner("<b></b>"); //把b 元素包裹在strong 元素内<strong><b>您好

</b></strong>

属性操作

var txt = $("#myDiv").arrt("title"); //获取id 为myDiv 的元素的title 属性

$("#myDiv").attr("title","我是标题内容"); //设置id 为myDiv 的元素的title 属性的

值

$("#myDiv").attr({"title":"我是标题内容", "alt":"我还是标题"); //一次性设置多个

属性的值

$("#myDiv").removeArrt("alt"); //移除id 为myDiv 的元素的title 属性

样式操作

var txt = $("#myDiv").arrt("class"); //获取id 为myDiv 的元素的样式

$("#myDiv").attr("class","myClass"); //设置id 为myDiv 的元素的样式

$("#myDiv").addClass("other"); //在id 为myDiv 的元素中追加样式

$("#myDiv").removeClass("other"); //在id 为myDiv 的元素中移除other 样式

$("#myDiv").removeClass("myClass other"); //在id 为myDiv 的元素中移除myClass 和

other 多个样式

$("#myDiv").removeClass(); //在id 为myDiv 的元素中移除所有样式

$("#myDiv").toggleClass("other"); //切换样式，在有other 样式和没other 样式之间切

换

$("#myDiv").hasClass("other"); //判断是否有other 样式

设置和获取HTML、文本和值

alert( $("#myDiv").html() ); //获取id 为myDiv 的元素的HTML 代码（相当于innerHTML）

$("#myDiv").html("<span>hello</span>"); //设置id 为myDiv 的元素的HTML 代码

alert( $("#myDiv").text() ); //获取id 为myDiv 的元素的HTML 代码（相当于innerText）

$("#myDiv").text("hello"); //设置id 为myDiv 的元素的HTML 代码

alert( $("#myInput").val() ); //获取id 为myDiv 的元素的value 值（支持文本框、下

拉框、单选框、复选框等）

$("#myInput").val("hello"); //设置id 为myDiv 的元素的value 值（下拉框、单选框、

复选框带有选中效果）

遍历节点

var $cList = $("#myDiv").children(); //获取id 为myDiv 的元素的子元素（只考虑子元

素，不考虑后代元素）

var $sNext = $("#myDiv").next(); //获取id 为myDiv 的元素的下一个同辈元素

var $sPrev = $("#myDiv").prev(); //获取id 为myDiv 的元素的上一个同辈元素

var $sSibl = $("#myDiv").siblings(); //获取id 为myDiv 的元素的所有同辈元素

var $pClos = $("#myDiv").closest("span"); //获取id 为myDiv 的元素本身开始，最接

近的span 元素（向上查找）

CSS-DOM 操作

$("#myDiv").css("color"); //获取id 为myDiv 的元素的color 样式的值

$("#myDiv").css("color", "blue"); //设置id 为myDiv 的元素的color 样式的值

$("#myDiv").css({"color":"blue", "fontSize":"12px"}); //设置id 为myDiv 的元素的

color 样式的值（多个）

$("#myDiv").css("opacity", "0.5"); //设置id 为myDiv 的元素的透明度（兼容浏览器）

$("#myDiv").css("height"); //获取id 为myDiv 的元素的高度（单位：px，兼容浏览器）

$("#myDiv").height(); //同上（实际高度）

$("#myDiv").css("width"); //获取id 为myDiv 的元素的宽度（单位：px，兼容浏览器）

$("#myDiv").width(); //同上（实际宽度）

var offset = $("#myDiv").offset(); //获取id 为myDiv 的元素在当前窗口的相对偏移量

alert( offset.top + "|" + offset.left );

var offset = $("#myDiv").position(); //获取id 为myDiv 的元素相对于最近一个

position 设置为relative 或absolute 的父元素的相对偏移量

alert( offset.top + "|" + offset.left );

$("#txtArea").scrollTop(); //获取id 为txtArea 的元素滚动条距离顶端的距离

$("#txtArea").scrollLeft(); //获取id 为txtArea 的元素滚动条距离左侧的距离

$("#txtArea").scrollTop(100); //设置id 为txtArea 的元素滚动条距离顶端的距离

$("#txtArea").scrollLeft(100); //设置id 为txtArea 的元素滚动条距离左侧的距离

四．事件及动画

加载DOM

$(window).load() 等价于window.onload 事件

$(document).ready() 相当于window.onload 事件，但有些区别：

(1)执行时机：

window.onload 是在网页中所有元素（包括元素的所有关联文件）完全加载后才执行

$(document).ready() 是在DOM 完全就绪时就可以被调用，此时，并不意味着这些元素关系

的文件都已经下载完毕

(2)多次使用：可以在同一个页面注册多个$(document).ready()事件

(3)简写方式：可以缩写成$(function(){ }) 或$().ready()

事件绑定

当文档装载完成后，可以通过bind()方法，为特定的元素进行事件的绑定，可重复多次使用

bind( type, [data, ] fn );

type：指事件的类型:

blur（失去焦点）、focus（获得焦点）

load（加载完成）、unload（销毁完成）

resize（调整元素大小）、scroll（滚动元素）

click（单击元素事件）、dbclick（双击元素事件）

mousedown（按下鼠标）、mouseup（松开鼠标）

mousemove（鼠标移过）、mouseover（鼠标移入）、mouseout（鼠标移出）

mouseenter（鼠标进入）、mouseleave（鼠标离开）

change（值改变）、select（下拉框索引改变）、submit（提交按钮）

keydown（键盘按下）、keyup（键盘松开）、keypress（键盘单击）

error（异常）

data：指事件传递的属性值，event.data 额外传递给对象事件的值

fn：指绑定的处理函数，在此函数体内，$(this)指携带相应行为的DOM 元素

合并事件

hover(enter,leave)：鼠标移入执行enter、移出事件执行leave

$("#myDiv").hover( function(){

$(this).css("border", "1px solid black");0

}, function(){

$(this).css("border", "none");

});

toggle(fn1,fn2,…fnN)：鼠标每点击一次，执行一个函数，直到最后一个后重复

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

$(this).css("border", "1px solid black");0

}, function(){

$(this).css("border", "none");

});

事件冒泡

下面的例子，BODY 元素下有DIV 元素，DIV 元素下有SPAN 元素，分别将三种元素都注册

click 事件。

那么，click 事件会按照DOM 的层次结构，像水泡一样不断向上直到顶端，所以称之为事件

冒泡。

<body><div><span>我是SPAN 我怕谁</span></div></body>

$("span").bind("click", function(){ alert(‘span click’); });

$("div").bind("click", function(){ alert(‘div click’); });

$("body").bind("click", function(){ alert(‘body click’); });

阻止冒泡

解决这个问题的办法是：在SPAN 执行完click 事件后，停止事件冒泡。

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

alert(‘span click’);

event.stopPropagation(); //停止冒泡

});

阻止默认行为

提交按钮在提交前做相应的逻辑判断，当不满足时

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

event.preventDefault(); //阻止默认行为相当于return false;

});

事件对象的属性

$("#myDiv").bind("click", function(event){ });

event.type() //返回：click

event.target() //获取当前元素

event.relatedTarget() //引发事件的元素

event.pageX()/event.pageY() //获取鼠标相对于页面的X 和Y 坐标

event.which() //在单击事件中获取到对应的按键鼠标左中右分别是123

event.metaKey() //获取操作中的相关功能键（ctrl/alt/shift）

移除事件

$("#myDiv").bind("click", fn1 = function(){

alert("function1");

}).bind("click", fn2 = function(){

alert("function2");

}).bind("click", fn3 = function(){

alert("function3");

});

$("#myDiv").unbind(); //移除id 为myDiv 的元素的所有事件

$("#myDiv").unbind("click"); //移除id 为myDiv 的元素的所有click 事件

$("#myDiv").unbind("click",fn1); //移除id 为myDiv 的元素的名称为fn1 的click 事

件

一次性事件：绑定的事件执行一次后自动移除

$("#myDiv").one("click", [data], function(){

alert("function1");

});

触发事件

$("#btn").trigger("click", [data]); //代码方式触发click 事件

$("#btn").click(); //另一种简写方式

事件命名空间

$("#myDiv").bind("click.hello", function(){

alert("function1");

});

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

alert("function1");

})

$("div").unbind("click"); //两个事件都被移除

$("div").unbind(".hello"); //只移除第一个

$("div").unbind("click!"); //只移除第二个（注意感叹号，指没有名字空间的）

JQuery 中的动画

$("div").hide(); //隐藏所有DIV 元素，相当于sytle="display:none"

$("div").show(); //显示所有DIV 元素

$("div").hide(1000); //一秒内隐藏所有DIV 元素，其它参数还有：slow(600) normal(400)

fast(200)

$("div").show(1000); //一秒内显示所有DIV 元素

$("div").fadeOut(); //降低元素的不透明度，直至消失（支持速度参数，不会改变宽高）

$("div").fadeIn(); //升高元素的不透明度，直至显示

$("div").slideUp(); //由下至上收缩元素，直至消失（支持速度参数）

$("div").slideDown(); //由上至下展开元素，直至显示

自定义动画animate

$(elem).animate(params, speed, callback);

params：样式属性及值的映射{protected:"value", protected:"value"}

speed: 速度参数

callback: 动画完成后执行函数，可选

$("#myDiv").animate({left:"500px"}, 2000); //两秒内ID 为myDiv 的元素移至左边距

500px 的位置

$("#myDiv").animate({left:"+=500px"}, 2000); //同上，支持累加、累减

$("#myDiv").animate({top:"200px", left:"+=500px"}, 2000); //同上，多重动画，同时

执行

$("#myDiv").animate({opacity:"0.5"}, 1000) //先变成50%透明

.animate({top:"500px"}, 500) //移至离顶端500px

.animate({left:"500px"}, 500) //移至离左边500px

.fadeOut(1000); //显示出来（四个动作为队列，一步步执行）

$("#myDiv").stop([cleanQuene] [,gotuEnd]); //停止动画，参数为boolean

$("#myDiv").is(":animate") //判断元素是否在执行动画

其它动画

$("#myDiv").toggle(); //显示与隐藏元素

$("#myDiv").slideToggle(); //展开与收缩元素

$("#myDiv").fadeTo(1000, 0.2); //一秒内将元素透明度调整到20%

五．Ajax应用及插件使用

单选文本框应用（获得焦点时，加了个特殊的样式，失去焦点时还原，兼容所有浏览器）

$(":input").focus(function(){ this.addClass("inputFocus"); })

.blur(function(){ this.removeClass("inputFocus"); });

多行文本框的应用（放大、缩小多行文本框的高度，限制最大500px，兼容所有浏览器）

var $txt = $("#textArea");

$(".bigger").click(function(){

if( $txt.height() < 500) $txt.height( $txt.height() + 50 );

//if( $txt.height() < 500) $txt.animate({height:"+=50"}, 500 );

});

$(".smaller").click(function(){

if( $txt.height() > 100) $txt.height( $txt.height() – 50 );

//if( $txt.height() < 500) $txt.animate({height:"-=50"}, 500 );

});

复选框的应用（实现全选、全不选、反选）

$("#btnCheckedAll").click(function(){ //全选

$("[name=items]:checkbox").attr("checked", true);

});

$("#btnCheckedNone").click(function(){ //全不选

$("[name=items]:checkbox").attr("checked", false);

});

$("#btnCheckedRev").click(function(){ //反选

$("[name=items]:checkbox").each(function(){

$(this).attr("checked", !$(this).attr("checked"));

//this.checked = !this.checked;

}

});

下拉框的应用（将一个下拉列表的选中项搬至另一个下拉列表）

$("#btnAdd").click(function(){ //将选中选项搬过去

$("#mySelect1 option:selected").appendTo("#mySelect2");

});

$("#btnAddAll").click(function(){ //将全部选项搬过去

$("#mySelect1 option").appendTo("#mySelect2");

});

$("#mySelect1").dblclick(function()[ //双击项搬过去

$("#mySelect1 option:selected").appendTo("#mySelect2");

}

表单验证

<form>

<div>

<label>用户名：</label>

<input type="text" id="txtUid" value="" />

</div>

</form>

$("form :input.required").each(function(){ //往每个class 有required 样式的input

元素后面添加*号

$(this).parent().append( $("<span class='star'>*</span>") );

});

$("form :input.required").blur(function(){ //失去焦点时验证域

if( this.value == "" ){

$(this).parent().append( $("<span class='error'>必填字段</span>") );

}

else{

$(this).parent().append( $("<span class='success'>验证正确</span>") );

$(this).parent().find(".error").remove();

}

}).keyup(function(){ //用户每点一个键触发

$(this).triggerHandler("blur");

}).focus(function(){ //控制有焦点时触发

$(this).triggerHandler("blur");

});

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

$("form :input.required").trigger("blur"); //让所有需要验证的域失去焦点

var errNum = $("form .error").length;

if( errNum ){

alert("有验证字段失败，请重新填写");

return false;

Ajax 应用

load( url [,data] [,callback] )方法

url：要请求的页面的地址

data：要发送的相关参数

callback：回调函数

$("#myDiv").load("hello.html"); //向myDiv 元素加载hello.html 的内容

$("#myDiv").load("hello.html .myClass"); //筛选，只加载hello.html 中myClass 样式

的内容

$("#myDiv").load("hello.html", function(){} ); //没参数的，使用GET 方式

$("#myDiv").load("hello.html", {id:’123′, name:’dier’}, function(){} ); //

有参数的，使用POST 方式

$("#myDiv").load("hello.html", function(responseText, textStatus,

XMLHttpRequest){ //回调函数

//responseText : 请求返回的内容

//textStatus : 请求状态success error notmodified timeout

//XMLHttpRequest : Ajax 对象

});

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

方法

url：要请求的页面的地址

data：要发送的相关参数

callback：回调函数

type：指定服务器返回内容的格式xml html script json text _default

$.get( "test.aspx", {id:"123", name:"dier"}, function(data,textStatus){ //回调函

数只有当状态是success 才触发

//data : 请求返回的内容

//textStatus : 请求状态success error notmodified timeout

//当data 是HTML 时，直接加载

$("#myDiv").html(data);

//当data 是XML 时，可筛选&lt;user id="123" name="dier" age="27" /&gt;

var age = $(data).find("user").attr("age");

//当data 是JSON 时，可直接点出属性来{id:"123", name:"dier", age:"27"}

var age = data.age;

});

getScript(url [,callback])方法

$(function(){ //动态加载JS 脚本

$.getScript("test.js");

$.getScript("test.js", function(){ //回调函数

//do something..

});

});

getJSON(url [,callback])方法

$(function(){ //动态加载JS 脚本

$.getJSON("test.js");

$.getJSON("test.js", function(data){ //回调函数

//do something..

//data : 返回的数据

$.each( data, function(index, item){ //遍历，相当于foreach

//index : 索引

//item : 当前项内容

//return false; 退出循环

});

});

});

ajax(options)方法

url : 请求的地址

type : 请求的方式GET POST 默认为GET

timeout : 请求超时时间(单位：毫秒）

data : 请求时发送的参数（String,Object）

dataType : 预期返回的数据类型xml html script json jsonp text

bdforeSend : 发送请求前触发事件，如果return false 则取消发送

function(XmlHttpRequest){}

complete : 请求完成后触发事件，不管成功与否function(XmlHttpRequest, textStatus){}

success : 请求完成并且成功时触发事件function(data, textStatus){}

error : 请求完成并且失败时触发事件function(XmlHttpRequest, textStatus,

errorThrown){}

global : 是否为全局请求，默认为true，可使用AjaxStart、AjaxStop 控制各种事件

$.ajax({

url : "test.aspx",

type : "POST",

timeout : "3000",

data : {id:"123", name:"dier"},

dataType : "HTML",

success : function(data,textStatus){

$("#myDiv").html( data );

}

error : function(XmlHttpRequest, textStatus, errThrown){

$("#myDiv").html( "请求失败：" + errThrown );

}

});

序列化字符串serialize()

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

//将form1 整个表单中的所有域序列化成提交的参数，支持自动编码

});

序列化数组serializeArray()

var arr = $(":checkbox, :radio").serializeArray();

对象序列化param()

var obj = {id:"123", name:"dier", age:"27"};

var kv = $.param(obj); //id=123&name=dier&age=27

JQuery 中的全局Ajax 事件

ajaxStart(callback) //请求开始时触发

ajaxStop(callback) //请求结束时触发

ajaxComplete(callback) //请求完成时触发

ajaxSuccess(callback) //请求成功时触发

ajaxError(callback) //请求失败时触发

ajaxSend(callback) //请求发送前触发

$("#loading").ajaxStart(function(){ //当有AJAX 请求时显示，完成时隐藏

$(this).show();

}.ajaxStop(function(){

$(this).hide();

}

);