diff --git a/07-移动web开发/01-Zepto入门.md b/07-移动web开发/01-Zepto入门.md index 0dc912e..c64da7d 100644 --- a/07-移动web开发/01-Zepto入门.md +++ b/07-移动web开发/01-Zepto入门.md @@ -1,161 +1,241 @@ - - - -## Zepto 的介绍 - -### 什么是 Zepto - -zepto是轻量级的JavaScript库，专门为移动端定制的框架。 - -与jquery有着类似的API，俗称：会jquery就会用zepto - - - -### zepto的特点 - -- 针对移动端 - -- 轻量级，压缩版本只有8kb左右 - -- 响应，执行快 - -- 语法、API大部分同jquery一样，学习难度低，上手快。 - -- 目前API完善的框架中体积最小的一个 - - -### 相关网址 - -- 官网： - -- GitHub： - - -## 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 - - - - - - - - Document - - - - - -
我是 div
- - - - - - -``` - -上方代码实现的效果是，当手在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完善的框架中体积最小的一个 + + +### 相关网址 + +- 官网： + +- GitHub： + + +## 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 + + + + + + + + Document + + + + + +
我是 div
+ + + + + + +``` + +上方代码实现的效果是，当手在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 + + + + +``` + +打印结果： + +20180416_1145.png + +2、`append()`举例： + +```html + + + + + + + + Document + + + + +
+ + + + + + + +``` + +上方代码实现的效果是：每次，当手在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 显示出来。 + + + diff --git a/20-网友/html相关.md b/20-网友/html相关.md new file mode 100644 index 0000000..537a2da --- /dev/null +++ b/20-网友/html相关.md @@ -0,0 +1,32 @@ + +## SSI：服务器端嵌入 + +SSI：Server Side Include，服务器端嵌入。 + +通俗点讲，就是在本地的html页面中，插入服务器上的文件。即：静态页面中，插入动态的代码。 + +比如： + +```html + + + + + Document + + + + + +``` + +上面的代码中，注释里的代码，就是SSI部分，它加载的是服务器端的html页面。 + + + + + + + diff --git a/推荐链接.md b/推荐链接.md index 15181bc..49002e1 100644 --- a/推荐链接.md +++ b/推荐链接.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) + + + +