文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

学习zepto.js(原型方法)

学习zepto.js(原型方法)[1] 新的一周,新的开始,今天来学习一下zepto里边的原型方法,就是通过$.进行调用的方法,也是可以通过$.fn进行扩展的方法: $.camelCase...(本人发现zepto中的原型方法都是通过将匿名函数赋值给变量的方式来进行声明的,而直接使用function声明的函数在外部是获取不到的)解释的不详细，是因为原型方法都有一个原型的引用，而那些普通函数没有做这个引用...(每次循环都会执行一次迭代),zepto会通过当前循环对象执行回调并传入两个参数,第一个是数组中的下标或者json中的key,第二个参数为当前对象的值,回调中可以返回一个bool值,如果返回false,...,a|b都是可以的,但是合理的命名能让其他看到这段代码的同学明白你要做的事情; ?...(说话不说那么绝对,不留下一个喷点- -) $.extend(): 该方法用来继承,也是扩展插件所需的方法,方法有效执行须接收两个以上的参数,第一个参数为目标对象,第二个以后的为来源,来源会覆盖目标的原有属性

2K90

学习zepto.js(对象方法)

学习zepto.js(对象方法)[4] 今天说说那一套获取元素集合的一些方法: ["children", "clone", "closest", "contents", "empty...>所有的li子节点 返回的是一个zepto对象,里边存储的是匹配的子节点的集合. ?...上边那个过滤方法用的地方比较多,所以给它放在上边; children方法调用的filtered传入的是两个参数,第一个是一个集合,将所有对象的所有的子节点取出,并放入一个集合;children方法内部调用的...我们调用的是对象方法,而对象方法调用的那个就是一个普通的内部私有函数- -(望理解它们之间的区别); 返回的是做一个兼容处理的获取子元素的实现,如果节点存在children属性就直接取出,不存在的话,就循环....下边再介绍它 内层not参数为一个function,not方法内部会执行该function,并将所有不满足的元素返回, 外层not方法的参数就是内层not的返回值,也就是所有不满足的元素的集合,然后再经过筛选

2.5K60
您找到你想要的搜索结果了吗？
是的
没有找到

学习zepto.js(对象方法)

学习zepto.js(对象方法)[1] zepto也是使用的链式操作,链式操作:函数返回调用函数的对象....,该方法就是获取到传入的第一个参数的className属性,如果第二个参数不存在,则返回node的className信息,如果存在值,就将值赋给node的className属性; 再回到addClass...方法的each循环中,变量cls拿到了该元素的className, ?...通过funcArg取到要增加的className,我们的newName变量拿到了要add的className.然后将newName以空格分割(\s表示空格,\s+表示连续的一个及一个以上的空格),split...Array对象的一系列循环方法第二个参数貌似都是设置函数内部this指向的(没有资料可以证明我说的话,用之前查文档,错了别找我- -) classRE函数是一个使用缓存的动态生成正则对象的函数 ?

2.6K80

移动端前端常见的触摸相关事件touch、tap、swipe等整理

前端的很多事件在PC端和浏览器端可公用，但有些事件却只在移动端产生，如触摸相关的事件 本文整理了移动端常见的一些事件，包括原生支持的click、touch、tap、swipe事件，也有定义型的gesture...doubleTap四种之分 tap: 手指碰一下屏幕会触发 longTap: 手指长按屏幕会触发 singleTap: 手指碰一下屏幕会触发 doubleTap: 手指双击屏幕会触发 4. swipe...类事件 滑动事件，有swipe swipeLeft swipeRight swipeUp swipeDown 五种之分 swipe：手指在屏幕上滑动时会触发 swipeLeft：手指在屏幕上向左滑动时会触发...touchcancel swipe swipeLeft swipeRight swipeUp swipeDown longTap singleTap doubleTap', true); ?...2) 改用zepto.js正常 ? 看第五次的touch ? 看第二次的touch ? 看第四次的touch ?

2K20

11-移动端开发教程-zepto.js入门教程

Zepto.js是一个轻量级的针对现代浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。 1. Why Zepto.js？...Zepto.js下载 代码下载：zeptojs中文站 、 github 2.1 自定义Zepto.js文件模块 zepto默认是有五个模块的，分别为zepto、event、ajax、form、ie，这五个模块被称为核心模块...touch 在触摸设备上触发tap– 和 swipe– 相关事件。这适用于所有的touch(iOS, Android)和pointer事件(Windows Phone)。...不支持jQuery CSS 扩展， 然而，可选的“selector”模块有限提供了支持几个最常用的伪选择器 Zepto.js: 无法获取隐藏元素宽高； Zepto 的选择器表达式: [name=value...总结 zepto.js确实非常小巧，而且非常讨巧的利用了大家熟悉jQuery的优势，确实非常可爱的一个js库，设计的模块中庸而又实用，在移动端的触屏事件封装的很不错，移动端web开发值得推荐。

2.2K50

学习zepto.js(对象方法)

学习zepto.js(对象方法)[2] 今天来说下zepto那一套dom操作方法, ['prepend', 'append', 'prependTo', 'appendTo',...prependTo(): 将对象插入到参数内部的头部(可以理解为将prepend的参数变为调用方法的对象,将对象变为方法的参数); ? appendTo(): 将对象插入到参数内部的尾部; ?...以上四个全都是元素内部的插入,接下来的四个全部是元素外部插入的. before(): 将参数插入到对象的前边; ? after(): 将参数插入到对象的后边; ?...上边那个数组是储存的几个操作的名称,下边的forEach循环是在zepto自执行函数中执行的,就是说,在构件zepto原型的是否就创建了这几个方法; forEach方法回调返回的参数,第一个是值,第二个是值的下标...首先调用该方法的为要被插入的对象,接收两个参数,第一个是要插入的对象,第二个是要插谁的前边; ?

2.6K60

逐步拆解React组件—Swipe轮播图

以前有写过一篇简版的swipe轮播组件，当时并没有考虑很多细节和通用参数配置，主要还是在于记录实现思路，也就没有源码，赶在年前重新拾起来好好的整理了一番，并封装成了组件，除react本身外无任何第三方依赖...，gzip压缩后大小仅3.7kb，源码地址、示例地址 思路回顾 核心思想是利用视觉上的感觉，在用户无感的情况下切换回去，这里有一个思路和以前有点不同，切换回去这个动作改在了切换的时候进行复位重置并且弃用用了之前的...第一步，布局页面 这里通过把组件拆分为Swipe和SwipeItem两个组件，Swipe为主要容器，SwipeItem为子项，Swipe验证children是否为SwipeItem组件，布局上采用了flex...轮播移动主要依靠改变外层容器的transfrom属性进行偏移，布局核心在于动态计算SwipeItem的宽度和移动容器的宽度(SwipeItem的宽度 * SwipeItem的个数)。...核心内容均封装在一个useSwipe的hook方法里面，通过useSwipe暴露的方法，后期去实现自动播放、手势滑动等等功能 // Swipe.tsx ...同上省略 // 核心方法

3.2K10

学习zepto.js(对象方法)

学习zepto.js(对象方法)[6] first: 获取当前对象集合中的第一个dom元素。...（dom对象,不是zepto对象） $("div").get(); 　　　　 //所有div对象组成的一个数组 该方法与eq方法的区别在于，eq返回的是zepto对象，而get返回的是dom对象，$()...pluck方法返回一个数组，参数是一个字符串，为属性名，返回的值是调用对象所对应的属性的值； 然后传入uniq方法，方法做了一个去重处理； 最外层的方法filtered，如果第二个参数selector不为空...可以传入一个参数，作为选择器筛选； 参数只能是一个选择器字符串； 返回的集合不会出现重复的元素； 如果想取出元素的直接父节点，使用parent； 如果想取出第一个符合筛选条件的父节点，使用closest...方法内部取出元素的父节点并传入children方法，返回元素的父节点的子节点，相当于自己的所有兄弟节点以及自身。 通过该返回集合call一下filter方法。 并将除了自身以外的所有节点返回。

2.6K80

学习zepto.js(对象方法)

学习zepto.js(对象方法)[3] 继续说zepto里attributes的相关操作. attr,removeAttr,prop这三个方法....那是zepto.js中文api中所说的.本人认为,在判断有关交互的属性时,应优先使用prop,比如checked和selected; ? ? 之所以为出现差异,是因为两者底层实现的区别. ?...prop采用的是上边那种,而attr是两种都用到了; getAttribute()方法只能取出存在于标签中的属性” “ // 只能取出id与name.隐式的属性是取不出来的,比如style ?...关于是否进行set还是remove,这些是在setAttribute方法中做的处理.一个简单的三元运算符; removeAttr 参数只有一个,name,就是要移除的属性的名称, 大体执行过程为,循环调用方法的对象...一个来自prototype.js大表哥中的方法; 传入一个属性名,将调用者集合中所有的该属性的值作为一个数组返回; 其余的没什么了. 如果有什么疑惑的地方还请留言问我.大家共同学习

2.6K90

学习zepto.js(原型方法)

学习zepto.js(原型方法)[2] 接着昨天的来,继续说原型方法,昨天的传送阵(昨天出了点小意外,博文经过WP手机的UC浏览器进行编辑后标签就露出来了- -,现已修复);...$.grep(): 作用与Array.filter类似(其实就是调用的filter方法- -) 通过传入两个参数,第一个为类数组的对象,第二个为用来执行判断的函数; var array =[1,2,3,4,5...方法,这些都是ES5的新方法,在zepto里边是没有做兼容处理的,只是简单的call方法,毕竟是为了移动端而生的; ?...//jQuery1.x的版本是做了兼容的处理,2.x以后也是直接调用的indexOf方法. $.isArray(): 该方法只接收一个参数,一个对象,用来判断该对象是否为Array,返回一个boolean...今天先说到了这里,zepto里边的原型方法出了ajax模块的就都已经说完了- -,读源码真的是最快的学习方式.

1.4K50

学习zepto.js(Hello World)

学习zepto.js(Hello World) Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。...昨天听说了zepto.js,正好最近也比较闲,所以就学习一下这个著名DOM操作库,由于本人刚接触这个,但又不想单纯的说如何使用,所以本人会按照API顺序来说明方法如何使用并试着将对于源码的理解写上来;...$(): 　　与jQuery的$()几乎一样,但zepto的选择器是直接使用的原生querySelectorAll(),所以,一些jQuery自定义的选择器是不支持的,但可以添加selector.js...但有一点令我不理解的地方是，为何在最后又添加了这么一段重复的逻辑，还希望有知道的同学告诉在下。 ? 最后返回的一个变量经过Zepto的构造函数摇身一变为Zepto对象。...，用于生成节点的一个临时父节点（下边会说的）； 　　第三个是一些属性值，是一个json结构的，但要注意为驼峰命名法，因为zepto的精简，所以不想jQuery那样的宽容。

3.5K80

Touch 移动设备上的 手势识别 与 Js事件库

: true, //swipe事件开关 swipeTime: 300, //触发swipe事件的最大时长 swipeMinDistance...//drag事件开关 pinch: true, //pinch类事件开关 } 百度touch.js可以说是Web移动端touch点击事件不错的解决方案，搭配zepto.js...: true, //swipe事件开关 swipeTime: 300, //触发swipe事件的最大时长 swipeMinDistance...操作的手势数量 position 相关位置信息, 不同的操作产生不同的位置信息 distance swipe类两点之间的位移 distanceX, x 手势事件x方向的位移值, 向左移动时为负数 distanceY..., y 手势事件y方向的位移值, 向上移动时为负数 angle rotate事件触发时旋转的角度 duration touchstart 与 touchend之间的时间戳 factor swipe事件加速度因子

4K40

JavaScript Mobile开发框架汇总

目前Javascript移动开发框架有些共同的特点：专门为移动设备做了优化，提供标准的UI组件；提供跨平台的支持（Android、IOS、etc）；轻量级，由于手机网络访问的特点，所有的框架都要注意轻量...这个框架提供了增强de触摸事件，如tap、swipe、pinch、rotate等，另外也提供了强大的数据包支持，通过Ajax、JSONp、YQL等方式绑定到组件模板，写入本地离线存储。...还有很多框架例如：Jo、xui.js、EmbededJS、zepto.js、DHTMLX Touch、Mobilize.js、ChocolateChip Mobile。...它们都有各自的特点，其中Mobilize.js提供了将你的网站迁移到移动设备的功能，而且也提供了Wordpress的插件，有兴趣的可以试一试。...的组件也是必不可少的。

1.2K30

Airtest IDE 自动化测试9 - swipe 滑动屏幕

前言 swipe 的作用是在屏幕上从一个点滑动到另外一个点的位置 swipe 使用介绍 swipe 方法作用：从v1 经历 steps 步滑动到 v2，且期间总持续 duration 秒，相当于每步是...如果没有 v2 值则滑动的方向依赖于 vector 的滑动比例值为终点 swipe(v1, v2=None, vector=None, duration=0.01)： v1： 截图对象-图片 或者坐标(...先点下 Airtest 辅助窗的 swipe 按钮，截图需移动的图片位置，鼠标往左移动到目标区域释放，自动生成如下代码 ? 选中代码执行，会看到滑动效果 ?...横向移动可以设置 y 的值为0， 纵向移动可以设置 x 的值为 0 ?...当传了v1 和 v2 两个参数的时候，就不需要 vector 参数了，v2参数的优先级高于vector 也可以传图片所在的坐标位置，从一个坐标滑到另外一个坐标 ?

3.4K10

移动端项目经验 JavaScript

HTML5学堂：相对来说，JS在移动端要远远低于PC端的使用频率，因此积累的开发经验并不是太多。...对于这种体验不佳的问题，我们可以使用tap等事件来替代，而tap事件属于模拟类事件，需要引入zepto.js或者百度的touch.js等插件辅助实现。...元素点击高亮样式的处理 在移动端，出于让用户了解是否点击成功，浏览器会在用户点击一个a标签或者Javascript定义的可点击元素时，出现一个半透明的灰色背景。...发明的目的是为了更良好的用户体验，但是这种目的在当前反而成了累赘，大多数的产品都希望能够去掉这个背景。...关于浏览器内核以及浏览器内核前缀可以查看《浏览器内核及内核前缀》 zepto的touch问题 为了处理一些touch事件，我们常会引入zepto等插件进行处理，但是会发现，swipe事件在小米1等低端手机不支持

1.4K80

Appium常用操作之「元素定位、swipe 滑屏操作」

4.如果是欢迎页面，没有这种元素的怎么办？ 三、打开 app 并登录 四、移动端特有的操作 1.swipe 滑屏操作 2.如果写一个操作，所有的手机都能适用，是不是应该考虑屏幕的尺寸呢？...滑屏操作 Appium 的swipe函数是针对屏幕上的坐标来滑动的。...swipe函数是安卓和 IOS 两种设备同时通用。 ? 从一个点滑到另外一个点，那么每个点都有 x 值和 y 值。swipe有 4 个参数。所以起始 x，起始 y，结束 x，结束 y。...swipe有 2 个坐标点，首先要得到start_x。 x 轴是width。size['width']是 x 轴的最大值。 「所有人的使用习惯：」 滑屏都是在正中间滑屏或者稍微偏下一点。...：x轴不变，y从小到大 driver.swipe(size["width"]*0.5,size["heigth"]*0.1,size["width"]*0.5,size["heigth"]*0.9)

2.8K10
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券