zepto和jquery的区别?
1.zepto相较于jquery更为清量，因为他去除了一些与浏览器做兼容的代码
2.zepto有自己的事件 例如tap和swiper
3.部分api不一样 例如 offset方法 jquery 的offset返回top left 而zepto的offset返回top left width和height
再例如
.
e
a
c
h
方
法
在
j
q
u
e
r
y
里
可
以
遍
历
数
组
和
对
象
而
z
e
p
t
o
只
能
遍
历
数
组
4.
z
e
p
t
o
没
有
.each方法 在jquery里可以遍历数组和对象 而zepto只能遍历数组 4.zepto没有
.each方法在jquery里可以遍历数组和对象而zepto只能遍历数组4.zepto没有.extend方法
5.zepto的width height方法返回的宽高要根据设置的盒模型是哪种来决定
jquery 的只返回content的宽高
zepto元素和dom元素的互相转换
// zepto对象转成DOM对象
// $('#one')[0].className = 'two';
// $('#one').get(0).className = 'thr';
//DOM对象转成zepto对象
$(one).addClass('four');
选择器中的特殊符号需要转义
例如id为a#a
$(’#a\#a’) 这样才能选中
DOM操作
插入节点
<div id="a">
<div class="a_one"></div>
</div>
append
var $b = $("<div class='b'></div>");
$('#a').append($b)
那么结果为
<div id="a">
<div class="a_one"></div>
<div class='b'></div>
</div>
appendTo和append其实是类似的
prepend的结果为
<div id="a">
<div class='b'></div>
<div class="a_one"></div>
</div>
prependTo同prepend
before
$('#a').before($b)
...
//结果为
<div class='b'></div>
<div id="a">
<div class="a_one"></div>
</div>
after
$('#a').after($b)
...
//结果为
<div id="a">
<div class="a_one"></div>
</div>
<div class='b'></div>
insertBefore与before的关系和prepend与prependTo关系一样
insertAfter与after关系和append和append与appendTo关系一样
删除节点
remove和empty的区别.
$('ul li').empty()；
// 结果为
<ul>
<li></li>
</ul>
$('ul li').remove()
<ul ></ul>
总结 remove会把li也一起删除 而empty只删除li中的元素
复制节点
$('ul li').on('click', function () {
$(this).clone().appendTo($('ul'));
})
点击一次 ul内就多一组li标签
替换节点
$('p').replaceWith($('<div>哈哈</div>'))
包裹节点
<div>
<p>本节是操作dom</p>
</div>
<div>
<p>本节是操作dom</p>
</div>
wrap
$("p").wrap("<div></div>");
结果为
<div>
<div>
<p>本节是操作dom</p>
</div>
</div>
<div>
<div>
<p>本节是操作dom</p>
</div>
</div>
wrapAll
结果为
<div>
<div>
<p>本节是操作dom</p>
<p>本节是操作dom</p>
</div>
</div>
<div></div>
属性与样式
属性操作
// console.log($("div").attr("title"));
// $("div").attr("name","att");
// $("div").attr({"name":"att" , "class":"test"})
// $("div").removeAttr("title name");
class操作
// 添加样式操作 addClass
// $("div").addClass("red").addClass("fs");
// $("div").addClass("red fs");
// 删除class类 removeClass
// $("div").removeClass();
// 切换样式 toggle toggleClass
// $("button").click(function(){
// // $("div").toggle(); // show和hide的切换
// $("div").toggleClass("red"); // addClass("red")和removeClass("red");
// });
// 判断是否含有某个样式 hasClass
console.log($("div").hasClass("red fs"))
对相邻的元素操作
// next是取得紧邻的后面的同辈元素
// console.log($("#one h3").next());
// prev获取紧邻的前面的同辈元素
// console.log($("#one a").prev());
// siblings获取前后的所有同辈元素
// console.log($("#one p").siblings());
// parent与parents直系亲属
// console.log($("b").parent());
console.log($("b").parents());
对css的操作
// $(".one").css("color", "red").css("fontSize", "36px");
// $(".one").css({
// color:"red",
// fontSize:"36px"
// });
$(".one").width(500);
$(".one").height(500);
window.onload和document.ready的区别
$(document).ready(function(){
// DOM加载完毕，图片并未完全加载，调用时机比较快
});
window.onload = function(){
// 全部文件加载完毕，调用时机比较久
}
简写方法
$().ready(function(){
$(".one").html("helloworld");
})
事件
zepto不支持事件捕获！！！！！！！
// $(".one").click(function(e){
// console.log("我是简写方式");
// })
$(".one").on("click", function(e){
console.log("我是on事件");
});
})
自定义事件
$('div').on('hha', function () {
console.log('hha')
})
$('div').trigger('hha')
动画
值得注意的是zepto要使用动画额外需要引入两个文件
$('button').on('click' , function(){
// $('div').toggle('slow'); //切换元素的显示与隐藏
// $('div').hide(3000);
// $('div').hide('slow');
// $('div').show('slow');
// $('div').fadeIn('slow');
// $('div').fadeOut('slow');
// $('div').fadeToggle('fast'); //切换元素的淡入与淡出
// $('div, button').fadeToggle('slow');
// $("div").fadeTo(3000 , 1)
})
$("div").animate({left:"300px", height:"300px"}, 3000, function(){
// alert("动画执行完毕");
// })
// $("div").animate({left:"300px"}, 3000, function(){
// $(this).animate({height: "300px"},3000, function(){
// alert("动画有先后顺序");
// })
// })
Ajax
原生写法
function Ajax(){
var xmlHttpReq = null;
if(window.ActiveXObject){
// 兼容IE5、IE6
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}else{
xmlHttpReq = new XMLHttpRequest();
}
xmlHttpReq.open("GET", "test.php", true);
xmlHttpReq.onreadystatechange = RequestCallBack;
function RequestCallBack(){
if(xmlHttpReq.readyState == 4){
if(xmlHttpReq.status == 200){
console.log("获取数据："+xmlHttpReq.responseText);
}
}
}
xmlHttpReq.send(null);
}
zepto的ajax写法
// get简写
$.get('urlxxx',function(response){
$(document.body).append(response)
});
// post简写
$.post('urlxxx', { sample: 'payload' }, function(response){
});
// ajax 完整写法
$.ajax({
type: 'GET',
url: 'urlxxx',
data: { name: 'Zepto.js' },
dataType: 'json',
success: function(data){
this.append(data.project.html)
},
error: function(xhr, type){
alert('Ajax error!')
}
})
touch类事件
tap —元素tap的时候触发。
singleTap and doubleTap — 这一对事件可以用来检测元素上的单击和双击。(如果你不需要检测单击、双击，使用 tap 代替)。
longTap — 当一个元素被按住超过750ms触发。
swipe, swipeLeft, swipeRight, swipeUp, swipeDown — 当元素被划过时触发。(可选择给定的方向)
注意 ：需要引入
$(el).tap(function(){
console.log(' | tap!')
})
.doubleTap(function(){
console.log(' | double tap!')
})
.swipe(function(){
console.log(' | swipe!')
})
.swipeLeft(function(){
console.log(' | swipe left!')
})
.swipeRight(function(){
console.log(' | swipe right!')
})
.swipeUp(function(){
console.log(' | swipe up!')
})
.swipeDown(function(){
console.log(' | swipe down!')
})
.longTap(function(){
console.log(' | long tap!')
})
.singleTap(function(){
console.log(' | single tap!')
})
zepto插件写法
自己编写的zepto.color.js
;(function($){
// $.extend($.fn, {
// color: function(option){
// var options = $.extend({
// col: "blue",
// fz : "20px"
// }, option);
// this.css("color", options.col);
// this.css("fontSize", options.fz);
// return this;
// },
// background: function(option){
// var options = $.extend({
// bg: "blue"
// }, option);
// this.css("background", options.bg);
// return this;
// }
// })
// })(Zepto);
html中
<body>
<div>这里是插件</div>
<script type="text/javascript" src="../../lib/zepto.min.js"></script>
<script type="text/javascript" src="../../lib/zepto.color.js"></script>
<script type="text/javascript">
$("div").color({
col : "red"
}).addClass("helloworld");
</script>
</body>
扫一扫
722
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
