From da68db944f81276f0bfef48bcacf3c8309687eb3 Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Sun, 4 Aug 2019 17:41:02 +0800 Subject: [PATCH] =?UTF-8?q?update:DOM=20=E6=93=8D=E4=BD=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 03-JavaScript基础/22-正则表达式.md | 30 +- 03-JavaScript基础/23-事件简介.md | 326 ++++++++++++++ .../{25-DOM操作.md => 24-DOM简介和DOM操作.md} | 416 ++++-------------- 3 files changed, 425 insertions(+), 347 deletions(-) create mode 100644 03-JavaScript基础/23-事件简介.md rename 03-JavaScript基础/{25-DOM操作.md => 24-DOM简介和DOM操作.md} (61%) diff --git a/03-JavaScript基础/22-正则表达式.md b/03-JavaScript基础/22-正则表达式.md index 367b9f7..02c821b 100644 --- a/03-JavaScript基础/22-正则表达式.md +++ b/03-JavaScript基础/22-正则表达式.md @@ -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()这个方法还是很实用的，可以在一个很长的字符串中， ![](http://img.smyhvae.com/20190101.png) - diff --git a/03-JavaScript基础/23-事件简介.md b/03-JavaScript基础/23-事件简介.md new file mode 100644 index 0000000..f31a8c3 --- /dev/null +++ b/03-JavaScript基础/23-事件简介.md @@ -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 + +
+ + + + +``` + +常见的事件如下： + +![](http://img.smyhvae.com/20180126_1553.png) + +下面针对这事件的三要素，进行分别介绍。 + +### 1、获取事件源的方式（DOM节点的获取） + +获取事件源的常见方式如下： + +```javascript + var div1 = document.getElementById("box1"); //方式一：通过id获取单个标签 + + var arr1 = document.getElementsByTagName("div"); //方式二：通过 标签名 获得 标签数组，所以有s + + var arr2 = document.getElementsByClassName("hehe"); //方式三：通过 类名 获得 标签数组，所以有s +``` + +### 2、绑定事件的方式 + +方式一：直接绑定匿名函数 + +```html +
+ + +``` + +方式二：先单独定义函数，再绑定 + +```html +
+ + +``` + +注意上方代码的注释。**绑定的时候，是写fn，不是写fn()**。fn代表的是整个函数，而fn()代表的是返回值。 + +方式三：行内绑定 + +```html + +
+ + +``` + +注意第一行代码，绑定时，是写的`"fn()"`，不是写的`"fn"`。因为绑定的这段代码不是写在js代码里的，而是被识别成了**字符串**。 + +### 3、事件驱动程序 + +我们在上面是拿alert举例，不仅如此，我们还可以操作标签的属性和样式。举例如下： + +点击鼠标时，原本粉色的div变大了，背景变红： + +```html + + + + + +
+ + +``` + +上方代码的注意事项： + +- 在js里写属性值时，要用引号 + +- 在js里写属性名时，是`backgroundColor`，不是CSS里面的`background-color`。 + +实现效果如下： + +![](http://img.smyhvae.com/20180126_1720.gif) + +### onload事件 + +> onload事件比较特殊，这里单独讲一下。 + +**当页面加载（文本和图片）完毕的时候，触发onload事件。** + +举例： + +```html + +``` + +有一点我们要知道：**js的加载是和html同步加载的**。因此，如果使用元素在定义元素之前，容易报错。这个时候，onload事件就能派上用场了，我们可以把使用元素的代码放在onload里，就能保证这段代码是最后执行。 + +建议是：整个页面上所有元素加载完毕在执行js内容。所以，window.onload可以预防使用标签在定义标签之前。 + +### 事件举例：京东顶部广告栏 + +![](http://img.smyhvae.com/20180122_1020.png) + +比如上面这张图，当鼠标点击右上角的`X`时，关掉整个广告栏，这就要用到事件。 + +代码实现如下： + +```html + + + + + + + + +
+
+ + × +
+
+ + + + + + +``` + +注意最后一行代码，这种方式会替换旧类名，意思是，不管之前的类名叫什么，都会被修改。 + +### 事件举例： + +要求实现效果：当鼠标悬停在img上时，更换为另外一张图片；鼠标离开时，还原为本来的图片。 + +代码实现： + +```html + + + + + + + + + + + + +``` + +## 我的公众号 + +想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 + +扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： + +![](http://img.smyhvae.com/20190101.png) + diff --git a/03-JavaScript基础/25-DOM操作.md b/03-JavaScript基础/24-DOM简介和DOM操作.md similarity index 61% rename from 03-JavaScript基础/25-DOM操作.md rename to 03-JavaScript基础/24-DOM简介和DOM操作.md index 6adbdae..5fb72ff 100644 --- a/03-JavaScript基础/25-DOM操作.md +++ b/03-JavaScript基础/24-DOM简介和DOM操作.md @@ -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 - -
- - - - -``` - -常见的事件如下： - -![](http://img.smyhvae.com/20180126_1553.png) - -下面针对这事件的三要素，进行分别介绍。 - -### 1、获取事件源的方式（DOM节点的获取） - -获取事件源的常见方式如下： - -```javascript - var div1 = document.getElementById("box1"); //方式一：通过id获取单个标签 - - var arr1 = document.getElementsByTagName("div"); //方式二：通过 标签名 获得 标签数组，所以有s - - var arr2 = document.getElementsByClassName("hehe"); //方式三：通过 类名 获得 标签数组，所以有s -``` - -### 2、绑定事件的方式 - -方式一：直接绑定匿名函数 - -```html -
- - -``` - -方式二：先单独定义函数，再绑定 - -```html -
- - -``` - -注意上方代码的注释。**绑定的时候，是写fn，不是写fn()**。fn代表的是整个函数，而fn()代表的是返回值。 - -方式三：行内绑定 - -```html - -
- - -``` - -注意第一行代码，绑定时，是写的`"fn()"`，不是写的`"fn"`。因为绑定的这段代码不是写在js代码里的，而是被识别成了**字符串**。 - -### 3、事件驱动程序 - -我们在上面是拿alert举例，不仅如此，我们还可以操作标签的属性和样式。举例如下： - -点击鼠标时，原本粉色的div变大了，背景变红： - -```html - - - - - -
- - -``` - -上方代码的注意事项： - -- 在js里写属性值时，要用引号 -- 在js里写属性名时，是`backgroundColor`，不是CSS里面的`background-color`。 - -实现效果如下： - -![](http://img.smyhvae.com/20180126_1720.gif) - -### onload事件 - -> onload事件比较特殊，这里单独讲一下。 - -**当页面加载（文本和图片）完毕的时候，触发onload事件。** - -举例： - -```html - -``` - -有一点我们要知道：**js的加载是和html同步加载的**。因此，如果使用元素在定义元素之前，容易报错。这个时候，onload事件就能派上用场了，我们可以把使用元素的代码放在onload里，就能保证这段代码是最后执行。 - -建议是：整个页面上所有元素加载完毕在执行js内容。所以，window.onload可以预防使用标签在定义标签之前。 - -### 事件举例：京东顶部广告栏 - -![](http://img.smyhvae.com/20180122_1020.png) - -比如上面这张图，当鼠标点击右上角的`X`时，关掉整个广告栏，这就要用到事件。 - -代码实现如下： - -```html - - - - - - - - -
-
- - × -
-
- - - - - - -``` - -注意最后一行代码，这种方式会替换旧类名，意思是，不管之前的类名叫什么，都会被修改。 - -### 事件举例： - -要求实现效果：当鼠标悬停在img上时，更换为另外一张图片；鼠标离开时，还原为本来的图片。 - -代码实现： - -```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的数据结构如下： ![](http://img.smyhvae.com/20180126_2105.png) -上图可知，**在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中的**父子兄**访问关系： ![](http://img.smyhvae.com/20180129_2125.png) - ### 删除节点 格式如下： @@ -666,8 +357,8 @@ JS中的**父子兄**访问关系： 方式1： ```javascript - 元素节点.属性; - 元素节点[属性]; + 元素节点.属性名; + 元素节点[属性名]; ``` 举例：（获取节点的属性值） @@ -695,7 +386,7 @@ JS中的**父子兄**访问关系： 上方代码中的img标签，有各种属性，我们可以逐一获取，打印结果如下： ![](http://img.smyhvae.com/20180127_1340.png) - +f 方式2： ```javascript @@ -792,8 +483,6 @@ JS中的**父子兄**访问关系： ``` - - ## DOM对象的属性 DOM对象的属性和HTML的标签属性几乎是一致的。例如：src、title、className、href等。 @@ -898,11 +587,62 @@ DOM对象的属性和HTML的标签属性几乎是一致的。例如：src、titl ![](http://img.smyhvae.com/20180128_1939.png) +## 文档的加载 + +浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行。如果将script标签写到页面的上边，在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载，会导致无法获取到DOM对象。 + +**onload 事件**： + +onload 事件会在整个页面加载完成之后才触发。为 window 绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了。 + +代码举例： + +```html + + + + + + + + + + + + + + + +``` + +上方代码中，方式一和方式二均可以确保：在页面加载完毕后，再执行 js 代码。 ## 我的公众号 -想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 +想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： -![](http://img.smyhvae.com/2016040102.jpg) +![](http://img.smyhvae.com/20190101.png) + + +