add:Zepto入门
This commit is contained in:
		
							parent
							
								
									b87401d112
								
							
						
					
					
						commit
						2213d1b4e9
					
				
							
								
								
									
										85
									
								
								07-移动web开发/01-Zepto入门.md
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										85
									
								
								07-移动web开发/01-Zepto入门.md
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,85 @@ | |||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | ## Zepto 的介绍 | ||||||
|  | 
 | ||||||
|  | ### 什么是 Zepto | ||||||
|  | 
 | ||||||
|  | zepto是轻量级的JavaScript库,专门为移动端定制的框架。 | ||||||
|  | 
 | ||||||
|  | 与jquery有着类似的API,俗称:会jquery就会用zepto | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | ### zepto的特点 | ||||||
|  | 
 | ||||||
|  | - 针对移动端 | ||||||
|  | 
 | ||||||
|  | - 轻量级,压缩版本只有8kb左右 | ||||||
|  | 
 | ||||||
|  | - 响应,执行快 | ||||||
|  | 
 | ||||||
|  | - 语法、API大部分同jquery一样,学习难度低,上手快。 | ||||||
|  | 
 | ||||||
|  | - 目前API完善的框架中体积最小的一个 | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | ### 相关网址 | ||||||
|  | 
 | ||||||
|  | - 官网:<http://zeptojs.com/> | ||||||
|  | 
 | ||||||
|  | - GitHub:<https://github.com/madrobby/zepto> | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | ## Zepto 与 jQuery 的前世今生 | ||||||
|  | 
 | ||||||
|  | ### 相同点 | ||||||
|  | 
 | ||||||
|  | - 都是优秀的js函数库 | ||||||
|  | 
 | ||||||
|  | - 语法、API大部分都一样(zepto是按照jquery的思路来设计的) | ||||||
|  | 
 | ||||||
|  | - Zepto 相当于 jQuery 的子集 | ||||||
|  | 
 | ||||||
|  | - 同jQuery一样,都是以`$`符号为核心函数。 | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | ### 不同点 | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | ## Zepto 的初体验 | ||||||
|  | 
 | ||||||
|  | (1)Zepto 库的下载: | ||||||
|  | 
 | ||||||
|  | 我们去官网下载 Zepto的开发版本`zepto.js`: | ||||||
|  | 
 | ||||||
|  | 20180414_2210.png | ||||||
|  | 
 | ||||||
|  | 官网里,还有这样一张图: | ||||||
|  | 
 | ||||||
|  | 20180414_2215.png | ||||||
|  | 
 | ||||||
|  | 上图的意思是: | ||||||
|  | 
 | ||||||
|  | - 最前面打钩的那五个api,已经包含在`zepto.js `文件里了; | ||||||
|  | 
 | ||||||
|  | - 后面没有打钩的那些api,如果需要用它们,必须单独下载响应的文件。 | ||||||
|  | 
 | ||||||
|  | 比如说,移动端的 touch 事件是很常见的,我们可以将`touch.js`这个文件下载,稍后用。 | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | (2)代码演示: | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | 注意,我们要将浏览器切换到手机模式,才能看到`touchstart`事件的效果;否则端,在浏览器上点来点去,是没有反应的。 | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
|  | 
 | ||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user