zoukankan      html  css  js  c++  java
  • 全栈工程师知识点汇总——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算长按,否则算点击

  • 相关阅读:
    haproxy配置ca证书
    gnu make
    工程引用libm.a文件的sin函数后
    bin utilities related
    ELF文件之九——使用链接脚本-2个函数-data-bss-temp-call-debug信息-struct
    ELF文件之八——使用链接脚本-2个函数-data-bss-temp-call-debug信息
    ELF文件之七——使用链接脚本-2个函数-data-bss-temp-call
    网站访问日志User Agent对照表
    jeecms上传文件限制导致413-Request Entity Too Large
    URL参数带加号“+”AJAX传值失败的解决方法
  • 原文地址:https://www.cnblogs.com/kathyhong/p/11243610.html
Copyright © 2011-2022 走看看