zepto.js学习笔记01
2024-04-04 05:00:31
zepto
- 特点：
1、体积8kb
2、针对移动端的框架
3、语法同jquery大部分一样，都是$为核心函数
4、目前功能完善的框架体积最小的左右 - 同jquery相似的语法
核心：$
–作为函数使用
参数：
1、function(){}
2、选择器字符串
3、html标签字符串
3、DOM code
–作为对象使用
方法；
1、.each()2、.each() 2、.each()2、.trim()
3、$.ajax() $.get() .post()4、.post() 4、.post()4、.isArray()
jquery对象/zepto对象
概念：$调用返回的就是 jquery对象/zepto对象 伪数组(有时候只有一个元素)
- 特点：
zepto同jquery不同的API
attr同prop
jquery：标签的固有属性，布尔值属性
标签的自定义属性，用attr布尔值属性并且布尔值属性在标签体内没有定义时候
zepto:attr同样获取布尔值属性。DOM操作
配置对象：
jquery不同使用配置对象添加id，class。。。
zepto可以使用配置对象—结构，样式分离，而且容易管理offset()----用来获取目标元素相对于视口的偏移量 对象
jquery：top ， leftzeptop：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算长按，否则算点击
1、hello world
hello world.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>zepto入门</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><style type="text/css">#btn{width: 200px;height: 200px;background: #ff0;text-align: center;line-height: 200px;margin: 100px auto;}</style>
</head>
<body>
<!--* 什么是zepto.js概念： 移动端开发框架；API及语句同jquery相似，但文件更小(可压缩至8KB)。是目前功能完备的库中，最小的一个。* zepto.js特点1、针对的是移动端2、轻量级，压缩版本只有8KB3、语法大部分同jquery一样，学习成本低，上手快。4、响应，执行快。5、同jquery一样都是以$为核心函数。-->
<div id="btn">hello world</div>
<script type="text/javascript" src="../js/zepto.js"></script>
<script type="text/javascript" src="../js/touch.js"></script><script type="text/javascript">$(function () {$('#btn').on('touchstart',function () {alert('hello,zepto');});});
</script>
</body>
</html>2、zepto core
1_与jquery相同的API
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>common</title><style type="text/css">.box1{width: 200px;height: 200px;background:#FF0000;}.box2{width: 200px;height: 200px;background:#FF00FF;}.box3{width: 200px;height: 200px;background: green;}#dis{display: none;}</style></head><body><!--* 共同点：jquery:* 核心函数$1、作为函数使用（参数）1.function2.html字符串3.DOM code4.选择器字符串2、作为对象调用(方法)1.$.ajax() $.get() $.post()2.$.isArray()$.each()$.isFunction()$.trim()......* jquery对象概念：jquery核心函数$()调用返回的对象就是jquery对象的数组（可能有只有一个）；使用：1.addClass()2.removeClass()3.show()4.find()zepto:以上jquery的特性zepto同样适用--><div class="box1">我是box1</div><div class="box2">我是box2</div><div class="box3"><p>111</p><p>222</p><p>333</p></div><div id="dis">隐藏的元素</div><script src="../../js/zepto.js"></script>
<script src="../../js/touch.js"></script>
<script type="text/javascript">$(function () {$('.box1').on('touchstart',function () {$(this).addClass('box2');});$('.box2').on('touchstart',function () {$('#dis').show();});$('.box3').on('touchstart',function () {$(this).find('p').css('background','red');})})
</script>
</body>
</html>2_与jquery的区别
attr和prop
jquery.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>jquery</title></head><body><select style="font-size: 25px;"><option value="name">科比</option><option value="name">韦德</option><option value="name" selected="selected">邓肯</option><option value="name">吉诺比利</option><option value="name" selected="selected">艾弗森</option></select><script src="../../../js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">$(function(){//attr与prop的区别/** 1、prop多用在标签的固有属性，布尔值属性。比如：a标签的href，class，selected等。* 2、attr多用在自定义属性上。* 3、在jquery中如果用attr去获取布尔值属性且该布尔值属性在标签体内没有定义的时候，会返回undefined*/$('option').each(function (index, item) {//console.log($(this).attr('selected'));//没有定义获取到的是undefinedconsole.log($(this).prop('selected'));//4false 1true});});
</script></body>
</html>zepto.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>zepto_selected</title>
</head>
<body><select><option value="name">科比</option><option value="name">韦德</option><option value="name" selected="selected">邓肯</option><option value="name">吉诺比利</option><option value="name" selected="selected">艾弗森</option></select><button id="btn">按钮</button>
<script src="../../../js/zepto.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/touch.js"></script>
<script type="text/javascript">//在zepto中用attr也可以获取布尔值属性.//prop在读取属性的时候优先级高于attr，布尔值属性的读取还是建议用prop//坑！------zepto中removeProp()的方法。在1.2及以上才支持。$(function () {$('option').each(function (index, item) {//console.log($(this).attr('selected'));console.log($(this).prop('selected'));});$('#btn').click(function () {$(this).prop('disabled', 'true');setTimeout(function () {$('#btn').removeAttr('disabled');}, 2000);});});
</script>
</body>
</html>DOM操作
jquery.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title></title><style type="text/css">#insert{background: #ff0;}</style>
</head>
<body><!--jquery中插入DOM元素的时候添加配置对象（属性选择器：id，class。。。)的时候不会显示；--><div id="box"></div><script src="../../../js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function () {var $insert = $('<p>我是新添加的p标签</p>', {id:'insert'});$('#box').append($insert)});</script>
</body>
</html>zepto.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>zepto</title><style type="text/css">#insert{background: #ff0;}.insert{width:200px;}</style>
</head>
<body><!--插入DOM元素的时候添加配置对象的时候可以添加进去，并且添加的配置对象的内容会直接反应在标签属性内，且可以操作，影响对应的DOM元素。--><div id="box"></div>
<script src="../../../js/zepto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">$(function () {var $insert = $('<p>我是新添加的p标签</p>', {id:'insert',class:'insert'});$('#box').append($insert)});
</script>
</body>
</html>each方法
jquery.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>jquery_each</title></head>
<body><script src="../../../js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){//$.each(collection, function(index, item){ ... })//可以遍历数组,以index，item的形式，//可以遍历对象，以key-value的形式//不可以遍历字符串。//不可以遍历json字符串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 = 'adfdfdf';$.each(str,function(index){console.log(index);})})</script>
</body>
</html>zepto.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>zepto_each</title>
</head>
<body>
<script src="../../../js/zepto.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">$(function(){//$.each(collection, function(index, item){ ... })//可以遍历数组,以index，tiem的形式，//可以遍历对象，以key-value的形式，//可以遍历字符串。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';//可以遍历字符串，同对数组的遍历方法一样以index-item的形式。$.each(str, function(index,item) {console.log(index + '-' + item);});})
</script></body>
</html>offset()的区别
jquery.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>jquery_offset的区别</title><style type="text/css">*{margin: 0;padding: 0;}#box{width: 200px;height: 200px;position: relative;left: 50px;top: 100px;font-size: 22px;background: #ff0;text-align: center;line-height: 200px;}</style>
</head>
<body><!--1、获取匹配元素在当前视口的相对偏移。2、返回的对象包含两个整型属性：top 和 left。此方法只对可见元素有效。--><div id="box">新年快乐，大吉大利</div>
<script src="../../../js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">$(function(){var $offset = $('#box').offset();console.log($offset);console.log($offset.top);//获取width，height时为undefinedconsole.log($offset.width);})
</script>
</body>
</html>zepto.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>zepto_offset的区别</title><style type="text/css">*{margin: 0;padding: 0;}#box{width: 200px;height: 200px;position: relative;left: 50px;top: 50px;font-size: 22px;background: #FF0000;text-align: center;line-height: 200px;}</style>
</head>
<body><!--* offset()1、获得当前元素相对于视口的位置。2、返回一个对象含有： top, left, width和height(获取的宽高是盒模型可见区域的宽高)--><div id="box">新年快乐，大吉大利</div><script src="../../../js/zepto.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){var $offset = $('#box').offset();console.log($offset);console.log($offset.left);console.log($offset.width);})</script>
</body>
</html>width(),height()区别
jquery.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>jquery</title>
<style type="text/css">#box{width: 200px;height: 200px;background: #f00;margin: 10px;padding: 10px;border: 3px solid #f0f;}
</style>
</head>
<body>
<div id="box"></div>
<script src="../../../js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">/** jquery获取宽高的方法1、width(),height()---content内容区的宽高，没有单位px;2、.css('width')----可以获取content内容区的宽高，padding，border的值，有单位px;3、innerHeight(),innerWidth()---outerHeight(),outerWidth()来获取* */$(function(){//jquery中width(),height(),.css()返回的始终是content区域的宽高console.log($('#box').width());console.log($('#box').height());console.log($('#box').css('width'));//可以通过css（）获取padding，border的值console.log($('#box').css('padding'));console.log($('#box').css('border-width'));//也可以利用innerHeight(),outerHeight(),innerWidth(),outerWidth()等来获取padding和border的值console.log($('#box').innerHeight());console.log($('#box').outerHeight()+'outerHeight');})
</script>
</body>
</html>zepto.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>zepto</title><style type="text/css">#box{width: 200px;height: 200px;background: #f00;margin: 10px;padding: 10px;border: 1px solid #ff0;}</style>
</head>
<body><div id="box"></div><script src="../../../js/zepto.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){//zepto用width(),height()是根据盒模型决定的，并且不包含单位PX//包含padding的值,border的值//zepto中没有innerHeight(),innerWidth()---outerHeight(),outerWidth()console.log($('#box').width());console.log($('#box').height());//用.css('width')获取的是content的宽高。console.log($('#box').css('width'));//* 单独获取padding，border的值console.log($('#box').css('padding'));console.log($('#box').css('border-width')+'border');})</script>
</body>
</html>
事件委托
jquery.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>jquery_事件委托</title><style type="text/css">#box{width: 400px;background: green;}.a{width: 200px;height: 200px;background: #FF0000;}.b{width: 100px;height: 100px;background: #F0f;}</style>
</head>
<body><div id="box"><div class="a">a的事件委托</div><br /><br /><br /><div class="b">b的事件委托</div><br /><br /><br /><div id="a">#a事件委托</div><p>Click me!</p></div>
<script src="../../../js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">$(function(){console.log($('.a').length);//1.7以后已经不 支持live了。
// $('#a').live('click',function(){// alert('a');
// })
// $('#box').delegate('.a','click',function(){// alert('delegate');
// })//在jquery中事件委托只是找相应的event.target触发元素进行的回调函数执行,其他的并不关心。$('#box').on("click",'.a',function(){alert('a事件');$(this).removeClass('a').addClass('b');});$('#box').on("click",'.b',function(){alert('b事件');$(this).removeClass('b').addClass('a');});$('#box').append('<div class="a" style="font-size: 30px;">我是新添加的div</div>')})
</script>
</body>
</html>zepto.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>zepto_事件委托</title><style type="text/css">#box{width: 400px;background: green;}.a{width: 200px;height: 200px;background: #FF0000;}.b{width: 100px;height: 100px;background: #F0f;}</style>
</head>
<body><div id="box"><div class="a">a 的事件委托</div><br /><br /><br /><div class="b">b的事件委托</div><br /><br /><br /><div id="a">#a的事件委托</div><p>Click me!</p></div>
<script src="../../../js/zepto.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/touch.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">$(function(){//在zepto的官网表示已经废除了live，delegate等。
// $('.a').live('click',function(){// alert('a')
// })//* 坑！！！！/** ---在zepto中事件委托委托的事件先被依次放入数组队列里，然后由自身开始往后找直到找到最后，期间符合条件的元素委托的事件都会执行。1、委托在同一个父元素,或者触发的元素的事件范围小于同类型事件(冒泡能冒到自身范围)2、同一个事件3、委托关联 操作的类要进行关联4、绑定顺序---从当前的位置往后看*/$('#box').on("click",'.a',function(){alert('a事件');$(this).removeClass('a').addClass('b');});$('#box').on("click",'.b',function(){alert('b事件');$(this).removeClass('b').addClass('a');});$('#box').append($('<p>我是新添加的p标签</p>',{class:'a'}));})
</script>
</body>
</html>隐藏元素宽高
jquery.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title><style type="text/css">#box{display: none;width: 200px;height: 200px;border:1px solid #ff0;}</style>
</head>
<body><!--jquery可以获取隐藏元素的宽高--><div id="box"></div><script src="../../../js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function () {console.log($('#box').width());console.log($('#box').height());});</script>
</body>
</html>zepto.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>zepto</title><style type="text/css">#box{display: none;width: 200px;height: 200px;border: 1px solid #ff0;}</style>
</head>
<body><!--zepto无法获取隐藏元素宽高--><div id="box">hello</div><script src="../../../js/zepto.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function () {console.log($('#box').width());console.log($('#box').height());});</script>
</body>
</html>zepto.js学习笔记01相关推荐
- Vue.js学习笔记 01、Vue基本语法篇
文章目录 前言 1.基础学习 1.1.第一个vue:helloworld(template以及mount()使用) 1.2.编写计数器(mounted应用) 1.3.vue的绑定事件和事件方法(v-o ...
- JavaWeb-综合案例(用户信息)-学习笔记01【列表查询】
Java后端 学习路线 笔记汇总表[黑马程序员] JavaWeb-综合案例(用户信息)-学习笔记01[列表查询] JavaWeb-综合案例(用户信息)-学习笔记02[登录功能] JavaWeb-综合案 ...
- Bootstrap学习笔记01【快速入门、栅格布局】
Java后端 学习路线 笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
- JavaScript学习笔记01【基础——简介、基础语法、运算符、特殊语法、流程控制语句】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
- WebGL three.js学习笔记 6种类型的纹理介绍及应用
WebGL three.js学习笔记 6种类型的纹理介绍及应用 本文所使用到的demo演示: 高光贴图Demo演示 反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理 计算机图形学 ...
- jQuery学习笔记01：初试jQuery
jQuery学习笔记01:初试jQuery 一.下载jQuery jQuery官网:https://jquery.com 二.案例演示--Welcome to jQuery World 1.在WebS ...
- RN学习笔记01：概述、特点与环境搭建
RN学习笔记01:概述.特点与环境搭建 一.RN概述 React Native(简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架 Reac ...
- ArcGIS JS 学习笔记4 实现地图联动
原文:ArcGIS JS 学习笔记4 实现地图联动 1.开篇 守望屁股实在太好玩了,所以最近有点懒,这次就先写个简单的来凑一下数.这次我的模仿目标是天地图的地图联动. 天地的地图联动不仅地图有联动,而 ...
- backbone.js学习笔记
backbone.js学习笔记 之前只接触过jQuery,看来Backbone是除了jQuery的第二大JS框架... backbone到底是个啥? 其实刚开始我也不知道=_=,我是这周二才听说居然还 ...
- node.js学习笔记
# node.js学习笔记标签(空格分隔): node.js---## 一 内置模块学习 ### 1. http 模块 ``` //1 导入http模块 const http =require('ht ...
最新文章
- 计算机大师高德纳权威著作《计算机程序设计艺术》影印版精装版已经入库，即将上市！
- bestcoder #71 1003 找位运算的最大生成树
- java后台日期怎么去重,JAVA后台业务实现去重
- Linux中把文件夹打成war包,SpringBoot中maven项目打成war包部署在liunx服务器上的方法...
- 嵌入式Linux下Qt的中文显示
- springboot 上传异常捕获_Spring Boot 全局异常处理（下）
- 用户计算机证书在哪里找,用户、计算机或服务的“证书”管理单元 怎么进？...
- 中登TA、自TA、分TA
- 多糖类水凝胶构建制备介绍（瑞禧多糖水凝胶简述）
- Data‘ object has no attribute ‘has_isolated_nodes
- php支付宝pc收银台,支付宝支付-PC电脑网站支付
- (译)三维空间中的几种坐标系
- mysql 联查字段名重复_查询数据库多个字段名时的结果有重复的解决办法_MySQL
- java kryo register_kryo处理unmodifiedList报错问题
- springboot+quartz报错：Table ‘XXXX.QRTZ_TRIGGERS‘ doesn‘t exist
- Xcode与C++之游戏开发: 游戏对象
- NeurIPS 2022 | Stable Diffusion采样速度翻倍！清华提出扩散模型高效求解器
- Microchip最新中文资料下载
- USB转TTL 下载线 线序定义
- c语言单片机用float,float类型变量在单片机中的存储