add：Zepto
This commit is contained in:
qianguyihao
parent
1f1bafd8bc
commit
915bb57c5d
@ -1,161 +1,241 @@
|
||||
|
||||
|
||||
|
||||
## 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）代码演示：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
#btn {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: pink;
|
||||
margin: 10px auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="btn">我是 div</div>
|
||||
<script src="libs/zepto1.2.0.js"></script>
|
||||
<script src="libs/touch.js"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
$('#btn').on('touchstart', function () {
|
||||
alert('hello world');
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
上方代码实现的效果是，当手在div上滑动时，就会弹出 alert窗。可以看出，这里面代码的写法和 jQuery 是一致的。
|
||||
|
||||
注意，我们要将浏览器切换到手机模式，才能看到`touchstart`事件的效果；否则，在浏览器上点来点去，是没有反应的。
|
||||
|
||||
## Zepto 和 jQuery 相同的 api
|
||||
|
||||
> 意思是，jQuery 和 Zepto 有哪些共同点。
|
||||
|
||||
|
||||
### jQuery 的主要特性
|
||||
|
||||
下面来讲一下 jQuery 的主要特性（jQuery 的核心函数`$`、jQuery 对象），它们对 Zepto 来说，同样适用。
|
||||
|
||||
**1、jQuery 的核心函数`$`**:
|
||||
|
||||
作为函数使用（参数）：
|
||||
|
||||
- function
|
||||
|
||||
- html字符串
|
||||
|
||||
- DOM code
|
||||
|
||||
- 选择器字符串
|
||||
|
||||
作为对象调用(方法)：
|
||||
|
||||
- $.ajax() $.get() $.post()
|
||||
|
||||
- $.isArray() $.each() $.isFunction() $.trim()
|
||||
|
||||
**2、jQuery 对象**：
|
||||
|
||||
概念：jquery核心函数$()调用返回的对象就是jquery对象的数组（可能有只有一个）。
|
||||
|
||||
使用举例：
|
||||
|
||||
- addClass()
|
||||
|
||||
- removeClass()
|
||||
|
||||
- show()
|
||||
|
||||
- find()
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 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）代码演示：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
#btn {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: pink;
|
||||
margin: 10px auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="btn">我是 div</div>
|
||||
<script src="libs/zepto1.2.0.js"></script>
|
||||
<script src="libs/touch.js"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
$('#btn').on('touchstart', function () {
|
||||
alert('hello world');
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
上方代码实现的效果是，当手在div上滑动时，就会弹出 alert窗。可以看出，这里面代码的写法和 jQuery 是一致的。
|
||||
|
||||
注意，我们要将浏览器切换到手机模式，才能看到`touchstart`事件的效果；否则，在浏览器上点来点去，是没有反应的。
|
||||
|
||||
## Zepto 和 jQuery 相同的 api
|
||||
|
||||
> 意思是，jQuery 和 Zepto 有哪些共同点。
|
||||
|
||||
|
||||
### jQuery 的主要特性
|
||||
|
||||
下面来讲一下 jQuery 的主要特性（jQuery 的核心函数`$`、jQuery 对象），它们对 Zepto 来说，同样适用。
|
||||
|
||||
**1、jQuery 的核心函数`$`**:
|
||||
|
||||
作为函数使用（参数）：
|
||||
|
||||
- function
|
||||
|
||||
- html字符串
|
||||
|
||||
- DOM code
|
||||
|
||||
- 选择器字符串
|
||||
|
||||
作为对象调用(方法)：
|
||||
|
||||
- $.ajax() $.get() $.post()
|
||||
|
||||
- $.isArray() $.each() $.isFunction() $.trim()
|
||||
|
||||
**2、jQuery 对象**：
|
||||
|
||||
概念：jquery核心函数$()调用返回的对象就是jquery对象的数组（可能有只有一个）。
|
||||
|
||||
使用列举：
|
||||
|
||||
- addClass()
|
||||
|
||||
- removeClass()
|
||||
|
||||
- show()
|
||||
|
||||
- find()
|
||||
|
||||
### 代码举例
|
||||
|
||||
1、`$.each()`方法举例：（遍历数组）
|
||||
|
||||
```html
|
||||
<script src="libs/zepto-1.2.0.js"></script>
|
||||
<script src="libs/zepto-1.2.0.js"></script>
|
||||
<script>
|
||||
var arr = [2, 4, 6, 8];
|
||||
|
||||
$.each(arr, function (index, item) {
|
||||
console.log(index, item);
|
||||
});
|
||||
</script>
|
||||
|
||||
```
|
||||
|
||||
打印结果：
|
||||
|
||||
20180416_1145.png
|
||||
|
||||
2、`append()`举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
.box1 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: pink;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="box1"></div>
|
||||
|
||||
<script src="libs/zepto-1.2.0.js"></script>
|
||||
<script src="libs/touch.js"></script>
|
||||
<script>
|
||||
$('.box1').on('touchstart', function () {
|
||||
$('.box1').append('<p>我是新添加的元素</p>');
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
上方代码实现的效果是：每次，当手在box1上滑动时，会在 box1 中新添加一个元素。
|
||||
|
||||
|
||||
4、`find()`方法举例：
|
||||
|
||||
```javascript
|
||||
$('.box1').on('touchstart', function () {
|
||||
console.log('touch');
|
||||
$(this).find('p').css('background', 'red');
|
||||
});
|
||||
```
|
||||
|
||||
代码解释：找到 box1 中的 p 标签， 给 p 标签设置背景色。
|
||||
|
||||
注意，代码里的`$(this).find()`相当于`this.find`，只不过this没有find方法，而$有find方法。
|
||||
|
||||
|
||||
|
||||
5、`show()`方法举例：
|
||||
|
||||
```javascript
|
||||
$(`.box1`).on('touchstart', function () {
|
||||
$('.box2').show();
|
||||
});
|
||||
```
|
||||
|
||||
假设 box2 一开始是隐藏的，事件中，让 box2 显示出来。
|
||||
|
||||
|
||||
|
||||
|
||||
32
20-网友/html相关.md
Normal file
32
20-网友/html相关.md
Normal file
@ -0,0 +1,32 @@
|
||||
|
||||
## SSI：服务器端嵌入
|
||||
|
||||
SSI：Server Side Include，服务器端嵌入。
|
||||
|
||||
通俗点讲，就是在本地的html页面中，插入服务器上的文件。即：静态页面中，插入动态的代码。
|
||||
|
||||
比如：
|
||||
|
||||
```html
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<!--#include virtual="/sinclude/common/head_inc.shtml"-->
|
||||
<!--#include virtual="/sinclude/common/head_shortcut.shtml"-->
|
||||
<!--#include virtual="head.shtml"-->
|
||||
</head>
|
||||
```
|
||||
|
||||
上面的代码中，注释里的代码，就是SSI部分，它加载的是服务器端的html页面。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
25
推荐链接.md
25
推荐链接.md
@ -1,15 +1,12 @@
|
||||
|
||||
|
||||
> 记录平时遇到的好文章，按时间先后排序。
|
||||
|
||||
|
||||
|
||||
### 2017-09-15
|
||||
|
||||
- [你所不知道的 CSS 滤镜技巧与细节](http://www.cnblogs.com/coco1s/p/7519460.html)
|
||||
|
||||
|
||||
|
||||
### 2017-09-19
|
||||
|
||||
- [适合程序员的写作技法](http://www.cnblogs.com/mindwind/p/7536748.html)
|
||||
@ -23,23 +20,17 @@
|
||||
- 交付
|
||||
|
||||
|
||||
|
||||
|
||||
### 2018-01-09
|
||||
|
||||
- [翻译 | 像 JavaScript 一样思考](http://www.ituring.com.cn/article/497284)
|
||||
|
||||
在MacTalk的小密圈里看到有人分享。
|
||||
|
||||
|
||||
|
||||
- [大前端公共知识杂谈](https://time.geekbang.org/column/article/241)
|
||||
|
||||
|
||||
- [小白谈数据脱敏](http://www.54tianzhisheng.cn/2017/10/28/Data-Desensitization/)
|
||||
|
||||
|
||||
|
||||
### 2018-01-10
|
||||
|
||||
- [MAC全栈开发环境搭建指南](https://mac.aotu.io/)
|
||||
@ -48,17 +39,13 @@
|
||||
|
||||
- [介绍几个上网+分流+图床工具](http://www.viyuedu.com/kaopuseo/61071.html)
|
||||
|
||||
|
||||
|
||||
### 2018-01-12
|
||||
|
||||
- [张鑫旭 | 话说我为什么要闭关学习](http://www.zhangxinxu.com/life/2013/03/%E6%88%91%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E9%97%AD%E5%85%B3%E5%AD%A6%E4%B9%A0/)
|
||||
|
||||
|
||||
作者闭关学习了半年的前端。
|
||||
|
||||
|
||||
|
||||
### 2018-01-17
|
||||
|
||||
- [你的简历能帮你争取到面试机会吗](http://www.cnblogs.com/JavaArchitect/archive/2018/01/09/8249594.html)
|
||||
@ -66,13 +53,11 @@
|
||||
- [漫话JavaScript与异步·第三话——Generator：化异步为同步](http://www.cnblogs.com/leegent/archive/2018/01/10/8207246.html)
|
||||
|
||||
|
||||
|
||||
### 2017-01-19
|
||||
|
||||
- [一个三年工作经验的软件工程师的经验之谈](http://www.cnblogs.com/lovesong/p/5721828.html)
|
||||
|
||||
|
||||
#### 2018-01-22
|
||||
### 2018-01-22
|
||||
|
||||
- [前端程序员容易忽视的一些基础知识](https://www.cnblogs.com/fsyz/p/8327451.html)
|
||||
|
||||
@ -152,11 +137,17 @@
|
||||
|
||||
这句话的来源：[我依然坚持建议你开始写博客 | 写给我的 2017](https://www.cnblogs.com/plokmju/p/8108846.html)
|
||||
|
||||
|
||||
### 2018-03-21
|
||||
|
||||
- [不谈面试题，谈谈招聘时我喜欢见到的特质](https://www.cnblogs.com/dino623/p/8583514.html)
|
||||
|
||||
|
||||
|
||||
### 2018-04-16
|
||||
|
||||
- [Jerry和您聊聊Chrome开发者工具](https://mp.weixin.qq.com/s/CPnbx8ZfszPEcI3Y8RittA)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user