zepto快速入门教程
* zepto
* 特點:
1、體積8kb
2、針對移動端的框架
3、語法同jquery大部分一樣,都是$為核心函數
4、目前功能完善的框架體積最小的左右
* 同jquery相似的語法
核心:$
--作為函數使用
參數:
1、function(){}
2、選擇器字符串
3、html標簽字符串
3、DOM code
--作為對象使用
方法;
1、$.each()
2、$.trim()
3、$.ajax() $.get() $.post()
4、$.isArray()
jquery對象/zepto對象
概念:$調用返回的就是 jquery對象/zepto對象 偽數組(有時候只有一個元素)
* zepto同jquery不同的API
* attr同prop
jquery:標簽的固有屬性,布爾值屬性<prop>
標簽的自定義屬性,用attr布爾值屬性并且布爾值屬性在標簽體內沒有定義時候<attr>
zepto:attr同樣獲取布爾值屬性。
* DOM操作
配置對象:
jquery不同使用配置對象添加id,class。。。
zepto可以使用配置對象---結構,樣式分離,而且容易管理
* offset()----用來獲取目標元素相對于視口的偏移量 對象
jquery:top , left
zeptop:top,left,width,height(content,補白,border)
* width(),height()
jquery:
1、width(),height() 獲取content內容區的值,沒有單位
2、.css 獲取content內容區的值,有單位px
3、 innerHeight() content,padding沒有單位
innerHeight() content,padding border沒有單位
zepto:
1、width(),height()獲取的content,補白,border
2、沒有innerHeight(),innerHeight()
3、.css()
* 事件委托
原理:利用冒泡的原理將事件綁定到父元素/祖先元素身上,event.target指向的子元素
zepto:
1、委托同一個父元素身上
2、同一個世界
3、操作關聯,操作對應的元素/類
4、順序
5、誰操作的關聯類就是誰觸發的
* each
jquery:能遍歷數組,對象,不能遍歷字符串/json對象/json數組
zepto:能遍歷數組,對象,字符串
* 隱藏元素的寬高
jquery:能獲取
zepto: 不能寬,高
zepto的touch event
* tap點擊事件
* singleTap()點擊事件
* doubleTap()雙擊事件
* longTap()長按事件--連續作用750ms
* 滑動事件(瀏覽器的默認行為---翻頁---touch-action)
1、swipe滑動事件 在同一個方向連續滑動30px才為滑動,否則就是點擊
2、longTap長按事件 手指在目標對象上連續作用超過750ms算長按,否則算點擊
總結
以上是生活随笔為你收集整理的zepto快速入门教程的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 方维P2P 二次开发
- 下一篇: 交换机