共同点
jQuery:
核心函数$
- 作为函数使用(参数)
1.function
2.html字符串
3.DOM code
4.选择器字符串 - 作为对象调用(方法)
$.ajax() $.get() $.post()
$.isArray()
$.each()
$.isFunction()
$.trim()
......
jQuery对象
概念:jQuery核心函数$()调用返回的对象就是jQuery对象的
数组(可能有只有一个);
使用:
1.addClass()
2.removeClass()
3.show()
4.find()
### zepto:
以上jQuery的特性zepto同样适用
不同点
属性操作attr和prop
举例代码块:
html
script
$(function(){
$('option').each(function (index, item){
console.log($(this).attr('selected'));
console.log($(this).prop('selected'));
});
});
在jQuery中
第一个console的输出结果是undefined,undefined,selected,undefined,selected
第二个console的输出结果是4个false,1个true
- prop多用在标签的固有属性,布尔值属性。比如:a标签的href,class,selected等。
- attr多用在自定义属性上。
- 在jQuery中如果用attr去获取布尔值属性且该布尔值属性在标签体内没有定义的时候,会返回undefined。(例如下拉选项中的selected属性)
在zepto中
第一个console的输出结果是false,false,selected,false,selected
第二个console的输出结果是4个false,1个true
- 在zepto中用attr也可以获取布尔值属性.
- prop在读取属性的时候优先级高于attr,布尔值属性的读取还是建议用prop
- 坑!------zepto中removeProp()的方法。在zepto1.2版本以上才支持。
DOM操作
script代码块如下
$(function () {
var $insert = $('我是新添加的p标签
', {
id:'p1',
class:'pp'
});
$('#box').append($insert)
});
在jQuery中
- 在插入DOM元素的时候,直接添加id,class等属性不会生效
在zepto中
- 在插入DOM元素的时候,直接添加id,class等属性可以生效
each方法(遍历)
script代码块
$(function(){
var arr = [1,'a',3,'b',5];
var obj = {name:'tom',age:13};
$.each(arr, function(index,item) {
console.log(index,item);
});
$.each(obj, function(key,value) {
console.log(key,value);
});
var str = 'abcdef';
$.each(str, function(index,item) {
console.log(index , item);
});
})
在jQuery中
- 可以遍历数组,以index,item的形式,
- 可以遍历对象,以key-value的形式
- 不可以遍历字符串。
- 不可以遍历json字符串
在zepto中
- 可以遍历数组,以index,tiem的形式,
- 可以遍历对象,以key-value的形式,
- 可以遍历字符串。
offset()的区别
script代码块
$(function(){
var $offset = $('#box').offset();
console.log($offset);
console.log($offset.top);
console.log($offset.height);
console.log($offset.width);
})
在jQuery中
- 获取匹配元素在当前视口的相对偏移。
- 返回的对象包含两个整型属性:top 和 left。此方法只对可见元素有效。
- 获取width和height时输出的是undefined;
在zepto中
- 获得当前元素相对于视口的位;
- 返回一个对象含有: top, left, width和height(获取的宽高是盒模型可见区域的宽高)
width(),height()
script代码块
$(function(){
console.log($('#box').width());
console.log($('#box').height());
console.log($('#box').css('width'));
console.log($('#box').innerHeight());
console.log($('#box').outerHeight()+'outerHeight');
})
在jQuery中
- width(),height()---content内容区的宽高,没有单位px;
- .css('width')----获取写在样式表中的的宽高,一般指content(怪异盒子除外),有单位px;
- innerHeight(),innerWidth()---获取content+padding;
- outerHeight(),outerWidth()---获取content+padding+border;
- 以上对于不可见盒子仍然生效;
在zepto中
- width(),height()---content+padding+border的宽高,只对可见元素有效,没有单位px;
- 用.css('width')获取的是content的宽高。
- zepto中没有innerWidth()和outerWidth();
注:上述所有获取方法中,只有.css()获取的值不是number类型,计算时需要转换类型。
事件委托
事件委托是指将事件委托给相同的祖先元素,可以给动态创建的新节点同时绑定上事件.
### 在script中为#box的子元素.a绑定cilik事件
方法一
$('#box').delegate('.a','click',function(){
alert('你点我干啥?');
})
方法二
$('#box').on("click",'.a',function(){
alert('a事件');
});
注 用delegate绑定事件委托时,先写元素,再写事件;on与之相反
还有一种绑定方法live, 在js1.7之后的版本已经废除
在zepto中
zepto的官网表示已经废除了live,delegate等。
委托的事件先被依次放入数组队列里,然后由自身开始往后找直到找到最后,期间符合条件的元素委托的事件都会执行。
在zepto中事件委托有个BUG,前提是必须满足下面四个条件,需要注意!!!!!
1、委托在同一个父元素,或者触发的元素的事件范围小于同类型事件(冒泡能冒到自身范围)
2、同一个事件
3、委托关联 操作的类要进行关联
4、绑定顺序---从当前的位置往后看
touch event
jQuery
- on() 绑定事件处理程序
- off() 方法移除用目标oon绑定的事件处理程序。
- bind() 为每个匹配元素的特定事件绑定事件处理函数,可同时绑定多个事件,也可以自定义事件。
- one() 为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。只执行一次。
- unbind() 是bind的解绑操作,删除匹配元素所绑定的bind事件。
zepto
- tap()点击事件 利用在document上绑定touch事件来模拟tap事件的,并且tap事件会冒泡到document上
- singleTap() 点击事件
- doubleTap() 双击事件
- longTap() 当一个元素被按住超过750ms触发。
- swipe, swipeLeft, swipeRight, swipeUp, swipeDown ---当元素被划过(同一个方向滑动距离大于30px)时触发。(可选择给定的方向)在一个方向滑动大于30px即为滑动。否则算点击。
event
zepto
- zepto有自己的一套事件机制,并且对不同的浏览器做了兼容的内部封装处理。
- 像新版本的zepto中已经舍弃了bind,delegate,die,同样jQuery中舍弃了live,die等。
- 现在统一使用on,off标准事件来绑定事件。