zepto
zepto和jquery的区别，zepto的不同使用8条小结
1. Zepto 对象 不能自定义事件 例如执行： $({}).bind('cust', function(){}); 结果： TypeError: Object has no method 'addEventListener' 解决办法是创建一个脱离文档流的节点作为事件对象： 例如： $('').bind('cust', function(){});2. Zepto 的选择器表达式: [name=value] 中value 必须用 双引号 " or 单引号 ' 括起来 例如执行：$('[data-userid=123123123]') 结果：Error: SyntaxError: DOM Exception 12 解决办法： $('[data-userid="123123123]"') or $("[data-userid='123123123']")2-1.zepto的选择器没有办法选出 $("div[name!='abc']") 的元素2-2.zepto获取select元素的选中option不能用类似jq的方法$('option[selected]'),因为selected属性不是css的标准属性 应该使用$('option').not(function(){ return !this.selected }) 比如：jq:$this.find('option[selected]').attr('data-v') * 1 zepto:$this.find('option').not(function() {return !this.selected}).attr('data-v') * 1 但是获取有select中含有disabled属性的元素可以用 $this.find("option:not(:disabled)") 因为disabled是标准属性2-3、zepto在操作dom的selected和checked属性时尽量使用prop方法，以下是官方说明：3.Zepto 是根据标准浏览器写的，所以对于节点尺寸的方法只提供 width() 和 height()，省去了 innerWidth(), innerHeight(),outerWidth(),outerHeight()Zepto.js: 由盒模型（ box-sizing ）决定jQery: 忽略盒模型，始终返回内容区域的宽/高（不包含 padding 、 border ）解决方式就是使用 .css('width') 而不是 .width() 。3-1.边框三角形宽高的获取假设用下面的 HTML 和 CSS 画了一个小三角形： .caret { width: 0; height: 0; border-width: 0 20px 20px; border-color: transparent transparent blue; border-style: none dotted solid; } jQuery 使用 .width() 和 .css('width') 都返回 ，高度也一样；Zepto 使用 .width() 返回 ，使用 .css('width') 返回 0px 。所以，这种场景，jQuery 使用 .outerWidth() / .outerHeight() ；Zepto 使用 .width() / .height() 。3-2.offset()Zepto.js: 返回 top 、 left 、 width 、 heightjQuery: 返回 width 、 height3-3.隐藏元素Zepto.js: 无法获取宽高；jQuery: 可以获取。4.Zepto 的each 方法只能遍历 数组，不能遍历JSON对象5.Zepto 的animate 方法参数说明 ：详情点击-> zepto中animate的用法6.zepto的jsonp callback函数名无法自定义7.DOM 操作区别jq代码：(function($) { $(function() { var $list = $('jQuery 插入', { id: 'insert-by-jquery' }); $list.appendTo($('body')); }); })(window.jQuery); jQuery 操作 ul 上的 id 不会被添加。zepto代码：Zepto(function($) { var $list = $('Zepto 插入', { id: 'insert-by-zepto' }); $list.appendTo($('body')); }); Zepto 可以在 ul 上添加 id 。8.事件触发区别jq代码：(function($) { $(function() { $script = $('', { src: 'htt p:/ /cdn.amaze ui.o rg/amazeui/1.0.1/js/amazeui.min.js', id: 'ui-jquery' }); $script.appendTo($('body')); $script.on('load', function() { console.log('jQ script loaded'); }); }); })(window.jQuery); 使用 jQuery 时 load 事件的处理函数 不会 执行zepto代码：Zepto(function($) { $script = $('', { src: 'htt p:/ /cdn.amaz eui.o rg/amazeui/1.0.1/js/amazeui.js', id: 'ui-zepto' }); $script.appendTo($('body')); $script.on('load', function() { console.log('zepto script loaded'); }); }); 使用 Zepto 时 load 事件的处理函数 会 执行。
zepto和jquery的区别
jQuery 操作 ul 上的 id 不会被添加。
Zepto(function($) {
var $list = $('Zepto 插入', {
id: 'insert-by-zepto'
});
$list.appendTo($('body'));
});
Zepto 可以在 ul 上添加 id 。
事件触发区别
(function($) {
$(function() {
$script = $('', {
src: ',
id: 'ui-jquery'
});
$script.appendTo($('body'));
$script.on('load', function() {
console.log('jQ script loaded');
});
});
})(window.jQuery);
使用 jQuery 时 load 事件的处理函数 不会 执行。
Zepto(function($) {
$script = $('', {
src: ',
id: 'ui-zepto'
});
$script.appendTo($('body'));
$script.on('load', function() {
console.log('zepto script loaded');
});
});
使用 Zepto 时 load 事件的处理函数 会 执行。
width() / height()
Zepto.js: 由盒模型（ box-sizing ）决定
jQery: 忽略盒模型，始终返回内容区域的宽/高（不包含 padding 、 border ）
zepto.min.js ajax返回要什么类型数据
当浏览器第一次加载资源的时候，返回一般为200，意思是成功获取资源，并会在浏览器的缓存中记录下max-age，第二次访问的时候：如果只是用浏览器打开，那么浏览器会去判断这个资源在缓存里有没有，如果有的话，会去判断max-age，看看过期没有，如果没有过期，则直接读缓存，根本不会和服务器进行交互，换句话说，断网都能打开，就和本地跑一样！如果已经过期了，那就去服务器请求，等待服务器响应，这是很费时间的，服务器如果发现资源没有改变过，那么就会返回304，告诉浏览器，我没变过，你去读缓存吧，于是浏览器也不用从服务器拉数据了，然而，等待服务器响应也是一个很要命的问题，在网速发达的今天，等一个响应，有时比下载还慢。如果是用浏览器刷新的，那么浏览器不会去判断max-age了，直接去服务器拿，如果服务器判断资源没变过，则还是会返回304，和上面是一样的，所以刷新一下，其实很可怕，等于把所有的资源都要去服务器请求一边，问问服务器我过期了没有。综上，尽量减少网页的资源数量！尽量合并JSCSS图片！响应速度将会猛增！当今，响应速度比网速重要！！
zepto和jquery的区别
1、针对移动端程序zepto有一些基本的触摸事件可以用来做触摸屏交互（tap事件、swipe事件），zepto是不支持IE浏览器的。2、DOM操作的区别添加id时jquery不会生效而zepto会生效。3、事件触发的区别使用jquery时load事件的处理函数不会执行；使用zepto时load事件的处理函数会执行。4、事件委托的区别zepto中，选择器上所有的委托事件都依次放入到一个队列中，而在jquery中则委托成独立的多个事件。5、js精简方面zepto是jquery的精简，针对移动端去除了大量jquery的兼容代码。6、其他方面zepto中没有为原型定义extend方法而jquery有；zepto的each方法只能遍历数组，不能遍历JSON对象。
zepto和jquery的区别
1、Zepto是为现代智能手机浏览器推出的Javascript 框架, 有和jQuery相似的语法, 和jQuery相比下来, 他有很多优点, 大小方面 , 压缩后的 zepto.min.js 大小只有21K, 使用服务器端 gzip 压缩后大小只有5~10K, 可以说非常的小, 功能很齐全, 多出来了一些触摸屏的事件,它对PC的浏览器就不是那么理想,尤其是万恶IE直接过滤不兼容, 用它来开发手机iPhone和Android网页是不错的选择.
2、jquery主要是用在PC的网页中了，jquery是目前最流行的javascript框架，以其兼容全部主流浏览器，插件丰富，代码简洁，最关键的是更新快，最好的dom选择器而被广泛被使用。而手机wap方面的话，jquery也推出jquery-mobile，也很好用。
简单的理解就是：
Zepto手机专用
jQuery电脑专用 （但他又开发出了jquery-mobile,专门用于手机）
Jquery .js 能改成zepto.js 支持么?
1、需要完善zepto中缺失的几个函数，如 $.data,$.fn.innerWidth,$.removeData等
2、需要解决android4.2的bug，主要是在_scratchMove、_scratchDown,_scratchUp事件中增加到canvas的样式操作
$(this.canvas).css('margin-right', $(this.canvas).css('margin-right') == "0px" ? "1px" : "0px");
3、要协调好初始化与css3动画的冲突，对于 一次性的动画，需要在动画结束后移除动画样式，并且在动画结束后再初始化wScratchPad组件。
详见：http://www.jslover.com/code/523.html
zepto和jquery的区别 知乎
楼主您好
jQuery 由于强大的生命力基本上是一个事实标准，所以大部分工具 lib 在 DOM 操作、动画等功能上或多或少都会是 jQuery-like 的。Zepto 的 API 就是完全兼容 jQuery 的，功能上 Zepto 是 jQuery 的子集，定位上 jQuery 桌面为主，Zepto 则从一开始就定位移动设备，所以体积方面有一定优势。也就是说如果你只用了 jQuery 很少且都是核心的功能，比如选择器等，那么可以在不改动任何业务代码的情况下把 lib 切换到 Zepto——其实就是把 $ 对象换掉了。
如何实现 zepto的ajax 前置过滤器
Rails中Jquery支持下的Ajax请求
在rails中使用 Ajax 是十分方便的，你可能早已经熟悉了这样的代码：
在views中声明属性 :remote => true ：
true) do |f| %>
接着在对应 controller 里接收请求，做如下处理：
respond_to do |format|
format.html
format.js { render 'success' } # 这里表示你收到的是ajax请求,将结果给success.js.erb处理
end
最后就是在 success.erb.js 文件里做一些操作：
alert("ok")
Everything is so easy!
但是，你知道为什么可以使用 remote 属性来发送ajax请求吗？
在rails中assets目录下的 application.js 文件可以看到：
//= require jquery
//= require jquery_ujs
对，就是要归功于 jquery_ujs.js 这个文件，它会找出所有 remote 链接和表单并重写 click 事件来驱动它们发送AJAX请求到服务器。
亲，说到这儿，你能猜到我想要说什么了吗？对！如果我们想在rails里使用zepto来发送ajax请求，我们要做的就是模仿 jquery_ujs.js 所做的。
在Rails基于Zepto使用Ajax
卖了半天的关子，终于进入正题了。 首先我们得看下 zepto 框架对于js的ajax请求提供的方法调用，文档里大概是这样一种方式：
Ajax requests
$.ajax
$.ajax(options) ⇒ XMLHttpRequest
type (default: “GET”): HTTP request method (“GET”, “POST”, or other)
url (default: current URL): URL to which the request is made
data (default: none): data for the request; for GET requests it is appended to query string of the URL. Non-string objects will get serialized with
…
Ajax callbacks
beforeSend(xhr, settings)
success(data, status, xhr)
error(xhr, errorType, error)
complete(xhr, status)
…
Ajax events
…
在发送ajax请求时，我们可以指定ajax请求的类型，url等属性，在ajax请求过程中会有相应的回调函数以及ajax事件函数。这些就不多说了，现在我们要做的就是来模拟jquery_ujs.js所做的工作：
我们先新建一个 mock_ujs.js ,当文档加载完成后来监视Dom元素的行为:
$(document).ready(function() {
//...
}
添加一个 click 事件:
$(document).ready(function() {
$('.load').live('click', function() {
//可以在这里取页面上的一些数据
var text = $(".data").text();
$.ajax({
type: 'http请求如GET、POST',
url: '所请求的url',
// data为发送的数据，将以url?a=xx&b=xxx这种方式发送
data: { a: xxx, b: xxxx },
// 期望服务器返回的数据类型:
dataType: 'json',
timeout: 10000,
beforeSend: function(xhr, settings) {
//回调函数
},
success: function(data){
//data为返回数据
},
error: function(xhr, type){
//错误处理
}
});
});
}
现在请求已经到达服务器， controller 收到请求并进行相应处理：
def custom
data = Model.find(data)
# return the data as the format of json
respond_to do |format|
format.json {
render :inline => data.to_json
}
end
end
得到了返回的数据，在上面的success函数里进行相应的处理。
这里需要注意的一点是：controller里返回的数据必须与发送ajax请求时指定的dataType 同一类型，否则就无法响应了。
举个例子来说明一下：你可以上这个网站，这个是我专门为手机用户做的，前端采用了zepto框架。页面上的导航栏以及 加载更多 按钮都对应着一个个click事件，每次点击都会触发一个ajax请求，比如点击加载更多的时候，会到服务器请求5条新闻数据，其中发送ajax请求时还会触发一个回调函数，通过 beforeSend 实现等待时的加载效果。如果你想了解更多可以fork这个 仓库 。
另外，zepto的其它用法其实和jquery差不多，有需要的话可以好好研究一下。
如何实现 zepto的ajax 前置过滤器
Rails中Jquery支持下的Ajax请求
在rails中使用 Ajax 是十分方便的，你可能早已经熟悉了这样的代码：
在views中声明属性 :remote => true ：
true) do |f| %>
接着在对应 controller 里接收请求，做如下处理：
respond_to do |format|
format.html
format.js { render 'success' } # 这里表示你收到的是ajax请求,将结果给success.js.erb处理
end
最后就是在 success.erb.js 文件里做一些操作：
alert("ok")
Everything is so easy!
但是，你知道为什么可以使用 remote 属性来发送ajax请求吗？
在rails中assets目录下的 application.js 文件可以看到：
//= require jquery
//= require jquery_ujs
对，就是要归功于 jquery_ujs.js 这个文件，它会找出所有 remote 链接和表单并重写 click 事件来驱动它们发送AJAX请求到服务器。
亲，说到这儿，你能猜到我想要说什么了吗？对！如果我们想在rails里使用zepto来发送ajax请求，我们要做的就是模仿 jquery_ujs.js 所做的。
在Rails基于Zepto使用Ajax
卖了半天的关子，终于进入正题了。 首先我们得看下 zepto 框架对于js的ajax请求提供的方法调用，文档里大概是这样一种方式：
Ajax requests
$.ajax
$.ajax(options) ⇒ XMLHttpRequest
type (default: “GET”): HTTP request method (“GET”, “POST”, or other)
url (default: current URL): URL to which the request is made
data (default: none): data for the request; for GET requests it is appended to query string of the URL. Non-string objects will get serialized with
…
Ajax callbacks
beforeSend(xhr, settings)
success(data, status, xhr)
error(xhr, errorType, error)
complete(xhr, status)
…
Ajax events
…
在发送ajax请求时，我们可以指定ajax请求的类型，url等属性，在ajax请求过程中会有相应的回调函数以及ajax事件函数。这些就不多说了，现在我们要做的就是来模拟jquery_ujs.js所做的工作：
我们先新建一个 mock_ujs.js ,当文档加载完成后来监视Dom元素的行为:
$(document).ready(function() {
//...
}
添加一个 click 事件:
$(document).ready(function() {
$('.load').live('click', function() {
//可以在这里取页面上的一些数据
var text = $(".data").text();
$.ajax({
type: 'http请求如GET、POST',
url: '所请求的url',
// data为发送的数据，将以url?a=xx&b=xxx这种方式发送
data: { a: xxx, b: xxxx },
// 期望服务器返回的数据类型:
dataType: 'json',
timeout: 10000,
beforeSend: function(xhr, settings) {
//回调函数
},
success: function(data){
//data为返回数据
},
error: function(xhr, type){
//错误处理
}
});
});
}
现在请求已经到达服务器， controller 收到请求并进行相应处理：
def custom
data = Model.find(data)
# return the data as the format of json
respond_to do |format|
format.json {
render :inline => data.to_json
}
end
end
得到了返回的数据，在上面的success函数里进行相应的处理。
这里需要注意的一点是：controller里返回的数据必须与发送ajax请求时指定的dataType 同一类型，否则就无法响应了。
举个例子来说明一下：你可以上这个网站，这个是我专门为手机用户做的，前端采用了zepto框架。页面上的导航栏以及 加载更多 按钮都对应着一个个click事件，每次点击都会触发一个ajax请求，比如点击加载更多的时候，会到服务器请求5条新闻数据，其中发送ajax请求时还会触发一个回调函数，通过 beforeSend 实现等待时的加载效果。如果你想了解更多可以fork这个 仓库 。
另外，zepto的其它用法其实和jquery差不多，有需要的话可以好好研究一下。
上一篇：物探与化探
下一篇：没有了