update:DOM 操作
This commit is contained in:
qianguyihao
parent
bf3316d097
commit
da68db944f
@ -29,6 +29,14 @@
|
||||
|
||||
- （2）使用 reg 的test() 方法，判断指定字符串是否符合规则。
|
||||
|
||||
**正则表达式的`test()`方法**：【重要】
|
||||
|
||||
```javascript
|
||||
myReg.test(str); // 判断字符串 str 是否符合 指定的 myReg 这个正则表达式的规则
|
||||
```
|
||||
|
||||
解释：使用`test()`这个方法可以用来检查一个字符串是否符合正则表达式的规则，**如果符合则返回true，否则返回false**。
|
||||
|
||||
我们来看看下面的例子。
|
||||
|
||||
**1、传一个参数时**：
|
||||
@ -51,14 +59,6 @@
|
||||
|
||||
注意，上面的例子中，我们是先定义了一个正则表达式的规则，然后通过正则表达式的`test()`方法来判断字符串是否符合之前定义的规则。
|
||||
|
||||
正则表达式的`test()`方法：
|
||||
|
||||
```javascript
|
||||
myReg.test(str); // 判断字符串 str 是否符合 指定的 myReg 这个正则表达式的规则
|
||||
```
|
||||
|
||||
解释：使用`test()`这个方法可以用来检查一个字符串是否符合正则表达式的规则，**如果符合则返回true，否则返回false**。
|
||||
|
||||
**2、传两个参数时**：匹配模式 【重要】
|
||||
|
||||
构造函数 RegExp 中，也可以传两个参数。我们可以传递一个**匹配模式**作为第二个参数。这个参数可以是：
|
||||
@ -325,6 +325,19 @@ match()这个方法还是很实用的，可以在一个很长的字符串中，
|
||||
str = str.replace(/\s*$/, ""); //去除结尾的空格
|
||||
```
|
||||
|
||||
### 判断字符串是否为电子邮件
|
||||
|
||||
正则实现：
|
||||
|
||||
```javascript
|
||||
var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
|
||||
|
||||
var email = "abchello@163.com";
|
||||
|
||||
console.log(emailReg.test(email));
|
||||
```
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
@ -334,4 +347,3 @@ match()这个方法还是很实用的，可以在一个很长的字符串中，
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
326
03-JavaScript基础/23-事件简介.md
Normal file
326
03-JavaScript基础/23-事件简介.md
Normal file
@ -0,0 +1,326 @@
|
||||
|
||||
> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8366012.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
|
||||
|
||||
> 以下是正文。
|
||||
|
||||
## 事件简介
|
||||
|
||||
事件：就是文档或浏览器窗口中发生的一些特定的交互瞬间。对于 Web 应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、关闭弹窗等等。
|
||||
|
||||
JavaScript 是以**事件驱动为核心**的一门语言。JavaScript 与 HTML 之间的交互是通过事件实现的。
|
||||
|
||||
### 事件的三要素
|
||||
|
||||
**事件的三要素：事件源、事件、事件驱动程序**。
|
||||
|
||||
比如，我用手去按开关，灯亮了。这件事情里，事件源是：手。事件是：按开关。事件驱动程序是：灯开了或者关了。
|
||||
|
||||
再比如，网页上弹出一个广告，我点击右上角的`X`，广告就关闭了。这件事情里，事件源是：`X`。事件是：onclick。事件驱动程序是：广告关闭了。
|
||||
|
||||
于是我们可以总结出：谁引发的后续事件，谁就是事件源。
|
||||
|
||||
**总结如下：**
|
||||
|
||||
- 事件源：引发后续事件的html标签。
|
||||
|
||||
- 事件：js已经定义好了（见下图）。
|
||||
|
||||
- 事件驱动程序：对样式和html的操作。也就是DOM。
|
||||
|
||||
也就是说，我们可以在时间对应的属性中写一些js代码，当事件被触发时，这些代码将会执行。
|
||||
|
||||
**代码书写步骤如下：**（重要）
|
||||
|
||||
- （1）获取事件源：document.getElementById(“box”); // 类似于Android里面的findViewById
|
||||
|
||||
- （2）绑定事件： 事件源box.事件onclick = function(){ 事件驱动程序 };
|
||||
|
||||
- （3）书写事件驱动程序：关于DOM的操作。
|
||||
|
||||
最简单的代码举例：（点击box1，然后弹框）
|
||||
|
||||
```html
|
||||
<body>
|
||||
<div id="box1"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
// 1、获取事件源
|
||||
var div = document.getElementById("box1");
|
||||
// 2、绑定事件
|
||||
div.onclick = function () {
|
||||
// 3、书写事件驱动程序
|
||||
alert("我是弹出的内容");
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
```
|
||||
|
||||
常见的事件如下：
|
||||
|
||||
|
||||
|
||||
下面针对这事件的三要素，进行分别介绍。
|
||||
|
||||
### 1、获取事件源的方式（DOM节点的获取）
|
||||
|
||||
获取事件源的常见方式如下：
|
||||
|
||||
```javascript
|
||||
var div1 = document.getElementById("box1"); //方式一：通过id获取单个标签
|
||||
|
||||
var arr1 = document.getElementsByTagName("div"); //方式二：通过 标签名 获得 标签数组，所以有s
|
||||
|
||||
var arr2 = document.getElementsByClassName("hehe"); //方式三：通过 类名 获得 标签数组，所以有s
|
||||
```
|
||||
|
||||
### 2、绑定事件的方式
|
||||
|
||||
方式一：直接绑定匿名函数
|
||||
|
||||
```html
|
||||
<div id="box1" ></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var div1 = document.getElementById("box1");
|
||||
//绑定事件的第一种方式
|
||||
div1.onclick = function () {
|
||||
alert("我是弹出的内容");
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
方式二：先单独定义函数，再绑定
|
||||
|
||||
```html
|
||||
<div id="box1" ></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var div1 = document.getElementById("box1");
|
||||
//绑定事件的第二种方式
|
||||
div1.onclick = fn; //注意，这里是fn，不是fn()。fn()指的是返回值。
|
||||
//单独定义函数
|
||||
function fn() {
|
||||
alert("我是弹出的内容");
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
注意上方代码的注释。**绑定的时候，是写fn，不是写fn()**。fn代表的是整个函数，而fn()代表的是返回值。
|
||||
|
||||
方式三：行内绑定
|
||||
|
||||
```html
|
||||
<!--行内绑定-->
|
||||
<div id="box1" onclick="fn()"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function fn() {
|
||||
alert("我是弹出的内容");
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
注意第一行代码，绑定时，是写的`"fn()"`，不是写的`"fn"`。因为绑定的这段代码不是写在js代码里的，而是被识别成了**字符串**。
|
||||
|
||||
### 3、事件驱动程序
|
||||
|
||||
我们在上面是拿alert举例，不仅如此，我们还可以操作标签的属性和样式。举例如下：
|
||||
|
||||
点击鼠标时，原本粉色的div变大了，背景变红：
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box1 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: pink;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="box1" ></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var div1 = document.getElementById("box1");
|
||||
//点击鼠标时，原本粉色的div变大了，背景变红了
|
||||
div1.onclick = function () {
|
||||
div1.style.width = "200px"; //属性值要写引号
|
||||
div1.style.height = "200px";
|
||||
div1.style.backgroundColor = "red"; //属性名是backgroundColor，不是background-color
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
上方代码的注意事项：
|
||||
|
||||
- 在js里写属性值时，要用引号
|
||||
|
||||
- 在js里写属性名时，是`backgroundColor`，不是CSS里面的`background-color`。
|
||||
|
||||
实现效果如下：
|
||||
|
||||
|
||||
|
||||
### onload事件
|
||||
|
||||
> onload事件比较特殊，这里单独讲一下。
|
||||
|
||||
**当页面加载（文本和图片）完毕的时候，触发onload事件。**
|
||||
|
||||
举例：
|
||||
|
||||
```html
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
console.log("smyhvae"); //等页面加载完毕时，打印字符串
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
有一点我们要知道：**js的加载是和html同步加载的**。因此，如果使用元素在定义元素之前，容易报错。这个时候，onload事件就能派上用场了，我们可以把使用元素的代码放在onload里，就能保证这段代码是最后执行。
|
||||
|
||||
建议是：整个页面上所有元素加载完毕在执行js内容。所以，window.onload可以预防使用标签在定义标签之前。
|
||||
|
||||
### 事件举例：京东顶部广告栏
|
||||
|
||||
|
||||
|
||||
比如上面这张图，当鼠标点击右上角的`X`时，关掉整个广告栏，这就要用到事件。
|
||||
|
||||
代码实现如下：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.top-banner {
|
||||
background-color: pink;
|
||||
height: 80px;
|
||||
}
|
||||
.w {
|
||||
width: 1210px;
|
||||
margin: 10px auto;
|
||||
position: relative;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
width: 1210px;
|
||||
height: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
a {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
text-decoration: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font: 700 14px/20px "simsum";
|
||||
text-align: center;
|
||||
}
|
||||
.hide {
|
||||
display: none!important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-banner" id="topBanner">
|
||||
<div class="w">
|
||||
<img src="" alt=""/>
|
||||
<a href="#" id="closeBanner">×</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
//需求：点击案例，隐藏盒子。
|
||||
//思路：点击a链接，让top-banner这个盒子隐藏起来（加隐藏类名）。
|
||||
|
||||
//1.获取事件源和相关元素
|
||||
var closeBanner = document.getElementById("closeBanner");
|
||||
var topBanner = document.getElementById("topBanner");
|
||||
//2.绑定事件
|
||||
closeBanner.onclick = function () {
|
||||
//3.书写事件驱动程序
|
||||
//类控制
|
||||
// topBanner.className += " hide"; //保留原类名，添加新类名
|
||||
topBanner.className = "hide";//替换旧类名（方式一）
|
||||
// topBanner.style.display = "none"; //方式二：与上一行代码的效果相同
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
注意最后一行代码，这种方式会替换旧类名，意思是，不管之前的类名叫什么，都会被修改。
|
||||
|
||||
### 事件举例：
|
||||
|
||||
要求实现效果：当鼠标悬停在img上时，更换为另外一张图片；鼠标离开时，还原为本来的图片。
|
||||
|
||||
代码实现：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<script>
|
||||
//window.onload页面加载完毕以后再执行此代码
|
||||
window.onload = function () {
|
||||
//需求：鼠标放到img上，更换为另一张图片，也就是修改路径（src的值）。
|
||||
//步骤：
|
||||
//1.获取事件源
|
||||
//2.绑定事件
|
||||
//3.书写事件驱动程序
|
||||
|
||||
//1.获取事件源
|
||||
var img = document.getElementById("box");
|
||||
//2.绑定事件(悬停事件：鼠标进入到事件源中，立即触发事件)
|
||||
img.onmouseover = function () {
|
||||
//3.书写事件驱动程序(修改src)
|
||||
img.src = "image/jd2.png";
|
||||
// this.src = "image/jd2.png";
|
||||
}
|
||||
|
||||
//2.绑定事件(悬停事件：鼠标进入到事件源中，立即触发事件)
|
||||
img.onmouseout = function () {
|
||||
//3.书写事件驱动程序(修改src)
|
||||
img.src = "image/jd1.png";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<img id="box" src="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
|
||||
|
||||
> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8366012.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
|
||||
|
||||
> 以下是正文。
|
||||
|
||||
|
||||
## 前言
|
||||
## 常见概念
|
||||
|
||||
### JavaScript的组成
|
||||
|
||||
@ -12,344 +12,42 @@ JavaScript基础分为三个部分：
|
||||
|
||||
- ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
|
||||
|
||||
- **DOM**：文档对象模型，操作**网页上的元素**的API。比如让盒子移动、变色、轮播图等。
|
||||
- **DOM**：文档对象模型（Document object Model），操作**网页上的元素**的API。比如让盒子移动、变色、轮播图等。
|
||||
|
||||
- **BOM**：浏览器对象模型，操作**浏览器部分功能**的API。比如让浏览器自动滚动。
|
||||
|
||||
## 事件
|
||||
### 节点
|
||||
|
||||
> JS是以**事件驱动为核心**的一门语言。
|
||||
**节点**（Node）：构成 HTML 网页的最基本单元。网页中的每一个部分都可以称为是一个节点，比如：html标签、属性、文本、注释、整个文档等都是一个节点。
|
||||
|
||||
### 事件的三要素
|
||||
虽然都是节点，但是实际上他们的具体类型是不同的。常见节点分为四类：
|
||||
|
||||
**事件的三要素：事件源、事件、事件驱动程序**。
|
||||
- 文档节点（文档）：整个 HTML 文档。整个 HTML 文档就是一个文档节点。
|
||||
|
||||
比如，我用手去按开关，灯亮了。这件事情里，事件源是：手。事件是：按开关。事件驱动程序是：灯的开和关。
|
||||
- 元素节点（标签）：HTML标签。
|
||||
|
||||
再比如，网页上弹出一个广告，我点击右上角的`X`，广告就关闭了。这件事情里，事件源是：`X`。事件是：onclick。事件驱动程序是：广告关闭了。
|
||||
- 属性节点（属性）：元素的属性。
|
||||
|
||||
于是我们可以总结出：谁引发的后续事件，谁就是事件源。
|
||||
- 文本节点（文本）：HTML标签中的文本内容（包括标签之间的空格、换行）。
|
||||
|
||||
**总结如下：**
|
||||
|
||||
- 事件源：引发后续事件的html标签。
|
||||
|
||||
- 事件：js已经定义好了（见下图）。
|
||||
|
||||
- 事件驱动程序：对样式和html的操作。也就是DOM。
|
||||
|
||||
**代码书写步骤如下：**（重要）
|
||||
|
||||
- （1）获取事件源：document.getElementById(“box”); // 类似于Android里面的findViewById
|
||||
|
||||
- （2）绑定事件： 事件源box.事件onclick = function(){ 事件驱动程序 };
|
||||
|
||||
- （3）书写事件驱动程序：关于DOM的操作。
|
||||
|
||||
最简单的代码举例：（点击box1，然后弹框）
|
||||
|
||||
```html
|
||||
<body>
|
||||
<div id="box1"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
// 1、获取事件源
|
||||
var div = document.getElementById("box1");
|
||||
// 2、绑定事件
|
||||
div.onclick = function () {
|
||||
// 3、书写事件驱动程序
|
||||
alert("我是弹出的内容");
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
```
|
||||
|
||||
常见的事件如下：
|
||||
|
||||
|
||||
|
||||
下面针对这事件的三要素，进行分别介绍。
|
||||
|
||||
### 1、获取事件源的方式（DOM节点的获取）
|
||||
|
||||
获取事件源的常见方式如下：
|
||||
|
||||
```javascript
|
||||
var div1 = document.getElementById("box1"); //方式一：通过id获取单个标签
|
||||
|
||||
var arr1 = document.getElementsByTagName("div"); //方式二：通过 标签名 获得 标签数组，所以有s
|
||||
|
||||
var arr2 = document.getElementsByClassName("hehe"); //方式三：通过 类名 获得 标签数组，所以有s
|
||||
```
|
||||
|
||||
### 2、绑定事件的方式
|
||||
|
||||
方式一：直接绑定匿名函数
|
||||
|
||||
```html
|
||||
<div id="box1" ></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var div1 = document.getElementById("box1");
|
||||
//绑定事件的第一种方式
|
||||
div1.onclick = function () {
|
||||
alert("我是弹出的内容");
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
方式二：先单独定义函数，再绑定
|
||||
|
||||
```html
|
||||
<div id="box1" ></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var div1 = document.getElementById("box1");
|
||||
//绑定事件的第二种方式
|
||||
div1.onclick = fn; //注意，这里是fn，不是fn()。fn()指的是返回值。
|
||||
//单独定义函数
|
||||
function fn() {
|
||||
alert("我是弹出的内容");
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
注意上方代码的注释。**绑定的时候，是写fn，不是写fn()**。fn代表的是整个函数，而fn()代表的是返回值。
|
||||
|
||||
方式三：行内绑定
|
||||
|
||||
```html
|
||||
<!--行内绑定-->
|
||||
<div id="box1" onclick="fn()"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
function fn() {
|
||||
alert("我是弹出的内容");
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
注意第一行代码，绑定时，是写的`"fn()"`，不是写的`"fn"`。因为绑定的这段代码不是写在js代码里的，而是被识别成了**字符串**。
|
||||
|
||||
### 3、事件驱动程序
|
||||
|
||||
我们在上面是拿alert举例，不仅如此，我们还可以操作标签的属性和样式。举例如下：
|
||||
|
||||
点击鼠标时，原本粉色的div变大了，背景变红：
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box1 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: pink;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="box1" ></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var div1 = document.getElementById("box1");
|
||||
//点击鼠标时，原本粉色的div变大了，背景变红了
|
||||
div1.onclick = function () {
|
||||
div1.style.width = "200px"; //属性值要写引号
|
||||
div1.style.height = "200px";
|
||||
div1.style.backgroundColor = "red"; //属性名是backgroundColor，不是background-color
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
上方代码的注意事项：
|
||||
|
||||
- 在js里写属性值时，要用引号
|
||||
- 在js里写属性名时，是`backgroundColor`，不是CSS里面的`background-color`。
|
||||
|
||||
实现效果如下：
|
||||
|
||||
|
||||
|
||||
### onload事件
|
||||
|
||||
> onload事件比较特殊，这里单独讲一下。
|
||||
|
||||
**当页面加载（文本和图片）完毕的时候，触发onload事件。**
|
||||
|
||||
举例：
|
||||
|
||||
```html
|
||||
<script type="text/javascript">
|
||||
window.onload = function () {
|
||||
console.log("smyhvae"); //等页面加载完毕时，打印字符串
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
有一点我们要知道：**js的加载是和html同步加载的**。因此，如果使用元素在定义元素之前，容易报错。这个时候，onload事件就能派上用场了，我们可以把使用元素的代码放在onload里，就能保证这段代码是最后执行。
|
||||
|
||||
建议是：整个页面上所有元素加载完毕在执行js内容。所以，window.onload可以预防使用标签在定义标签之前。
|
||||
|
||||
### 事件举例：京东顶部广告栏
|
||||
|
||||
|
||||
|
||||
比如上面这张图，当鼠标点击右上角的`X`时，关掉整个广告栏，这就要用到事件。
|
||||
|
||||
代码实现如下：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<style>
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.top-banner {
|
||||
background-color: pink;
|
||||
height: 80px;
|
||||
}
|
||||
.w {
|
||||
width: 1210px;
|
||||
margin: 10px auto;
|
||||
position: relative;
|
||||
}
|
||||
img {
|
||||
display: block;
|
||||
width: 1210px;
|
||||
height: 80px;
|
||||
background-color: blue;
|
||||
}
|
||||
a {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
color: #fff;
|
||||
background-color: #000;
|
||||
text-decoration: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
font: 700 14px/20px "simsum";
|
||||
text-align: center;
|
||||
}
|
||||
.hide {
|
||||
display: none!important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-banner" id="topBanner">
|
||||
<div class="w">
|
||||
<img src="" alt=""/>
|
||||
<a href="#" id="closeBanner">×</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
//需求：点击案例，隐藏盒子。
|
||||
//思路：点击a链接，让top-banner这个盒子隐藏起来（加隐藏类名）。
|
||||
|
||||
//1.获取事件源和相关元素
|
||||
var closeBanner = document.getElementById("closeBanner");
|
||||
var topBanner = document.getElementById("topBanner");
|
||||
//2.绑定事件
|
||||
closeBanner.onclick = function () {
|
||||
//3.书写事件驱动程序
|
||||
//类控制
|
||||
// topBanner.className += " hide"; //保留原类名，添加新类名
|
||||
topBanner.className = "hide";//替换旧类名（方式一）
|
||||
// topBanner.style.display = "none"; //方式二：与上一行代码的效果相同
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
注意最后一行代码，这种方式会替换旧类名，意思是，不管之前的类名叫什么，都会被修改。
|
||||
|
||||
### 事件举例：
|
||||
|
||||
要求实现效果：当鼠标悬停在img上时，更换为另外一张图片；鼠标离开时，还原为本来的图片。
|
||||
|
||||
代码实现：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title></title>
|
||||
<script>
|
||||
//window.onload页面加载完毕以后再执行此代码
|
||||
window.onload = function () {
|
||||
//需求：鼠标放到img上，更换为另一张图片，也就是修改路径（src的值）。
|
||||
//步骤：
|
||||
//1.获取事件源
|
||||
//2.绑定事件
|
||||
//3.书写事件驱动程序
|
||||
|
||||
//1.获取事件源
|
||||
var img = document.getElementById("box");
|
||||
//2.绑定事件(悬停事件：鼠标进入到事件源中，立即触发事件)
|
||||
img.onmouseover = function () {
|
||||
//3.书写事件驱动程序(修改src)
|
||||
img.src = "image/jd2.png";
|
||||
// this.src = "image/jd2.png";
|
||||
}
|
||||
|
||||
//2.绑定事件(悬停事件：鼠标进入到事件源中，立即触发事件)
|
||||
img.onmouseout = function () {
|
||||
//3.书写事件驱动程序(修改src)
|
||||
img.src = "image/jd1.png";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<img id="box" src="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
## DOM的介绍
|
||||
节点的类型不同，属性和方法也都不尽相同。所有的节点都是Object。
|
||||
|
||||
### 什么是DOM
|
||||
|
||||
DOM：Document Object Model，文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
|
||||
**DOM**：Document Object Model，文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。
|
||||
|
||||
DOM就是由节点组成的。
|
||||
|
||||
### 解析过程
|
||||
|
||||
**解析过程**：
|
||||
HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的**属性**。
|
||||
|
||||
### DOM树（一切都是节点）
|
||||
**DOM树**：（一切都是节点）
|
||||
|
||||
DOM的数据结构如下：
|
||||
|
||||
|
||||
|
||||
上图可知，**在HTML当中，一切都是节点**：（非常重要）
|
||||
|
||||
- **元素节点**：HMTL标签。
|
||||
|
||||
- **文本节点**：标签中的文字（比如标签之间的空格、换行）
|
||||
|
||||
- **属性节点**：：标签的属性。
|
||||
上图可知，**在HTML当中，一切都是节点**（非常重要）。节点的分类，在上一段中，已经讲了。
|
||||
|
||||
整个html文档就是一个文档节点。所有的节点都是Object。
|
||||
|
||||
@ -365,19 +63,18 @@ DOM的数据结构如下：
|
||||
|
||||
- 事件的触发响应：事件源、事件、事件的驱动程序
|
||||
|
||||
## 元素节点的获取
|
||||
|
||||
## DOM节点的获取
|
||||
DOM节点的获取方式其实就是**获取事件源的方式**。关于事件，上一篇文章中已经讲到了。
|
||||
|
||||
DOM节点的获取方式其实就是**获取事件源的方式**，在上一段已经讲到。这里再重复一下。
|
||||
|
||||
操作元素节点，必须首先找到该节点。有三种方式可以获取DOM节点：
|
||||
想要操作元素节点，必须首先要找到该节点。有三种方式可以获取DOM节点：
|
||||
|
||||
```javascript
|
||||
var div1 = document.getElementById("box1"); //方式一：通过id获取单个标签
|
||||
var div1 = document.getElementById("box1"); //方式一：通过 id 获取 一个 元素节点（为什么是一个呢？因为 id 是唯一的）
|
||||
|
||||
var arr1 = document.getElementsByTagName("div"); //方式二：通过 标签名 获得 标签数组，所以有s
|
||||
var arr1 = document.getElementsByTagName("div"); //方式二：通过 标签名 获取 元素节点数组，所以有s
|
||||
|
||||
var arr2 = document.getElementsByClassName("hehe"); //方式三：通过 类名 获得 标签数组，所以有s
|
||||
var arr2 = document.getElementsByClassName("hehe"); //方式三：通过 类名 获取 元素节点数组，所以有s
|
||||
```
|
||||
|
||||
既然方式二、方式三获取的是标签数组，那么习惯性是**先遍历之后再使用**。
|
||||
@ -412,7 +109,6 @@ JS中的**父子兄**访问关系：
|
||||
节点.parentNode
|
||||
```
|
||||
|
||||
|
||||
### 获取兄弟节点
|
||||
|
||||
**1、下一个节点 | 下一个元素节点**：
|
||||
@ -455,8 +151,7 @@ JS中的**父子兄**访问关系：
|
||||
前一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling
|
||||
```
|
||||
|
||||
|
||||
**3、补充：**获得任意一个兄弟节点：
|
||||
**3、补充**：获得任意一个兄弟节点：
|
||||
|
||||
```javascript
|
||||
节点自己.parentNode.children[index]; //随意得到兄弟节点
|
||||
@ -525,7 +220,6 @@ JS中的**父子兄**访问关系：
|
||||
子节点数组 = 父节点.children; //获取所有节点。用的最多。
|
||||
```
|
||||
|
||||
|
||||
## DOM节点的操作（重要）
|
||||
|
||||
上一段的内容：节点的**访问关系**都是**属性**。
|
||||
@ -593,8 +287,6 @@ JS中的**父子兄**访问关系：
|
||||
我们可以看到，b1标签被插入到了box1标签的里面，和a1标签并列，在a1标签的前面。
|
||||
|
||||
|
||||
|
||||
|
||||
**特别强调：**
|
||||
|
||||
关于方式1的appendChild方法，这里要强调一下。比如，现在有下面这样一个div结构：
|
||||
@ -616,7 +308,6 @@ JS中的**父子兄**访问关系：
|
||||
|
||||
|
||||
|
||||
|
||||
### 删除节点
|
||||
|
||||
格式如下：
|
||||
@ -666,8 +357,8 @@ JS中的**父子兄**访问关系：
|
||||
方式1：
|
||||
|
||||
```javascript
|
||||
元素节点.属性;
|
||||
元素节点[属性];
|
||||
元素节点.属性名;
|
||||
元素节点[属性名];
|
||||
```
|
||||
|
||||
举例：（获取节点的属性值）
|
||||
@ -695,7 +386,7 @@ JS中的**父子兄**访问关系：
|
||||
上方代码中的img标签，有各种属性，我们可以逐一获取，打印结果如下：
|
||||
|
||||
|
||||
|
||||
f
|
||||
方式2：
|
||||
|
||||
```javascript
|
||||
@ -792,8 +483,6 @@ JS中的**父子兄**访问关系：
|
||||
</body>
|
||||
```
|
||||
|
||||
|
||||
|
||||
## DOM对象的属性
|
||||
|
||||
DOM对象的属性和HTML的标签属性几乎是一致的。例如：src、title、className、href等。
|
||||
@ -898,11 +587,62 @@ DOM对象的属性和HTML的标签属性几乎是一致的。例如：src、titl
|
||||
|
||||
|
||||
|
||||
## 文档的加载
|
||||
|
||||
浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行。如果将script标签写到页面的上边，在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载，会导致无法获取到DOM对象。
|
||||
|
||||
**onload 事件**：
|
||||
|
||||
onload 事件会在整个页面加载完成之后才触发。为 window 绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了。
|
||||
|
||||
代码举例：
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title></title>
|
||||
<script type="text/javascript">
|
||||
// 【方式一：先加载，后执行】这段 js 代码是写在 <head> 标签里的，所以建议放在 window.onload 里面。
|
||||
window.onload = function() {
|
||||
// 获取id为btn的按钮
|
||||
var btn = document.getElementById("btn");
|
||||
// 为按钮绑定点击事件
|
||||
btn.onclick = function() {
|
||||
alert("hello");
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<button id="btn">点我一下</button>
|
||||
|
||||
<script type="text/javascript">
|
||||
// 【方式二：后加载，后执行】这段 js 代码是写在 <body> 标签里的，代码的位置是处在页面的下方。这么做，也可以确保：在页面加载完毕后，再执行 js 代码。
|
||||
|
||||
// 获取id为btn的按钮
|
||||
var btn = document.getElementById("btn");
|
||||
// 为按钮绑定点击事件
|
||||
btn.onclick = function() {
|
||||
alert("hello");
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
```
|
||||
|
||||
上方代码中，方式一和方式二均可以确保：在页面加载完毕后，再执行 js 代码。
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user