refactor: 目录结构调整
This commit is contained in:
qianguyihao
1172
04-JavaScript基础/51-jQuery的介绍和选择器.md
Normal file
1172
04-JavaScript基础/51-jQuery的介绍和选择器.md
Normal file
File diff suppressed because it is too large
Load Diff
602
04-JavaScript基础/52-jQuery动画详解.md
Normal file
602
04-JavaScript基础/52-jQuery动画详解.md
Normal file
@@ -0,0 +1,602 @@
|
||||
|
||||
|
||||
> 本文最初发表于[博客园]()，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
|
||||
|
||||
> 以下是正文。
|
||||
|
||||
## 前言
|
||||
|
||||
jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。
|
||||
|
||||
## 显示动画
|
||||
|
||||
方式一：
|
||||
|
||||
```javascript
|
||||
$("div").show();
|
||||
```
|
||||
|
||||
解释：无参数，表示让指定的元素直接显示出来。其实这个方法的底层就是通过`display: block;`实现的。
|
||||
|
||||
方式二：
|
||||
|
||||
```javascript
|
||||
$("div").show(2000);
|
||||
```
|
||||
|
||||
解释：通过控制元素的宽高、透明度、display属性，逐渐显示，2秒后显示完毕。
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
方式三：
|
||||
|
||||
```javascript
|
||||
$("div").show("slow");
|
||||
```
|
||||
|
||||
参数可以是：
|
||||
|
||||
- slow 慢：600ms
|
||||
|
||||
- normal 正常：400ms
|
||||
|
||||
- fast 快：200ms
|
||||
|
||||
解释：和方式二类似，也是通过控制元素的宽高、透明度、display属性，逐渐显示。
|
||||
|
||||
方式四：
|
||||
|
||||
```javascript
|
||||
//show(毫秒值，回调函数;
|
||||
$("div").show(5000,function () {
|
||||
alert("动画执行完毕！");
|
||||
});
|
||||
```
|
||||
|
||||
解释：动画执行完后，立即执行回调函数。
|
||||
|
||||
**总结：**
|
||||
|
||||
上面的四种方式几乎一致：参数可以有两个，第一个是动画的执行时长，第二个是动画结束后执行的回调函数。
|
||||
|
||||
## 隐藏动画
|
||||
|
||||
方式参照上面的show()方法的方式。如下：
|
||||
|
||||
|
||||
```javascript
|
||||
$(selector).hide();
|
||||
|
||||
$(selector).hide(1000);
|
||||
|
||||
$(selector).hide("slow");
|
||||
|
||||
$(selector).hide(1000, function(){});
|
||||
```
|
||||
|
||||
**显示和隐藏的来回切换：**
|
||||
|
||||
显示和隐藏的来回切换采用的是toggle()方法：就是先执行show()，再执行hide()。
|
||||
|
||||
同样是四种方式：
|
||||
|
||||
```javascript
|
||||
$(selector).toggle();
|
||||
|
||||
```
|
||||
|
||||
## 滑入和滑出
|
||||
|
||||
**1、滑入动画效果**：（类似于生活中的卷帘门）
|
||||
|
||||
|
||||
```javascript
|
||||
$(selector).slideDown(speed, 回调函数);
|
||||
```
|
||||
|
||||
解释：下拉动画，显示元素。
|
||||
|
||||
注意：省略参数或者传入不合法的字符串，那么则使用默认值：400毫秒（同样适用于fadeIn/slideDown/slideUp）
|
||||
|
||||
|
||||
**2 滑出动画效果：**
|
||||
|
||||
```javascript
|
||||
$(selector).slideUp(speed, 回调函数);
|
||||
```
|
||||
|
||||
解释：上拉动画，隐藏元素。
|
||||
|
||||
|
||||
**3、滑入滑出切换动画效果：**
|
||||
|
||||
```javascript
|
||||
$(selector).slideToggle(speed, 回调函数);
|
||||
```
|
||||
|
||||
参数解释同show()方法。
|
||||
|
||||
举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
div {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
display: none;
|
||||
background-color: pink;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="jquery-1.11.1.js"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
//点击按钮后产生动画
|
||||
$("button:eq(0)").click(function () {
|
||||
|
||||
//滑入动画： slideDown(毫秒值，回调函数[显示完毕执行什么]);
|
||||
$("div").slideDown(2000, function () {
|
||||
alert("动画执行完毕！");
|
||||
});
|
||||
})
|
||||
|
||||
//滑出动画
|
||||
$("button:eq(1)").click(function () {
|
||||
|
||||
//滑出动画：slideUp(毫秒值，回调函数[显示完毕后执行什么]);
|
||||
$("div").slideUp(2000, function () {
|
||||
alert("动画执行完毕！");
|
||||
});
|
||||
})
|
||||
|
||||
$("button:eq(2)").click(function () {
|
||||
//滑入滑出切换（同样有四种用法）
|
||||
$("div").slideToggle(1000);
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<button>滑入</button>
|
||||
<button>滑出</button>
|
||||
<button>切换</button>
|
||||
<div></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 淡入淡出动画
|
||||
|
||||
1、淡入动画效果：
|
||||
|
||||
```javascript
|
||||
$(selector).fadeIn(speed, callback);
|
||||
```
|
||||
|
||||
作用：让元素以淡淡的进入视线的方式展示出来。
|
||||
|
||||
2、淡出动画效果：
|
||||
|
||||
```javascript
|
||||
$(selector).fadeOut(1000);
|
||||
```
|
||||
|
||||
作用：让元素以渐渐消失的方式隐藏起来
|
||||
|
||||
3、淡入淡出切换动画效果：
|
||||
|
||||
|
||||
```javascript
|
||||
$(selector).fadeToggle('fast', callback);
|
||||
```
|
||||
|
||||
作用：通过改变透明度，切换匹配元素的显示或隐藏状态。
|
||||
|
||||
参数的含义同show()方法。
|
||||
|
||||
代码举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
div {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
display: none;
|
||||
/*opacity: 1;*/
|
||||
background-color: pink;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="jquery-1.11.1.js"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
//点击按钮后产生动画
|
||||
$("button:eq(0)").click(function () {
|
||||
// //淡入动画用法1: fadeIn(); 不加参数
|
||||
$("div").fadeIn();
|
||||
|
||||
// //淡入动画用法2: fadeIn(2000); 毫秒值
|
||||
// $("div").fadeIn(2000);
|
||||
// //通过控制 透明度和display
|
||||
|
||||
//淡入动画用法3: fadeIn(字符串); slow慢：600ms normal正常:400ms fast快：200ms
|
||||
// $("div").fadeIn("slow");
|
||||
// $("div").fadeIn("fast");
|
||||
// $("div").fadeIn("normal");
|
||||
|
||||
//淡入动画用法4: fadeIn(毫秒值，回调函数[显示完毕执行什么]);
|
||||
// $("div").fadeIn(5000,function () {
|
||||
// alert("动画执行完毕！");
|
||||
// });
|
||||
})
|
||||
|
||||
//滑出动画
|
||||
$("button:eq(1)").click(function () {
|
||||
// //滑出动画用法1: fadeOut(); 不加参数
|
||||
// $("div").fadeOut();
|
||||
|
||||
// //滑出动画用法2: fadeOut(2000); 毫秒值
|
||||
// $("div").fadeOut(2000); //通过这个方法实现的：display: none;
|
||||
// //通过控制 透明度和display
|
||||
|
||||
//滑出动画用法3: fadeOut(字符串); slow慢：600ms normal正常:400ms fast快：200ms
|
||||
// $("div").fadeOut("slow");
|
||||
// $("div").fadeOut("fast");
|
||||
// $("div").fadeOut("normal");
|
||||
|
||||
//滑出动画用法1: fadeOut(毫秒值，回调函数[显示完毕执行什么]);
|
||||
// $("div").fadeOut(2000,function () {
|
||||
// alert("动画执行完毕！");
|
||||
// });
|
||||
})
|
||||
|
||||
$("button:eq(2)").click(function () {
|
||||
//滑入滑出切换
|
||||
//同样有四种用法
|
||||
$("div").fadeToggle(1000);
|
||||
})
|
||||
|
||||
$("button:eq(3)").click(function () {
|
||||
//改透明度
|
||||
//同样有四种用法
|
||||
$("div").fadeTo(1000, 0.5, function () {
|
||||
alert(1);
|
||||
});
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<button>淡入</button>
|
||||
<button>淡出</button>
|
||||
<button>切换</button>
|
||||
<button>改透明度为0.5</button>
|
||||
<div></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## 自定义动画
|
||||
|
||||
```javascript
|
||||
$(selector).animate({params}, speed, callback);
|
||||
```
|
||||
|
||||
作用：执行一组CSS属性的自定义动画。
|
||||
|
||||
- 第一个参数表示：要执行动画的CSS属性（必选）
|
||||
|
||||
- 第二个参数表示：执行动画时长（可选）
|
||||
|
||||
- 第三个参数表示：动画执行完后，立即执行的回调函数（可选）
|
||||
|
||||
代码举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 30px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: pink;
|
||||
}
|
||||
</style>
|
||||
<script src="jquery-1.11.1.js"></script>
|
||||
<script>
|
||||
jQuery(function () {
|
||||
$("button").click(function () {
|
||||
var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
|
||||
var json2 = {
|
||||
"width": 100,
|
||||
"height": 100,
|
||||
"left": 100,
|
||||
"top": 100,
|
||||
"border-radius": 100,
|
||||
"background-color": "red"
|
||||
};
|
||||
|
||||
//自定义动画
|
||||
$("div").animate(json, 1000, function () {
|
||||
$("div").animate(json2, 1000, function () {
|
||||
alert("动画执行完毕！");
|
||||
});
|
||||
});
|
||||
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<button>自定义动画</button>
|
||||
<div></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## 停止动画
|
||||
|
||||
```javascript
|
||||
$(selector).stop(true, false);
|
||||
```
|
||||
|
||||
**里面的两个参数，有不同的含义。**
|
||||
|
||||
第一个参数：
|
||||
|
||||
- true：后续动画不执行。
|
||||
|
||||
- false：后续动画会执行。
|
||||
|
||||
第二个参数：
|
||||
|
||||
- true：立即执行完成当前动画。
|
||||
|
||||
- false：立即停止当前动画。
|
||||
|
||||
PS：参数如果都不写，默认两个都是false。实际工作中，直接写stop()用的多。
|
||||
|
||||
**效果演示：**
|
||||
|
||||
当第二个参数为true时，效果如下：
|
||||
|
||||
|
||||
|
||||
当第二个参数为false时，效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
这个**后续动画**我们要好好理解，来看个例子。
|
||||
|
||||
**案例：鼠标悬停时，弹出下拉菜单（下拉时带动画）**
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style type="text/css">
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
width: 330px;
|
||||
height: 30px;
|
||||
margin: 100px auto 0;
|
||||
padding-left: 10px;
|
||||
background-color: pink;
|
||||
}
|
||||
|
||||
.wrap li {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.wrap > ul > li {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wrap a {
|
||||
display: block;
|
||||
height: 30px;
|
||||
width: 100px;
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wrap li ul {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<script src="jquery-1.11.1.js"></script>
|
||||
<script>
|
||||
//入口函数
|
||||
$(document).ready(function () {
|
||||
//需求：鼠标放入一级li中，让他里面的ul显示。移开隐藏。
|
||||
var jqli = $(".wrap>ul>li");
|
||||
|
||||
//绑定事件
|
||||
jqli.mouseenter(function () {
|
||||
$(this).children("ul").stop().slideDown(1000);
|
||||
});
|
||||
|
||||
//绑定事件(移开隐藏)
|
||||
jqli.mouseleave(function () {
|
||||
$(this).children("ul").stop().slideUp(1000);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrap">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="javascript:void(0);">一级菜单1</a>
|
||||
<ul>
|
||||
<li><a href="javascript:void(0);">二级菜单1</a></li>
|
||||
<li><a href="javascript:void(0);">二级菜单2</a></li>
|
||||
<li><a href="javascript:void(0);">二级菜单3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0);">一级菜单1</a>
|
||||
<ul>
|
||||
<li><a href="javascript:void(0);">二级菜单1</a></li>
|
||||
<li><a href="javascript:void(0);">二级菜单2</a></li>
|
||||
<li><a href="javascript:void(0);">二级菜单3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0);">一级菜单1</a>
|
||||
<ul>
|
||||
<li><a href="javascript:void(0);">二级菜单1</a></li>
|
||||
<li><a href="javascript:void(0);">二级菜单2</a></li>
|
||||
<li><a href="javascript:void(0);">二级菜单3</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
上方代码中，关键的地方在于，用了stop函数，再执行动画前，先停掉之前的动画。
|
||||
|
||||
如果去掉stop()函数，效果如下：（不是我们期望的效果）
|
||||
|
||||
|
||||
|
||||
### stop方法的总结
|
||||
|
||||
当调用stop()方法后，队列里面的下一个动画将会立即开始。
|
||||
但是，如果参数clearQueue被设置为true，那么队列面剩余的动画就被删除了，并且永远也不会执行。
|
||||
|
||||
如果参数jumpToEnd被设置为true，那么当前动画会停止，但是参与动画的每一个CSS属性将被立即设置为它们的目标值。比如：slideUp()方法，那么元素会立即隐藏掉。如果存在回调函数，那么回调函数也会立即执行。
|
||||
|
||||
注意：如果元素动画还没有执行完，此时调用stop()方法，那么动画将会停止。并且动画没有执行完成，那么回调函数也不会被执行。
|
||||
|
||||
|
||||
## 举例：右下角的弹出广告
|
||||
|
||||
代码实现：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style type="text/css">
|
||||
.ad {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 230px;
|
||||
height: 120px;
|
||||
background-image: url(images/ad.jpg);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ad span {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 40px;
|
||||
height: 18px;
|
||||
background-image: url(images/h.jpg);
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<script src="jquery-1.11.1.js"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
//需求：然广告ad部分，先滑入，在滑出，在淡入。然后绑定事件，点击span弹出
|
||||
//步骤：
|
||||
$(".ad").slideDown(1000).slideUp(1000).fadeIn(1000).children("span").click(function () {
|
||||
$(this).parent().fadeOut(1000);
|
||||
});
|
||||
|
||||
|
||||
//第二种写法
|
||||
// $(".ad").slideDown(1000, function () {
|
||||
// $(".ad").slideUp(1000, function () {
|
||||
// $(".ad").fadeIn(1000, function () {
|
||||
// $(".ad").children("span").click(function () {
|
||||
// $(this).parent().fadeOut(1000, function () {
|
||||
// alert("执行完毕！");
|
||||
// });
|
||||
// });
|
||||
// });
|
||||
// });
|
||||
// })
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="ani">我是内容</div>
|
||||
<div class="ad">
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
1021
04-JavaScript基础/53-jQuery操作DOM.md
Normal file
1021
04-JavaScript基础/53-jQuery操作DOM.md
Normal file
File diff suppressed because it is too large
Load Diff
754
04-JavaScript基础/54-jQuery的事件机制和其他知识.md
Normal file
754
04-JavaScript基础/54-jQuery的事件机制和其他知识.md
Normal file
@@ -0,0 +1,754 @@
|
||||
|
||||
|
||||
## jQuery 设置宽度和高度
|
||||
|
||||
宽度操作：
|
||||
|
||||
```javascript
|
||||
$(selector).height(); //不带参数表示获取高度
|
||||
$(selector).height(200); //带参数表示设置高度
|
||||
```
|
||||
|
||||
|
||||
宽度操作：
|
||||
|
||||
|
||||
```javascript
|
||||
$(selector).width(); //不带参数表示获取宽度
|
||||
$(selector).width(200); //带参数表示设置高宽度
|
||||
```
|
||||
|
||||
**问题**：jQuery的css()获取高度，和jQuery的height获取高度，二者的区别？
|
||||
|
||||
答案：
|
||||
|
||||
|
||||
```javascript
|
||||
$("div").css(); //返回的是string类型，例如：30px
|
||||
|
||||
$("div").height(); //返回得失number类型，例如：30。常用于数学计算。
|
||||
```
|
||||
|
||||
如上方代码所示，`$("div").height();`返回的是number类型，常用于数学计算。
|
||||
|
||||
|
||||
## jQuery 的坐标操作
|
||||
|
||||
### offset()方法
|
||||
|
||||
|
||||
```javascript
|
||||
$(selector).offset();
|
||||
$(selector).offset({left:100, top: 150});
|
||||
```
|
||||
|
||||
作用：获取或设置元素相对于 document 文档的位置。参数解释：
|
||||
|
||||
- 无参数：表示获取。返回值为：{left:num, top:num}。返回值是相对于document的位置。
|
||||
|
||||
- 有参数：表示设置。参数建议使用 number 数值类型。
|
||||
|
||||
注意：设置offset后，如果元素没有定位(默认值：static)，则被修改为relative。
|
||||
|
||||
### position()方法
|
||||
|
||||
```javascript
|
||||
$(selector).position();
|
||||
```
|
||||
|
||||
作用：获取相对于其最近的**带有定位**的父元素的位置。返回值为对象：`{left:num, top:num}`。
|
||||
|
||||
注意：只能获取，不能设置。
|
||||
|
||||
### scrollTop()方法
|
||||
|
||||
```javascript
|
||||
scrollTop();
|
||||
$(selector).scrollTop(100);
|
||||
```
|
||||
|
||||
作用：获取或者设置元素被卷去的头部的距离。参数解释：
|
||||
|
||||
- 无参数：表示获取偏移。
|
||||
|
||||
- 有参数：表示设置偏移，参数为数值类型。
|
||||
|
||||
|
||||
### scrollLeft()方法
|
||||
|
||||
```javascript
|
||||
scrollLeft();
|
||||
$(selector).scrollLeft(100);
|
||||
```
|
||||
|
||||
作用：获取或者设置元素水平方向滚动的位置。参数解释：
|
||||
|
||||
- 无参数：表示获取偏移。
|
||||
|
||||
- 有参数：表示设置偏移，参数为数值类型。
|
||||
|
||||
代码示范：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
body {
|
||||
height: 5000px;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
position: relative;
|
||||
margin: 10px;
|
||||
overflow: auto;
|
||||
background-color: pink;
|
||||
}
|
||||
|
||||
.box2 {
|
||||
width: 200px;
|
||||
height: 400px;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
background-color: yellow;
|
||||
}
|
||||
</style>
|
||||
<script src="jquery-1.11.1.js"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
//距离页面最顶端或者最左侧的距离和有没有定位没有关系
|
||||
$("button").eq(0).click(function () {
|
||||
alert($(".box2").offset().top);
|
||||
})
|
||||
|
||||
//距离页面最顶端或者最左侧的距离和有没有定位没有关系
|
||||
$("button").eq(1).click(function () {
|
||||
$(".box2").offset({"left": 1000, "top": 1000});
|
||||
})
|
||||
|
||||
//距离父系盒子中带有定位的盒子的距离(获取的就是定位值，和margin/padding无关)
|
||||
$("button").eq(2).click(function () {
|
||||
alert($(".box2").position().top);
|
||||
})
|
||||
|
||||
//距离父系盒子中带有定位的盒子的距离(获取的就是定位值，和margin/padding无关)
|
||||
$("button").eq(3).click(function () {
|
||||
$(".box2").position().top = "100px";
|
||||
})
|
||||
|
||||
//获取被选取的头部
|
||||
$("button").eq(4).click(function () {
|
||||
alert($(window).scrollTop());
|
||||
})
|
||||
|
||||
//获取被选取的头部
|
||||
$("button").eq(5).click(function () {
|
||||
$(window).scrollTop(100);
|
||||
})
|
||||
|
||||
})
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div class="box1">
|
||||
<div class="box2"></div>
|
||||
</div>
|
||||
|
||||
<button>offset().top获取</button>
|
||||
<button>offset().top设置</button>
|
||||
<button>position().top获取</button>
|
||||
<button>position().top设置</button>
|
||||
<button>scrollTop()</button>
|
||||
<button>scrollTop()</button>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## jQuery的事件机制
|
||||
|
||||
### 常见的事件绑定
|
||||
|
||||
- click(handler) 单击事件。
|
||||
|
||||
- blur(handler) 失去焦点事件。
|
||||
|
||||
- mouseenter(handler) 鼠标进入事件。
|
||||
|
||||
- mouseleave(handler) 鼠标离开事件。
|
||||
|
||||
- dbclick(handler) 双击事件。
|
||||
|
||||
- change(handler) 改变事件，如：文本框值改变，下拉列表值改变等。
|
||||
|
||||
- focus(handler) 获得焦点事件。
|
||||
|
||||
- keydown(handler) 键盘按下事件。
|
||||
|
||||
参考链接：<http://www.w3school.com.cn/jquery/jquery_ref_events.asp>
|
||||
|
||||
### on方式绑定事件
|
||||
|
||||
最早采用的是 bind、delegate等方式绑定的。jQuery 1.7版本后，jQuery用on统一了所有的事件处理的方法，此方法兼容zepto(移动端类似于jQuery的一个库)。
|
||||
|
||||
格式举例：
|
||||
|
||||
|
||||
```javascript
|
||||
$(document).on("click mouseenter", ".box", {"name": 111}, function (event) {
|
||||
console.log(event.data); //event.data获取的就是第三个参数这个json。
|
||||
console.log(event.data.name); //event.data.name获取的是name的值。
|
||||
});
|
||||
```
|
||||
|
||||
参数解释：
|
||||
|
||||
- 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）。上方代码绑定的是单击事件和鼠标进入事件。
|
||||
|
||||
- 第二个参数：selector, 执行事件的后代元素。
|
||||
|
||||
- 第三个参数：data，传递给事件处理函数的数据，事件触发的时候通过event.data来使用（也就是说，可以通过event拿到data）
|
||||
|
||||
- 第四个参数：handler，事件处理函数。
|
||||
|
||||
|
||||
简单点的写法：
|
||||
|
||||
```javascript
|
||||
$(document).on("click",".box", function () {
|
||||
alert(1);
|
||||
});
|
||||
```
|
||||
|
||||
### off方式解绑事件
|
||||
|
||||
```javascript
|
||||
$(selector).off(); // 解绑匹配元素的所有事件
|
||||
|
||||
$(selector).off("click"); // 解绑匹配元素的所有click事件
|
||||
|
||||
$(selector).off( "click", "**" ); // 解绑所有代理的click事件，元素本身的事件不会被解绑
|
||||
```
|
||||
|
||||
## jQuery的事件对象
|
||||
|
||||
event.data 传递给事件处理程序的额外数据
|
||||
|
||||
event.currentTarget 等同于this，当前DOM对象
|
||||
|
||||
event.pageX 鼠标相对于文档左部边缘的位置
|
||||
|
||||
event.target 触发事件源，不一定===this
|
||||
|
||||
event.stopPropagation()； 阻止事件冒泡
|
||||
|
||||
event.preventDefault(); 阻止默认行为
|
||||
|
||||
event.type 事件类型：click，dbclick…
|
||||
|
||||
event.which 鼠标的按键类型：左1 中2 右3
|
||||
|
||||
event.keyCode 键盘按键代码
|
||||
|
||||
|
||||
代码演示：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<script src="jquery-1.11.1.js"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
$(document).on("click", {}, function (event) {
|
||||
console.log(event.data);
|
||||
console.log(event.currentTarget);
|
||||
console.log(event.target);
|
||||
console.log(event.pageX);
|
||||
console.log(event.type);
|
||||
console.log(event.which);
|
||||
console.log(event.keyCode);
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
上方代码中，我们通过event参数，获取了点击事件的各种event里的属性。
|
||||
|
||||
单击网页后，打印结果为：
|
||||
|
||||
|
||||
|
||||
**举例**：键盘上对的按键按下时，变色
|
||||
|
||||
这个时候就要用到event参数，因为要获取event.keyCode，才能知道按下的是键盘上的哪个按键。
|
||||
|
||||
代码实现：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
.wrap {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
margin: 100px auto 0;
|
||||
}
|
||||
|
||||
.wrap h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wrap div {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
background: pink;
|
||||
font-size: 30px;
|
||||
text-align: center;
|
||||
line-height: 300px;
|
||||
}
|
||||
</style>
|
||||
<script src="jquery-1.11.1.js"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
//需求：在页面上，按键.是哪个颜色的首写字母div就改变为该颜色，然后span内容赋值。
|
||||
//步骤：
|
||||
//1.给document绑定keyup事件
|
||||
//2.获取值，根据此值，给div和span上色和内容
|
||||
|
||||
var div = $("#bgChange");
|
||||
var span = $("#keyCodeSpan");
|
||||
|
||||
//绑定事件
|
||||
$(document).keyup(function (e) { //键盘弹出时，触发事件
|
||||
//调用方法
|
||||
setColor(e.keyCode);
|
||||
});
|
||||
|
||||
|
||||
function setColor(keyCode) {
|
||||
//alert(e.keyCode);
|
||||
//2.获取值，根据此值，给div和span上色和内容
|
||||
switch (keyCode) {
|
||||
case 80:
|
||||
//修改内容pink
|
||||
setEle("pink", keyCode);
|
||||
break;
|
||||
case 66:
|
||||
//修改内容blue
|
||||
setEle("blue", keyCode);
|
||||
break;
|
||||
case 79:
|
||||
//修改内容orange
|
||||
setEle("orange", keyCode);
|
||||
break;
|
||||
case 82:
|
||||
//修改内容red
|
||||
setEle("red", keyCode);
|
||||
break;
|
||||
case 89:
|
||||
//修改内容yellow
|
||||
setEle("yellow", keyCode);
|
||||
break;
|
||||
default :
|
||||
alert("系统没有设置该颜色！");
|
||||
}
|
||||
|
||||
function setEle(a, b) {
|
||||
div.css("background-color", a);
|
||||
span.text(b);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//1.给document绑定keyup事件
|
||||
// $(document).keyup(function (e) {
|
||||
// //alert(e.keyCode);
|
||||
// //2.获取值，根据此值，给div和span上色和内容
|
||||
// switch (e.keyCode){
|
||||
// case 80:
|
||||
// //修改内容pink
|
||||
// div.css("background-color","pink");
|
||||
// span.text(e.keyCode);
|
||||
// break;
|
||||
// case 66:
|
||||
// //修改内容blue
|
||||
// div.css("background-color","blue");
|
||||
// span.text(e.keyCode);
|
||||
// break;
|
||||
// case 79:
|
||||
// //修改内容orange
|
||||
// div.css("background-color","orange");
|
||||
// span.text(e.keyCode);
|
||||
// break;
|
||||
// case 82:
|
||||
// //修改内容red
|
||||
// div.css("background-color","red");
|
||||
// span.text(e.keyCode);
|
||||
// break;
|
||||
// case 89:
|
||||
// //修改内容yellow
|
||||
// div.css("background-color","yellow");
|
||||
// span.text(e.keyCode);
|
||||
// break;
|
||||
// default :
|
||||
// alert("系统没有设置该颜色！");
|
||||
// }
|
||||
// });
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="wrap">
|
||||
<h1>按键改变颜色</h1>
|
||||
<div id="bgChange">
|
||||
keyCode为：
|
||||
<span id="keyCodeSpan">80</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
|
||||
## jQuery 的两大特点
|
||||
|
||||
（1）**链式编程**：比如`.show()`和`.html()`可以连写成`.show().html()`。
|
||||
|
||||
|
||||
链式编程原理：return this。
|
||||
|
||||
通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this。
|
||||
|
||||
```javascript
|
||||
end(); // 结束当前链最近的一次过滤操作，并且返回匹配元素之前的状态。
|
||||
```
|
||||
|
||||
|
||||
（2）**隐式迭代**：隐式 对应的是 显式。隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。
|
||||
|
||||
如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。
|
||||
|
||||
|
||||
**举例：**五角星评分
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>五角星评分案例</title>
|
||||
<style>
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.comment {
|
||||
font-size: 40px;
|
||||
color: #ff3100;
|
||||
}
|
||||
|
||||
.comment li {
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
</style>
|
||||
<script src="jquery-1.11.1.js"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
var star_none = '☆'; // 空心五角星
|
||||
var star_sel = '★'; // 实心五角星
|
||||
|
||||
//需求1：鼠标放悬停时，当前的li和之前所有的li内容全部变为实心五角星，移开变为空心。
|
||||
$(".comment li").on("mouseenter", function () {
|
||||
//当前五角星，和之前的所有五角星，全部是实心的，其他的为空心
|
||||
|
||||
//写法一：分两次写
|
||||
// $(this).text(star_sel).prevAll("li").text(star_sel);
|
||||
// $(this).nextAll("li").text(star_none);
|
||||
//写法二：一次性写完，但要用到end()，否则会出问题。【重要】
|
||||
$(this).text(star_sel).prevAll("li").text(star_sel).end().nextAll("li").text(star_none);
|
||||
});
|
||||
|
||||
$(".comment li").on("mouseleave", function () {
|
||||
//bug：如果没有点击过li，那么会出现无法清除的现象，处理办法就是先判断，看看是否有current类
|
||||
if ($("li.current").length === 0) {
|
||||
$(".comment li").text(star_none);
|
||||
} else {
|
||||
//当鼠标移开的时候，谁有current类名，那么当前和之前所有的li前部是实心五角星，后面的所有li都是空心
|
||||
$("li.current").text(star_sel).prevAll("li").text(star_sel).end().nextAll("li").text(star_none);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
//需求2：鼠标点击那个li，当你前li和之前所有的li都变成实心五角星，其他变为空心。
|
||||
$(".comment li").on("click", function () {
|
||||
//点击哪个li给他加一个类名。清空其他所有的li的类名
|
||||
$(this).attr("class", "current").siblings("li").removeAttr("class");
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<ul class="comment">
|
||||
<li>☆</li>
|
||||
<li>☆</li>
|
||||
<li>☆</li>
|
||||
<li>☆</li>
|
||||
<li>☆</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
|
||||
上方代码中，注意end的用法，很巧妙。
|
||||
|
||||
实现效果：
|
||||
|
||||
|
||||
|
||||
## each的用法
|
||||
|
||||
大部分情况下是不需要使用each方法的，因为jQuery的隐式迭代特性。
|
||||
|
||||
但是，如果要对每个元素做不同的处理，这时候就用到了each方法。
|
||||
|
||||
格式如下：
|
||||
|
||||
|
||||
```javascript
|
||||
$(selector).each(function(index,element){});
|
||||
```
|
||||
|
||||
参数解释：
|
||||
|
||||
- 参数一：表示当前元素在所有匹配元素中的索引号
|
||||
|
||||
- 参数二：参数二表示当前元素（是js 中的DOM对象，而不是jQuery对象）
|
||||
|
||||
|
||||
举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
li {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 20px;
|
||||
float: left;
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
font: 50px/100px "simsun";
|
||||
color: white;
|
||||
background-color: black;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="jquery-1.11.1.js"></script>
|
||||
<script>
|
||||
jQuery(function () {
|
||||
//设置每个不一样的盒子透明度逐渐递增
|
||||
$("ul li").each(function (index, element) {
|
||||
$(element).css("opacity", (index + 1) / 10);
|
||||
console.log(index+"---"+element.tagName);
|
||||
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<ul>
|
||||
<li class="aaa1">1</li>
|
||||
<li class="aaa2">2</li>
|
||||
<li class="aaa3">3</li>
|
||||
<li class="aaa4">4</li>
|
||||
<li class="aaa5">5</li>
|
||||
<li class="aaa6">6</li>
|
||||
<li class="aaa7">7</li>
|
||||
<li class="aaa8">8</li>
|
||||
<li class="aaa9">9</li>
|
||||
<li class="aaa10">10</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
## 多库共存
|
||||
|
||||
**多库共存**指的是：jQuery占用了 `$` 和 `jQuery` 这两个变量。当在同一个页面中引用了 jQuery 库以及其他的库（或者其他版本的jQuery库），恰好其他的库中也用到了 `$` 或者`jQuery`变量.那么，要保证每个库都能正常使用，就产生了多库共存的问题。
|
||||
|
||||
温馨提示：我们可以通过以下方式获取 jQuery 库的版本号。
|
||||
|
||||
```javascript
|
||||
console.log($.fn.jquery); //打印 jQuery 库的版本号
|
||||
```
|
||||
|
||||
**办法一**：让 jQuery 放弃对 `$` 的使用权：
|
||||
|
||||
```javascript
|
||||
$.noConflict();
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
上图中，代码中同时包含了两个版本的库。1.11.1版本放弃了对 `$` 的使用权，交给了1.8.2版本；但是1.11.1版本并没有放弃对 `jQuery`关键字的使用权。
|
||||
|
||||
|
||||
办法二：同时放弃放弃两个符号的使用权，并定义一个新的使用权（如果有三个库时，可以这样用）
|
||||
|
||||
```javascript
|
||||
$.noConflict(true); //返回值是新的关键字
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
## jQuery 的插件机制
|
||||
|
||||
jQuery 库，虽然功能强大，但也不是面面俱到。jQuery 是通过插件的方式，来扩展它的功能：
|
||||
|
||||
- 当你需要某个插件的时候，你可以“安装”到jQuery上面，然后使用。
|
||||
|
||||
- 当你不再需要这个插件，那你就可以从jQuery上“卸载”它。
|
||||
|
||||
|
||||
### 插件之改变颜色
|
||||
|
||||
jQuery的自定义动画方法animate()，在执行动画时，是不支持设置背景色这个属性的。这个时候可以借助`jQuery.color.js`这个插件。
|
||||
|
||||
|
||||
举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
<script src="jquery-1.11.1.js"></script>
|
||||
<script src="jquery.color.js"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
//点击按钮，改变盒子的宽度和背景色
|
||||
$("button").on("click", function () {
|
||||
$("div").animate({"width": 200, "background-color": "red"}, 2000, function () {
|
||||
alert("动画结束");
|
||||
});
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<button>变色</button>
|
||||
<div></div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
上方代码中，因为加入了一行插件：（注意顺序是放在jQuery插件之后）
|
||||
|
||||
```html
|
||||
<script src="jquery.color.js"></script>
|
||||
```
|
||||
|
||||
否则的话，在动画执行的过程中，是无法设置背景色的。
|
||||
|
||||
|
||||
### 插件之懒加载
|
||||
|
||||
懒加载：当打开一个网页时，只有当我看到某个部分，再加载那个部分；而不是一下子全部加载完毕。这样可以优化打开的速度。
|
||||
|
||||
比如说，我可以设置一张图片为懒加载，于是，这张图片会等我宠幸到它的时候，它再打开。
|
||||
|
||||
代码举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
div {
|
||||
height: 3000px;
|
||||
background-color: pink;
|
||||
}
|
||||
</style>
|
||||
<script src="jquery-1.11.1.js"></script>
|
||||
<!--懒加载的使用。第一步：导包(必须在jquery库的下方）-->
|
||||
<script src="jquery.lazyload.js"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
|
||||
|
||||
//第二步骤：调用懒加载的方法实现功能。参数的不同，功能也不同。
|
||||
$("img.lazy").lazyload();
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div></div>
|
||||
<!--需要实现将图片设置为懒加载模式-->
|
||||
<img class="lazy" data-original="images/01.jpg" width="640" height="480">
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
241
04-JavaScript基础/55-Zepto入门.md
Normal file
241
04-JavaScript基础/55-Zepto入门.md
Normal file
@@ -0,0 +1,241 @@
|
||||
|
||||
|
||||
|
||||
## Zepto 的介绍
|
||||
|
||||
### 什么是 Zepto
|
||||
|
||||
zepto是轻量级的JavaScript库，专门为移动端定制的框架。
|
||||
|
||||
与jquery有着类似的API，俗称：会jquery就会用zepto
|
||||
|
||||
|
||||
|
||||
### zepto的特点
|
||||
|
||||
- 针对移动端
|
||||
|
||||
- 轻量级，压缩版本只有8kb左右
|
||||
|
||||
- 响应，执行快
|
||||
|
||||
- 语法、API大部分同jquery一样，学习难度低，上手快。
|
||||
|
||||
- 目前API完善的框架中体积最小的一个
|
||||
|
||||
|
||||
### 相关网址
|
||||
|
||||
- 官网：<http://zeptojs.com/>
|
||||
|
||||
- GitHub：<https://github.com/madrobby/zepto>
|
||||
|
||||
|
||||
## Zepto 与 jQuery 的前世今生
|
||||
|
||||
### 相同点
|
||||
|
||||
- 都是优秀的js函数库
|
||||
|
||||
- 语法、API大部分都一样（zepto是按照jquery的思路来设计的）
|
||||
|
||||
- Zepto 相当于 jQuery 的子集
|
||||
|
||||
- 同jQuery一样，都是以`$`符号为核心函数。
|
||||
|
||||
|
||||
### 不同点
|
||||
|
||||
|
||||
## Zepto 的初体验
|
||||
|
||||
（1）Zepto 库的下载：
|
||||
|
||||
我们去官网下载 Zepto的开发版本`zepto.js`：
|
||||
|
||||
|
||||
|
||||
官网里，还有这样一张图：
|
||||
|
||||
|
||||
|
||||
上图的意思是：
|
||||
|
||||
- 最前面打钩的那五个api，已经包含在`zepto.js `文件里了；
|
||||
|
||||
- 后面没有打钩的那些api，如果需要用它们，必须单独下载响应的文件。
|
||||
|
||||
比如说，移动端的 touch 事件是很常见的，我们可以将`touch.js`这个文件下载，稍后用。
|
||||
|
||||
|
||||
（2）代码演示：
|
||||
|
||||
```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>
|
||||
#btn {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: pink;
|
||||
margin: 10px auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="btn">我是 div</div>
|
||||
<script src="libs/zepto1.2.0.js"></script>
|
||||
<script src="libs/touch.js"></script>
|
||||
<script>
|
||||
$(function () {
|
||||
$('#btn').on('touchstart', function () {
|
||||
alert('hello world');
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
上方代码实现的效果是，当手在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
|
||||
<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>
|
||||
|
||||
```
|
||||
|
||||
打印结果：
|
||||
|
||||
|
||||
|
||||
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 显示出来。
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user