浏览器中的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值。

完结。。。