add file:css
This commit is contained in:
@@ -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
|
||||
|
||||

|
||||
|
||||
**举例**:键盘上对的按键按下时,变色
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
|
||||

|
||||
|
||||
## each的用法
|
||||
|
||||
@@ -634,7 +613,7 @@ event.keyCode 键盘按键代码
|
||||
|
||||
效果如下:
|
||||
|
||||
20180206_1110.png
|
||||

|
||||
|
||||
## 多库共存
|
||||
|
||||
@@ -654,7 +633,8 @@ event.keyCode 键盘按键代码
|
||||
|
||||
效果如下:
|
||||
|
||||
20180206_1126.png
|
||||

|
||||
|
||||
|
||||
上图中,代码中同时包含了两个版本的库。1.11.1版本放弃了对 `$` 的使用权,交给了1.8.2版本;但是1.11.1版本并没有放弃对 `jQuery`关键字的使用权。
|
||||
|
||||
@@ -667,12 +647,11 @@ event.keyCode 键盘按键代码
|
||||
|
||||
效果如下:
|
||||
|
||||
20180206_1133.png
|
||||

|
||||
|
||||
|
||||
## jQuery 的插件机制
|
||||
|
||||
|
||||
jQuery 库,虽然功能强大,但也不是面面俱到。jQuery 是通过插件的方式,来扩展它的功能:
|
||||
|
||||
- 当你需要某个插件的时候,你可以“安装”到jQuery上面,然后使用。
|
||||
@@ -720,10 +699,9 @@ jQuery的自定义动画方法animate(),在执行动画时,是不支持设
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
效果:
|
||||
|
||||
20180206_1400.gif
|
||||

|
||||
|
||||
上方代码中,因为加入了一行插件:(注意顺序是放在jQuery插件之后)
|
||||
|
||||
@@ -736,11 +714,10 @@ jQuery的自定义动画方法animate(),在执行动画时,是不支持设
|
||||
|
||||
### 插件之懒加载
|
||||
|
||||
懒加载:当打开一个网页时,只有我看到某个部分,再加载那个部分;而不是一下子全部加载完毕。这样可以优化打开的速度。
|
||||
懒加载:当打开一个网页时,只有当我看到某个部分,再加载那个部分;而不是一下子全部加载完毕。这样可以优化打开的速度。
|
||||
|
||||
比如说,我可以设置一张图片为懒加载,于是,这张图片会等我宠幸到它的时候,它再打开。
|
||||
|
||||
|
||||
代码举例:
|
||||
|
||||
```html
|
||||
|
||||
Reference in New Issue
Block a user