diff --git a/07-jQuery/01-jQuery的介绍和选择器.md b/07-jQuery/01-jQuery的介绍和选择器.md index b9baed6..1c484f5 100644 --- a/07-jQuery/01-jQuery的介绍和选择器.md +++ b/07-jQuery/01-jQuery的介绍和选择器.md @@ -780,7 +780,7 @@ jQuery选择器是jQuery强大的体现,它提供了一组方法,让我们 产生的结果是:(不是我们期望的结果) -20180205_1050.gif +![](http://img.smyhvae.com/20180205_1050.gif) 两张图的对比,可以看出this的作用:谁正在调用函数,this就指的是谁。 @@ -835,8 +835,7 @@ jQuery选择器是jQuery强大的体现,它提供了一组方法,让我们 效果如下: -20180205_1100.gif - +![](http://img.smyhvae.com/20180205_1100.gif) ### 举例3:突出显示 @@ -922,7 +921,7 @@ jQuery选择器是jQuery强大的体现,它提供了一组方法,让我们 实现的效果: -20180205_1118.gif +![](http://img.smyhvae.com/20180205_1118.gif) 注意这里的css布局里,每一个图片都用一个li来存放。设置li的父亲的宽度之后,然后将li设置为浮动,即可自适应地排列成两排。 @@ -1013,8 +1012,7 @@ jQuery选择器是jQuery强大的体现,它提供了一组方法,让我们 效果: -20180205_1120.gif - +![](http://img.smyhvae.com/20180205_1120.gif) 注意这里的 选择器的用法:parent、next @@ -1150,7 +1148,7 @@ jQuery选择器是jQuery强大的体现,它提供了一组方法,让我们 效果: -20180205_1135.gif +![](http://img.smyhvae.com/20180205_1135.gif) 工程文件: diff --git a/07-jQuery/02-jQuery动画详解.md b/07-jQuery/02-jQuery动画详解.md index 784c5bb..7f564bb 100644 --- a/07-jQuery/02-jQuery动画详解.md +++ b/07-jQuery/02-jQuery动画详解.md @@ -589,7 +589,7 @@ PS:参数如果都不写,默认两个都是false。实际工作中,直接 效果如下: -20180205_2000.gif +![](http://img.smyhvae.com/20180205_2000.gif) ## 我的公众号 diff --git a/07-jQuery/03-jQuery操作DOM.md b/07-jQuery/03-jQuery操作DOM.md index 8e1f27e..28b84d6 100644 --- a/07-jQuery/03-jQuery操作DOM.md +++ b/07-jQuery/03-jQuery操作DOM.md @@ -2,7 +2,9 @@ ## 文本主要内容 - + + + - 样式和类操作 - 节点操作 @@ -39,7 +41,7 @@ 举例如下: -20180205_1315.png +![](http://img.smyhvae.com/20180205_1315.png) ### 类操作(className) @@ -180,8 +182,7 @@ $(selector).toggleClass(“liItem”); //为指定元素切换类 className 实现的效果: -20180205_1330.gif - +![](http://img.smyhvae.com/20180205_1330.gif) ### 样式操作和类操作的比较 @@ -316,8 +317,7 @@ $(selector).toggleClass(“liItem”); //为指定元素切换类 className 效果: -20180205_1345.gif - +![](http://img.smyhvae.com/20180205_1345.gif) @@ -417,7 +417,7 @@ $(selector).append('
'); //参数是 htmlString 效果: -20180205_2020.gif +![](http://img.smyhvae.com/20180205_2020.gif) **其他的添加元素的方法:** @@ -569,7 +569,8 @@ $(selector).append('
'); //参数是 htmlString 效果: -20180205_2040.gif +![](http://img.smyhvae.com/20180205_2040.gif) + ### 案例:动态添加表格项 @@ -686,7 +687,7 @@ $(selector).append('
'); //参数是 htmlString 实现的效果: -20180205_2045.gif +![](http://img.smyhvae.com/20180205_2045.gif) 代码解释:每次生成字符串str之前,记得先把之前的str清空,不然每次点击按钮,都会继续添加表格项。 @@ -798,7 +799,7 @@ prop方法通常用来影响DOM元素的动态状态,而不是改变的HTML属 效果: -20180205_2115.gif +![](http://img.smyhvae.com/20180205_2115.gif) **案例:表格案例全选反选** @@ -957,7 +958,7 @@ prop方法通常用来影响DOM元素的动态状态,而不是改变的HTML属 ```javascript - $(selector).text(“我是内容”); + $(selector).text("我是内容"); ``` @@ -972,12 +973,6 @@ prop方法通常用来影响DOM元素的动态状态,而不是改变的HTML属 举例: - - - - - - ```html @@ -1021,7 +1016,6 @@ prop方法通常用来影响DOM元素的动态状态,而不是改变的HTML属 打印结果: -20180205_2139.png - +![](http://img.smyhvae.com/20180205_2139.png) diff --git a/07-jQuery/04-jQuery的事件机制和其他知识.md b/07-jQuery/04-jQuery的事件机制和其他知识.md index 150b679..58fca99 100644 --- a/07-jQuery/04-jQuery的事件机制和其他知识.md +++ b/07-jQuery/04-jQuery的事件机制和其他知识.md @@ -1,6 +1,5 @@ - ## jQuery 设置宽度和高度 宽度操作: @@ -19,7 +18,6 @@ $(selector).width(200); //带参数表示设置高宽度 ``` - **问题**:jQuery的css()获取高度,和jQuery的height获取高度,二者的区别? 答案: @@ -36,7 +34,6 @@ ## jQuery 的坐标操作 - ### offset()方法 @@ -63,11 +60,8 @@ 注意:只能获取,不能设置。 - - ### scrollTop()方法 - ```javascript scrollTop(); $(selector).scrollTop(100); @@ -82,8 +76,6 @@ ### scrollLeft()方法 - - ```javascript scrollLeft(); $(selector).scrollLeft(100); @@ -298,11 +290,9 @@ event.keyCode 键盘按键代码 上方代码中,我们通过event参数,获取了点击事件的各种event里的属性。 - 单击网页后,打印结果为: -20180205_2338.png - +![](http://img.smyhvae.com/20180205_2338.png) **举例**:键盘上对的按键按下时,变色 @@ -444,7 +434,6 @@ event.keyCode 键盘按键代码 ``` - ## jQuery 的两大特点 (1)**链式编程**:比如`.show()`和`.html()`可以连写成`.show().html()`。 @@ -459,12 +448,6 @@ event.keyCode 键盘按键代码 ``` - - - - - - (2)**隐式迭代**:隐式 对应的是 显式。隐式迭代的意思是:在方法的内部会为匹配到的所有元素进行循环遍历,执行相应的方法;而不用我们再进行循环,简化我们的操作,方便我们调用。 如果获取的是多元素的值,大部分情况下返回的是第一个元素的值。 @@ -554,11 +537,7 @@ event.keyCode 键盘按键代码 实现效果: - -20180206_1100.gif - - - +![](http://img.smyhvae.com/20180206_1100.gif) ## each的用法 @@ -634,7 +613,7 @@ event.keyCode 键盘按键代码 效果如下: -20180206_1110.png +![](http://img.smyhvae.com/20180206_1110.png) ## 多库共存 @@ -654,7 +633,8 @@ event.keyCode 键盘按键代码 效果如下: -20180206_1126.png +![](http://img.smyhvae.com/20180206_1126.png) + 上图中,代码中同时包含了两个版本的库。1.11.1版本放弃了对 `$` 的使用权,交给了1.8.2版本;但是1.11.1版本并没有放弃对 `jQuery`关键字的使用权。 @@ -667,12 +647,11 @@ event.keyCode 键盘按键代码 效果如下: -20180206_1133.png +![](http://img.smyhvae.com/20180206_1133.png) ## jQuery 的插件机制 - jQuery 库,虽然功能强大,但也不是面面俱到。jQuery 是通过插件的方式,来扩展它的功能: - 当你需要某个插件的时候,你可以“安装”到jQuery上面,然后使用。 @@ -720,10 +699,9 @@ jQuery的自定义动画方法animate(),在执行动画时,是不支持设 ``` - 效果: -20180206_1400.gif +![](http://img.smyhvae.com/20180206_1400.gif) 上方代码中,因为加入了一行插件:(注意顺序是放在jQuery插件之后) @@ -736,11 +714,10 @@ jQuery的自定义动画方法animate(),在执行动画时,是不支持设 ### 插件之懒加载 -懒加载:当打开一个网页时,只有我看到某个部分,再加载那个部分;而不是一下子全部加载完毕。这样可以优化打开的速度。 +懒加载:当打开一个网页时,只有当我看到某个部分,再加载那个部分;而不是一下子全部加载完毕。这样可以优化打开的速度。 比如说,我可以设置一张图片为懒加载,于是,这张图片会等我宠幸到它的时候,它再打开。 - 代码举例: ```html diff --git a/08-HTML5/03-CSS3选择器详解.md b/08-HTML5/03-CSS3选择器详解.md new file mode 100644 index 0000000..d03ad19 --- /dev/null +++ b/08-HTML5/03-CSS3选择器详解.md @@ -0,0 +1,500 @@ + + +> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8426799.html),并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我,一起入门和进阶前端。 + +> 以下是正文。 + +## CSS3介绍 + +CSS3在CSS2基础上,**增强**或**新增**了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷。 + +### CSS3的现状 + +- 浏览器支持程度不够好,有些需要添加**私有前缀** + +- 移动端支持优于PC端 + +- 不断改进中 + +- 应用相对广泛 + +### 应对的策略:渐进增强 + +- (1)坚持**渐进增强**的原则:**让低版本浏览器能正常访问页面,高版本的浏览器用户体验更好**。【重要】 + +比如说,同样是一个头像,可能在低版本的浏览器中,头像方的;在高版本的浏览器中,头像是圆的。 + +- (2)考虑用户群体。 + +- (3)遵照产品的方案。 + +参考链接: + +- [渐进增强 VS 优雅降级 | 简书](https://www.jianshu.com/p/d313f1108862) + +- [渐进增强和优雅降级之间的不同(面试题目)](https://www.cnblogs.com/iceflorence/archive/2017/03/27/6625466.html) + +### 浏览器的版本问题 + +由于CSS3普遍存在兼容性问题,为了避免因兼容性带来的干扰,浏览器的建议版本为: + +- Chrome浏览器 version 46+ + +- Firefox浏览器 firefox 42+ + +### 如何使用手册 + +CSS参考手册的网址: + +CSS参考手册的下载链接: + +在查看[CSS参考手册](http://download.csdn.net/download/smyhvae/10243974)时,需要注意以下符号: + +![](http://img.smyhvae.com/20180206_2150.png) + +比如说,`{1,4}`表示可以设置一至四个参数。 + +下面讲CSS3的基础知识。本文讲一下 CSS3 选择器的内容。 + +## CSS3 选择器 + +我们之前学过 CSS 的选择器,比如: + +``` + div{} 标签选择器 + + .box 类名选择器 + + #box id选择器 + + div p 后代选择器 + + div.box 交集选择器 + + div,p,span 并集选择器 + + div>p 子代 + + * : 通配符 + + div+p: 选中div后面相邻的第一个p + + div~p: 选中的div后面所有的p + +``` + +CSS3新增了许多**灵活**查找元素的方法,极大的提高了查找元素的效率和**精准度**。CSS3选择器与 jQuery 中所提供的**绝大部分**选择器兼容。 + +### 属性选择器 + +属性选择器的标志性符号是 `[]`。 + +匹配含义: + +``` +^:开头 $:结尾 *:包含 +``` + +格式: + +- `E[title]` 选中页面的E元素,并且E存在 title 属性即可。 + +- `E[title="abc"]`选中页面的E元素,并且E需要带有title属性,且属性值**完全等于**abc。 + +- `E[attr~=val]` 选择具有 att 属性且属性值为:用空格分隔的字词列表,其中一个等于 val 的E元素。 + +- `E[attr|=val]` 表示要么是一个单独的属性值,要么这个属性值是以“-”分隔的。 + +- `E[title^="abc"]` 选中页面的E元素,并且E需要带有 title 属性,属性值以 abc 开头。 + +- `E[title$="abc"]` 选中页面的E元素,并且E需要带有 title 属性,属性值以 abc 结尾。 + +- `E[title*="abc"]` 选中页面的E元素,并且E需要带有 title 属性,属性值任意位置包含abc。 + +比如说,我们用属性选择器去匹配标签的className,是非常方便的。 + +这里我们用class属性来举例。代码举例: + +```html + + + + + 选择器 - 属性 + + + +
+
CSS3-属性选择器
+
+
简介
+
+
+ +
    +
  • + 姓名: +
  • +
  • + 密码: +
  • + +
  • + 性别: 男 + 女 +
  • +
  • + 兴趣: 写代码 +
  • +
  • + +
  • +
+
+
+
+
+
E[attr]
+
+ 下载 + 下载 + 下载 +
+
+
+
E[attr~=attr]
+
+ 下载 + 下载 + 下载 +
+
+
+
E[attr|=attr]
+
+ 下载 + 下载 + 下载 +
+
+
+
E[attr*=val]
+
+ 下载 + 下载 + 下载 +
+
+
+
E[attr^=val]
+
+ 下载 + 下载 + 下载 +
+
+
+
E[attr$=val]
+
+ 下载 + 下载 + 下载 +
+
+
+ + +``` + +最后来张表格: + +![](http://img.smyhvae.com/20180207_1500.png) + +### 结构伪类选择器 + +伪类选择器的标志性符号是 `:`。 + +CSS中有一些伪类选择器,比如`:link`、`:active`、`:visited`、`:hover`,这些是动态伪类选择器。 + +CSS3又新增了其它的伪类选择器。这一小段,我们来学习CSS3中的**结构伪类选择器**:即通过**结构**来进行筛选。 + + +**1、格式:(第一部分)** + +- `E:first-child` 匹配父元素的第一个子元素E。 + +- `E:last-child` 匹配父元素的最后一个子元素E。 + +- `E:nth-child(n)` 匹配父元素的第n个子元素E。**注意**,盒子的编号是从`1`开始算起,不是从`0`开始算起。 + +- `E:nth-child(odd)` 匹配奇数 + +- `E:nth-child(even)` 匹配偶数 + +- `E:nth-last-child(n)` 匹配父元素的倒数第n个子元素E。 + +理解: + +(1)这里我们要好好理解**父元素**的含义,它指的是:以 E 元素的父元素为参考。 + +(2)注意:以上选择器中所选到的元素的类型,必须是指定的类型E,如果选不中,则无效。这个要好好理解,具体可以看CSS参考手册中的`E:nth-child(n)`的示例。我们可以理解成:**先根据选择器找到选中的全部位置,如果发现某个位置不是类型E,则该位置失效**。 + +(3)另外,`E:nth-child(n)`这个属性也很有意思。比如,针对下面这样一组标签: + +```html + +``` + +上方代码中: + +- 如果选择器写成`li:nth-child(2)`,则表示第2个 `li`。 + +- 如果选择器写成`li:nth-child(n)`,则表示**所有的**`li`。因为此时的 `n` 表示 0,1,2,3,4,5,6,7,8.....(当n小于1时无效,因为n = 0 也是不会选中的) + +- 如果选择器写成`li:nth-child(2n)`,则表示所有的**第偶数个** li。 + +- 如果选择器写成`li:nth-child(2n+1)`,则表示所有的**第奇数个** li。 + +- 如果选择器写成`li:nth-child(-n+5)`,则表示**前5个** li。 + +- 如果选择器写成`li:nth-last-child(-n+5)`,则表示**最后5个** li。 + +- 如果选择器写成`li:nth-child(7n)`,则表示选中7的倍数。。 + +上面列举的选择器中,我们只要记住: `n` 表示 0,1,2,3,4,5,6,7,8.....就很容易明白了。 + +**2、格式:(第二部分)** + +- `E:first-of-type` 匹配同类型中的第一个同级兄弟元素E。 + +- `E:last-of-type` 匹配同类型中的最后一个同级兄弟元素E。 + +- `E:nth-of-type(n)` 匹配同类型中的第n个同级兄弟元素E。 + +- `E:nth-last-of-type(n)` 匹配同类型中的倒数第n个同级兄弟元素E。 + +既然上面这几个选择器带有`type`,我们可以这样理解:先在同级里找到所有的E类型,然后根据 n 进行匹配。 + + +**3、格式:(第三部分)** + +- `E:empty` 匹配没有任何子节点(包括空格等text节点)的元素E。 + +- `E:target` 匹配相关URL指向的E元素。要配合锚点使用。 + + +**举例:** + +我们可以把多个伪类选择器结合起来使用,比如: + +![](http://img.smyhvae.com/20180207_1340.png) + + +如果想把上图中,第一行的前三个 span 标红,我们可以这样使用结构伪类选择器: + +```css + dt:first-child span:nth-of-type(-n+3) { + color: red; + } +``` + +最后来张表格: + +![](http://img.smyhvae.com/20180207_1502.png) + +### 伪元素选择器 + +伪元素选择器的标志性符号是 `::`。 + +**1、格式:(第一部分)** + +- `E::before` 设置在 元素E 前面(依据对象树的逻辑结构)的内容,配合content属性一起使用。 + +- `E::after` 设置在 元素E 后面(依据对象树的逻辑结构)的内容,配合content属性一起使用。 + +`E:after`、`E:before `在旧版本里是伪类,在 CSS3 这个新版本里是伪元素。新版本里,`E:after`、`E:before`会被自动识别为`E::after`、`E::before`,按伪元素来对待,这样做的目的是用来做兼容处理。 + +举例: + +```html + + + + + + + + + +生命壹号 + + + +``` + +效果如下: + +![](http://img.smyhvae.com/20180207_1409.png) + +**上图可以看出**: + +- 通过伪元素选择器,就可以添加出类似于span标签的效果(记得要结合 content 属性使用)。 + +- 通过这两个属性添加的伪元素,是**行内元素**,需要转换成块元素才能设置宽高。 + +**2、格式:(第二部分)** + +- `E::first-letter` 设置元素 E 里面的**第一个字符**的样式。 + +- `E::first-line` 设置元素 E 里面的**第一行**的样式。 + +- `E::selection` 设置元素 E 里面被鼠标选中的区域的样式(一般设置颜色和背景色)。 + +`E::first-letter` 的举例: + +![](http://img.smyhvae.com/20180207_1430.png) + +`E::first-line`的举例: + +![](http://img.smyhvae.com/20180207_1433.png) + +最后来张表格: + +![](http://img.smyhvae.com/20180207_1503.png) + + +## 我的公众号 + +想学习**代码之外的软技能**?不妨关注我的微信公众号:**生命团队**(id:`vitateam`)。 + +扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外: + +![](http://img.smyhvae.com/2016040102.jpg) + diff --git a/08-HTML5/04-CSS3的基础知识.md b/08-HTML5/04-CSS3的基础知识.md new file mode 100644 index 0000000..4085f6e --- /dev/null +++ b/08-HTML5/04-CSS3的基础知识.md @@ -0,0 +1,73 @@ + + + + + + + +```html + +``` + + + + +```html + +``` + + + + + + +```html + +``` + + + + + + +```html + +``` + + + + + + +```html + +``` + + + + + + +```html + +``` + + + + + + +```html + +``` + + + + + + +```html + +``` + +