Zepto与 jQuery 的一点区别
商派下系统向来都是用mootools框架，所以突然ecstore移动端用Zepto后特别的不适应， 而且相对来说Zepto的教程很少。不过因为jQuery在网上应用广泛，而Zepto提供 jQuery 的类似的API，更有小jQuery之称，所以每次都是用jQuery方法去写Zepto，不过实际上他们还是有一定的区别的，今天我们就来说说他们之间的一些小区别。1. Zepto 对象 不能自定义事件,例如执行： $({}).bind('cust', function(){});结果： &TypeError: Object has no method 'addEventListener' &解决办法是创建一个脱离文档流的节点作为事件对象 ,例如：$('').bind('cust', function(){});2. Zepto 的选择器表达式: [name=value] &中value 必须用 双引号 & &or 单引号 ' 括起来,例如执行：$('[data-userid=]') 结果：Error: SyntaxError: DOM Exception 12 &解决办法：$('[data-userid="]"') or $("[data-userid='']")3.DOM 操作区别jq代码：(function($) {
$(function() {
var $list = $('&ul&&li&jQuery 插入&/li&&/ul&', {
id: 'insert-by-jquery'
$list.appendTo($('body'));
})(window.jQuery);jQuery 操作 ul 上的 id 不会被添加。zepto代码：Zepto(function($) {
var $list = $('&ul&&li&Zepto 插入&/li&&/ul&', {
id: 'insert-by-zepto'
$list.appendTo($('body'));
});Zepto 可以在 ul 上添加 id 。4.事件触发区别jq代码：(function($) {
$(function() {
$script = $('&script /&', {
src: 'http://cdn.amazeui.org/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 = $('&script /&', {
src: 'http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.js',
id: 'ui-zepto'
$script.appendTo($('body'));
$script.on('load', function() {
console.log('zepto script loaded');
});使用 Zepto 时 load 事件的处理函数 会 执行。5.Zepto 是根据标准浏览器写的，所以对于节点尺寸的方法只提供 width() 和 height()，省去了 innerWidth(), innerHeight(),outerWidth(),outerHeight()6.Zepto 的each 方法只能遍历 数组，不能遍历JSON对象
------分隔线--------
------分隔线--------
栏目导航List
最新文章Recommend
热点文章Hot
推荐模板Templets
码上送红包jQuery、zepto、js常用小技巧
作者：前端小武
字体：[ ] 类型：转载 时间：
本文给大家分享的是小编jQuery、zepto、js常用小技巧的心得，非常实用，有需要的小伙伴可以参考下
以下只为记录自己工作常用的片段和心得, 如有问题请指正, 多谢~
jQuery/zepto判断元素是否存在
// 判断长度是否存在, 正确
if ($elem.length) {
// 错误, 因为空数组也是true
if ($elem) {
合理判断数据类型
function case(str) {
return str.match(/reg/);
看着没问题, 但当 str 为空(false, null等)时就挂了, 适当的检查让代码更健壮, 如:
function case(str) {
return "string" === typeof str ? str.match(/reg/) :
// 或者强制转换下
return String(str).match(/reg/);
function case2(callback) {
if ("function" === typeof callback) {
callback();
再比如, 要获取地址栏的参数:
function getQuery(key) {
// 不论页面链接有没有querystring, location.search都会是字符串
// substr为了忽略?号
var result = location.search.substr(1).match(new RegExp("(?:^|&)" + key + "=(.+?)(?:$|&)"));
// 如果匹配成功为数组
return result ? result[1] :
因为要判断结果是否存在从而多了个变量 result , 然而可以使用默认值替换:
function getQuery(key) {
return (location.search.substr(1).match(new RegExp("(?:^|&)" + key + "=(.+?)(?:$|&)")) || ["", "我是默认值, 因为前面为空就到我了"])[1];
合理try,catch
在正常情况下不推荐使用 try , 但在一些未知情况下建议使用, 比如: 异步接口成功后的数据结构太多:
success: res =& {
// zepto里空的200响应也会触发success
if (res && res.data && res.data.result && res.data.result[0] && res.data.result[0].list && res.data.result[0].list.length) {
res.data.result[0].list.forEach();
// 数据处理出错
艾玛, 判断那么长, 但不判断直接用可能会报js错, 于是:
success: res =& {
// 尝试使用, 当报错时进入下面分支
res.data.result[0].list.forEach();
catch (e) {
// 数据处理出错
合理使用dataset
dataset 是指在 html 元素中添加的以 data-* 为名称的属性字段
点击查看 兼容性
使用 DOM.dataset 获取元素的 DOMStringMap对象 , 可以直接 DOM.dataset.key = value 赋值和 delete DOM.dataset.key 删除, 如: document.body.dataset.xxoo = 1
常用于存放一些自定义数据, 如: &a href="#" rel="external nofollow" data-uid="1" data-name="xxoo"&我是一个兵&/a&
语义化更强
.data, .attr, .prop, dataset的区别
注: .data, .attr, .prop是 jQuery, zepto 的方法
是否显示在dom树上
操作&dom.getAttribute
操作元素的&dom&属性, 常用于选中&selected, checked&、禁用&disabled&等
操作元素的节点数据
对于 .data 跟库的有关, 如:
是否显示在dom树上
.data(key)&- 先判断缓存对象, 不存在则获取&attr('data-key')&并写入缓存到&$.cache[id].data[key]&
.data(key, value)&- 设置缓存
直接使用&.attr('data-' + key, value)
zepto - 加载&data.js
.data(key)&- 先判断缓存对象, 不存在则获取&attr('data-key')&
.data(key, value)&- 设置缓存
有以上结论了, 那么可以根据自己的场景选择了, 比如在 css 里有使用 div[data-xx='1'] {} 这样的选择器来控制样式, 那么就得使用 .attr() 或者 dataset 来操作了, 你懂的~
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具zepto与jquery的区别及zepto的不同使用8条小结
作者：吴国源
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了zepto与jquery的区别及zepto的不同使用8条小结 的相关资料,需要的朋友可以参考下
首先是效果：
jquery中有fadeIn和fadeOut两个效果，用来实现渐隐渐显的效果，这个在PC端自然是常用的效果。然后我们前端组的组员Mr Huang自然是想到手机页面也可以更加炫丽，于是加上了登录框的渐隐效果。给用户缓冲的效果不错。
但是，zepto中并没有fadeIn和fadeOut，怎么办？难道真的就无法满足Mr Huang的愿望了吗？No. I will do it.在zepto中有个动画效果（animate），用这个效果来实现渐隐还是不错的。咱们引用中文文档中的说明 http://www./Manual/Zepto/#animate 文档里面详细介绍了animate能实现的动画效果。当然animate也不是万能的，也有很多jquery能做的zepto无能为力的效果。当然，在这考虑到渐隐效果虽然漂亮，但是在安卓机器上面，由于性能的原因，经常出现卡顿的现象，而且由于某些ROM随便修改浏览器原生的效果，导致那些炫丽的动画看起来很别扭很畸形，博主在这和Mr Huang商量后决定弃用渐隐，直接隐藏的形式更加简洁明了。
诡异的ajax：
会用jquery的都知道$.ajax();这个方法，用来实现异步请求数据，使用想当频繁。当然，这在zepto中也是一个刚需的功能，而且zepto的使用方法跟jquery几乎是一模一样。咱们写个最简单的ajax.
$.ajax('test.php',{"data":[{"name":"systme","hacked":"systme"}]},function(){alert("ok")});
OK，就是这样一个简单的请求，php那边是直接dump出我传过去的数据。咱们来看一下出现了什么诡异的事件。
首先，jquery的请求。
咱们很清楚的看到传过去的是一个数组，那么我们把他写生数组形式应该是data[{"name":"systme","hacked":"systme"}]这样是完全没有问题的。
咱们再来看zepto的ajax请求。
，看一下，下标0没有了，下标0没有了意味着什么呢。我们来还原一下数组data[{"name":"systme"},{"hacked":"systme"}]，没错，你真的没看错，zepto的ajax直接改变了原来的数组结构，zepto的ajax对数组的序列化存在问题导致解析数组出现问题。这个问题给我带来了很大的困扰，如果是因为这个问题让我重新使用jquery尚无必要，所以，博主在与后端攻城尸商讨之后决定我这直接传字符串到后端，由后端对字符串进行解析。至此，诡异的问题解决，但是这样的解决方式并不是完美的，还需要继续研究其源码的实现原理。
博主在这有一另外一种解决方案，咱们可以用纯js实现一个post请求，纯js的post请求不像$.ajax那么方便，在参数传递上面要使用&连接符，咱们这的参数实际上是 data[0][name]=systme&data[0][hacked]=systme 这个样子的，我们使用纯js的post传过去就OK了
1. Zepto 对象 不能自定义事件
例如执行： $({}).bind('cust', function(){});
结果： TypeError: Object has no method 'addEventListener'
解决办法是创建一个脱离文档流的节点作为事件对象：
例如： $('').bind('cust', function(){});
2. Zepto 的选择器表达式: [name=value] 中value 必须用 双引号 " or 单引号 ' 括起来
例如执行：$('[data-userid=]')
结果：Error: SyntaxError: DOM Exception 12
解决办法：
$('[data-userid="]"') or $("[data-userid='']")
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 ）决定
jQuery: 忽略盒模型，始终返回内容区域的宽/高（不包含 padding 、 border ）解决方式就是使用 .css('width') 而不是 .width() 。
3-1.边框三角形宽高的获取
假设用下面的 HTML 和 CSS 画了一个小三角形：
1.&div class="caret"&&/div&
2..caret {
3. width: 0;
4. height: 0;
5. border-width: 0 20px 20
6. border-color: transpar
7. border-style:
jQuery 使用 .width() 和 .css('width') 都返回 ，高度也一样；
Zepto 使用 .width() 返回 ，使用 .css('width') 返回 0px 。
所以，这种场景，jQuery 使用 .outerWidth() / .outerHeight() ；Zepto 使用 .width() / .height() 。
3-2.offset()
Zepto.js: 返回 top 、 left 、 width 、 height
jQuery: 返回 width 、 height
3-3.隐藏元素
Zepto.js: 无法获取宽高；
jQuery: 可以获取。
4.Zepto 的each 方法只能遍历 数组，不能遍历JSON对象
5.Zepto 的animate 方法参数说明 ：详情点击-&
zepto中animate的用法
6.zepto的jsonp callback函数名无法自定义
7.DOM 操作区别
1.(function($) {
2. $(function() {
3. var $list = $('&ul&&li&jQuery 插入&/li&&/ul&', {
4. id: 'insert-by-jquery'
6. $list.appendTo($('body'));
8.})(window.jQuery);
jQuery 操作 ul 上的 id 不会被添加。
zepto代码：
1.Zepto(function($) {
2. var $list = $('&ul&&li&Zepto 插入&/li&&/ul&', {
3. id: 'insert-by-zepto'
5. $list.appendTo($('body'));
Zepto 可以在 ul 上添加 id 。
8.事件触发区别
1.(function($) {
2. $(function() {
3. $script = $('&script /&', {
4. src: 'http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.min.js',
5. id: 'ui-jquery'
8. $script.appendTo($('body'));
10. $script.on('load', function() {
11. console.log('jQ script loaded');
14.})(window.jQuery);
使用 jQuery 时 load 事件的处理函数 不会 执行
zepto代码：
1.Zepto(function($) {
2. $script = $('&script /&', {
3. src: 'http://cdn.amazeui.org/amazeui/1.0.1/js/amazeui.js',
4. id: 'ui-zepto'
7. $script.appendTo($('body'));
9. $script.on('load', function() {
10. console.log('zepto script loaded');
使用 Zepto 时 load 事件的处理函数 会 执行。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具在用zepto的on事件中遇到的一个奇怪问题.
在用zepto的on事件中遇到的一个奇怪问题.
最近在一个项目运用zepto的on事件绑定,发现与jquery的事件有很大的区别,不知道是不是zepto的问题,
HTML结构如下
&ul id="test1"&
&li&&a id="test2"&&/a&&/li&
然后给上面的test1 和test2绑定事件,代码如下
$(document).on("click","#test1",function(){
alert("点击了父节点")
$(document).on("click","#test2",function(){
alert("点击了子节点")
此时,我点击a标签.理论上应该弹出 alert("点击了子节点"),alert(弹出了父节点);
可是实际上发现,用zepto的事件绑定的时候却恰好相反,先弹出了父节点,再弹出子节点,用jquery的事件绑定,一切正常,后来把事件的绑定顺序换下,先绑定子节点的再绑定父节点的则正常.
此为第一个感觉很不合理的地方.
最坑爹的第二点来了.
此时如果我需要阻止事件冒泡,理论上来说,只需要加上阻止冒泡的方法就行了.代码如下
$(document).on("click","#test2",function(event){
alert("点击了子节点");
event.stopPropagation();
$(document).on("click","#test1",function(){
alert("点击了父节点")
此时,在jquery下的确没有任何问题,但是在zepto下则失效.于是只好查看源码,发现代码如下
handler.del = getDelegate && getDelegate(fn, event)
var callback = handler.del || fn
handler.proxy = function (e) {
var result = callback.apply(element, [e].concat(e.data))
//当事件处理函数返回false时，阻止默认操作和冒泡
if (result === false) e.preventDefault(), e.stopPropagation()
return result
于是我按照上面的要求修改.代码如下:
$(document).on("click","#test2",function(event){
alert("点击了子节点");
return false;
$(document).on("click","#test1",function(){
alert("点击了父节点")
发现还是不行.看来zepto与Jquery还是有很大的区别,不知道各位有没有遇到这个问题,或者知道这个问题的根本原因.当然如果纯粹只是为了实现这个功用如下代码也可以解决
$("#test2").on("click",function(event){
alert("点击了子节点");
return false;
$("#test1").on("click",function(){
alert("点击了父节点")
上面的绑定方式就一切正常 在zepto下.
我就想知道为什么第一种的绑定方式为什么不行.欢迎提出看法
感谢关注 Ithao123JS频道，是专门为互联网人打造的学习交流平台，全面满足互联网人工作与学习需求，更多互联网资讯尽在 IThao123!
Laravel是一套简洁、优雅的PHP Web开发框架(PHP Web Framework)。它可以让你从面条一样杂乱的代码中解脱出来；它可以帮你构建一个完美的网络APP，而且每行代码都可以简洁、富于表达力。
Hadoop是一个由Apache基金会所开发的分布式系统基础架构。
用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。
Hadoop实现了一个分布式文件系统（Hadoop Distributed File System），简称HDFS。HDFS有高容错性的特点，并且设计用来部署在低廉的（low-cost）硬件上；而且它提供高吞吐量（high throughput）来访问应用程序的数据，适合那些有着超大数据集（large data set）的应用程序。HDFS放宽了（relax）POSIX的要求，可以以流的形式访问（streaming access）文件系统中的数据。
Hadoop的框架最核心的设计就是：HDFS和MapReduce。HDFS为海量的数据提供了存储，则MapReduce为海量的数据提供了计算。
产品设计是互联网产品经理的核心能力，一个好的产品经理一定在产品设计方面有扎实的功底，本专题将从互联网产品设计的几个方面谈谈产品设计
随着国内互联网的发展，产品经理岗位需求大幅增加，在国内，从事产品工作的大部分岗位为产品经理，其实现实中，很多从事产品工作的岗位是不能称为产品经理，主要原因是对产品经理的职责不明确，那产品经理的职责有哪些，本专题将详细介绍产品经理的主要职责
IThao123周刊