新做的后台管理界面【2010年5月1日整理源代码】
2010年2月22日
35 条评论
存档
‘jQuery’ 分类的存档
用jQuery做的带缩略图和文字信息焦点图片切换
2010年2月3日
1 条评论
虽然网上焦点图片广告的代码很多，有js+css的，也有flash+xml的。但看了好多都不符合Leeo在做的一个网站的需求，（PS：国外的flash+xml基本都不支持中文，⊙﹏⊙b汗），于是Leeo自己动手用jQuery写了一个，打算有时间整理成插件，暂时就只发个图片露露脸吧。。。
【转】jQuery 1.4官方文档中文版发布
2010年1月28日
没有评论
原文地址：http://www.cnblogs.com/kuku-1/archive/2010/01/19/1651440.html
jQuery 1.4 发布啦
为了庆祝jQuery的四周岁生日, jQuery的团队荣幸的发布了jQuery Javascript库的最新主要版本! 这个版本包含了大量的编程，测试，和记录文档的工作，我们为此感到很骄傲。
我要以个人的名义感谢 Brandon Aaron, Ben Alman, Louis-Rémi Babe, Ariel Flesler, Paul Irish, Robert Kati?, Yehuda Katz, Dave Methvin, Justin Meyer, Karl Swedberg, and Aaron Quint。谢谢他们在修复BUG和完成这次发布上所做的工作。
下载(Downloading)
按照惯例，我们提供了两份jQuery的拷贝，一份是最小化的(我们现在采用Google Closure作为默认的压缩工具了)，一份是未压缩的(供纠错或阅读)。
另外，Google也在他们的服务器上放置了一份jQuery的拷贝。这份拷贝会自动的最小化然后压缩 – 并且放在Google最快的缓存服务器上。
你可以在你的站点上直接引用上面的URL，这样就可以享受迅速加载jQuery的性能优势了。
就jQuery1.4来说，我们努力的减少大规模升级中的麻烦 – 通过保持所有public函数的签名。即使如此，还请通读可能会造成问题的变更列表，这样能够了解哪些变更可能会给你的应用造成问题。
(功能) Features
下面的内容概括了jQuery1.4里加入的变更和功能。另外所有的变更都已经在jQuery 1.4 的文档里记录了。
热门方法经过了性能上的大”检修”
不少比较热门的和常用的jQuery方法在1.4里被重写了。(译注:重写了方法的内部，外部调用没有大幅度改变) 我们分析源码的时候发现我们能够获得大幅的性能提升，通过把jQuery和自己比较: 查看内部函数被调用了多少次，然后努力降低源码的复杂度(译注:计算机算法中的Complexity)
在1.4版里我们显著的降低了大部分热门jQuery方法的的复杂度。
更易用的设置函数 (Easy Setter Functions)
算来已经有一阵了，你们已经可以给.attr()传递一个函数，然后这个函数的结果会被用来赋给相应的HTML属性(attribute)上。这个功能现在被移植到所有的设置函数了: .css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .before(), .after(), .replaceWith(), .wrap(), .wrapInner(), .offset(), .addClass(), .removeClass(), 以及 .toggleClass().
另外, 对于下面几个方法，当前的值会被作为第2个变量传递给这个函数。.css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .offset(), .addClass(), .removeClass(), 以及 .toggleClass().
这样代码就可以这样写:
// 找出所有A标签里的'&'字符，然后用一个span标签包围
$('a').html(function(i,html){
return html.replace(/&/gi,'&');
});
// 给一些链接的title属性加些信息
$('a[target]').attr("title", function(i,title){
return title + " (新窗口打开)";
});
Ajax
嵌套参数的序列化 (jQuery.param() 文档, Commit 1, Commit 2)
jQuery 1.4在jQuery.param方法里加入了嵌入参数序列化的支持，借用了PHP编程里兴起的，而后又被Ruby on Rails推广开来的方式。
举例来说，
{foo: ["bar", "baz"]} 会被序列化为 “foo[]=bar&foo[]=baz”.
在jQuery 1.3版里, {foo: ["bar", "baz"]} 曾被序列化为 “foo=bar&foo=baz”. 但是，这样做没用办法将只含有一个元素的阵列编码。如果你需要旧的序列化方式，你可以设置传统Ajax设置来进行切换。(使用jQuery.ajaxSettings.traditional进行全局切换，或者根据情况单独切换。
总共有3种方式可以切换到旧的序列化方式:
// 全局改变序列化方式 (使用旧的)
jQuery.ajaxSettings.traditional = true;
// 指定情况使用旧的序列化方式
jQuery.param( stuff, true );
// 针对一个单独的Ajax请求使用旧的序列化方式
$.ajax({ data: stuff, traditional: true });
更多信息参见: jQuery.param() 文档, jQuery.ajax() 文档, Commit, Code
JSON和脚本类型通过”content-type”自动识别。 (jQuery.ajax 文档, Commit 1, Commit 2)
如果一个Ajax请求的回复的媒体类型是JSON(application/json), dataType默认设为”json”(如果dataType没有被指明)。另外，如果回复的媒体类型是 Javascript(application/javascript), dataType默认设为”script”(同样，如果dataType没有明确指明), 这种情况下，脚本会自动运行。
加入了Etag的支持 (jQuery.ajax() 文档, Commit)
默认设置下, jQuery会忽略Ajax请求的”Last-Modified”页头。这样做是为了忽略浏览器的缓存。设置ifModified:true就可以使 jQuery使用可用的缓存。jQuery1.4还会发出”If-None-Match”的页头如果你设置了ifModified选项。
严格JSON模式，本地的JSON.parse方法 (jQuery.ajax() 文档, Commit 1, Commit 2, Commit 3)
jQuery 1.3和以前的版本曾使用Javascript的eval对引入的JSON解析。1.4版则会使用本地的JSON解析器，前提是如果有本地的解析器可用。它也会对引入的JSON进行校验。所以在jQuery.getJSON方法里，或当一个Ajax请求的dataType是”json”的时候，jQuery会拒绝不合标准的JSON(例如{foo: "bar"})。
序列化HTML5的元素 (jQuery.param() 文档, Commit)
新的HTML5输入方法 (比如’datetime’和’range’)在序列化.serialize()一个表单的时候会被包括在内。
Ajax请求的环境 (jQuery.ajax() 文档, Commit)
你可以附加一个”环境”到Ajax请求上，所有的回调函数里都会拥有同样的”环境”设置(这样可以简化你的代码，尽可能避免使用闭合,或是其他对象)。
jQuery.ajax({
url: "test.html",
context: document.body,
success: function(){
jQuery(this).addClass("done");
}
});
请求成功回调函数的第三个参数会被设为原始的XHR对象 (jQuery.ajax() 文档, Commit)
所有的Ajax请求的成功回调函数现在都会收到原始的XMLHttpRequest对象，作为第三个参数。之前这个XHR对象只能通过$.ajax一类方法的返回值来获取。
明确设置”Content-Type” (jQuery.ajax() 文档, Commit)
在1.3版，如果没有实际数据发送，jQuery.ajax的contentType会被忽略。1.4版里，contentType将总是和请求一同发送。这修复了某些后台凭靠”Content-Type”页头判断回复类别所造成的问题。
明确设置JSONP回调函数的名字 (jQuery.ajax 文档, Commit)
你可以使用jQuery.ajax()方法的jsonpCallback选项，通过名字来指定JSONP的回调函数。
防止启动前跨域XHR (Commit)
跨域Ajax(针对提供支持的浏览器)将更易用，因为默认设置下，启动前XHR被阻止了。(TODO)
jQuery.ajax()现在使用”onreadystatechange”事件替换了计时器 (Commit)
使用”onreadystatechange”替换了轮流探询，Ajax请求现在将使用更少的资源
元素属性 (Attributes)
.css()和.attr() 的性能被优化了。
<
.attr()方法多了一个设置函数作为参数 (.attr() 文档)
你不但可以将一个函数用在.attr()里，还可以在这个函数里使用属性的当前值。
jQuery('<img src="enter.png" alt="enter your name" />')
.attr("alt", function(index, value) {
return "Please, " + value;
});
.val( Function ) (.val() 文档)
<input class="food" type='text' data-index="0" /> <input class="food" type='text' data-index="1" />
jQuery("input:text.food").hide();
jQuery("<ul class='sortable'><li>Peanut Butter</li><li>Jelly</li></ul>"
)
.sortable()
.bind("endsort", function() {
$(":text.food").val(function() {
return $("ul.sortable li:eq(" + $(this).attr("data-index") + ")").text();
});
});
text和CDATAHTML元素也支持.text()方法了 (.text() 文档, Commit)
核心 (Core)
快捷元素创建 (jQuery() 文档, Commit)
现在当你需要使用jQuery函数创建一个元素的时候，你可以同时附递一个对象来指定属性值和事件:
jQuery("
", {
id: "foo",
css: {
height: "50px",
width: "50px",
color: "blue",
backgroundColor: "#ccc"
},
click: function() {
$(this).css("backgroundColor", "red");
}
}).appendTo("body");
对象里的键值的名字与相关的jQuery的方法的名字是对应的，对象的值会被作为参数传递给jQuery的方法。
(译注:譬如$("<a>link</a>", {css:{background:"#ccc"}});相当于$("<a>link</a>")).css("background", "#ccc");
.eq(-N), .get(-N) (负指数) (.eq() 文档, .get() 文档, Commit)
你现在可以在.get()和.eq()方法里使用负数。譬如，你要选择倒数第2个div元素，或者是倒数第2个DOM对象:
$("div").eq(-2);
$("div").get(-2);
新的.first()和.last()方法 (.first() 文档, .last() 文档, Commit)
方便起见, 新增的.first()和.last()方法等同于.eq(0)和.eq(-1).
新的.toArray()方法 (.toArray() 文档, Commit)
.get()方法自始就是从jQuery集合里返回一个阵列。为了能够更明确, 你可以用.toArray()来达到一样的效果。(译注:这里应该是为了以后的版本留出空间，譬如以后可能会加入.toList()方法，到时候就会易于区分。) 不过，和.get()不一样的是，.toArray()不接受参数。
jQuery()返回一个空集 (jQuery() 文档, Commit)
在jQuery 1.3中,jQuery()方法返回仅包括document的jQuery集合。这个可以用来创建一个空集，然后动态加入一些元素。注: jQuery().ready()方式在1.4中依然有效，但是被指示陈旧了。请使用jQuery(document).ready()或者jQuery(function(){})。
jQuery(“TAG”) (Element Selector 文档, Commit)
当使用单个标签名字的时候jQuery会使用更快捷的路径。
jQuery(“<div>”), jQuery(“<div/>”) 和 jQuery(“<div></div>”) (jQuery() 文档, Commit)
现在这三个方法都使用同一个代码路径了(document.createElement), 来优化jQuery("<div></div>")的性能。注意，如果你指定了属性，将会使用浏览器本身的语法分析(通过设置innerHTML)。
样式 (CSS)
.css()方法在性能是以前的2倍。
.addClass(), .removeClass(), 和 .hasClass()这几个方法在性能上是以前的3倍
.toggleClass()可以切换多个css类了 (.toggleClass() 文档, Commit)
你可以通过.toggleClass()调用多个css类的名字来切换他们。
$("div").toggleClass("current active");
数据
.data()返回对象, .data(Object)设置对象 (.data() 文档, Commit 1, Commit 2)
有时候你可能需要在一个元素上附加一个复杂的对象。一个常见的例子是你需要从一个元素身上复制所有的数据到令一个元素上。在jQuery 1.4里, 不使用任何参数调用.data()时，.data会返回一个复杂对象。(译注: 包含所有键-值对的对象。) 调用.data(Object) 则会设置这个对象。注意这个对象还包括了元素上绑定的事件，所以用的时候要小心。
除非需要, 不然不会创建数据缓存。 (Commit 1, Commit 2, Commit 3)
jQuery使用一个独特的自定义属性来获取特定元素上附加的数据。当查找数据，但是没有新加的数据的时候，jQuery会尽量避免创建这个自定义属性。这样可能会提高性能，同时还会在这种情况下避免污染DOM。
效果 (Effects)
单个属性缓进缓出 (Per-property Easing 文档, Commit)
除了能够给一个动态效果指定缓进出函数外，你现在可以指定每个属性的缓进出函数了。James Padolsey的blog上有更进一步的信息和演示。
$("#clickme").click(function() {
$("div").animate({
width: ["+=200px", "swing"],
height: ["+=50px", "linear"],
}, 2000, function() {
$(this).after("<div>Animation complete.</div>");
});
});
事件 (Events)
新方法: jQuery.proxy() (jQuery.proxy() Documenation, Commit 1, Commit 2)
如果你需要保证一个函数内的”this”恒定地保持某个值, 你可以用jQuery.proxy获得一个相同作用域的函数。
var obj = {
name: "John",
test: function() {
alert( this.name );
$("#test").unbind("click", obj.test);
}
};
$("#test").click( jQuery.proxy( obj, "test" ) );
多个事件绑定 (.bind() 文档)
你可以通过递入一个对象来一次性绑定元素的多个事件。
$("div.test").bind({
click: function(){
$(this).addClass("active");
},
mouseenter: function(){
$(this).addClass("inside");
},
mouseleave: function(){
$(this).removeClass("inside");
}
});
‘change’和’submit’事件规范化 (Change 文档, Submit 文档)
普通的或是即时的change和submit事件可以在各种浏览器上稳定工作了。我们覆盖了IE里的change和submit, 替换为与其他浏览器相同的事件。
新的事件: ‘focusin’ and ‘focusout’ (.focusin() 文档, .focusout() 文档, Commit)
focusin和focusout在一般情况下等同于focus和blur, 但是多了向父元素传递的作用。如果你自己编写你的事件代理模式(TODO), 这个功能将对你有很大帮助。请注意对focus和blur使用live()方法将不会起作用; 在设计的时候我们根据 DOM事件规范决定不使其向父元素传递事件。
$("form").focusout(function(event) {
var tgt = event.target;
if (tgt.nodeName == "INPUT" && !tgt.value) {
$(tgt).after("nothing here");
}
});
所有的事件都可以成为即时事件 (.live() 文档)
除了ready, focus (用focusin), 和 blur (用focusout)以外, 所有能用.bind()绑定的事件都可以成为即时事件。
在live()所支持的事件里，我们对能够支持下面这几个额外的事件感到尤其骄傲。通过.live()里的事件代理, 1.4版实现了对change, submit, focusin, focusout, mouseenter, 以及mouseleave事件的跨浏览器支持。
注: 如果你需要即时的focus事件，你应该用focusin和focusout, 而不要用focus和blur, 因为就像前面提到的, focus和blur不向上传递。
还有, live()也接受数据对象作为参数了, 同bind()方法一样 (Commit)
live/die也支持环境变量了 (Commit)
现在可以在绑定事件的时候给选择符指定一个环境。如果环境被指定了, 只有属于这个环境下的元素才会被绑定事件。在创建即时事件的时候, 元素本身不需要已经被定义, 但是环境必须被创建。
确定ready事件至少含有body元素 (Commit)
jQuery现在会检查body是不是存在，如果不存在，会对body进行轮流探询。
在不需要手动处理内存溢出的非IE浏览器中, 卸载的速度提高了。 (Commit)
DOM操作 (Manipulation)
在jQuery 1.4里一系列的DOM操作方法的性能都有巨大的提升。
.append(), .prepend(), .before(), and .after()的性能提高了。
.html()的性能提高到以前的3倍。
.remove()和.empty()的速度则达到以前的4倍.
新方法: .detach() (.detach() 文档, Commit)
detach()将一个元素从DOM里移除, 但是并不卸载关联的事件处理函数。这个方法可用于暂时性的将一个元素移除，执行相关操作，然后返回。
var foo = $("#foo").click(function() {
// 相关操作
});
foo.detach();
// foo保留了相关处理函数
foo.appendTo("body");
新的unwrap()方法 (documentation, commit)
unwrap()方法拿到一个已知的父元素的子元素，然后将父元素用子元素替换。(译注: 将子元素从”包裹”里拿出来, 因名unwrap)。如此这般:
<body> <div> <p>annie</p> <p>davey</p> <p>stevie</p> </div> </body>
$('div').unwrap();
<body> <p>annie</p> <p>davey</p> <p>stevie</p> </body>
domManip方法里的缓存 (commit)
jQuery会将jQuery("<div>")和.after("<div>")一类方法创建的节点记入缓存。这样, 对于利用这些方法, 使用字符串进行DOM操作的页面，性能将有极大的提高。
无连接的节点间的before, after, replaceWith操作 (commit)
现在你可以对还没有放置到DOM Tree上的节点进行before, after, 和replaceWith的操作了。意味着你可以先对节点进行复杂的操作, 待完成后再放到合适的DOM位置上。这样也能尽量避免操作过程中造成重新排版。
jQuery("<div>").before("<p>Hello</p>").appendTo("body")
.clone(true) 也会复制关联数据 (clone 文档, commit)
1.3版中, .clone(true)虽然也是深度复制, 但是没有复制关联的数据。1.4版里，它则会复制数据, 同时还包括所有的事件。这点上和jQuery.extend在语义想同的, 所以普通对象和阵列会被复制, 但是自定义的对象则不会。
位移 (Offset)
.offset( coords | Function ) (.offset() 文档, commit)
现在可以设置元素的位移了! 和所有的设置函数一样, offset也可以接受一个函数作为第二个参数。
队列 (Queueing)
队列经历了一次大修, 使用队列会比使用默认的fx更易掌握。
新的 .delay() 方法 (.delay() 文档, commit)
.delay()方法会根据参数滞后若干毫秒执行队列里剩下的对象。默认的它会使用”fx”队列。但你可以选择性的通过delay方法的第二个参数选择其他队列。(译注:每个队列都以一个名字识别。)
$("div").fadeIn().delay(4000).fadeOut();
队列里的next (.queue() 文档, commit)
jQuery 1.4版里, 当队列里的一个函数被调用的时候，第一个参数会被设为另一个函数。当后者被调用的时候, 会自动排除队列里的下一个对象, 以此来推动队列到下一步。
jQuery("div").queue("ajax", function(next) {
var self = this;
jQuery.getJSON("/update", function(json) {
$(self).html(json.text);
next();
};
}).queue("ajax", function() {
$(this).fadeIn();
});
.clearQueue() (clearQueue 文档, commit)
队列可以被清空了。这个方法会移除队列里所有未执行的函数, 但不会移除正在运行的函数。无参数的情况下调用.clearQueue()方法将会清空默认的”fx”队列。
选择符 (Selectors)
“#id p”效率更高 (commit)
所有以ID开头的选择符都得到了优化, 能够在瞬间得到返回值。所有以ID为开头的选择符速度将一直快于其他选择符。
页面遍访 (Traversing)
.index(), .index(String) (index 文档, commit)
.index() 方法经过重写, 变得更加直观和灵活。
你可以获得一个元素相对于同父元素的指数:
// 计算第一个 <li class="current"> 元素在它所有的同父元素中的指数:
$("li.current").index()
你也可以获得一个元素在一个jQuery元素集合中的指数, 这个集合可以用一个选择符或者是一个DOM元素来指定:
// 计算这个 <h3 id="more-info"> 元素在页面上所有 <h3> 元素里的指数:
$("#more-info").index("h3")
这个方法相当于选择符里的:has()过滤法。它拿到一个jQuery集合,返回含有指定选择符的元素。
新的 .nextUntil(), .prevUntil(), .parentsUntil() 方法 (.nextUntil() 文档, .prevUntil() 文档, .parentsUntil() 文档, commit)
新的”until”方法类似于.nextAll(), .prevAll(), 和.parents()。区别是可以用一个选择符来停止元素探索。
.add(String, Element) (.add() 文档, commit)
可以给.add()方法指定环境了。这个功能可以用于在一个调用链中加入和操作额外元素(比如Ajax请求里返回的新元素)。
.closest(filter, DOMElement) (.closest() 文档, commit)
可以通过closest方法的第2个参数设置一个DOMElement环境。给closest设置一个环境一般能够提高这个方法的运行速度。这个优化也适用live(), 因为这个方法内部调用了closest()。
常用工具 (Utilities)
jQuery.isEmptyObject() (jQuery.isEmptyObject() 文档, commit)
如果对象,em>没有任何属性, 该方法将返回true。jQuery.isEmptyObject()方法不对参数进行任何检查, 所以请保证参数是一个对象。
jQuery.isPlainObject() (jQuery.isPlainObject(), commit )
如果一个对象是通过字符创建的(译注:{}),jQuery.isPlainObject()返回true; 如果对象是其他类别的对象(译注:如new Object())或者是基本类型, 则返回false。
jQuery.contains() (jQuery.contains() 文档, commit)
如果两个参数都是DOM节点，并且第二个节点是嵌套在第一个节点内部的话, jQuery.contains()返回true。反之返回false。
jQuery.noop (jQuery.noop() 文档, commit)
是个空的函数, 可以用在必须要有一个函数的情况下。(译注: noop是No Operation的意思。)
jQuery.unique() (jQuery.unique() 文档)
jQuery 1.4版中, jQuery.unique()方法返回结果里的元素是按照他们在页面里的顺序排序的。由于在创建jQuery集合的时候jQuery使用jQuery.unique()方法, 所以jQuery方法返回的集合也是按照他们在页面里的顺序排列的。
其他 (Miscellaneous)
jQuery.browser以浏览器引擎为中心 (jQuery.browser 文档, commit)
例如, 你可以通过jQuery.browser.webkit探测引擎是否是Webkit。
改进了对applets的处理 (commit 1, commit 2)
jQuery不再试图在Java applets上绑定事件或是数据了(绑定事件或是数据会出现错误)。
不再使用arguments.callee (commit)
为了顺应Caja的要求, 同时也因为即将开始应用的ECMAScript 5规范里将其标记为陈旧, 我们将jQuery核心中所有用到arguments.callee的代码都移除了。
用Closure Compiler替换了YUI Min (commit)
中文API文档支持
您可以在Ajax之家（http://www.ajaxa.cn/）下载最新的API文档
内部重组 (Internal Reorganization)
在1.4版的开发过程中的一个重点是要建立一个更易读, 更易懂的代码库。为了达到这个目标我们树立了一系列编写代码规范的向导。
下面是一些主要的变化:
- 旧的’core.js’文件被分成了’attribute.js’, ‘css.js’, ‘data.js’, ‘manipulation.js’, ‘traversing.js’, and ‘queue.js’.
- ready事件被移入了’core.js’ (因为它是jQuery的一个基本组成之一)。
- 大部分核心代码都符合新的代码规范.
- css和属性的逻辑被划分开来, 不再如以往相互缠绕。
测试 (Testing)
jQuery 1.4版发布过程中我们修复了207个问题 (比较之下1.3版里有97个修复)。
jQuery 1.4.此外, 测试的数量从jQuery 1.3.2中的1504例升到了1.4中的3060例。
所有测试都在主要浏览器里完全通过了。(Safari 3.2, Safari 4, Firefox 2, Firefox 3, Firefox 3.5, IE 6, IE 7,
IE 8, Opera 10.10, and Chrome)
我们尽量试图减小jQuery 1.4对大规模升级可能造成的麻烦 – 保持所有公开函数的签名不变。即使如此, 请通读下面的列表以保证你对可能对你的应用造成问题的变更。
- .add()不再简单的将结果串联到一起, 结果将会被混合到一起, 然后根据他们在页面里的顺序排列。
- .clone(true)将复制事件和数据, 而不仅是事件。
- jQuery.data(elem) 不再返回
id, 取而代之的是元素的对象缓存。 - jQuery() (无参数) 不再自动转换成jQuery(document)了。
- 通过.val(“…”)获得一个
option或一个checkbox的值不再有歧义(将总是根据value属性选择, 而不是根据text的值)。(Commit) - jQuery.browser.version现在将返回引擎的版本.
- 现在起将对引入的JSON更严格, 如果JSON的格式不符将会报错。如果你需要对不符合JSON严格格式的Javascript进行估值, 你必须设置请求的文件类型为纯文本, 然后用
eval()来对内容估值。 - 参数序列化默认会按照PHP/Rails的风格进行。你可以通过
jQuery.ajaxSettings.traditional = true;来切换到旧的序列化方式。你也可以针对个别请求进行切换, 在调用jQuery.ajax的时候递入{traditional: true} - 内部的jQuery.className被移除了。
- jQuery.extend(true, …)不再扩展复杂对象或是阵列。(TODO)
- 如果一个Ajax请求没有指定dataType, 而返回的数据类型是”text/javascript”, 那么回复将会被执行。之前, 必须明确的指定dataType。
- 设置Ajax 请求的”ifModified”属性会将ETags纳入考虑。
我们还针对1.4版中可能造成问题的变更编写了一个向后兼容的插件。如果你升级到1.4以后出现问题, 可以在引入1.4版的文件之后引入这个插件。
如何使用这个插件:
<script src="http://code.jquery.com/jquery.js"></script> <script src="http://code.jquery.com/jquery.compat-1.3.js"></script>
原始数据和测试页面
性能测试中我们使用了下列测试套包:
- Attributes
- Class
- DOM Manipulation
- Empty/Remove
- Function Call Profiling: 1.3.2 1.4.
结果的原始数据 (所有的数据都是 1.3.2 vs. 1.4):
函数调用的次数 547 3 760 3 500 200 896 399 23909 299 307 118 28955 100 28648 201 1662 593 DOM嵌入 558 317 1079 624 1079 516 1155 829 436 332 196 194 243 169 HTML 116 46 281 78 313 78 234 63 134 43 43 42 91 27 CSS/属性 703 370 1780 1250 1765 1250 1157 749 629 498 346 184 333 161 CSS 114 52 203 93 118 93 109 47 116 54 58 24 54 22 CSS类 553 138 1578 546 1515 501 1033 327 769 298 229 80 173 41 移除/清空 3298 286 9030 2344 7921 1703 5282 1266 2898 303 1166 140 1034 122
原译者:coolnalu
jqGrid 3.6.2版中grid.subgrid.js文件95行存在bug
2009年12月24日
1 条评论
jqGrid做得越来越强大了，并且完全结合了jQuery UI的界面，界面也很漂亮！最近正在做的一个项目中使用了这款表格插件！
今天再做subGrid的时候设置subgridtype为function，结果发现subGrid中的数据死活不出来，甚至url请求也并没有执行。在后发现grid.subgrid.js在对subgridtype进行判断的时候存在，具体位置在grid.subgrid.js文件95行，该行代码为：
ts.p.subgridtype = ts.p.subgridtype.toLowerCase();
当subgridtype为function的时候subgridtype不具备toLowerCase()方法，所以代码会终止执行。
解决方法：修改代码如下
第一步：
96行源代码：if($.isFunction(ts.p.subgridtype)) {ts.p.subgridtype(dp);}
改为：if($.isFunction(ts.p.subgridtype)) {ts.p.subgridtype(dp);}else{
第二步：
将95行的代码：ts.p.subgridtype = ts.p.subgridtype.toLowerCase();
放到97行代码：switch(ts.p.subgridtype) {
之前
第三步：
在115与116行之间加一个右大括号｝这样就可以了。
Struts2 jQuery Plugin
2009年12月18日
没有评论
Leeo本人一直很喜欢jQuery这个优秀的js框架。刚刚在Google搜索jqGrid结合Struts2使用的时候，无意中发现这这么一个插件“Struts2 jQuery Plugin”，貌似很不错，以后有空要研究研究，这里暂时做个记录，方便日后查阅。
项目地址：http://code.google.com/p/struts2-jquery/
实例地址：http://www.weinfreund.de/struts2-jquery-showcase/index.action
jQuery学习笔记8——jQuery性能优化指南【转】
2009年11月12日
没有评论
现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, 性能问题还是需要引起重视的. 在twitter上发现了<jQuery Performance Rules>这篇文章, 简单的摘译了一下:
- 总是从ID选择器开始继承
- 在class前使用tag
- 将jquery对象缓存起来
- 掌握强大的链式操作
- 使用子查询
- 对直接的DOM操作进行限制
- 冒泡
- 消除无效查询
- 推迟到 $(window).load
- 压缩js
- 全面掌握jquery库
1. 总是从ID选择器开始继承
在jquery中最快的选择器是ID选择器。因为它直接来自于Javascript的getElementById()方法.
<div id="content"> <form method="post" action="/"> <h2>Traffic Light</h2> <ul id="traffic_light"> <li><input type="radio" class="on" name="light" value="red" /> Red</li> <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li> <li><input type="radio" class="off" name="light" value="green" /> Green</li> </ul> <input class="button" id="traffic_button" type="submit" value="Go" /> </form> </div>
像这样选择按钮是低效的：
var traffic_button = $('#content .button');
用ID直接选择按钮效率更高：
var traffic_button = $('#traffic_button');
选择多个元素
提到多元素选择其实是在说DOM遍历和循环，这些都是比较慢的东西。为了提高性能，最好从就近的ID开始继承
var traffic_lights = $('#traffic_light input');
2. 在class前使用tag
第二快的选择器是tag选择器($(’head’))。同理，因为它来自原生的getElementsByTagName()方法。
<div id="content"> <form method="post" action="/"> <h2>Traffic Light</h2> <ul id="traffic_light"> <li><input type="radio" class="on" name="light" value="red" /> Red</li> <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li> <li><input type="radio" class="off" name="light" value="green" /> Green</li> </ul> <input class="button" id="traffic_button" type="submit" value="Go" /> </form> </div>
总是用一个tag name来限制(修饰)class (并且不要忘记就近的ID)：
var active_light = $('#traffic_light input.on');
注意: 在jquery中Class是最慢的选择器。IE浏览器下它会遍历所有DOM节点不管它用在那里。
不要用用tag name来修饰ID。下面的例子将会遍历所有的div元素来查找id为’content’的哪一个节点：
var content = $('div#content');
用ID修饰ID也是画蛇添足：
var traffic_light = $('#content #traffic_light');
3.将jquery对象缓存起来
要养成将jquery对象缓存进变量的习惯。
永远不要这样做：
$('#traffic_light input.on).bind('click', function(){...}); $('#traffic_light input.on).css('border', '3px dashed yellow'); $('#traffic_light input.on).css('background-color', 'orange'); $('#traffic_light input.on).fadeIn('slow');
最好先将对象缓存进一个变量然后再操作：
var $active_light = $('#traffic_light input.on'); $active_light.bind('click', function(){...}); $active_light.css('border', '3px dashed yellow'); $active_light.css('background-color', 'orange'); $active_light.fadeIn('slow');
为了记住我们本地变量是jquery的封装, 通常用一个$作为变量前缀. 记住,永远不要让相同的选择器在你的代码里出现多次。
缓存jquery结果，备用
如果你打算将jquery结果对象用在程序的其它部分，或者你的function会多次执行, 那么就将他们缓存到一个全局变量中。
定义一个全局容器来存放jquery结果，我们就可以在其它函数引用它们：
// 在全局范围定义一个对象 (例如: window对象) window.$my = { //初始化所有可能会不止一次要使用的查询 head: $('head'), traffic_light: $('#traffic_light'), traffic_button: $('#traffic_button') }; function do_something() { //现在你可以引用存储的结果并操作它们 var script = document.createElement('script'); $my.head.append(script); // 当你在函数内部操作是, 可以继续将查询存入全局对象中去. $my.cool_results = $('#some_ul li'); $my.other_results = $('#some_table td'); //将全局函数作为一个普通的jquery对象去使用. $my.other_results.css('border-color', 'red'); $my.traffic_light.css('border-color', 'green'); }
4. 掌握强大的链式操作
上面的例子也可以写成这样：
var $active_light = $('#traffic_light input.on'); $active_light.bind('click', function(){...}) .css('border', '3px dashed yellow') .css('background-color', 'orange') .fadeIn('slow');
这样可以写更少的代码, 让我们的js更轻量。
5.使用子查询
jQuery 允许我们对一个已包装的对象使用附加的选择器操作。因为我们已经在保存了一个父级对象在变量里，这样大大提高对其子元素的操作：
<div id="content"> <form method="post" action="/"> <h2>Traffic Light</h2> <ul id="traffic_light"> <li><input type="radio" class="on" name="light" value="red" /> Red</li> <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li> <li><input type="radio" class="off" name="light" value="green" /> Green</li> </ul> <input class="button" id="traffic_button" type="submit" value="Go" /> </form> </div>
例如，我们可以用子查询的方法来抓取到亮或不亮的灯，并缓存起来以备后续操作。
var $traffic_light = $('#traffic_light'), $active_light = $traffic_light.find('input.on'), $inactive_lights = $traffic_light.find('input.off');
提示：你可以用逗号分隔的方法一次声明多个局部变量–节省字节数
6.对直接的DOM操作进行限制
这里的基本思想是在内存中建立你确实想要的东西，然后更新DOM。这并不是一个jQuery最佳实践，但必须进行有效的JavaScript操作。直接的DOM操作速度很慢。
例如，你想动态的创建一组列表元素，千万不要这么做：
var top_100_list = [...], // 假设这里是100个独一无二的字符串 $mylist = $('#mylist'); // jQuery 选择到 <ul> 元素 for (var i=0, l=top_100_list.length; i<l; i++) { $mylist.append('<li>' + top_100_list[i] + '</li>'); }
我们应该将整套元素字符串在插入进dom中之前全部创建好：
var top_100_list = [...], // 假设这里是100个独一无二的字符串 $mylist = $('#mylist'), // jQuery selects our <ul> element top_100_li = ""; // 这个变量将用来存储我们的列表元素 for (var i=0, l=top_100_list.length; i<l; i++) { top_100_li += '<li>' + top_100_list[i] + '</li>'; } $mylist.html(top_100_li);
我们在插入之前将多个元素包裹进一个单独的父级节点会更快：
var top_100_list = [...], // 假设这里是100个独一无二的字符串 $mylist = $('#mylist'), // jQuery 选择到 <ul> 元素 top_100_ul = '<ul id="#mylist">'; // 这个变量将用来存储我们的列表元素 for (var i=0, l=top_100_list.length; i<l; i++){ top_100_ul += '<li>' + top_100_list[i] + '</li>'; } top_100_ul += '</ul>'; //关闭无序列表 $mylist.replaceWith(top_100_ul);
如果你做了以上几条还是担心有性能问题，那么：
试试jquery的 clone() 方法，它会创建一个节点树的副本，它允许以”离线”的方式进行dom操作，当你操作完成后再将其放回到节点树里。
使用DOM DocumentFragments。正如jQuery作者所言，它的性能要明显优于直接的dom操作。
7. 冒泡
除非在特殊情况下，否则每一个js事件(例如:click, mouseover, 等)都会冒泡到父级节点。当我们需要给多个元素调用同个函数时这点会很有用。
代替这种效率很差的多元素事件监听的方法就是，你只需向它们的父节点绑定一次，并且可以计算出哪个节点触发了事件。
例如，我们要为一个拥有很多输入框的表单绑定这样的行为：当输入框被选中时为它添加一个class
像这样绑定事件是低效的：
$('#entryform input).bind('focus', function(){ $(this).addClass('selected'); }).bind('blur', function(){ $(this).removeClass('selected'); });
我们需要在父级监听获取焦点和失去焦点的事：
$('#entryform).bind('focus', function(e){ var cell = $(e.target); // e.target grabs the node that triggered the event. cell.addClass('selected'); }).bind('blur', function(e){ var cell = $(e.target); cell.removeClass('selected'); });
父级元素扮演了一个调度员的角色，它可以基于目标元素绑定事件。如果你发现你给很多元素绑定了同一个事件监听，那么你肯定哪里做错了。
8.消除无效查询
尽管jquery可以很优雅的处理没有匹配元素的情况，但它还是需要花费时间去寻找。如果你整站只有一个全局js，那么极有可能把所有的jquery函数塞进$(document)ready(function(){//所有你引以为傲的代码})里。
只运行在页面里用到的函数。大多数有效的方法就是使用行内初始化函数，这样你的模板就能准确的控制何时何处该执行js。
例如，你的”文章”页面模板，你可能会引用如下的代码在body结束处：
<script type="text/javascript> mylib.article.init(); </script> </body>
如果你的页面模板包含一些多变的模块可能不会出现在页面中，或者为了视觉呈现的原因你需要它们能够快速加载，你可以将初始化函数紧跟在模块之后。
<ul id="traffic_light"> <li><input type="radio" class="on" name="light" value="red" /> Red</li> <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li> <li><input type="radio" class="off" name="light" value="green" /> Green</li> </ul> <script type="text/javascript> mylib.traffic_light.init(); </script>
你的全局js库可能会是这样子的：
var mylib = { article_page: { init : function() { // Article 特有的jQuery函数. } }, traffic_light: { init: function() { // Traffic light 特有的jQuery函数. } } }
9. 推迟到 $(window).load
jquery对于开发者来说有一个很诱人的东西，可以把任何东西挂到$(document).ready下冒充事件。在大多数例子中你都会发现这样的情况。
尽管$(document).rady 确实很有用，它可以在页面渲染时,其它元素还没下载完成就执行。如果你发现你的页面一直是载入中的状态，很有可能就是$(document).ready函数引起的。
你可以通过将jquery函数绑定到$(window).load 事件的方法来减少页面载入时的cpu使用率。它会在所有的html(包括<iframe>)被下载完成后执行。
$(window).load(function(){ // 页面完全载入后才初始化的jQuery函数. });
多余的功能例如拖放，视觉特效和动画，预载入隐藏图像，等等。都是适合这种技术的场合。
10. 压缩js
推荐一个js在线压缩地址：http://dean.edwards.name/packer/
11. 全面掌握jquery库
知己知彼，百战百胜。只有更深入的了解jQuery才能更灵活的使用它。这里提供一个jQuery的速查手册，可以打印出来随身携带。要是有能力将jQuery源码通读一遍那就更好了。
本文转自：Time Machine – 前端开发
利用jQuery轻松实现简介信息切换
2009年11月12日
2 条评论
刚刚群里的一位群友问我如何显示http://www.sunkang.net/lecturecon.asp（PS：他正在做的网站）上下图区域中
如何实现点击右边的小箭头实现不同医生简介信息的切换，于是花了几分钟帮他写了一下实现（PS：由于他给的html代码没有箭头部分，所以Leeo用来一个按钮来代替，同时这里也不考虑美工问题），具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片切换</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <style> /* picchange */ .picchange { padding: 4px 0; padding-left: 10px; } .picchange img { margin: 9px 0 4px 1px; float:left; } .piccontent { float: left; margin: 7px 0 0 0; line-height: 18px; width: 250px; padding-left: 10px; } .piccontent strong { font-size: 14px; color: #3b7dd8; } #btn { cursor: pointer; } .info-hide { display: none; } .info-show { display: block; } </style> <script type="text/javascript" language="javascript"> $(document).ready(function(){ //获取所有医生介绍信息的div对象 var $doctorInfo = $('#doctorInfo_container .piccontent'); //绑定按钮点击事件 $('#btn').click(function(){ //获取当前显示项的对象 var $nowDoctorInfoObj = $doctorInfo.filter('.info-show'); //获取当前显示项的index var _index = $doctorInfo.index($nowDoctorInfoObj); //假如_index > 4 则让_index = 0 _index = _index + 1 > 4 ? 0 : _index + 1; //改变等强项的class $nowDoctorInfoObj.removeClass("info-show").addClass("info-hide"); //切换到下一项，如果是最后一项则切换到第一项 $doctorInfo.eq(_index).removeClass("info-hide").addClass("info-show"); }); }); </script> </head> <body> <div class="picchange clearfix" id="doctorInfo_container"> <img src="images/pic/1.gif" alt=""> <div class="piccontent info-show" id="picq01"><strong>张曜宇11</strong><br /><b>学历职称：</b>心理学哲学博士、工商管理硕士<br /><b>擅长领域：</b>心理学批判性思维，心理学研究方法，实验心理学<br /><b>讲座课程：</b>情绪的世界</div> <img src="images/pic/2.gif" alt=""> <div class="piccontent info-hide" id="picq02"><strong>张曜宇22</strong><br /><b>学历职称：</b>心理学哲学博士、工商管理硕士<br /><b>擅长领域：</b>心理学批判性思维，心理学研究方法，实验心理学<br /><b>讲座课程：</b>情绪的世界</div> <img src="images/pic/2.gif" alt=""> <div class="piccontent info-hide" id="picq03"><strong>张曜宇33</strong><br /><b>学历职称：</b>心理学哲学博士、工商管理硕士<br /><b>擅长领域：</b>心理学批判性思维，心理学研究方法，实验心理学<br /><b>讲座课程：</b>情绪的世界</div> <img src="images/pic/2.gif" alt=""> <div class="piccontent info-hide" id="picq04"><strong>张曜宇44</strong><br /><b>学历职称：</b>心理学哲学博士、工商管理硕士<br /><b>擅长领域：</b>心理学批判性思维，心理学研究方法，实验心理学<br /><b>讲座课程：</b>情绪的世界</div> <img src="images/pic/2.gif" alt=""> <div class="piccontent info-hide" id="picq05"><strong>张曜宇55</strong><br /><b>学历职称：</b>心理学哲学博士、工商管理硕士<br /><b>擅长领域：</b>心理学批判性思维，心理学研究方法，实验心理学<br /><b>讲座课程：</b>情绪的世界</div> <span id="scrollbtn"></span> <input type="button" id="btn" value="点击切换" /> </div> </body> </html>
jQuery学习笔记7——jQuery 1.3.3 新功能预览
2009年11月12日
没有评论
1、增强的toggleClass()
1）toggleClass也可以和addClass一样，用空格分隔多个class名称了
.toggleClass("a b") == .toggleClass("a").toggleClass("b")
2）无参数时，自动删除、恢复全部class，也可以传递一个布尔值，true为恢复class，false为删除class
3）也可以第一个参数为class名，第二个参数为布尔值，具体用法如下
// 原始代码 // <div class="a b c"></div> // 删除、恢复全部class $('div').toggleClass(); // <div class=""/> $('div').toggleClass(); // <div class="a b c"/> $('div').toggleClass( false ); // <div class=""/> $('div').toggleClass( true ); // <div class="a b c"/> // 删除、恢复多个 class $('div').toggleClass("a b"); // <div class="c"/> $('div').toggleClass("a c"); // <div class="a"/> $('div').toggleClass("a b c", false); // <div class=""/> $('div').toggleClass("a b c", true); // <div class="a b c"/>
2、简化的hover()
1.3.3中，hover绑定事件可仅传递一个函数，将默认用做mouseenter/mouseleave公用的函数
//旧代码： $('li').hover(function() { $(this).addClass('test'); }, function() { $(this).removeClass('test'); }); //新代码： $('li').hover(function() { $(this).toggleClass('test'); });
3、live冒泡事件支持预设参数
// 预设参数 var eventConfig = { selectedClass: "selected" }; $("li").live("click", eventConfig, function( event ) { // 绑定函数的参数event的data属性即为传递的预设参数 var selectedClass = event.data.selectedClass; });
4、更好的支持其它windows、document对象
//通过.contents()获得其它框架的document对象 var iframeDoc = $('iframe').contents().get(0); //这样就可以获取其height/width/CSS属性或绑定事件 // 获得框架宽度 $(iframeDoc).width(); // 获得框架高度 $(iframeDoc).height(); // 绑定事件 $(iframeDoc).bind('click', function( event ) { // do something }); // 获得CSS属性值 $('div', iframeDoc).css('backgroundColor');
注意，如果要处理框架内部网页元素，请使用此插件（配合jQuery 1.3.3/+），和以下语法：
$('iframe').win().bind('load', fn); $('iframe').doc().find('a').click(fn);
5、增强的index()
两个变化，第一个，支持传递selector作为参数
//旧代码： $("img").index($("img.selected")); //新代码 $("img").index(".selected");
第二个，无参数传递，直接查找在同级元素中的位置
//旧代码： var $this = $(".selected"); $this.parent().children().index($this); //新代码： $(".selected").index();
6、自行指定this对象
在1.3.3中，可以在bind/live绑定事件时，自行指定this参数代表的对象。这个用法需求不多，而且可用event.target,event.currentTarget代替
jQuery学习笔记6——jQuery 1.2.6 与 1.3 的主要区别
2009年11月12日
没有评论
2009年01月14日jQuery 1.3正式发布，1.3相比1.2.6在性能和浏览器兼容方面都做了不少改进，如：更为强大的选择器、重写了Offset()等等。这里仅引用jQuery官方的几个测试图片，详细信息请查看http://docs.jquery.com/Release:jQuery_1.3。
本文要说的区别着重点不在性能的提升和浏览器的兼容，而是方法的差异和功能的新增。
在实际使用中，Leeo感觉1.3与1.2.6最大的不同有两个：
1：取消了@符号
/* 例如：获取一个name为leeo的input的值 */ /* 1.2.6的写法 */ $('input[@name="leeo"]').val(); /* 1.3的写法 */ $('input[name="leeo"]').val();
2：新能live()和die()方法
/* live(type, fn) type：事件类型 目前支持 click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup。 还不支持 blur, focus, mouseenter, mouseleave, change, submit fn：欲绑定的事件处理函数 */ /* 实例：在1.2.6版本中加入我们用append()方法向DOM追加一个按钮 */ $('#newBtn').click(function(){ alert("IT北瓜"); }); $('#appendButton').append('<input type="button" id="newBtn" name="newBtn" />'); //我们会发现当点击按钮的时候并没有弹出我们想要的信息，因为click事件并没有绑定到newBtn上 //而1.3新增的live(type, fn)方法却可以轻松的做到这一点 $('#newBtn').live('click', function(){ alert("IT北瓜"); }); $('#appendButton').append('<input type="button" id="newBtn" name="newBtn" />'); /* die([type], [fn])方法是与live(type, fn)相反的方法 type (可选)：要解除绑定的live事件 fn (可选)：要解除绑定的特定处理函数 */ /* 实例：给按钮解除click事件 */ function dieClick() { alert("IT北瓜"); } $('#newBtn').live('click', function(){ dieClick(); $('#newBtn').die("click", dieClick); });
当然，除了以上说到的两点，1.3中还有其他新增的方法，如：jQuery.support等等…
（jQuery插件推荐：表单类）jQuery Form Plugin
2009年11月11日
没有评论
<!-- jQuery的优秀使得基于jQuery的插件可谓百花齐放、争相斗艳（大家可以到官方网站插件页面了解详情）。 从今天起，Leeo会陆续为大家推荐一系列优秀的jQuery插件。 面对这琳琅满目的插件，也许你会觉得不知道该如何选择，希望Leeo的推荐能够给大家在选择插件是作为一个参考。 -->
今天为大家推荐的插件是jQuery Form Plugin，这是一个绝对称得上优秀的插件，正如作者自己说道：Submitting a form with AJAX doesn’t get any easier than this!（利用Ajax提交表单没有比使用这个插件更容易的了）。插件提供的主要方法有：
/* - ajaxForm - ajaxSubmit - formToArray - formSerialize - fieldSerialize - fieldValue - clearForm - clearFields - resetForm */
其中ajaxForm和ajaxSubmit是最主要的两个方法，这两个方法有如下区别：
/* ajaxForm和ajaxSubmit的区别： 1：ajaxSubmit提交表单，而ajaxForm没有 2：当调用ajaxSubmit立即序列化表单数据，并将其发送到服务器。 当调用ajaxForm它添加必要的事件监听器以便在用户提交表单的时候可以检测到，此时ajaxSubmit便会被调用。 当使用ajaxForm提交的数据将包括名称和提交元素的值（或其按坐标，如果提交的元素是一个图像）。 */
jQuery Form Plugin 官方API文档地址：http://www.malsup.com/jquery/form/#getting-started
附：中文API（如果你觉得看英文API比较累，那么你可以看下这里的中文API，但Leeo还是推荐你起码先看一遍英文的API，文档都比较通俗易懂，其实Leeo英文也实在不行，⊙﹏⊙b汗~~~）
/* 表单插件API提供了几个方法，让你轻松管理表单数据和进行表单提交。 */ /*ajaxForm*/ /* 增加所有需要的事件监听器，为AJAX提交表单做 好准备。ajaxForm不能提交表单。在document的ready函数中，使用ajaxForm来为AJAX提交表单进行准备。 ajaxForm接受0个或1个参数。这个单个的参数既可以是一个回调函数，也可以是一个Options对象。 可链接（Chainable）：可以。 实例：*/ $('#myFormId').ajaxForm(); /*ajaxSubmit 马上由AJAX来提交表单。 大多数情况下，都是调用ajaxSubmit来对用户提交表单进行响应。 ajaxSubmit接受0个或1个参数。这个单个的参数既可以是一个回调函数，也可以是一个Options对象。 可链接（Chainable）：可以。 实例：*/ // 绑定表单提交事件处理器 $('#myFormId').submit(function() { // 提交表单 $(this).ajaxSubmit(); // 为了防止普通浏览器进行表单提交和产生页面导航（防止页面刷新？）返回false return false; }); /*formSerialize 将表单串行化（或序列化）成一个查询字符串。 这个方法将返回以下格式的字符串：name1=value1&name2=value2。 可链接（Chainable）：不能， 这个方法返回一个字符串。 实例：*/ var queryString = $('#myFormId').formSerialize(); // 现在可以使用$.get、$.post、$.ajax等来提交数据 $.post('myscript.php', queryString); /*fieldSerialize 将表单的字段元素串行化（或序列化）成一个查询字符串。 当只有部分表单字段需要进行串行化（或序列化）时，这个就方便了。这个方法将返回以下格式的字符串：name1=value1&name2=value2。 可链接（Chainable）：不能，这个方法返回一个字符串。 实例：*/ var queryString = $('#myFormId .specialFields').fieldSerialize(); /*fieldValue 返回匹配插入数组中的表单元素值。 从0.91版起，该方法将总是以数组的形式返回数据。 如果元素值被判定可能无效，则数组为空，否则它将包含一个或多于一个的元素值。 可链接（Chainable）：不能，该方法返回数组。 实例：*/ // 取得密码输入值 var value = $('#myFormId :password').fieldValue(); alert('The password is: ' + value[0]); /*resetForm 通过调用表单元素原有的DOM方法，将表单恢复到初始状态。 可链接（Chainable）：可以。 实例：*/ $('#myFormId').resetForm(); /*clearForm 清除表单元素。 该方法将所有的文本（text）输入字段、密码（password）输入字段和文本区域（textarea）字段置空， 清除任何select元素中的选定，以及将所有的单选（radio）按钮和多选（checkbox）按钮重置为非选定状态。 可链接（Chainable）：可以。*/ $('#myFormId').clearForm(); /*clearFields 清除字段元素。 只有部分表单元素需要清除时才方便使用。 可链接（Chainable）：可以。*/ $('#myFormId .specialFields').clearFields(); /*Options对象 ajaxForm和ajaxSubmit都支持众多的选项参数，这些选项参数可以使用一个Options对象来提供。 Options只是一个JavaScript对象，它包含了如下一些属性与值的集合： target 指明页面中由服务器响应进行更新的元素。 元素的值可能被指定为一个jQuery选择器字符串，一个jQuery对象，或者一个DOM元素。 默认值：null。 url 指定提交表单数据的URL。 默认值：表单的action属性值 type 指定提交表单数据的方法（method）：“GET”或“POST”。 默认值：表单的method属性值（如果没有找到默认为“GET”）。 beforeSubmit 表单提交前被调用的回调函数。 “beforeSubmit”回调函数作为一个钩子（hook），被提供来运行预提交逻辑或者校验表单数据。 如果“beforeSubmit”回调函数返回false，那么表单将不被提交。 “beforeSubmit”回调函数带三个调用参数：数组形式的表单数据，jQuery表单对象，以及传入ajaxForm/ajaxSubmit中的Options对象。表单数组接受以下方式的数据： [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ] 默认值：null success 表单成功提交后调用的回调函数。 如果提供“success”回调函数，当从服务器返回响应后它被调用。 然后由dataType选项值决定传回responseText还是responseXML的值。 默认值：null dataType 期望返回的数据类型。null、“xml”、“script”或者“json”其中之一。 dataType提供一种方法，它规定了怎样处理服务器的响应。 这个被直接地反映到jQuery.httpData方法中去。下面的值被支持： 'xml'：如果dataType == 'xml'，将把服务器响应作为XML来对待。同时，如果“success”回调方法被指定， 将传回responseXML值。 'json'：如果dataType == 'json'， 服务器响应将被求值，并传递到“success”回调方法，如果它被指定的话。 'script'：如果dataType == 'script'， 服务器响应将求值成纯文本。 默认值：null（服务器返回responseText值） semantic Boolean flag indicating whether data must be submitted in strict semantic order (slower). Note that the normal form serialization is done in semantic order with the exception of input elements of type="image". You should only set the semantic option to true if your server has strict semantic requirements and your form contains an input element of type="image". 布尔标志，表示数据是否必须严格按照语义顺序（slower？）来进行提交。 注意： 一般来说，表单已经按照语义顺序来进行了串行化（或序列化），除了type="image"的input元素。 如果你的服务器有严格的语义要求，以及表单中包含有一个type="image"的input元素，就应该将semantic设置为true。 （译注：这一段由于无法理解，翻译出来可能语不达意，但请达人指正。） 默认值：false resetForm 布尔标志，表示如果表单提交成功是否进行重置。 Default value: null clearForm 布尔标志，表示如果表单提交成功是否清除表单数据。 默认值：null 实例：*/ // 准备好Options对象 var options = { target: '#divToUpdate', url: 'comment.php', success: function() { alert('Thanks for your comment!'); } }; // 将options传给ajaxForm $('#myForm').ajaxForm(options); /* 注意： Options对象还可以用来将值传递给jQuery的$.ajax方法。 如果你熟悉$.ajax所支持的options，你可以利用它们来将Options对象传递给ajaxForm和ajaxSubmit。*/
最新评论：
- IE 下用 ajaxSubmit...
- @颓然 ajaxSubmit...
- ajaxSubmit 那来...
- 低调的飞过
test
