webcourse/Web
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
qianguyihao
2018-02-01 22:58:37 +08:00
parent 7b54634da6
commit 4d8585462c
14 changed files with 3075 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

209
03-JavaScript基础/07-JavaScript基础：DOM操作.md
View File

@@ -1,5 +1,5 @@
> 本文最初发表于[博客园]()，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8366012.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
> 以下是正文。
@@ -224,6 +224,7 @@ JavaScript基础分为三个部分：
position: relative;
}
img {
display: block;
width: 1210px;
height: 80px;
background-color: blue;
@@ -266,8 +267,8 @@ JavaScript基础分为三个部分：
//3.书写事件驱动程序
//类控制
// topBanner.className += " hide"; //保留原类名，添加新类名
topBanner.className = "hide";//替换旧类名
// topBanner.style.display = "none";
topBanner.className = "hide";//替换旧类名（方式一）
// topBanner.style.display = "none"; //方式二：与上一行代码的效果相同
}
</script>
@@ -301,16 +302,14 @@ JavaScript基础分为三个部分：
//1.获取事件源
var img = document.getElementById("box");
//2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
//2.绑定事件(悬停事件：鼠标进入到事件源中，立即触发事件)
img.onmouseover = function () {
//3.书写事件驱动程序(修改src)
img.src = "image/jd2.png";
// this.src = "image/jd2.png";
}
//1.获取事件源
var img = document.getElementById("box");
//2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
//2.绑定事件(悬停事件：鼠标进入到事件源中，立即触发事件)
img.onmouseout = function () {
//3.书写事件驱动程序(修改src)
img.src = "image/jd1.png";
@@ -320,9 +319,8 @@ JavaScript基础分为三个部分：
</head>
<body>
<img id="box" src="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/>
<img id="box" src="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/>
</body>
</html>
```
@@ -331,7 +329,7 @@ JavaScript基础分为三个部分：
### 什么是DOM
DOM：文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
DOM：Document Object Model，文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
DOM就是由节点组成的。
@@ -527,17 +525,8 @@ JS中的**父子兄**访问关系：
子节点数组 = 父节点.children; //获取所有节点。用的最多。
```
### nodeType
这里讲一下nodeType。
- **nodeType == 1 表示的是元素节点**（标签） 。记住：元素就是标签。
- nodeType == 2 表示是属性节点 了解
- nodeType == 3 是文本节点 了解
## DOM节点操作（重要）
## DOM节点的操作（重要）
上一段的内容：节点的**访问关系**都是**属性**。
@@ -591,7 +580,7 @@ JS中的**父子兄**访问关系：
解释：
- 在参考节点前插入一个新的节点。
- 如果参考节点为null，那么他将在父节点最后插入一个子节点。
- 如果参考节点为null，那么他将在父节点里面的最后插入一个子节点。
![](http://img.smyhvae.com/20180127_1257.png)
@@ -603,6 +592,31 @@ JS中的**父子兄**访问关系：
我们可以看到，b1标签被插入到了box1标签的里面，和a1标签并列，在a1标签的前面。
**特别强调：**
关于方式1的appendChild方法，这里要强调一下。比如，现在有下面这样一个div结构：
```html
<div class="box11">
<div class="box12">生命壹号</div>
</div>
<div class="box21">
<div class="box22">永不止步</div>
</div>
```
上方结构中，子盒子box12是在父亲box11里的，子盒子box22是在父亲box21里面的。现在，如果我调用方法`box11.appendChild(box22)`，**最后产生的结果是：box22会跑到box11中**（也就是说，box22不在box21里面了）。这是一个很神奇的事情：
20180129_2125.png
### 删除节点
格式如下：
@@ -682,7 +696,7 @@ JS中的**父子兄**访问关系：
![](http://img.smyhvae.com/20180127_1340.png)
方式2：（推荐）
方式2：
```javascript
元素节点.getAttribute("属性名称");
@@ -711,7 +725,7 @@ JS中的**父子兄**访问关系：
myNode.className = "image2-box"; //修改class的name
```
方式2：（推荐）
方式2：
```javascript
元素节点.setAttribute(属性名, 新的属性值);
@@ -725,6 +739,7 @@ JS中的**父子兄**访问关系：
myNode.setAttribute("id","你好");
```
### 3、删除节点的属性
格式：
@@ -741,6 +756,154 @@ JS中的**父子兄**访问关系：
```
**总结：**
获取节点的属性值和设置节点的属性值，都有两种方式，但这两种方式是有区别的。
- 方式一的`元素节点.属性`和`元素节点[属性]`:绑定的属性值不会出现在标签上。
- 方式二的`get/set/removeAttribut`: 绑定的属性值会出现在标签上。
这其实很好理解，方式一操作的是属性而已，方式二操作的是标签本身。
另外，需要注意的是：**这两种方式不能交换使用**，get值和set值必须使用用一种方法。
举例：
```html
<body>
<div id="box" title="主体" class="asdfasdfadsfd">我爱你中国</div>
<script>
var div = document.getElementById("box");
//采用方式一进行set
div.aaaa = "1111";
console.log(div.aaaa); //打印结果：1111。可以打印出来，但是不会出现在标签上
//采用方式二进行set
div.setAttribute("bbbb","2222"); //bbbb作为新增的属性，会出现在标签上
console.log(div.getAttribute("aaaa")); //打印结果：null。因为方式一的set，无法采用方式二进行get。
console.log(div.bbbb); //打印结果：undefined。因为方式二的set，无法采用方式一进行get。
</script>
</body>
```
## DOM对象的属性
DOM对象的属性和HTML的标签属性几乎是一致的。例如：src、title、className、href等。
### innerHTML和innerText的区别
- value：标签的value属性。
- **innerHTML**：双闭合标签里面的内容（识别标签）。
- **innerText**：双闭合标签里面的内容（不识别标签）。（老版本的火狐用textContent）
**获取内容举例：**
如果我们想获取innerHTML和innerText里的内容，看看会如何：
![](http://img.smyhvae.com/20180127_1652.png)
上图显示，因为innerText识别不出标签，所以把标签也给获取到了。
**修改内容举例：**
![](http://img.smyhvae.com/20180127_1657.png)
上图显示，因为innerText识别不出标签，所以把标签也给添加进去了。
### nodeType属性
这里讲一下nodeType属性。
- **nodeType == 1 表示的是元素节点**（标签） 。记住：元素就是标签。
- nodeType == 2 表示是属性节点。
- nodeType == 3 是文本节点。
### nodeType、nodeName、nodeValue
我们那下面这个标签来举例：
```html
<div id="box" value="111">
生命壹号
</div>
```
上面这个标签就包含了三种节点：
- 元素节点（标签）
- 属性节点
- 文本节点
获取这三个节点的方式如下：
```javascript
var element = document.getElementById("box1"); //获取元素节点（标签）
var attribute = element.getAttributeNode("id"); //获取box1的属性节点
var txt = element.firstChild; //获取box1的文本节点
var value = element.getAttribute("id"); //获取id的属性值
console.log(element);
console.log("--------------");
console.log(attribute);
console.log("--------------");
console.log(txt);
console.log("--------------");
console.log(value);
```
打印结果如下：
![](http://img.smyhvae.com/20180128_1935.png)
既然这三个都是节点，如果我想获取它们的nodeType、nodeName、nodeValue，代码如下：
```javascript
var element = document.getElementById("box1"); //获取元素节点（标签）
var attribute = element.getAttributeNode("id"); //获取box1的属性节点
var txt = element.firstChild; //获取box1的文本节点
//获取nodeType
console.log(element.nodeType); //1
console.log(attribute.nodeType); //2
console.log(txt.nodeType); //3
console.log("--------------");
//获取nodeName
console.log(element.nodeName); //DIV
console.log(attribute.nodeName); //id
console.log(txt.nodeName); //#text
console.log("--------------");
//获取nodeValue
console.log(element.nodeValue); //null
console.log(attribute.nodeValue); //box1
console.log(txt.nodeValue); //生命壹号
```
打印结果如下：
![](http://img.smyhvae.com/20180128_1939.png)
## 我的公众号
想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。

281
03-JavaScript基础/08-JavaScript基础：BOM的常见内置方法和内置对象.md Normal file
View File

@@ -0,0 +1,281 @@
> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8401662.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
> 以下是正文。
## BOM的介绍
### JavaScript的组成
JavaScript基础分为三个部分：
- ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
- **DOM**：文档对象模型，操作**网页上的元素**的API。比如让盒子移动、变色、轮播图等。
- **BOM**：浏览器对象模型，操作**浏览器部分功能**的API。比如让浏览器自动滚动。
### 什么是BOM
BOM：Browser Object Model，浏览器对象模型。
**BOM的结构图：**
![](http://img.smyhvae.com/20180201_2052.png)
从上图也可以看出：
- **window对象是BOM的顶层(核心)对象**，所有对象都是通过它延伸出来的，也可以称为window的子对象。
- DOM越是BOM的一部分。
**window对象：**
- **window对象是JavaScript中的顶级对象**。
- 全局变量、自定义函数也是window对象的属性和方法。
- window对象下的属性和方法调用时，可以省略window。
下面讲一下 **BOM 的常见内置方法和内置对象**。
## 弹出系统对话框
比如说，`alert(1)`是`window.alert(1)`的简写，因为它是window的子方法。
系统对话框有三种：
```javascript
alert(); //不同浏览器中的外观是不一样的
confirm(); //兼容不好
prompt(); //不推荐使用
```
## 打开窗口、关闭窗口
1、打开窗口：
```
window.open(url,target,param)
```
**参数解释：**
- url：要打开的地址。
- target：新窗口的位置。可以是：`_blank` 、`_self`、 `_parent` 父框架。
- param：新窗口的一些设置。
- 返回值：新窗口的句柄。
**param**这个参数，可以填各种各样的参数（），比如：
- name：新窗口的名称，可以为空
- featurse：属性控制字符串，在此控制窗口的各种属性，属性之间以逗号隔开。
- fullscreen= { yes/no/1/0 } 是否全屏，默认no
- channelmode= { yes/no/1/0 } 是否显示频道栏，默认no
- toolbar= { yes/no/1/0 } 是否显示工具条，默认no
- location= { yes/no/1/0 } 是否显示地址栏，默认no。（有的浏览器不一定支持）
- directories = { yes/no/1/0 } 是否显示转向按钮，默认no
- status= { yes/no/1/0 } 是否显示窗口状态条，默认no
- menubar= { yes/no/1/0 } 是否显示菜单，默认no
- scrollbars= { yes/no/1/0 } 是否显示滚动条，默认yes
- resizable= { yes/no/1/0 } 是否窗口可调整大小，默认no
- width=number 窗口宽度（像素单位）
- height=number 窗口高度（像素单位）
- top=number 窗口离屏幕顶部距离（像素单位）
- left=number 窗口离屏幕左边距离（像素单位）
各个参数之间用逗号隔开就行，但我们最好是把它们统一放到json里。
2、关闭窗口：window.close()
（1）和（2）的代码举例：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="javascript:;">点击我打开一个新的页面</a>
<a href="javascript:;">点击我关闭本页面</a>
<script>
//新窗口 = window.open(地址,是否开新窗口,新窗口的各种参数);
var a1 = document.getElementsByTagName("a")[0];
var a2 = document.getElementsByTagName("a")[1];
a1.onclick = function () {
//举例1： window.open("http://www.jd.com","_blank");
var json = {
"name": "helloworld",
"fullscreen": "no",
"location": "no",
"width": "100px",
"height": "100px",
"top": "100px",
"left": "100px"
};
window.open("http://www.baidu.com", "_blank", json); //举例2
}
//关闭本页面
a2.onclick = function () {
window.close();
}
</script>
</body>
</html>
```
3、新窗口相关：
- 新窗口.moveTo(5,5)
- 新窗口.moveBy()
- 新窗口.resizeTo()
- window.resizeBy()
代码举例：
```javascript
var newWin = window.open("demo.html", "_blank", json);
newWin.moveTo(500, 500);
```
## location对象
`window.location`可以简写成location。location相当于浏览器地址栏，可以将url解析成独立的片段。
### location对象的属性
- **href**：跳转
- hash 返回url中#后面的内容，包含#
- host 主机名，包括端口
- hostname 主机名
- pathname url中的路径部分
- protocol 协议 一般是http、https
- search 查询字符串
**location.href属性举例**：
**举例1：**点击盒子时，进行跳转。
```html
<body>
<div>smyhvae</div>
<script>
var div = document.getElementsByTagName("div")[0];
div.onclick = function () {
location.href = "http://www.baidu.com"; //点击div时，跳转到指定链接
// window.open("http://www.baidu.com","_blank"); //方式二
}
</script>
</body>
```
**举例2：5秒后自动跳转到百度**。
有时候，当我们访问一个不存在的网页时，会提示5秒后自动跳转到指定页面，此时就可以用到location。举例：
```html
<script>
setTimeout(function () {
location.href = "http://www.baidu.com";
}, 5000);
</script>
```
### location对象的方法
- location.assign()：改变浏览器地址栏的地址，并记录到历史中
设置location.href 就会调用assign()。一般使用location.href 进行页面之间的跳转。
- location.replace()：替换浏览器地址栏的地址，不会记录到历史中
- location.reload()：重新加载
## navigator对象
window.navigator 的一些属性可以获取客户端的一些信息。
- userAgent：系统，浏览器)
- platform：浏览器支持的系统，win/mac/linux
举例：
```javascript
console.log(navigator.userAgent);
console.log(navigator.platform);
```
效果如下：
![](http://img.smyhvae.com/20180201_2140.png)
## history对象
1、历史记录管理
2、后退：
- history.back()
- history.go(-1)：0是刷新
3、前进：
- history.forward()
- history.go(1)
用的不多。因为浏览器中已经自带了这些功能的按钮：
![](http://img.smyhvae.com/20180201_2146.png)
## 我的公众号
想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/2016040102.jpg)