webcourse/Webcourse
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add：Zepto

Browse Source
This commit is contained in:
qianguyihao 2018-04-17 11:09:17 +08:00
parent 1f1bafd8bc
commit 915bb57c5d
3 changed files with 281 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

402
07-移动web开发/01-Zepto入门.md
View File

@ -1,161 +1,241 @@
## Zepto 的介绍 ## Zepto 的介绍
### 什么是 Zepto ### 什么是 Zepto
zepto是轻量级的JavaScript库，专门为移动端定制的框架。 zepto是轻量级的JavaScript库，专门为移动端定制的框架。
与jquery有着类似的API，俗称：会jquery就会用zepto 与jquery有着类似的API，俗称：会jquery就会用zepto
### zepto的特点 ### zepto的特点
- 针对移动端 - 针对移动端
- 轻量级，压缩版本只有8kb左右 - 轻量级，压缩版本只有8kb左右
- 响应，执行快 - 响应，执行快
- 语法、API大部分同jquery一样，学习难度低，上手快。 - 语法、API大部分同jquery一样，学习难度低，上手快。
- 目前API完善的框架中体积最小的一个 - 目前API完善的框架中体积最小的一个
### 相关网址 ### 相关网址
- 官网：<http://zeptojs.com/> - 官网：<http://zeptojs.com/>
- GitHub：<https://github.com/madrobby/zepto> - GitHub：<https://github.com/madrobby/zepto>
## Zepto 与 jQuery 的前世今生 ## Zepto 与 jQuery 的前世今生
### 相同点 ### 相同点
- 都是优秀的js函数库 - 都是优秀的js函数库
- 语法、API大部分都一样（zepto是按照jquery的思路来设计的） - 语法、API大部分都一样（zepto是按照jquery的思路来设计的）
- Zepto 相当于 jQuery 的子集 - Zepto 相当于 jQuery 的子集
- 同jQuery一样，都是以`$`符号为核心函数。 - 同jQuery一样，都是以`$`符号为核心函数。
### 不同点
### 不同点
## Zepto 的初体验
（1）Zepto 库的下载：
## Zepto 的初体验
我们去官网下载 Zepto的开发版本`zepto.js`：
（1）Zepto 库的下载：
20180414_2210.png
我们去官网下载 Zepto的开发版本`zepto.js`：
官网里，还有这样一张图：
20180414_2210.png
20180414_2215.png
官网里，还有这样一张图：
上图的意思是：
20180414_2215.png
- 最前面打钩的那五个api，已经包含在`zepto.js `文件里了；
上图的意思是：
- 后面没有打钩的那些api，如果需要用它们，必须单独下载响应的文件。
- 最前面打钩的那五个api，已经包含在`zepto.js `文件里了；
比如说，移动端的 touch 事件是很常见的，我们可以将`touch.js`这个文件下载，稍后用。
- 后面没有打钩的那些api，如果需要用它们，必须单独下载响应的文件。
比如说，移动端的 touch 事件是很常见的，我们可以将`touch.js`这个文件下载，稍后用。 （2）代码演示：
```html
<!DOCTYPE html>
（2）代码演示： <html lang="en">
```html <head>
<!DOCTYPE html> <meta charset="UTF-8">
<html lang="en"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<head> <title>Document</title>
<meta charset="UTF-8"> <style>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> #btn {
<meta http-equiv="X-UA-Compatible" content="ie=edge"> width: 200px;
<title>Document</title> height: 200px;
<style> background: pink;
#btn { margin: 10px auto;
width: 200px; }
height: 200px; </style>
background: pink; </head>
margin: 10px auto;
} <body>
</style>
</head> <div id="btn">我是 div</div>
<script src="libs/zepto1.2.0.js"></script>
<body> <script src="libs/touch.js"></script>
<script>
<div id="btn">我是 div</div> $(function () {
<script src="libs/zepto1.2.0.js"></script> $('#btn').on('touchstart', function () {
<script src="libs/touch.js"></script> alert('hello world');
<script> });
$(function () { });
$('#btn').on('touchstart', function () {
alert('hello world'); </script>
}); </body>
});
</html>
</script> ```
</body>
上方代码实现的效果是，当手在div上滑动时，就会弹出 alert窗。可以看出，这里面代码的写法和 jQuery 是一致的。
</html>
``` 注意，我们要将浏览器切换到手机模式，才能看到`touchstart`事件的效果；否则，在浏览器上点来点去，是没有反应的。
上方代码实现的效果是，当手在div上滑动时，就会弹出 alert窗。可以看出，这里面代码的写法和 jQuery 是一致的。 ## Zepto 和 jQuery 相同的 api
注意，我们要将浏览器切换到手机模式，才能看到`touchstart`事件的效果；否则，在浏览器上点来点去，是没有反应的。 > 意思是，jQuery 和 Zepto 有哪些共同点。
## Zepto 和 jQuery 相同的 api
### jQuery 的主要特性
> 意思是，jQuery 和 Zepto 有哪些共同点。
下面来讲一下 jQuery 的主要特性（jQuery 的核心函数`$`、jQuery 对象），它们对 Zepto 来说，同样适用。
### jQuery 的主要特性 **1、jQuery 的核心函数`$`**:
下面来讲一下 jQuery 的主要特性（jQuery 的核心函数`$`、jQuery 对象），它们对 Zepto 来说，同样适用。 作为函数使用（参数）：
**1、jQuery 的核心函数`$`**: - function
作为函数使用（参数）： - html字符串
- function - DOM code
- html字符串 - 选择器字符串
- DOM code 作为对象调用(方法)：
- 选择器字符串 - $.ajax() $.get() $.post()
作为对象调用(方法)： - $.isArray() $.each() $.isFunction() $.trim()
- $.ajax() $.get() $.post() **2、jQuery 对象**：
- $.isArray() $.each() $.isFunction() $.trim() 概念：jquery核心函数$()调用返回的对象就是jquery对象的数组（可能有只有一个）。
**2、jQuery 对象**： 使用列举：
概念：jquery核心函数$()调用返回的对象就是jquery对象的数组（可能有只有一个）。 - addClass()
使用举例： - removeClass()
- addClass() - show()
- removeClass() - find()
- 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
View 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
View File

