前端在线资源
本文全文转载需购买版权(500?)，摘要引流则免费，具体
一、Zepto.js很小我很喜欢
Zepto.js设计之初专为移动端，不对一些古董浏览器支持。所以，尺寸很小，压缩后20K多一点，但是，jQuery压缩后，3.*版本要80多K，1.*版本则要90多K，4倍差距。
由于每个页面都会使用，网站如果访问量大的话，省的流量费还是有那么一点点的。
从个人角度讲，使用最精简的资源，心里头开心。所以，Zepto.js很小我很喜欢！
二、绝大部分浏览器都是现代浏览器
随着浏览器的进步，前端技术也在发展。目前，从用户访问情况来看，绝大多数用户使用的是现代浏览器，也就是IE10+，Chrome，Safari，FireFox之类的浏览器。而这些浏览器，对Zepto.js是天然支持的。
由于Zepto.js和jQuery.js的API（凡事支持的）都是一样的，因此，理论上，现代浏览器使用Zepto.js，其他比较挫的浏览器继续使用jQuery.js是可行的。
由于现代浏览器的用户超过一大半，因此，使用Zepto.js的价值还是有的。
三、PC项目如何使用Zepto.js开发
下面要做的其实很简单了，就是先加载不同的JS库，然后再初始化我们的具体业务JavaScript代码。
我们需要一个简单的加载器，和浏览器辨识。
加载器代码如下（参考自《高性能网站建设进阶指南》一书）：
var fnJsLoad = function(url, callback) {
callback = callback || function() {};
var eleScript = document.createElement('script');
eleScript.onload = function() {
if (!eleScript.isInited) {
eleScript.isInited =
callback();
// 一般而言，低版本IE走这个
eleScript.onreadystatechange = function() {
if (!eleScript.isInited && /^loaded|complete$/.test(eleScript.readyState)) {
eleScript.isInited =
callback();
eleScript.src =
doc.getElementsByTagName('head')[0].appendChild(eleScript);
然后，我们就可以加载Zepto或者jQuery了：
// IE10+加载zepto.js
// IE7-IE9加载jQuery
var URLLIB = '/js/zepto.min.js';
if (!history.pushState) {
URLLIB = '/js/jquery.min.js';
fnJsLoad(URLLIB, function() {
// 业务脚本初始化
然后，具体的业务代码你该怎么写，还是怎么写，只要不要使用一些过深的功能，基本上都是没问题的。
五、案例与结语
当然，本文所说的策略是经过真实项目验证过的，有兴趣可以访问“”，就是采用这种策略开发的，兼容IE7+浏览器。
比方说Chrome浏览器下，我们查看加载资源的时候，就会发现使用的是Zepto.js，如下截图：
奇怪，怎么是304, 明天找同事问问。（补充于翌日：问过了：原来打开控制台F5刷新确实是会304，普通访问则200 from cache）
IE9浏览器就是jQuery同学：
如果大家手上已经有基于jQuery的项目，想换成Zepto.js，我的建议呢，如果jQuery根植较深，就不要动了，毕竟不可能完全无缝对接的。如果是新的些项目，啧啧，就可以使用从本文get到的小技能啦！
对了，兼容Zepto.js还有个好处，可以无缝对接移动端上，对吧，移动端对流量要求可要严多了哟！
好了，小文一篇，感谢阅读，欢迎交流。
本文为原创文章，尊重辛勤劳动，可以免费摘要、推荐或聚合，但完整转载需付费购买版权，详见
本文地址：
（本篇完）
相关文章 (0.732) (0.244) (0.244) (0.244) (0.244) (0.244) (0.024) (0.024) (0.024) (0.024) (RANDOM - 0.024)
标签： , , ,
赞助商广告()：
如果你月薪不足20K，不妨
这里有最全的web前端开发视频
如果你有1~3年前端开发经验，不妨
想找个师兄入门前端？不妨
热门总排行jquery 自己写的插件.在IE下失效问题! - ITeye问答
(function($){
$.fn.recommend = function(options){
var defaults = {
input:"#search111",
appendTo: "#address_hot",
list:".address_hotlist",
placed_in:"div .demo",
position: {
my: "left top",
at: "left bottom",
collision: "none"
var options = $.extend(defaults, options);
this.each(function(){
var address_hot = $('&div class="address_hot" id="address_hot"&'+
'&div class="address_hotcity"&&strong&热门城市&/strong& （可直接输入城市或城市拼音）&/div&'+
'&div class="address_hotlist"&'+
'&ol class="address_hot_abb" style=""&&li&&span class="hot_selected"&推荐&/span&&/li&&li&&span&A-F&/span&&/li&&li&&span&G-J&/span&&/li&&li&&span&K-N&/span&&/li&&li&&span&P-W&/span&&/li&&li&&span&X-Z&/span&&/li&&/ol&'+
'&ul class="address_hot_adress layoutfix" type="推荐"&'+
'&li&&a href="###" data="BJS|北京"&九寨沟黄龙&/a&&/li&'+
'&li&&a href="###" data="BJS|北京"&北京&/a&&/li&'+
'&li&&a href="###" data="BJS|北京"&北京&/a&&/li&'+
'&li&&a href="###" data="BJS|北京"&北京&/a&&/li&'+
'&li&&a href="###" data="BJS|北京"&北京&/a&&/li&'+
'&li&&a href="###" data="BJS|北京"&北京&/a&&/li&'+
'&li&&a href="###" data="BJS|北京"&北京&/a&&/li&'+
'&li&&a href="###" data="BJS|北京"&北京&/a&&/li&'+
'&ul class="address_hot_adress layoutfix" style="display:none" type="A-F"&&/ul&'+
'&ul class="address_hot_adress layoutfix" style="display:none" type="G-J"&&/ul&'+
'&ul class="address_hot_adress layoutfix" style="display:none" type="K-N"&&/ul&'+
'&ul class="address_hot_adress layoutfix" style="display:none" type="P-W"&&/ul&'+
'&ul class="address_hot_adress layoutfix" style="display:none" type="X-Z"&&/ul&'+
'&/div&');
$('body').append(address_hot);
})(jQuery);
$(document).ready(function(){
$('body').recommend();
&body id="bod"&
&div class="demo" style="position: left:300 top: 100"&
&label for="search"&Search: &/label&&input id="search111" value="中文/拼音" /&
&div id="cont"&&/div&
上面的代码.IE7.8,都失效.firefox和chrome都是好的!
高手给看下
问题补充：不是代码格式的问题.在IE下还是不行!
每个浏览器都没有报错.应该是插件的写法.或者是IE自身的BUG.
有对JQUERY插件编写很在行的高手.帮忙看一下!谢谢了!
真的是很诡异的问题
问题补充：不是代码格式的问题.在IE下不行!
大哥们.真的不是格式问题.其他浏览器都是好的.就是IE不行.也不报错!
问题补充：就是这个文件.我在自己机子的IE.和同事的IE.都不报错!
问题补充：文件忘传了!
下载次数: 5
采纳的答案
大哥你的代码问题：
把代码36行或者35行的div关闭标签删除一个，就可以了。
问题补充：
不是代码格式的问题.在IE下不行!
大哥们.真的不是格式问题.其他浏览器都是好的.就是IE不行.也不报错!
那你给出的这段代码是你的那段代码吗？如果是，你不得不承认有问题，如果不是，请把你的源码发上来
引用
不是代码格式的问题.在IE下还是不行!
你给出的代码，很明显都存在着少括号的情况，你在ie下肯定提示脚本错误。
楼主，以下两个错误是我把代码放到本地看的，使用的jquery-1.4.2.min.js
Uncaught SyntaxError: Unexpected end of input
test2.htm:7Uncaught TypeError: Object #&Object& has no method 'recommend'
少了好几个括号，我改了一下，请楼主看看
;(function($){
$.fn.extend({
recommend : function(options){
var defaults = {
input:"#search111",
appendTo: "#address_hot",
list:".address_hotlist",
placed_in:"div .demo",
position: {
my: "left top",
at: "left bottom",
collision: "none"
var options = $.extend(defaults, options);
this.each(function(){
var address_hot = $('&div class="address_hot" id="address_hot"&'+
'&div class="address_hotcity"&&strong&热门城市&/strong& （可直接输入城市或城市拼音）&/div&'+
'&div class="address_hotlist"&'+
'&ol class="address_hot_abb" style=""&&li&&span class="hot_selected"&推荐&/span&&/li&&li&&span&A-F&/span&&/li&&li&&span&G-J&/span&&/li&&li&&span&K-N&/span&&/li&&li&&span&P-W&/span&&/li&&li&&span&X-Z&/span&&/li&&/ol&'+
'&ul class="address_hot_adress layoutfix" type="推荐"&'+
'&li&&a href="###" data="BJS|北京"&九寨沟黄龙&/a&&/li&'+
'&li&&a href="###" data="BJS|北京"&北京&/a&&/li&'+
'&li&&a href="###" data="BJS|北京"&北京&/a&&/li&'+
'&li&&a href="###" data="BJS|北京"&北京&/a&&/li&'+
'&li&&a href="###" data="BJS|北京"&北京&/a&&/li&'+
'&li&&a href="###" data="BJS|北京"&北京&/a&&/li&'+
'&li&&a href="###" data="BJS|北京"&北京&/a&&/li&'+
'&li&&a href="###" data="BJS|北京"&北京&/a&&/li&'+
'&ul class="address_hot_adress layoutfix" style="display:none" type="A-F"&&/ul&'+
'&ul class="address_hot_adress layoutfix" style="display:none" type="G-J"&&/ul&'+
'&ul class="address_hot_adress layoutfix" style="display:none" type="K-N"&&/ul&'+
'&ul class="address_hot_adress layoutfix" style="display:none" type="P-W"&&/ul&'+
'&ul class="address_hot_adress layoutfix" style="display:none" type="X-Z"&&/ul&'+
'&/div&');
$('body').append(address_hot);
})(jQuery);
(function($){
$.fn.recommend = function(options){
var defaults = {
input:"#search111",
appendTo: "#address_hot",
list:".address_hotlist",
placed_in:"div .demo",
position: {
my: "left top",
at: "left bottom",
collision: "none"
var options = $.extend(defaults, options);
this.each(function(){
var address_hot = $('&div class="address_hot" id="address_hot"&'+
'&div class="address_hotcity"&&strong&热门城市&/strong& （可直接输入城市或城市拼音）&/div&'+
'&div class="address_hotlist"&'+
'&ol class="address_hot_abb" style=""&&li&&span class="hot_selected"&推荐&/span&&/li&&li&&span&A-F&/span&&/li&&li&&span&G-J&/span&&/li&&li&&span&K-N&/span&&/li&&li&&span&P-W&/span&&/li&&li&&span&X-Z&/span&&/li&&/ol&'+
'&ul class="address_hot_adress layoutfix" type="推荐"&'+
'&li&&a href="###" data="BJS|北京"&九寨沟黄龙&/a&&/li&'+
'&li&&a href="###" data="BJS|北京"&北京&/a&&/li&'+
'&li&&a href="###" data="BJS|北京"&北京&/a&&/li&'+
'&li&&a href="###" data="BJS|北京"&北京&/a&&/li&'+
'&li&&a href="###" data="BJS|北京"&北京&/a&&/li&'+
'&li&&a href="###" data="BJS|北京"&北京&/a&&/li&'+
'&li&&a href="###" data="BJS|北京"&北京&/a&&/li&'+
'&li&&a href="###" data="BJS|北京"&北京&/a&&/li&'+
'&ul class="address_hot_adress layoutfix" style="display:none" type="A-F"&&/ul&'+
'&ul class="address_hot_adress layoutfix" style="display:none" type="G-J"&&/ul&'+
'&ul class="address_hot_adress layoutfix" style="display:none" type="K-N"&&/ul&'+
'&ul class="address_hot_adress layoutfix" style="display:none" type="P-W"&&/ul&'+
'&ul class="address_hot_adress layoutfix" style="display:none" type="X-Z"&&/ul&'+
'&/div&');
$('body').append(address_hot);
})(jQuery);
$(document).ready(function(){
$('body').recommend();
你js中缺少了
已解决问题
未解决问题}