jQuery中的100个技巧(6)_H5之家 - 中国HTML5教程资源分享第一站

fileInput = $(), button = $(); button.on(, function(){ // Access the files property, which holds files = fileInput.prop(); (files.length == 0) { alert(); return false; } fd = new FormData(); fd.append(, files[0]); // Upload the file to assets/php/upload.php. Open that file in a text // editor to get a better idea of how it works. $.ajax({ url: , data: fd, contentType:false, // This will make the browser use the multipart/formdata encoding, which is required for transferring binary data. processData:false, // jQuery shouldn't do any processsing on the data - the browser will handle this when it sees we are passing a formdata object. type:, success: function(m){ log(m); } }); });

41.使用Facebook的图表

　　我们可以引入facebook中的一个很强大的API来是我们的app更加社交化。下面是一个简单的例子：

CODE api = , holder = $(); $.getJSON(api, function(r){ // This will always give the current picture holder.append(); holder.append(+ r.about +) holder.append(+ r.website ++ r.website +); });

42.获取天气信息

　　Open Weather Map提供了免费的天气信息，我们可以通过使用它们的JSON API来获取数据。简单的例子如下：

api = ; $.getJSON(api, function(r){ // This will always give the current picture log(r.list[+ r.list[0].sys.country); log(r.list[0].main); // Temperatures are in kelvin, subtract 273.15 to convert to Celsius, });

43. 获取你的最近的汤博乐(Tumblr)内容

　　现在非常流行的汤博乐博客服务提供了简单的方法使用JSON api，这样我们可以使用它来获取任何博客内容，下面是使用的方法。

<div id=></div> blog = , api = + blog + , post = $(); $.getJSON(api, function(r){ log(+ r.tumblelog.title); log(+ r.tumblelog.description); (r.posts[]){ post.append(+ r.posts[] + ); } else{ log(+ r.posts[]); } });

44.通过IP地址获得地理位置

　　有很多在线服务可以告诉我们IP地址所在的城市和国家，下面我们先ping到百度的IP地址，然后获取其地理位置：

ip = , // you can optionally put an ip address here api = + ip + ; $.getJSON(api, function(r){ console.log(+ r.city + + r.country_name + ); }); //How is the weather in Beijing, China?

45.使用YQL来爬网站

　　YQL对JavaScript开发者来说有无限的API，下面的例子是我们如何使用它来获取并解析其他站点的HTML。

CODE query = ; + encodeURIComponent(query) + ; $.getJSON(yqlAPI, function(r){ log(); $.each(r.query.results.results.a, function(){ log(); log(this.content); }); });

46.使用全局的Ajax方法

　　我们可以通过ajax的全局方法来简化web app中处理的ajax请求。

CODE preloader = $(,{ :}).appendTo(); var doc = $(document); // Show the preloader whenever you are making an AJAX request: doc.ajaxStart(function(){ preloader.fadeIn(); }); // Hide it when the ajax request finishes doc.ajaxComplete(function(){ // Keep it visible for 0.8 seconds after the request completes preloader.delay(800).fadeOut(); }); // It will show automatically every time you do an AJAX request: $.);

47. 学会爱上console吧。

　　我们的浏览器给了我们一系列有用的方法使用来调试代码，找出bug，下面就是一个例子，打开console看看吧。

// The simple case. Use this instead of alert(): console.log(); a = , b = ; console.log(, a, b); // Interactively browse the properties of a method (similar to console.log): console.dir(window); // Information message (in webkit it looks like console.log) console.info(); // Warning message console.warn(); // Error message (will print a stack trace) console.error(); (var i = 0; i<20; i++){ console.count(); } // Starts a collapsable group of log messages console.group(); console.info(); console.info(); console.error(); console.groupEnd() // Timing things console.time() var dollars = 0; for(var i=0;i<100000; i++){ dollars+=10; } console.timeEnd(); // Profiling code (it will show up in your console's Profile tab) console.profile(); var arr = []; $.each([0,1,2,3,4,5,6,7,8,9],function(){ arr.push(this+1); }); console.profileEnd();

48.把代码转化为插件以提高重用率。

　　如果有一些代码你总是在不同的项目之间复制粘贴，你就可以考虑着把它转化成一个插件了。下面的例子就是这样。