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

add file:css

Browse Source
This commit is contained in:
qianguyihao
2018-02-07 15:20:51 +08:00
parent 80322acc8c
commit b23cf99b46
6 changed files with 600 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
07-jQuery/01-jQuery的介绍和选择器.md
View File

@@ -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)
工程文件：

2
07-jQuery/02-jQuery动画详解.md
View File

@@ -589,7 +589,7 @@ PS：参数如果都不写，默认两个都是false。实际工作中，直接
效果如下：
20180205_2000.gif
![](http://img.smyhvae.com/20180205_2000.gif)
## 我的公众号

32
07-jQuery/03-jQuery操作DOM.md
View File

@@ -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('<div></div>'); //参数是 htmlString
效果：
20180205_2020.gif
![](http://img.smyhvae.com/20180205_2020.gif)
**其他的添加元素的方法：**
@@ -569,7 +569,8 @@ $(selector).append('<div></div>'); //参数是 htmlString
效果：
20180205_2040.gif
![](http://img.smyhvae.com/20180205_2040.gif)
### 案例：动态添加表格项
@@ -686,7 +687,7 @@ $(selector).append('<div></div>'); //参数是 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
<!DOCTYPE html>
<html>
@@ -1021,7 +1016,6 @@ prop方法通常用来影响DOM元素的动态状态，而不是改变的HTML属
打印结果：
20180205_2139.png
![](http://img.smyhvae.com/20180205_2139.png)

39
07-jQuery/04-jQuery的事件机制和其他知识.md
View File

@@ -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()，在执行动画时，是不支持设
</html>
```
效果：
20180206_1400.gif
![](http://img.smyhvae.com/20180206_1400.gif)
上方代码中，因为加入了一行插件：（注意顺序是放在jQuery插件之后）
@@ -736,11 +714,10 @@ jQuery的自定义动画方法animate()，在执行动画时，是不支持设
### 插件之懒加载
懒加载：当打开一个网页时，只有我看到某个部分，再加载那个部分；而不是一下子全部加载完毕。这样可以优化打开的速度。
懒加载：当打开一个网页时，只有当我看到某个部分，再加载那个部分；而不是一下子全部加载完毕。这样可以优化打开的速度。
比如说，我可以设置一张图片为懒加载，于是，这张图片会等我宠幸到它的时候，它再打开。
代码举例：
```html