手机端JQuery失效

转载

mob64ca13fd163c 2024-10-30 12:57:28

文章标签 手机端JQuery失效 jquery API 字符串 文章分类 jQuery 前端开发

什么是zepto？

zepto是轻量级的JavaScript库，专门为移动端定制的框架与jquery有着类似的API，俗称：会jquery就会用zepto

zepto的特点

针对移动端轻量级，压缩版本只有8kb左右响应，执行快语法，API大部分同jquery一样，学习难度低，上手快
目前API完善的框架中体积最小的一个

zepto官网

http://zeptojs.com/ https://github.com/madrobby/zepto

zepto与jquery的前世今生

相同点

都是优秀的js函数库
语法，API大部分都一样（zepto是按照jquery的思路来设计的）
zepto相当于jquery的子集
同jquery一样都是以$为核心函数

不同点
jquery

针对的更多的是PC端体积较重 API较为完善

zepto

针对的是移动端体积较轻有自己独特的移动端事件

核心函数 $

作为函数调用
1、参数为函数 function(){} 2、参数为选择器字符串
3、参数为DOM code
4、参数为html标签字符串
作为对象使用
发送ajax请求

$.ajax()
 $.get()
 $.post()

其他api方法

$.each()
 $.isArray()
 $.trim()
 ......

jquery对象/zepto对象
概念：$调用返回的就是 jquery对象/zepto对象伪数组(有时候只有一个元素)

与jquery相同的API

add()
addClass()
css()
index()
......

与jquery不同的API

DOM操作

配置对象： jquery 不能使用配置对象添加id，class。。。
zepto 插入DOM元素的时候添加配置对象的时候可以添加进去，并且添加的配置对象的内容会直接反应在标签属性内，且可以操作，影响对应的DOM元素。

$(function () {
 var $insert = $('<p>我是新添加的p标签</p>', { //配置对象
   id:'insert',
   class:'insert'
 });
 $('#box').append($insert)  })；

offset()

用来获取目标元素相对于视口的偏移量

jquery：返回的对象包含两个整型属性：top 和 left。此方法只对可见元素有效。获取width，height时为undefine
zeptop：top，left，width，height(content,补白，border)均可获取

width()height()

jquery:
1、width(),height() 获取content内容区的值，没有单位
2、.css 获取content内容区的值，有单位px
3、也可以利用innerHeight(),outerHeight(),innerWidth(),outerWidth()等来获取padding和border的值
zepto:
1、zepto用width(),height()是根据盒模型决定的，并且不包含单位PX
2、可以直接获取padding的值,border的值
3、zepto中没有innerHeight(),innerWidth()—outerHeight(),outerWidth()

事件委托

原理：利用冒泡的原理将事件绑定到父元素/祖先元素身上，event.target指向的是子元素
在jquery中事件委托只是找相应的event.target触发元素进行的回调函数执行,其他的并不关心。
zepto：
坑！！！ 委托的事件先被依次放入数组队列里，然后由自身开始往后找直到找到最后，期间符合以下条件的元素委托的事件都会执行。
1、委托在同一个父元素,或者触发的元素的事件范围小于同类型事件(冒泡能冒到自身范围)
2、同一个事件
3、委托关联操作的类要进行关联
4、绑定顺序—从当前的位置往后看

隐藏元素

jquery：jquery可以获取隐藏元素的宽高
zepto： zepto无法获取隐藏元素宽高

attr与prop

jquery：标签的固有属性，布尔值属性用 prop 。比如：a标签的href，class，selected等。且会随着标签属性变化而变化。
在jquery中如果用attr去获取布尔值属性且该布尔值属性在标签体内没有定义的时候，会返回undefined
官方建议：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
zepto: attr 同样获取布尔值属性。
在zepto中用attr也可以获取布尔值属性.
prop在读取属性的时候优先级高于attr，布尔值属性的读取还是建议用prop
坑！------zepto中removeProp()的方法。在1.2及以上才支持。

each

jquery：能遍历数组，对象，不能遍历字符串/json对象/json数组
zepto：能遍历数组，对象，字符串

zepto事件机制

zepto有自己的一套事件机制，并且对不同的浏览器做了内部的封装处理。
舍弃了bind，delegate，die，同样jquery中舍弃了live，delegate等
统一使用on，off等标准事件

//on的事件委托
    $('#box1').on('touchstart','p',function(){
      alert($(this).text());
    });

与jQuery类似的事件处理
            on()  绑定事件处理程序
    		off() 方法移除用目标oon绑定的事件处理程序。
    		bind()  为每个匹配元素的特定事件绑定自定义的事件处理函数，可同时绑定多个事件，也可以自定义事件。
    		one() 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。只执行一次。
    		trigger() 触发有bind定义的事件（通常是自定义事件）
    		unbind()  bind的反向操作，删除匹配元素所绑定的bind事件

touch Event
	tap()          //点击事件，利用在document上绑定touch事件来模拟tap事件的，并且tap事件会冒泡到document上
	singleTap()    //单击事件
	doubleTap()    //双击事件
	longTap()      //长按事件（手指按屏幕超过750ms）
	swipe()、swipeLeft, swipeRight, swipeUp, swipeDown        //滑动事件（手指在屏幕滑动距离在同一个方向超过30px即为滑动，否则算点击）
	* 滑动事件(浏览器的默认行为---翻页---touch-action)