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

add files

Browse Source
This commit is contained in:
qianguyihao 2018-02-05 15:28:01 +08:00
parent 9411527deb
commit 6a105f5c23
6 changed files with 2086 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
01-html/02-html标签图文详解（二）.md
View File

@ -97,7 +97,7 @@
![](http://img.smyhvae.com/20170704_1719.png) ![](http://img.smyhvae.com/20170704_1719.png)
声明：ul的儿子，只能是li。但是li是一个容器级标签，li里面什么都能放。甚至可以再放一个ul。 声明：ul的儿子，只能是li。但是li是一个容器级标签，**li里面什么都能放，甚至可以再放一个ul**。
### 2、有序列表`<OL>`，里面的每一项是`<li>` ### 2、有序列表`<OL>`，里面的每一项是`<li>`

2
03-JavaScript基础/09-JavaScript基础：事件对象Event和冒泡.md
View File

@ -7,7 +7,7 @@
## 绑定事件的两种方式 ## 绑定事件的两种方式
我们在上一篇文章中已经讲过事件的概念。这里讲一下注册事件的两种方式，我们以onclick事件为例。 我们在上一篇文章 [DOM操作详解](http://www.cnblogs.com/smyhvae/p/8366012.html) 中已经讲过事件的概念。这里讲一下注册事件的两种方式，我们以onclick事件为例。
### 方式一：onclick ### 方式一：onclick

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

File diff suppressed because it is too large Load Diff

526
07-jQuery/02-jQuery动画详解.md Normal file
View File

@ -0,0 +1,526 @@
> 本文最初发表于[博客园]()，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
> 以下是正文。
## 前言
jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。
## 显示动画
方式一：
```javascript
$("div").show();
```
解释：无参数，表示让指定的元素直接显示出来。其实这个方法的底层就是通过`display: block;`实现的。
方式二：
```javascript
$("div").show(2000);
```
解释：通过控制元素的宽高、透明度、display属性，逐渐显示，2秒后显示完毕。
效果如下：
![](http://img.smyhvae.com/20180205_1358.gif)
方式三：
```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>
```
![](http://img.smyhvae.com/20180205_1420.gif)
## 淡入淡出动画
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时，效果如下：
![](http://img.smyhvae.com/20180205_1445.gif)
当第二个参数为false时，效果如下：
![](http://img.smyhvae.com/20180205_1450.gif)
这个**后续动画**我们要好好理解，来看个例子。
**案例：鼠标悬停时，弹出下拉菜单（下拉时带动画）**
```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>
```
效果如下：
![](http://img.smyhvae.com/20180205_1500.gif)
上方代码中，关键的地方在于，用了stop函数，再执行动画前，先停掉之前的动画。
如果去掉stop()函数，效果如下：（不是我们期望的效果）
![](http://img.smyhvae.com/20180205_1505.gif)
### stop方法的总结
当调用stop()方法后，队列里面的下一个动画将会立即开始。
但是，如果参数clearQueue被设置为true，那么队列面剩余的动画就被删除了，并且永远也不会执行。
如果参数jumpToEnd被设置为true，那么当前动画会停止，但是参与动画的每一个CSS属性将被立即设置为它们的目标值。比如：slideUp()方法，那么元素会立即隐藏掉。如果存在回调函数，那么回调函数也会立即执行。
注意：如果元素动画还没有执行完，此时调用sotp()方法，那么动画将会停止。并且动画没有执行完成，那么回调函数也不会被执行。
## 我的公众号
想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg)

397
07-jQuery/03-jQuery操作DOM.md Normal file
View File

@ -0,0 +1,397 @@
## 文本主要内容
- 样式和类操作
- jQuery 动画
- 节点操作
## 样式操作和类操作
作用：设置或获取元素的样式属性值。
### 样式操作
**1、设置样式：**
```javascript
//设置单个样式： css(属性，值);
$("div").css("background-color","red");
//设置多个样式： css(json);
$("div").css({"width":100,"height":100,"background-color":"pink"});
```
**2、获取样式：**
```javascript
//获取样式：css(属性);
//获取的时候如果有很多个，那么获取jquery对象中的第一个
alert($("div").css("width"));
```
举例如下：
20180205_1315.png
### 类操作（className）
**1、添加类样式：**
```javascript
$(selector).addClass("liItem"); //为指定元素添加类className
```
注意：此处类名不带点，所有类操作的方法类名都不带点。
**2、移除类样式：**
```javascript
$(selector).removeClass("liItem"); //为指定元素移除类 className
$(selector).removeClass(); //不指定参数，表示移除被选中元素的所有类
```
**3、判断有没有类样式：**
```javascript
$(selector).hasClass("liItem"); //判断指定元素是否包含类 className
```
此时，会返回true或false。jquery对象中，只要有一个带有指定类名的就是true，所有都不带才是false。
举例：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.current {
background-color: red;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
$("button").eq(0).click(function () {
//添加类
$("div").addClass("current");
//判断类
alert($("div").hasClass("current"));
});
$("button").eq(1).click(function () {
//删除类
$("div").removeClass("current");
//判断类
alert($("div").hasClass("current"));
});
//alert($("div").hasClass("current"));//jquery对象中只要有一个带有类名的就是true，所有都不带才是false。
})
</script>
</head>
<body>
<button>添加</button>
<button>删除</button>
<div></div>
<div></div>
<div></div>
<div class="current"></div>
</body>
</html>
```
**4、切换类样式：**
```javascript
$(selector).toggleClass(“liItem”); //为指定元素切换类 className，该元素有类则移除，没有指定类则添加。
```
解释：为指定元素切换类 className，该元素有类则移除，没有指定类则添加。
如果采用采用正常的思路实现上面这句话，代码是：
```javascript
if($("div").hasClass("current")){
//如果有类名，那么删除
$("div").removeClass("current")
}else{
//如果没有类名，那么添加
$("div").addClass("current")
}
```
现在有了toggleClass()方法，一行代码即可实现。
举例：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: green;
}
.current {
background-color: red;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
$("button").click(function () {
//需求：点击按钮 ，切换背景
//切换类（toggleCLass）
$("div").toggleClass("current");
});
})
</script>
</head>
<body>
<button>切换背景</button>
<div></div>
</body>
</html>
```
实现的效果：
20180205_1330.gif
### 样式操作和类操作的比较
- 操作的样式非常少，那么可以通过`.css()`实现。
- 操作的样式很多，建议通过使用类 class 的方式来操作。
- 如果考虑以后维护方便（把CSS从js中分离出来）的话，推荐使用类的方式来操作。
**举例**：addClass+removeClass
代码实现：
```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;
}
.wrapper {
width: 1000px;
height: 475px;
margin: 0 auto;
margin-top: 100px;
}
.tab {
border: 1px solid #ddd;
border-bottom: 0;
height: 36px;
width: 320px;
}
.tab li {
position: relative;
float: left;
width: 80px;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top: 4px solid #fff;
}
.tab span {
position: absolute;
right: 0;
top: 10px;
background: #ddd;
width: 1px;
height: 14px;
overflow: hidden;
}
.products {
width: 1002px;
border: 1px solid #ddd;
height: 476px;
}
.products .main {
float: left;
display: none;
}
.products .main.selected {
display: block;
}
.tab li.active {
border-color: red;
border-bottom: 0;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
jQuery(window).ready(function () {
//需求:鼠标放到那个li上，让该li添加active类，下面的对应的.main的div添加selected
$(".tab>li").mouseenter(function () {
//不用判断，当前的li添加active类，其他的删除active类
$(this).addClass("active").siblings("li").removeClass("active");
//对应索引值的div添加selected类，其他的删除selected类
//【重要】根据tab的索引值获取下方图片div的索引值
$(".products>div").eq($(this).index()).addClass("selected").siblings("div").removeClass("selected");
});
});
</script>
</head>
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item active">国际大牌<span>◆</span></li>
<li class="tab-item">国妆名牌<span>◆</span></li>
<li class="tab-item">清洁用品<span>◆</span></li>
<li class="tab-item">男士精品</li>
</ul>
<div class="products">
<div class="main selected">
<a href="###"><img src="images/guojidapai.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="images/guozhuangmingpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="images/qingjieyongpin.jpg" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="images/nanshijingpin.jpg" alt=""/></a>
</div>
</div>
</div>
</body>
</html>
```
上方代码中，我们注意，tab栏和下方图片栏的index值，一一对应，这里用得很巧妙。
效果：
20180205_1345.gif
```javascript
```
```html
```
```javascript
```
```html
```
```javascript
```
```html
```
```javascript
```
```
```

4
面试相关/面经/面经链接推荐.md
View File

@ -17,6 +17,10 @@
- [16年毕业的前端er在杭州求职ing](https://www.cnblogs.com/qianduantuanzhang/archive/2018/01/27/8365670.html) - [16年毕业的前端er在杭州求职ing](https://www.cnblogs.com/qianduantuanzhang/archive/2018/01/27/8365670.html)
### 2018-02-04
- [2018秋招前端总结](https://www.cnblogs.com/Mr-stockings/archive/2018/02/02/8407295.html)