<button id=>Jump</button> <button id=>Punch</button> <button id=>Click</button> <button id=style=>Clear</button> <div id=></div> <script src=></script> <script> ), button2 = $(), button3 = $(), clear = $(), div = $(); div.on({ jump : function(){ alert(); }, punch : function(e,data){ alert(+data+); }, click : function(){ alert(); } }); button1.click(function(){ div.trigger(); }); button2.click(function(){ // Pass data along with the event div.trigger(,[]); }); button3.click(function(){ div.trigger(); }); clear.click(function(){ //some clear code }); </script>
34.在下载文件旁显示文件大小。
你知道如何在不下载一个文件的情况下通过发送一个ajax请求头得到一个文件的大小吗? 使用jQuery就很容易。
<a href="001.html">First Trickshot</a> <br />
<a href="034.html">This Trickshot</a> <br />
<a href="assets/img/ball.png">Ball.png</a> <br />
// Loop all .fetchSize links
$().each(function(){
link = this;
$.ajax({
type
: ,
url
: link.href,
complete : function(xhr){
// Append the filesize to each
$(link).append(+ humanize(xhr.getResponseHeader()) + );
}
});
});
function humanize(size){
,,,,,];
var ord = Math.floor( Math.log(size) / Math.log(1024) );
ord = Math.min( Math.max(0,ord), units.length-1);
var s = Math.round((size / Math.pow(1024,ord))*100)/100;
return s + ' ' + units[ord];
}
注意:这个例子如何我们直接使用浏览器是没法得到的,必须使用本地的web服务器打开运行才可以。
35.使用延迟简化你的Ajax请求
延迟(deferreds)是一个强大的工具。jQuery对于每一个Ajax请求都会返回一个deferred对象。 deferred.done()方法接受一个或多个参数,所有这些都参数可以是一个单一的函数或一个函数数组。当Deferred(延迟)解决时,doneCallbacks被调用。回调是依照他们添加的顺序执行。一旦deferred.done()返回Deferred(延迟)对象,Deferred(延迟)可以链接其它的延迟对象,包括增加额外的.done()方法。下面这样就会使你的代码更易读:
// This is equivalent to passing a callback as the // second argument (executed on success): $.).done(function(r){ log(r.message); }); // Requesting a file that does not exist. This will trigger // the failure response. To handle it, you would normally have to // use the full $.ajax method and pass it as a failure callback, // but with deferreds you can can simply use the fail method: $.).fail(function(r){ log(+ r.statusText + + r.status + ); });
36.平行的运行多个Ajax请求。
当我们需要发送多个Ajax请求是,相反于等待一个发送结束再发送下一个,我们可以平行地发送来加速Ajax请求发送。
// The trick is in the $.when() function: $.when($.), $.)).then(function(r1, r2){ log(r1[0].message + " " + r2[0].message); });
37.通过jQuery获得ip
我们不仅可以在电脑上ping到一个网站的ip,也可以通过jQuery得到。
$., function(r){ log(r.ip); }); // For older browsers, which don't support CORS
38.使用最简单的ajax请求
jQuery(使用ajax)提供了一个速记的方法来快速下载内容并添加在一个元素中。
<p ></p> <p ></p> ); // Fetch the contents of a text file: contentDivs.eq(); // Fetch the contents of a HTML file, and display a specific element: contentDivs.eq();
39.序列化对象
jQuery提供了一个方法序列化表单值和一般的对象成为URL编码文本字符串。这样,我们就可以把序列化的值传给ajax()作为url的参数,轻松使用ajax()提交表单了。
<form action=""> First name: <input type=name=value=/><br /> Last name: <input type=name=value=/><br /> </form> // Turn all form fields into a URL friendly key/value string. // This can be passed as argument of AJAX requests, or URLs. $(document).ready(function(){ console.log($().serialize()); // FirstName=Bill&LastName=Gates }); // You can also encode your own objects with the $.param method: log($.param({:, :}));
40.使用jQuery上传二进制文件
现在的浏览器都支持FormData API,这可以是我们很轻松的通过ajax来发送数据。 并将之结合HTML5中的File API,我们就可以上传二进制文件了。