@ -1,15 +1,12 @@
> 记录平时遇到的好文章，按时间先后排序。 > 记录平时遇到的好文章，按时间先后排序。
### 2017-09-15 ### 2017-09-15
- [你所不知道的 CSS 滤镜技巧与细节](http://www.cnblogs.com/coco1s/p/7519460.html) - [你所不知道的 CSS 滤镜技巧与细节](http://www.cnblogs.com/coco1s/p/7519460.html)
### 2017-09-19 ### 2017-09-19
- [适合程序员的写作技法](http://www.cnblogs.com/mindwind/p/7536748.html) - [适合程序员的写作技法](http://www.cnblogs.com/mindwind/p/7536748.html)
@ -23,23 +20,17 @@
- 交付 - 交付
### 2018-01-09 ### 2018-01-09
- [翻译 | 像 JavaScript 一样思考](http://www.ituring.com.cn/article/497284) - [翻译 | 像 JavaScript 一样思考](http://www.ituring.com.cn/article/497284)
在MacTalk的小密圈里看到有人分享。 在MacTalk的小密圈里看到有人分享。
- [大前端公共知识杂谈](https://time.geekbang.org/column/article/241) - [大前端公共知识杂谈](https://time.geekbang.org/column/article/241)
- [小白谈数据脱敏](http://www.54tianzhisheng.cn/2017/10/28/Data-Desensitization/) - [小白谈数据脱敏](http://www.54tianzhisheng.cn/2017/10/28/Data-Desensitization/)
### 2018-01-10 ### 2018-01-10
- [MAC全栈开发环境搭建指南](https://mac.aotu.io/) - [MAC全栈开发环境搭建指南](https://mac.aotu.io/)
@ -48,17 +39,13 @@
- [介绍几个上网+分流+图床工具](http://www.viyuedu.com/kaopuseo/61071.html) - [介绍几个上网+分流+图床工具](http://www.viyuedu.com/kaopuseo/61071.html)
### 2018-01-12 ### 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/) - [张鑫旭 | 话说我为什么要闭关学习](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 ### 2018-01-17
- [你的简历能帮你争取到面试机会吗](http://www.cnblogs.com/JavaArchitect/archive/2018/01/09/8249594.html) - [你的简历能帮你争取到面试机会吗](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) - [漫话JavaScript与异步·第三话——Generator：化异步为同步](http://www.cnblogs.com/leegent/archive/2018/01/10/8207246.html)
### 2017-01-19 ### 2017-01-19
- [一个三年工作经验的软件工程师的经验之谈](http://www.cnblogs.com/lovesong/p/5721828.html) - [一个三年工作经验的软件工程师的经验之谈](http://www.cnblogs.com/lovesong/p/5721828.html)
### 2018-01-22
#### 2018-01-22
- [前端程序员容易忽视的一些基础知识](https://www.cnblogs.com/fsyz/p/8327451.html) - [前端程序员容易忽视的一些基础知识](https://www.cnblogs.com/fsyz/p/8327451.html)
@ -152,11 +137,17 @@
这句话的来源：[我依然坚持建议你开始写博客 | 写给我的 2017](https://www.cnblogs.com/plokmju/p/8108846.html) 这句话的来源：[我依然坚持建议你开始写博客 | 写给我的 2017](https://www.cnblogs.com/plokmju/p/8108846.html)
### 2018-03-21 ### 2018-03-21
- [不谈面试题，谈谈招聘时我喜欢见到的特质](https://www.cnblogs.com/dino623/p/8583514.html) - [不谈面试题，谈谈招聘时我喜欢见到的特质](https://www.cnblogs.com/dino623/p/8583514.html)
### 2018-04-16
- [Jerry和您聊聊Chrome开发者工具](https://mp.weixin.qq.com/s/CPnbx8ZfszPEcI3Y8RittA)