jQuery学习总结
2014-01-26 10:23
260 查看
jQuery学习总结
因为项目需要，同时也因为兴趣，在近一段时间研究和使用了jQuery，它真的是太强大了，代码非常的优雅和简洁，好后悔现在才开始了解它，虽然目前网络上关于jQuery的资料、学习心得，教程多得你看不完，但我还是想把自己的一点学习经验写下来，不管是提供给那些想学习jQuery的人，还是保留一份学习笔记，我觉得这都是很有必要的。
在说jQuery之前，不得不提下现在也非常流行的mootools框架。在网上，很多人把mootools比作java，把jquery比作perl。我没研究过mootools，也不发表意见，这完全没有意义。只要本身不存在重大缺陷就可以了。用好了都强大。好比Java和.NET争论了这么多年，一样的道理。
jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助开发的库。是继prototype之后又一个优秀的JavaScript框架。它如暴风雪般席卷WEB前端开发，jQuery已确定成为ASP.NET MVC和Visual Studio 2008版本中的正式组成部分，诺基亚手机平台Web Run-Time也将纳入jQuery。所以，请相信，选择jQuery是不会错的。如果你看到这里还有犹豫，那么我再说个理由，应该能打消你的最后疑虑了。2009年12月份Tiobe编程语言排行榜JavaScript升到第8名，并且在上升势头最强劲的语言中排名第3位。我在这里不是想说排行榜的话题，因为那又会引发一场说不完的争论。我的意思是，排行榜不能说明一切问题，但至少能够说明，现在用哪种语言的人多，人多则说明有活力，相应的其它各种资源也会较丰富。JavaScript脚本已经深入WEB应用之中。而作为优秀的JavaScript框架，它的前景不用怀疑。除非出现一个比jQuery更牛B，更优秀的东东。
我不打算像写教程那样，把jQuery的基础用法都罗列出来，那会很无趣，也没意义。网上这方面的知识随便搜一下就一大堆。我准备从项目的角度出发，写出自己的感受。当然，一份API帮助文档是必不可少的，在最末尾提供了jQuery-1.2.6.chm下载，需者自取。
首先我们要知道，JavaScript开发基本可以分为以下四个部分：
1、查找DOM元素进行取值和赋值的操作、在特定节点位置进行内容的取值和赋值操作（innerHTML）。
2、针对元素进行事件监听。
3、通过操作DOM节点结合改变元素的CSS样式，达到绚丽的动画效果。
4、对DOM元素进行Ajax操作。
对于jQuery来说，可以对这四部分提供完美的实现：
a、jQuery拥有强大的选择器，可以查找任意的DOM元素。同时jQuery对象实现链式语法，能够很方便简洁的写出强大的操作。比如操作属性：$("#chkbox").attr("checked","checked").attr("disabled","disabled")。可以这样继续链下去，包括增加事件、样式等等操作。
b、在页面加载时给DOM绑定事件。$("#chkbox").click(function(){alert("hello jquery!"); });
c、show()和hide()是jQuery中最基本的动画。对元素显示和隐藏，当然，我们还可以实现其它的更复杂的动画。
d、$.ajax(options)是jQuery中最底层的Ajax实现。除此之外，还可以使用$.get()或$.post()实现Ajax请求。
了解了以上内容后，jQuery带给我们的另一个惊喜，在于它的API支持当前多种主流浏览器，使得你不用再为了IE、FireFox等兼容问题而抓头发伤脑筋。在以前做项目的时候，我总是喜欢将行为或样式属性写在DOM中。这是极其不好也极其不规范的一种做法。如今采用jQuery后，我将所有的行为全部从DOM中抽取了出来，放到jQuery初始化函数中进行绑定。而且jQuery的初始化函数比window.onload的加载速度更快。
$(function(){
$("#chkbox").click(
function(){
alert("hello jQuery!");
}
);
});
<inputtype="checkbox" id="chkbox"/>
上面是一种简写方法，不管是初始化函数还是绑定事件。推荐采用这种写法。
※下面这种写法是不可取的，行为一定要和DOM分离：
function chkClick(){
alert("hello jQuery");
}
<input type="checkbox" id="chkbox" onclick="chkClick()"/>
※不要再把样式写到DOM里面，这是很难维护的一件事情：
<span style="font-size:15pt;color:red">hello jQuery</span>
应该统一采用CSS文件定义或是定义class类，或是对ID进行定义：
.spanClass{
font-size:15pt;
color:red;
}
<span class="spanClass">hello jQuery</span>
#hello_span{
font-size:15pt;
color:red;
}
<span id="hello_span">hello jQuery</span>
在上一篇jQuery学习总结（一）中，简单的介绍了jQuery提供对JavaScript开发的四个部分的支持，这篇文章将详细的用代码示例来说明如何实现。
1、DOM
jQuery提供强大的DOM查找功能，并且能够很方便的进行取值和赋值操作。查找元素最主要的是使用选择器，可能还会需要筛选器的配合。从项目中来看，给DOM元素设置id及name，会比较容易实现需求。我列一下使用得最多的几种选择器：#id、.class、element、:eq、[attribute^=value]、[attribute$=value]、[attribute=value]、[attribute]、:checked、:selected等等。另外jQuery提供的属性也是强大利器：attr、removeAttr、addClass、removeClass、html、val等，在实际中，大量的被应用。在文档处理及CSS中append、clone、empty、css、height、width也是使用频率很高的。关于这部分的知识很复杂，精髓我可写不出来，我只能把我在项目中的体会、感悟、想法记录下来，给需要的人一点帮助就很开心了。下面来看几个例子。
$("#ctr_id").val(id); //给合同ID赋值
$("#ctr_id").val(); //取得合同ID值
$("#ctr_sum").attr("disabled","disabled"); //将合同金额输入框设为不可用
$("[name=ctrRadio]:checked").attr("checked",""); //取消已选中的单选框
$("select[name='contract_kind'] option:eq(0)").attr("selected","selected"); //选中第一条记录
$("[name='btndel']").index(obj); //obj是一个按钮对象，这表示该按钮位于相同名称按钮的第几个，返回的索引值从0开始
$("ctr_advance").html("更多信息"); //给span设置HTML内容，此属性类似innerHTML
2、事件
我再一次，强烈的建议，给DOM元素添加的行为，一定不要和DOM元素混在一起，一定要和它们分离开来，这里面有规范，也有教训。添加事件时我们一般在初始化的时候进行，让我们把<body onload="">这种写法抛弃掉，采用jQuery的写法。jQuery的代码是可以跨浏览器运行的，这样的好处对开发人员来说无疑是非常棒的！
$(document).ready(function(){
// 在这里写初始化代码
});
也可以简写成：
$(function(){
// 在这里写初始化代码
});
关于事件类型，帮助文档里面说得也比较详细了，不清楚的话就查一下。为元素绑定事件，正规说法是写成bind形式，其实我们一般都是采用简写方式：
$(function(){
// 绑定click事件
jQuery("#btn_add").click(
function(){
alert("你点击的是新增按钮");
}
);
// 对一组控件进行事件绑定
$("[name=ctrRadio]").each(function(index,item){
// 这里的index是索引，从0开始，item是当前对象，也即this，可以省略这两个参数
$(this).click(
function(){
alert($(this).attr("id"));
}
);
});
});
jQuery事件中定义的函数全都是一个匿名函数，如果在某些情况下，匿名函数内部要执行的代码是一样的，这样重复定义就显得不规范了。因此，可以把这部分代码提取出来，写成一个函数，指定一个具体的名称，再调用这个函数，看下面这个例子：
function doSame(){}
$(“btn_a”).click(
function(){
doSame();
}
);
$(“btn_b”).click(
function(){
doSame();
}
);
$(“btn_b”).click(
function(){
doSame();
}
);
除了一般的响应事件，jQuery还有两个合成事件——hover()和toggle()。这两个事件的使用频率也比较高。
hover()方法的语法结构为：hover(over,out);
它用于模仿鼠标悬停事件，当鼠标移动到元素上时，会触发指定的第一个函数(over)；当鼠标移出这个元素时，会触发指定的第二个函数(out)。
$("td").hover(
function (){
$(this).addClass("hover");
},
function (){
$(this).removeClass("hover");
}
);
toggle()方法的语法结构为：toggle(fn1,fn2,......fnN);
它用于模仿鼠标连续点击事件，当第一次点击元素，则触发指定的第一个函数(fn1)，当再次点击同一元素时，则触发指定的第二个函数(fn2)，如果有更多函数，则依次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。通常情况是定义两个函数，在显示与隐藏中经常这样使用。对toggle事件来说，其实已经包含了click事件。
$("#ctr_advance").toggle(
function () {
$("#tbl_advance").show();
$(this).html("隐藏");
},
function () {
$("#tbl_advance").hide();
$(this).html("更多信息");
}
);
<div id="ctr_advance">更多信息</div>
<div id="ctr_info"class="hide">代码省略</div>
3、动画
show()和hide()是jQuery中最基本的动画。在HTML文档里，为一个元素调用hide()方法，会将该元素的display样式改为"none"。
比如，使用如下代码隐藏element元素：
$("element").hide(); //通过.hide(),隐藏元素
这段代码的功能跟用css()方法设置display属性效果相同：
element.css("display", "none"); //通过.css(),隐藏元素
当把元素隐藏后，可以使用show()方法将元素的display样式设置为先前的显示状态("block"或"inline")：$("element").show();
fadeIn()和fadeOut()方法只改变元素的不透明度。fadeOut()方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失("display:none")。fadeIn()方法则相反。这是一组对应的渐变效果， 淡入与淡出。看下面的代码：
$(function(){
$("[name=radio]").each(function(){
$(this).hide().fadeIn(2000).fadeOut(2000);
});
});
<input type="radio"name="radio" id="a" />1
<input type="radio"name="radio" id="b" />2
<input type="radio"name="radio" id="c" />3
<input type="radio"name="radio" id="d" />4
<input type="radio"name="radio" id="e" />5
<input type="radio"name="radio" id="f" />6
运行例子看下效果，明白了吧？
滑动动画方法是slideUp()和slideDown()，slideDown()方法，将使元素由上至下延伸显示，slideUp()方法正好相反。
$("#div_click").toggle(
function(){
$("#radios").slideUp("slow");
},
function(){
$("#radios").slideDown("slow");
}
);
<div id="div_click">click here</div>
<div id="radios">
<div><input type="radio" name="radio" id="a" />1</div>
<div><input type="radio" name="radio" id="b" />2</div>
<div><input type="radio" name="radio" id="c" />3</div>
<div><input type="radio" name="radio" id="d" />4</div>
<div><input type="radio" name="radio" id="e" />5</div>
<div><input type="radio" name="radio" id="f" />6</div>
</div>
slideToggle()方法是前面两者的合成，因此上面的例子也可以改写成这样：
$("#div_click").click(
function(){
$("#radios").slideToggle("slow");
}
);
另外值得注意的是：在进行页面开发时，我们应该而且也必须使用XHTML规范，它符合W3C标准，是比HTML更规范、更严格的一个标记语言。
上面的例子，如果不加上下面一句，动画会有点小问题：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
对比这个写法：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN">
试试看看效果会有什么不一样。
4、AJAX
jQuery提供了好几个Ajax实现，一般情况下你可以使用$.get或$.post，当然也可以采用最底层的实现$.ajax，推荐最后一种，它有一个参数，是一个key/value对象，来看个例子
// 在合同编号失去焦点时验证数据库中是否存在相同的编号
$("#contCode").blur(
function(){
var ctrCode = $(this);
if(ctrCode.val() != ''){
//标准的ajax方式
$.ajax({
type:"POST",
url:"${ctx}/contractInfoAction.do?method=validateContractCode",
data:"contract_code="+ctrCode.val(),
success:function(data){
if(data == '1'){ //1为存在相同的合同编号
alert("该合同编号已被使用，请重新输入！");
ctrCode.val('');
ctrCode.focus();
return false;
}
}
});
}
}
);
关于$.get和$.post很简单，帮助文档中说的很清楚，不过有一点需要注意，这两个方法的参数顺序不能搞错了，一定要按它规定的来。而对于$.ajax来说，因为里面是一个key/value对象，所以顺序对它没有影响，只要key/value对应就不会有错。
这四个部分基本上涵盖了jQuery的大部分内容，也有许多示例帮助理解，另外多看帮助文档也是一个非常好的学习方式。我深深的体会到，只有多动手做，才会有提高。光学不练是一点用处都没有的。特别是在项目中学习，那速度，真是"飞"一般的感觉啊！哈哈，我们下次继续讨论。
关于jQuery操作DOM的内容完了吗？不，还没有，还有更多！
1、尽可能的用#id和属性选择器
在选择DOM元素时，jQuery的选择器无疑提供了非常多的功能，除了特性选择器外，对文档元素的查找操作，我觉得还是#id和[attribute]最为实用，当然这不是否定其它的选择器。我这样说是有原因的。
在实际开发中，程序员一般是以模块为单位进行功能开发，那么从前台到后台都是一个人在做。而页面的美化工作可能会交给美工（也可能是前台开发人员）来完成，如果需要对DOM的结构进行调整或重新布局，这时，当脚本中使用了CSS选择器或位置选择器，这时，你能保证不会对功能有影响吗？难道还要和开发人员进行沟通，这里不能这样写，那里需要调整。可是一个系统中的页面会只有一两个吗？这样改下来，得要多少时间？这时有人会说了，你设计没做好，设计之初就应该考虑好，样式布局就应该做好。那么就不会出现这样的问题。是的，设计很重要，设计的好坏决定项目成败。但是，我要告诉你，世上没有绝对的事情，我们所做的一切都是以客户为出发点，客户不满意了，要你改，你能不改吗？
使用ID的好处显而易见，给元素加上ID，通过ID获得该元素对象，然后进行相应操作，不管结构如何变化，代码不用修改。请一定注意，ID不能重复了。
可是ID只能对单一元素进行操作（这是相对的，后面有讲到对ID也可以批量操作），如果有多个元素怎么办呢？这里就要用到属性选择器了。帮助文档里罗列了各种属性选择器，而且有说明和示例。不过例子太简单了，会让很多人没有感觉，对它没有引起足够的重视，在这里大象用几个实例来说明一下它们的用法。
a)
$(function(){
$("[name=ctrRadio]").each(function(){
$(this).click(
function(){
// click事件代码
}
);
});
});
<input type="radio"name="ctrRadio" /> // 有很多个单选按钮，组成一个单选按钮组
页面数据列表一般采取分页显示，每页10条、15条或更多，每一行都添加了一个单选按钮，在初始化时，我们给每个单选按钮绑定一个click事件，所以这里我们使用[attribute=value]形式的属性选择器来实现我们的需求。另外name值如果定义好了，我们也不会轻易再去改动它，调整单选按钮的位置也不会影响到代码。比如现在位于每行的第一列是单选按钮，后来客户要求，要将它放到最后一列去，或是将type改成button，这都不会影响原来实现的代码。除非你要把它改成checkbox，那么，这应该算是需求变更了吧？
b)
$(function(){
$("[name$='chk']").attr("checked","checked").click(
function(){
var chkbox = $(this); // this是当前的复选框对象，$(this)是获得该复选框的jQuery对象
if(chkbox.attr("checked")){
alert("选择: "+chkbox.val());
}else{
alert("取消: "+chkbox.val());
}
}
);
});
<div><input type="checkbox"name="stationchk" value="a" />1</div>
<div><input type="checkbox"name="stationchk" value="b" />2</div>
<div><input type="checkbox" name="intervalchk"value="c" />3</div>
<div><input type="checkbox"name="intervalchk" value="d" />4</div>
<div><input type="checkbox"name="commonchk" value="e" />5</div>
<div><input type="checkbox"name="commonchk" value="f" />6</div>
文档初始化时，通过属性选择器查找所有name名称以chk结尾的DOM元素，并将它设为选中状态，同时给它绑定click事件。这里可以在[name$='chk']前面加上input，缩小搜索范围。当然，你得确保以chk结尾的都是你想操作的checkbox，避免出现让自己困惑的BUG。因此在做之前，充分的思考很有必要，这会大大提高你的开发效率和减少出现错误的机率。虽然表面看起来多花了一点时间，但是你会觉得这是很值得的。
[attribute^=value]和[attribute$=value]是相对的一组选择器，前者是匹配指定的属性以某些值开始的元素，后者刚好相反，匹配给定的属性是以某些值结尾的元素，请一定记住attribute是属性，比如上面的type、name、value等等。在项目中大量的通过id、name属性来批量的操作DOM元素。
我说下怎么通过ID获得多个集合，其实很简单，在设置ID值的时候，给它定义一个字符串再加上其它的唯一标识就能够实现这一功能。
<c:forEach var="info" items="${infos}">
<input name="modinfo" id="modInfo_${info.parent_id}_${info.f_id}" type="checkbox" value="${info.f_id},${info.parent_id}" />
</c:forEach>
在数据库中f_id是主键标识，因此它具有唯一性，parent_id是父ID，它们和modInfo_组合起来就可以成为id属性的唯一标识。forEach循环会产生多个checkbox，所以我们就使用$("[id^='modInfo_']")表达式来取得结果集。有人会问有name不就行了吗？为什么还要设置id？而且还要将两种ID值与字符串拼接成复选框的id属性值。这是由于功能需要，不光要用到name，还要用到id，而且checkbox上还绑定了click，事件处理中还会用到value中的值。有时我们的业务需求确实很复杂，这时我们就可以采取这种方式来区分彼此之间存在一些联系而又独立的DOM集合。
在实际项目当中如何组合，还是得具体问题具体分析。另外，我们也不能忘掉那些特性选择器，它们同样很有用。
c)
$(function(){
$("[name^='station']:checkbox").attr("checked","checked").click(
function(){
if($(this).attr("checked")){
alert("选择: "+$(this).val());
}else{
alert("取消: "+$(this).val());
}
}
);
});
<div><input type="checkbox"name="stationchk" value="a" />1</div>
<div><input type="checkbox"name="stationchk" value="b" />2</div>
<div><input type="checkbox"name="intervalchk" value="c" />3</div>
<div><input type="checkbox"name="intervalchk" value="d" />4</div>
<div><input type="checkbox"name="commonchk" value="e" />5</div>
<div><input type="checkbox"name="commonchk" value="f" />6</div>
<div><input type="radio"name="stationrad" value="g" />7</div>
<div><input type="radio"name="stationrad" value="h" />8</div>
这个例子在b)的基础上作了一些修改，它表示在文档初始化时，通过属性选择器查找所有name名称以station开头并且type为checkbox的DOM元素，同时绑定click事件。如果将:checkbox去掉会不会有变化呢？答案是肯定的，单选按钮组也被绑定了事件。再看几个例子：
$("[name=ctrRadio]:checked").attr("checked",""); //取消已选中的单选框
$("[id^='modInfo_']").is(":hidden"); //如果表达式中的集合只要有一个不可见，就返回true
$("select[name='contract_kind'] option:eq(0)").attr("selected","selected"); //选中第一条记录
2、jQuery属性——很好，很强大
attr、addClass、removeClass、css、html、text、val、height、width这些命令在实际应用中的使用频率非常高，应该把它们全部掌握。这些属性都有赋值与取值的方法，为我们操作DOM提供了很方便的支持。举几个例子说明一下：
$(":button").addClass("button1"); //给所有的按钮添加样式
$("#ctr_info").attr("src","${ctx}/BaseAction.do?method=list"); //给id为ctr_info的iframe的src属性设置地址
$("#stationchk").attr("checked"); //获得复选框是否选中，选中为true，否则为false
$("#sum").css("ime-mode","disabled"); //屏蔽输入法
$("[name='stationchk']").parent().html("哈哈"); //返回包含匹配表达式的唯一父元素的元素集合
$("#ctr_info").load(function(){
var ifr_height = $(this).contents().find("#ctr_other").height(); //通过ID重新计算iframe的高度
ifr_height = ifr_height < 400 ? 350 : ifr_height;
$(this).height(ifr_height);
});
这些属性的运用技巧需要多做才能加深理解，对于以前使用原生JavaScript来编写脚本的程序员而言，无疑是一件很幸福的事，极大的简化了代码，减少了很多的工作量。
3、丰富的文档处理功能
从帮助文档中，我们可以看到，jQuery提供了一套很完备的文档处理函数。基本上需要有的都包含了。大象目前也只是使用了其中一部分，当然这跟应用环境也有关。来看个例子：
$(function(){
$("#btn_add").click(
function(){
$("<div name='_info'><input type='text' name='info'/> <input name='btndel' type='button' value='删除' /></div>").find(":button").click(
function(){
var index = jQuery("[name='btndel']").index(this); //this是删除按钮这个对象，index是获得该按钮在这组集合中的索引值
$("[name='_info']:eq("+index+")").remove();
}
).end().appendTo("#div_info");
}
);
});
<div><input id="btn_add"type="button" value="增加" /></div>
<div id="div_info"></div>
这段很少的代码却帮我们做了相当多的事情，详细分析一下：
在文档初始化的时候，对增加按钮绑定事件，当点击增加时，我们创建一个文本框和一个删除按钮的div，然后使用查找功能(find)在刚创建的html中找到button按钮(:button)，这时会返回<input name='btndel'type='button' value='删除'/>这个DOM元素的jQuery对象，接着给这个按钮绑定事件，使之，当我们点击某个删除按钮时，删除对应的元素。随后我们退回(end)到创建的div。最后把这个新增的元素追加到div_info元素之后，运行这个示例看看效果。PS：创建DOM时，如果比较复杂，可以用变量来拼接字符串，最后再放到$()里面。
这个例子充分体现了jQuery链的强大，一条语句就完成了这么多的功能，请大家充分利用jQuery链。牢记：jQuery对象与DOM对象的区别。
在删除的时候使用的是remove()而没有使用empty()，这两个方法执行后都会返回jQuery集合，不同的是，remove()会将元素从页面DOM中删除，而empty()只是删除匹配集合中的子节点（包括文本），但仍保留其在DOM中所占的位置。示例：
$(function(){
$("#btn_del").click(
function(){
$("p").empty();
//$("p").remove();
}
);
});
<input id="btn_del" type="button" value="删除" />
<p>hello</p>
jquery
<p>welcome</p>
用Firefox来运行示例，启动Firebug工具可以看到文档加载完成时的情况：
当我们点击删除后，结果如下：
再看执行remove方法后的结果：
文档处理的方法还有很多，我只能就遇到及使用过的举些例子说明一下，其它的就需要在大家工作中去发现去总结，也请各位把自己的心得体会分享出来，让我们一起学习，共同提高。所有代码均在jquery-1.2.6版本下测试通过。
Ajax无疑是当今WEB开发的重要技术，也是目前RIA（富互联网应用）的主要实现方式之一。本文将在前几篇的基础上，介绍如何利用jQuery使得操作Ajax变得更方便，实现更强大的功能。
就算到目前为止，Ajax的技术标准还是没有统一起来，主要体现在微软与非微软浏览器上面。虽然IE7之后提供了标准版本XHR（XMLHttpRequest）对象，但早期的IE6及以前版本则是另一种实现方式（XMLHTTP）。所以在使用Ajax之前都得先检测当前浏览器提供哪种对象，然后再进行后续的操作，相信有过这种经历的朋友都应该印象深刻。总之一句话，非常不爽！
如今有了jQuery，使得操作Ajax变得极其简单！你不必再去关心当前是哪种浏览器，你只需要关注你的程序想实现什么功能。jQuery已经为我们处理好了浏览器（应该是当前大多数）的兼容问题，而且提供了很多很好用的方法来实现Ajax功能。
jQuery提供了六种请求方式实现Ajax。load、getScript、getJSON、get、post、ajax。这里面getScript和getJSON是最上层的方法调用，get和post是倒数第二层调用，而ajax则是最底层的调用函数，所有的调用最终都会转换为调用ajax函数。如果对这段话存有疑惑的朋友请看下源码，不用完全看懂，只需要了解他们之间的调用顺序即可。另外load方法一般是用来加载页面内容到匹配的元素上。如果省略load方法的parametera参数，发送GET请求；如果有parametera参数，则是POST请求。如果想带参数又想发送GET请求怎么办呢？可以把参数写到url中。
大象在这里建议并推荐大家采用$.ajax()方式来实现Ajax调用。一是这种方式最直接，效率最高；二是这种方式功能最强大；三是从写法来看，key:value（键值对）可以减少出错。当然了，我并不是强制不能使用其它方式，我只是善意的建议，根据具体的情况作出最适当的选择。
记得在jQuery学习总结（二）最后第四部分，我用一个项目实例来说明如何利用$.ajax实现Ajax，下面进行详细讲解。
先来看看$.ajax()函数常用参数说明，有个总体印象。
在实际开发中，我们大多数情况下，只会使用这样几个参数:url、type、data、dataType、success。它们的使用频率是非常高的，基本上实现Ajax的调用，这样几个参数够用了。当然，jQuery还提供其它更丰富的参数，来满足你不同的需求。帮助文档中有完整的说明。
在实际应用中，我们很多时候都会用到相同的参数，这时可以利用jQuery提供的属性工具，设置一组默认的Ajax属性简化开发。
$.ajaxSetup({
type: 'POST',
dataType: 'text',
error: function(xhr){
$("#errorDiv").html("Ajax错误信息："+xhr.status+' '+xhr.statusText);
}
});
这样设置后，将确保后面的每个Ajax调用（不包括load）使用这些默认值。
接下来看看全局Ajax事件。注意global参数，它的默认值为true，所以会自动触发全局Ajax函数。如果显示的设为false，则不会触发。ajaxStart、ajaxSend、ajaxSuccess、ajaxError、ajaxComplete、ajaxStop等等。这些全局函数将在Ajax请求处理的不同阶段被触发。看个示例：
$(function(){
$("#success_msg").html("成功加载完成！").hide();
$("#tip").html("图形正在加载...").hide();
$("#btn_show ").click(
function(){
$("#div_info").empty(); //清空它里面的内容
$("#tip").ajaxStart(function(info){
$(info.target).show(300);
}).ajaxStop(function(info){
$(info.target).hide(300);
});
$("#success_msg").ajaxSuccess(function(info){
$(info.target).show().hide(1000);
});
$.ajax({
type:"GET",
url:"b.html",
success:function(info){
$("#div_info").append(info);
}
});
}
);
});
<div><input id="btn_show" type="button" value="显示" /></div>
<div id="tip"></div>
<div id="success_msg"></div>
<div id="div_info"></div>
b.html很简单，就是在body之间插入这一段代码。
<div style="background-color:#00FF00;width:300px;height:300px"></div>
现在对这个例子做下说明。
首先初始化时，对ID为success_msg和tip的两个DIV设置页面内容，并将其隐藏。再对显示按钮绑定事件，同时定义全局Ajax函数的回调函数，在不同的执行阶段，进行不同的结果处理。当触发时，会执行ajax调用，ajax方法执行后，会在div_info中显示出b.html中的内容，我这里是为了演示，所以将样式写到style属性中，大家不要这样写，应该采取我前面讲过的规范方法做。
ajaxStart 是在发起Ajax请求时，并在XHR实例被创建之前执行。回调函数也在这个时候被触发，这里我让初始化时设置的tip信息在300毫秒内显示出来。
ajaxStop 是在Ajax请求结束后，没有进行中的Ajax，任何回调函数执行完成之后调用。这里当请求结束后，让tip在300毫秒内隐藏起来。
最后是请求成功的ajaxSuccess函数，先让它显示出来，再让它在1秒内逐渐隐藏。
全局事件的回调函数都有一个对象参数，它有两个属性。
type：全局函数类型字符串，就是全局事件的名称。比如：ajaxStart、ajaxStop等。
target：被引用的DOM元素。比如：tip、success_msg等。
除此之外还有一个XHR对象参数，这个参数只有ajaxStart和ajaxStop没有，其它的函数都有。
到这里Ajax的内容基本上都说完了，剩下的就是实际运用。如果大家有什么好的想法和意见还请提出来，大象喜欢和各位交流经验，共同提高。以上代码是在jquery-1.2.6版本下测试通过。
因为项目需要，同时也因为兴趣，在近一段时间研究和使用了jQuery，它真的是太强大了，代码非常的优雅和简洁，好后悔现在才开始了解它，虽然目前网络上关于jQuery的资料、学习心得，教程多得你看不完，但我还是想把自己的一点学习经验写下来，不管是提供给那些想学习jQuery的人，还是保留一份学习笔记，我觉得这都是很有必要的。
在说jQuery之前，不得不提下现在也非常流行的mootools框架。在网上，很多人把mootools比作java，把jquery比作perl。我没研究过mootools，也不发表意见，这完全没有意义。只要本身不存在重大缺陷就可以了。用好了都强大。好比Java和.NET争论了这么多年，一样的道理。
jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助开发的库。是继prototype之后又一个优秀的JavaScript框架。它如暴风雪般席卷WEB前端开发，jQuery已确定成为ASP.NET MVC和Visual Studio 2008版本中的正式组成部分，诺基亚手机平台Web Run-Time也将纳入jQuery。所以，请相信，选择jQuery是不会错的。如果你看到这里还有犹豫，那么我再说个理由，应该能打消你的最后疑虑了。2009年12月份Tiobe编程语言排行榜JavaScript升到第8名，并且在上升势头最强劲的语言中排名第3位。我在这里不是想说排行榜的话题，因为那又会引发一场说不完的争论。我的意思是，排行榜不能说明一切问题，但至少能够说明，现在用哪种语言的人多，人多则说明有活力，相应的其它各种资源也会较丰富。JavaScript脚本已经深入WEB应用之中。而作为优秀的JavaScript框架，它的前景不用怀疑。除非出现一个比jQuery更牛B，更优秀的东东。
我不打算像写教程那样，把jQuery的基础用法都罗列出来，那会很无趣，也没意义。网上这方面的知识随便搜一下就一大堆。我准备从项目的角度出发，写出自己的感受。当然，一份API帮助文档是必不可少的，在最末尾提供了jQuery-1.2.6.chm下载，需者自取。
首先我们要知道，JavaScript开发基本可以分为以下四个部分：
1、查找DOM元素进行取值和赋值的操作、在特定节点位置进行内容的取值和赋值操作（innerHTML）。
2、针对元素进行事件监听。
3、通过操作DOM节点结合改变元素的CSS样式，达到绚丽的动画效果。
4、对DOM元素进行Ajax操作。
对于jQuery来说，可以对这四部分提供完美的实现：
a、jQuery拥有强大的选择器，可以查找任意的DOM元素。同时jQuery对象实现链式语法，能够很方便简洁的写出强大的操作。比如操作属性：$("#chkbox").attr("checked","checked").attr("disabled","disabled")。可以这样继续链下去，包括增加事件、样式等等操作。
b、在页面加载时给DOM绑定事件。$("#chkbox").click(function(){alert("hello jquery!"); });
c、show()和hide()是jQuery中最基本的动画。对元素显示和隐藏，当然，我们还可以实现其它的更复杂的动画。
d、$.ajax(options)是jQuery中最底层的Ajax实现。除此之外，还可以使用$.get()或$.post()实现Ajax请求。
了解了以上内容后，jQuery带给我们的另一个惊喜，在于它的API支持当前多种主流浏览器，使得你不用再为了IE、FireFox等兼容问题而抓头发伤脑筋。在以前做项目的时候，我总是喜欢将行为或样式属性写在DOM中。这是极其不好也极其不规范的一种做法。如今采用jQuery后，我将所有的行为全部从DOM中抽取了出来，放到jQuery初始化函数中进行绑定。而且jQuery的初始化函数比window.onload的加载速度更快。
$(function(){
$("#chkbox").click(
function(){
alert("hello jQuery!");
}
);
});
<inputtype="checkbox" id="chkbox"/>
上面是一种简写方法，不管是初始化函数还是绑定事件。推荐采用这种写法。
※下面这种写法是不可取的，行为一定要和DOM分离：
function chkClick(){
alert("hello jQuery");
}
<input type="checkbox" id="chkbox" onclick="chkClick()"/>
※不要再把样式写到DOM里面，这是很难维护的一件事情：
<span style="font-size:15pt;color:red">hello jQuery</span>
应该统一采用CSS文件定义或是定义class类，或是对ID进行定义：
.spanClass{
font-size:15pt;
color:red;
}
<span class="spanClass">hello jQuery</span>
#hello_span{
font-size:15pt;
color:red;
}
<span id="hello_span">hello jQuery</span>
在上一篇jQuery学习总结（一）中，简单的介绍了jQuery提供对JavaScript开发的四个部分的支持，这篇文章将详细的用代码示例来说明如何实现。
1、DOM
jQuery提供强大的DOM查找功能，并且能够很方便的进行取值和赋值操作。查找元素最主要的是使用选择器，可能还会需要筛选器的配合。从项目中来看，给DOM元素设置id及name，会比较容易实现需求。我列一下使用得最多的几种选择器：#id、.class、element、:eq、[attribute^=value]、[attribute$=value]、[attribute=value]、[attribute]、:checked、:selected等等。另外jQuery提供的属性也是强大利器：attr、removeAttr、addClass、removeClass、html、val等，在实际中，大量的被应用。在文档处理及CSS中append、clone、empty、css、height、width也是使用频率很高的。关于这部分的知识很复杂，精髓我可写不出来，我只能把我在项目中的体会、感悟、想法记录下来，给需要的人一点帮助就很开心了。下面来看几个例子。
$("#ctr_id").val(id); //给合同ID赋值
$("#ctr_id").val(); //取得合同ID值
$("#ctr_sum").attr("disabled","disabled"); //将合同金额输入框设为不可用
$("[name=ctrRadio]:checked").attr("checked",""); //取消已选中的单选框
$("select[name='contract_kind'] option:eq(0)").attr("selected","selected"); //选中第一条记录
$("[name='btndel']").index(obj); //obj是一个按钮对象，这表示该按钮位于相同名称按钮的第几个，返回的索引值从0开始
$("ctr_advance").html("更多信息"); //给span设置HTML内容，此属性类似innerHTML
2、事件
我再一次，强烈的建议，给DOM元素添加的行为，一定不要和DOM元素混在一起，一定要和它们分离开来，这里面有规范，也有教训。添加事件时我们一般在初始化的时候进行，让我们把<body onload="">这种写法抛弃掉，采用jQuery的写法。jQuery的代码是可以跨浏览器运行的，这样的好处对开发人员来说无疑是非常棒的！
$(document).ready(function(){
// 在这里写初始化代码
});
也可以简写成：
$(function(){
// 在这里写初始化代码
});
关于事件类型，帮助文档里面说得也比较详细了，不清楚的话就查一下。为元素绑定事件，正规说法是写成bind形式，其实我们一般都是采用简写方式：
$(function(){
// 绑定click事件
jQuery("#btn_add").click(
function(){
alert("你点击的是新增按钮");
}
);
// 对一组控件进行事件绑定
$("[name=ctrRadio]").each(function(index,item){
// 这里的index是索引，从0开始，item是当前对象，也即this，可以省略这两个参数
$(this).click(
function(){
alert($(this).attr("id"));
}
);
});
});
jQuery事件中定义的函数全都是一个匿名函数，如果在某些情况下，匿名函数内部要执行的代码是一样的，这样重复定义就显得不规范了。因此，可以把这部分代码提取出来，写成一个函数，指定一个具体的名称，再调用这个函数，看下面这个例子：
function doSame(){}
$(“btn_a”).click(
function(){
doSame();
}
);
$(“btn_b”).click(
function(){
doSame();
}
);
$(“btn_b”).click(
function(){
doSame();
}
);
除了一般的响应事件，jQuery还有两个合成事件——hover()和toggle()。这两个事件的使用频率也比较高。
hover()方法的语法结构为：hover(over,out);
它用于模仿鼠标悬停事件，当鼠标移动到元素上时，会触发指定的第一个函数(over)；当鼠标移出这个元素时，会触发指定的第二个函数(out)。
$("td").hover(
function (){
$(this).addClass("hover");
},
function (){
$(this).removeClass("hover");
}
);
toggle()方法的语法结构为：toggle(fn1,fn2,......fnN);
它用于模仿鼠标连续点击事件，当第一次点击元素，则触发指定的第一个函数(fn1)，当再次点击同一元素时，则触发指定的第二个函数(fn2)，如果有更多函数，则依次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。通常情况是定义两个函数，在显示与隐藏中经常这样使用。对toggle事件来说，其实已经包含了click事件。
$("#ctr_advance").toggle(
function () {
$("#tbl_advance").show();
$(this).html("隐藏");
},
function () {
$("#tbl_advance").hide();
$(this).html("更多信息");
}
);
<div id="ctr_advance">更多信息</div>
<div id="ctr_info"class="hide">代码省略</div>
3、动画
show()和hide()是jQuery中最基本的动画。在HTML文档里，为一个元素调用hide()方法，会将该元素的display样式改为"none"。
比如，使用如下代码隐藏element元素：
$("element").hide(); //通过.hide(),隐藏元素
这段代码的功能跟用css()方法设置display属性效果相同：
element.css("display", "none"); //通过.css(),隐藏元素
当把元素隐藏后，可以使用show()方法将元素的display样式设置为先前的显示状态("block"或"inline")：$("element").show();
fadeIn()和fadeOut()方法只改变元素的不透明度。fadeOut()方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失("display:none")。fadeIn()方法则相反。这是一组对应的渐变效果， 淡入与淡出。看下面的代码：
$(function(){
$("[name=radio]").each(function(){
$(this).hide().fadeIn(2000).fadeOut(2000);
});
});
<input type="radio"name="radio" id="a" />1
<input type="radio"name="radio" id="b" />2
<input type="radio"name="radio" id="c" />3
<input type="radio"name="radio" id="d" />4
<input type="radio"name="radio" id="e" />5
<input type="radio"name="radio" id="f" />6
运行例子看下效果，明白了吧？
滑动动画方法是slideUp()和slideDown()，slideDown()方法，将使元素由上至下延伸显示，slideUp()方法正好相反。
$("#div_click").toggle(
function(){
$("#radios").slideUp("slow");
},
function(){
$("#radios").slideDown("slow");
}
);
<div id="div_click">click here</div>
<div id="radios">
<div><input type="radio" name="radio" id="a" />1</div>
<div><input type="radio" name="radio" id="b" />2</div>
<div><input type="radio" name="radio" id="c" />3</div>
<div><input type="radio" name="radio" id="d" />4</div>
<div><input type="radio" name="radio" id="e" />5</div>
<div><input type="radio" name="radio" id="f" />6</div>
</div>
slideToggle()方法是前面两者的合成，因此上面的例子也可以改写成这样：
$("#div_click").click(
function(){
$("#radios").slideToggle("slow");
}
);
另外值得注意的是：在进行页面开发时，我们应该而且也必须使用XHTML规范，它符合W3C标准，是比HTML更规范、更严格的一个标记语言。
上面的例子，如果不加上下面一句，动画会有点小问题：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
对比这个写法：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN">
试试看看效果会有什么不一样。
4、AJAX
jQuery提供了好几个Ajax实现，一般情况下你可以使用$.get或$.post，当然也可以采用最底层的实现$.ajax，推荐最后一种，它有一个参数，是一个key/value对象，来看个例子
// 在合同编号失去焦点时验证数据库中是否存在相同的编号
$("#contCode").blur(
function(){
var ctrCode = $(this);
if(ctrCode.val() != ''){
//标准的ajax方式
$.ajax({
type:"POST",
url:"${ctx}/contractInfoAction.do?method=validateContractCode",
data:"contract_code="+ctrCode.val(),
success:function(data){
if(data == '1'){ //1为存在相同的合同编号
alert("该合同编号已被使用，请重新输入！");
ctrCode.val('');
ctrCode.focus();
return false;
}
}
});
}
}
);
关于$.get和$.post很简单，帮助文档中说的很清楚，不过有一点需要注意，这两个方法的参数顺序不能搞错了，一定要按它规定的来。而对于$.ajax来说，因为里面是一个key/value对象，所以顺序对它没有影响，只要key/value对应就不会有错。
这四个部分基本上涵盖了jQuery的大部分内容，也有许多示例帮助理解，另外多看帮助文档也是一个非常好的学习方式。我深深的体会到，只有多动手做，才会有提高。光学不练是一点用处都没有的。特别是在项目中学习，那速度，真是"飞"一般的感觉啊！哈哈，我们下次继续讨论。
关于jQuery操作DOM的内容完了吗？不，还没有，还有更多！
1、尽可能的用#id和属性选择器
在选择DOM元素时，jQuery的选择器无疑提供了非常多的功能，除了特性选择器外，对文档元素的查找操作，我觉得还是#id和[attribute]最为实用，当然这不是否定其它的选择器。我这样说是有原因的。
在实际开发中，程序员一般是以模块为单位进行功能开发，那么从前台到后台都是一个人在做。而页面的美化工作可能会交给美工（也可能是前台开发人员）来完成，如果需要对DOM的结构进行调整或重新布局，这时，当脚本中使用了CSS选择器或位置选择器，这时，你能保证不会对功能有影响吗？难道还要和开发人员进行沟通，这里不能这样写，那里需要调整。可是一个系统中的页面会只有一两个吗？这样改下来，得要多少时间？这时有人会说了，你设计没做好，设计之初就应该考虑好，样式布局就应该做好。那么就不会出现这样的问题。是的，设计很重要，设计的好坏决定项目成败。但是，我要告诉你，世上没有绝对的事情，我们所做的一切都是以客户为出发点，客户不满意了，要你改，你能不改吗？
使用ID的好处显而易见，给元素加上ID，通过ID获得该元素对象，然后进行相应操作，不管结构如何变化，代码不用修改。请一定注意，ID不能重复了。
可是ID只能对单一元素进行操作（这是相对的，后面有讲到对ID也可以批量操作），如果有多个元素怎么办呢？这里就要用到属性选择器了。帮助文档里罗列了各种属性选择器，而且有说明和示例。不过例子太简单了，会让很多人没有感觉，对它没有引起足够的重视，在这里大象用几个实例来说明一下它们的用法。
a)
$(function(){
$("[name=ctrRadio]").each(function(){
$(this).click(
function(){
// click事件代码
}
);
});
});
<input type="radio"name="ctrRadio" /> // 有很多个单选按钮，组成一个单选按钮组
页面数据列表一般采取分页显示，每页10条、15条或更多，每一行都添加了一个单选按钮，在初始化时，我们给每个单选按钮绑定一个click事件，所以这里我们使用[attribute=value]形式的属性选择器来实现我们的需求。另外name值如果定义好了，我们也不会轻易再去改动它，调整单选按钮的位置也不会影响到代码。比如现在位于每行的第一列是单选按钮，后来客户要求，要将它放到最后一列去，或是将type改成button，这都不会影响原来实现的代码。除非你要把它改成checkbox，那么，这应该算是需求变更了吧？
b)
$(function(){
$("[name$='chk']").attr("checked","checked").click(
function(){
var chkbox = $(this); // this是当前的复选框对象，$(this)是获得该复选框的jQuery对象
if(chkbox.attr("checked")){
alert("选择: "+chkbox.val());
}else{
alert("取消: "+chkbox.val());
}
}
);
});
<div><input type="checkbox"name="stationchk" value="a" />1</div>
<div><input type="checkbox"name="stationchk" value="b" />2</div>
<div><input type="checkbox" name="intervalchk"value="c" />3</div>
<div><input type="checkbox"name="intervalchk" value="d" />4</div>
<div><input type="checkbox"name="commonchk" value="e" />5</div>
<div><input type="checkbox"name="commonchk" value="f" />6</div>
文档初始化时，通过属性选择器查找所有name名称以chk结尾的DOM元素，并将它设为选中状态，同时给它绑定click事件。这里可以在[name$='chk']前面加上input，缩小搜索范围。当然，你得确保以chk结尾的都是你想操作的checkbox，避免出现让自己困惑的BUG。因此在做之前，充分的思考很有必要，这会大大提高你的开发效率和减少出现错误的机率。虽然表面看起来多花了一点时间，但是你会觉得这是很值得的。
[attribute^=value]和[attribute$=value]是相对的一组选择器，前者是匹配指定的属性以某些值开始的元素，后者刚好相反，匹配给定的属性是以某些值结尾的元素，请一定记住attribute是属性，比如上面的type、name、value等等。在项目中大量的通过id、name属性来批量的操作DOM元素。
我说下怎么通过ID获得多个集合，其实很简单，在设置ID值的时候，给它定义一个字符串再加上其它的唯一标识就能够实现这一功能。
<c:forEach var="info" items="${infos}">
<input name="modinfo" id="modInfo_${info.parent_id}_${info.f_id}" type="checkbox" value="${info.f_id},${info.parent_id}" />
</c:forEach>
在数据库中f_id是主键标识，因此它具有唯一性，parent_id是父ID，它们和modInfo_组合起来就可以成为id属性的唯一标识。forEach循环会产生多个checkbox，所以我们就使用$("[id^='modInfo_']")表达式来取得结果集。有人会问有name不就行了吗？为什么还要设置id？而且还要将两种ID值与字符串拼接成复选框的id属性值。这是由于功能需要，不光要用到name，还要用到id，而且checkbox上还绑定了click，事件处理中还会用到value中的值。有时我们的业务需求确实很复杂，这时我们就可以采取这种方式来区分彼此之间存在一些联系而又独立的DOM集合。
在实际项目当中如何组合，还是得具体问题具体分析。另外，我们也不能忘掉那些特性选择器，它们同样很有用。
c)
$(function(){
$("[name^='station']:checkbox").attr("checked","checked").click(
function(){
if($(this).attr("checked")){
alert("选择: "+$(this).val());
}else{
alert("取消: "+$(this).val());
}
}
);
});
<div><input type="checkbox"name="stationchk" value="a" />1</div>
<div><input type="checkbox"name="stationchk" value="b" />2</div>
<div><input type="checkbox"name="intervalchk" value="c" />3</div>
<div><input type="checkbox"name="intervalchk" value="d" />4</div>
<div><input type="checkbox"name="commonchk" value="e" />5</div>
<div><input type="checkbox"name="commonchk" value="f" />6</div>
<div><input type="radio"name="stationrad" value="g" />7</div>
<div><input type="radio"name="stationrad" value="h" />8</div>
这个例子在b)的基础上作了一些修改，它表示在文档初始化时，通过属性选择器查找所有name名称以station开头并且type为checkbox的DOM元素，同时绑定click事件。如果将:checkbox去掉会不会有变化呢？答案是肯定的，单选按钮组也被绑定了事件。再看几个例子：
$("[name=ctrRadio]:checked").attr("checked",""); //取消已选中的单选框
$("[id^='modInfo_']").is(":hidden"); //如果表达式中的集合只要有一个不可见，就返回true
$("select[name='contract_kind'] option:eq(0)").attr("selected","selected"); //选中第一条记录
2、jQuery属性——很好，很强大
attr、addClass、removeClass、css、html、text、val、height、width这些命令在实际应用中的使用频率非常高，应该把它们全部掌握。这些属性都有赋值与取值的方法，为我们操作DOM提供了很方便的支持。举几个例子说明一下：
$(":button").addClass("button1"); //给所有的按钮添加样式
$("#ctr_info").attr("src","${ctx}/BaseAction.do?method=list"); //给id为ctr_info的iframe的src属性设置地址
$("#stationchk").attr("checked"); //获得复选框是否选中，选中为true，否则为false
$("#sum").css("ime-mode","disabled"); //屏蔽输入法
$("[name='stationchk']").parent().html("哈哈"); //返回包含匹配表达式的唯一父元素的元素集合
$("#ctr_info").load(function(){
var ifr_height = $(this).contents().find("#ctr_other").height(); //通过ID重新计算iframe的高度
ifr_height = ifr_height < 400 ? 350 : ifr_height;
$(this).height(ifr_height);
});
这些属性的运用技巧需要多做才能加深理解，对于以前使用原生JavaScript来编写脚本的程序员而言，无疑是一件很幸福的事，极大的简化了代码，减少了很多的工作量。
3、丰富的文档处理功能
从帮助文档中，我们可以看到，jQuery提供了一套很完备的文档处理函数。基本上需要有的都包含了。大象目前也只是使用了其中一部分，当然这跟应用环境也有关。来看个例子：
$(function(){
$("#btn_add").click(
function(){
$("<div name='_info'><input type='text' name='info'/> <input name='btndel' type='button' value='删除' /></div>").find(":button").click(
function(){
var index = jQuery("[name='btndel']").index(this); //this是删除按钮这个对象，index是获得该按钮在这组集合中的索引值
$("[name='_info']:eq("+index+")").remove();
}
).end().appendTo("#div_info");
}
);
});
<div><input id="btn_add"type="button" value="增加" /></div>
<div id="div_info"></div>
这段很少的代码却帮我们做了相当多的事情，详细分析一下：
在文档初始化的时候，对增加按钮绑定事件，当点击增加时，我们创建一个文本框和一个删除按钮的div，然后使用查找功能(find)在刚创建的html中找到button按钮(:button)，这时会返回<input name='btndel'type='button' value='删除'/>这个DOM元素的jQuery对象，接着给这个按钮绑定事件，使之，当我们点击某个删除按钮时，删除对应的元素。随后我们退回(end)到创建的div。最后把这个新增的元素追加到div_info元素之后，运行这个示例看看效果。PS：创建DOM时，如果比较复杂，可以用变量来拼接字符串，最后再放到$()里面。
这个例子充分体现了jQuery链的强大，一条语句就完成了这么多的功能，请大家充分利用jQuery链。牢记：jQuery对象与DOM对象的区别。
在删除的时候使用的是remove()而没有使用empty()，这两个方法执行后都会返回jQuery集合，不同的是，remove()会将元素从页面DOM中删除，而empty()只是删除匹配集合中的子节点（包括文本），但仍保留其在DOM中所占的位置。示例：
$(function(){
$("#btn_del").click(
function(){
$("p").empty();
//$("p").remove();
}
);
});
<input id="btn_del" type="button" value="删除" />
<p>hello</p>
jquery
<p>welcome</p>
用Firefox来运行示例，启动Firebug工具可以看到文档加载完成时的情况：
当我们点击删除后，结果如下：
再看执行remove方法后的结果：
文档处理的方法还有很多，我只能就遇到及使用过的举些例子说明一下，其它的就需要在大家工作中去发现去总结，也请各位把自己的心得体会分享出来，让我们一起学习，共同提高。所有代码均在jquery-1.2.6版本下测试通过。
Ajax无疑是当今WEB开发的重要技术，也是目前RIA（富互联网应用）的主要实现方式之一。本文将在前几篇的基础上，介绍如何利用jQuery使得操作Ajax变得更方便，实现更强大的功能。
就算到目前为止，Ajax的技术标准还是没有统一起来，主要体现在微软与非微软浏览器上面。虽然IE7之后提供了标准版本XHR（XMLHttpRequest）对象，但早期的IE6及以前版本则是另一种实现方式（XMLHTTP）。所以在使用Ajax之前都得先检测当前浏览器提供哪种对象，然后再进行后续的操作，相信有过这种经历的朋友都应该印象深刻。总之一句话，非常不爽！
如今有了jQuery，使得操作Ajax变得极其简单！你不必再去关心当前是哪种浏览器，你只需要关注你的程序想实现什么功能。jQuery已经为我们处理好了浏览器（应该是当前大多数）的兼容问题，而且提供了很多很好用的方法来实现Ajax功能。
jQuery提供了六种请求方式实现Ajax。load、getScript、getJSON、get、post、ajax。这里面getScript和getJSON是最上层的方法调用，get和post是倒数第二层调用，而ajax则是最底层的调用函数，所有的调用最终都会转换为调用ajax函数。如果对这段话存有疑惑的朋友请看下源码，不用完全看懂，只需要了解他们之间的调用顺序即可。另外load方法一般是用来加载页面内容到匹配的元素上。如果省略load方法的parametera参数，发送GET请求；如果有parametera参数，则是POST请求。如果想带参数又想发送GET请求怎么办呢？可以把参数写到url中。
大象在这里建议并推荐大家采用$.ajax()方式来实现Ajax调用。一是这种方式最直接，效率最高；二是这种方式功能最强大；三是从写法来看，key:value（键值对）可以减少出错。当然了，我并不是强制不能使用其它方式，我只是善意的建议，根据具体的情况作出最适当的选择。
记得在jQuery学习总结（二）最后第四部分，我用一个项目实例来说明如何利用$.ajax实现Ajax，下面进行详细讲解。
先来看看$.ajax()函数常用参数说明，有个总体印象。
在实际开发中，我们大多数情况下，只会使用这样几个参数:url、type、data、dataType、success。它们的使用频率是非常高的，基本上实现Ajax的调用，这样几个参数够用了。当然，jQuery还提供其它更丰富的参数，来满足你不同的需求。帮助文档中有完整的说明。
在实际应用中，我们很多时候都会用到相同的参数，这时可以利用jQuery提供的属性工具，设置一组默认的Ajax属性简化开发。
$.ajaxSetup({
type: 'POST',
dataType: 'text',
error: function(xhr){
$("#errorDiv").html("Ajax错误信息："+xhr.status+' '+xhr.statusText);
}
});
这样设置后，将确保后面的每个Ajax调用（不包括load）使用这些默认值。
接下来看看全局Ajax事件。注意global参数，它的默认值为true，所以会自动触发全局Ajax函数。如果显示的设为false，则不会触发。ajaxStart、ajaxSend、ajaxSuccess、ajaxError、ajaxComplete、ajaxStop等等。这些全局函数将在Ajax请求处理的不同阶段被触发。看个示例：
$(function(){
$("#success_msg").html("成功加载完成！").hide();
$("#tip").html("图形正在加载...").hide();
$("#btn_show ").click(
function(){
$("#div_info").empty(); //清空它里面的内容
$("#tip").ajaxStart(function(info){
$(info.target).show(300);
}).ajaxStop(function(info){
$(info.target).hide(300);
});
$("#success_msg").ajaxSuccess(function(info){
$(info.target).show().hide(1000);
});
$.ajax({
type:"GET",
url:"b.html",
success:function(info){
$("#div_info").append(info);
}
});
}
);
});
<div><input id="btn_show" type="button" value="显示" /></div>
<div id="tip"></div>
<div id="success_msg"></div>
<div id="div_info"></div>
b.html很简单，就是在body之间插入这一段代码。
<div style="background-color:#00FF00;width:300px;height:300px"></div>
现在对这个例子做下说明。
首先初始化时，对ID为success_msg和tip的两个DIV设置页面内容，并将其隐藏。再对显示按钮绑定事件，同时定义全局Ajax函数的回调函数，在不同的执行阶段，进行不同的结果处理。当触发时，会执行ajax调用，ajax方法执行后，会在div_info中显示出b.html中的内容，我这里是为了演示，所以将样式写到style属性中，大家不要这样写，应该采取我前面讲过的规范方法做。
ajaxStart 是在发起Ajax请求时，并在XHR实例被创建之前执行。回调函数也在这个时候被触发，这里我让初始化时设置的tip信息在300毫秒内显示出来。
ajaxStop 是在Ajax请求结束后，没有进行中的Ajax，任何回调函数执行完成之后调用。这里当请求结束后，让tip在300毫秒内隐藏起来。
最后是请求成功的ajaxSuccess函数，先让它显示出来，再让它在1秒内逐渐隐藏。
全局事件的回调函数都有一个对象参数，它有两个属性。
type：全局函数类型字符串，就是全局事件的名称。比如：ajaxStart、ajaxStop等。
target：被引用的DOM元素。比如：tip、success_msg等。
除此之外还有一个XHR对象参数，这个参数只有ajaxStart和ajaxStop没有，其它的函数都有。
到这里Ajax的内容基本上都说完了，剩下的就是实际运用。如果大家有什么好的想法和意见还请提出来，大象喜欢和各位交流经验，共同提高。以上代码是在jquery-1.2.6版本下测试通过。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 学习JQuery EasyUI总结（一） 表单提交与validate
- jquery easyui 对于开始时间小于结束时间的判断
- 读<jquery 权威指南>[3]-动画
- 当jQuery1.7遇上focus方法的问题
- jQuery中delegate和on的用法与区别详细解析
- js和jquery使按钮失效的方法
- [jQuery] $.grep使用
- jquery-form/struts2文件上传
- Jquery 动态加载数据问题
- jquery.mmenu
- jQuery:delegate中select()不起作用的解决方法(实例讲解)
- jQuery中delegate和on的用法与区别详细解析
- 当jQuery1.7遇上focus方法的问题
- jQuery focus和blur事件的应用详解
- jQuery调用RESTful WCF示例代码(GET方法/POST方法)
- 用jQuery模拟select下拉框的简单示例代码
- JS对象转换为Jquery对象示例
- js加入收藏以及使用Jquery更改透明度
- Jquery创建层显示标题和内容且随鼠标移动而移动
- js和jquery使按钮失效为不可用状态的方法