JavaScript 重点详解终结篇(五)

╰半橙微兮° 2023-02-23 15:23 94阅读 0赞

**目录**

一.JS数组

二. 获取元素的四种方式【重点】

三. DOM对象

1.DOM简述（了解）

2. DOM和BOM关系（了解）

3. 节点属性【重点】

四. JS事件总结【重点】

五.JS-全局函数

六. JS-扩展知识（了解）

--------------------

# 一.JS数组 #

JS数组  相当于Java的ArrayList

<table style="width:492.65pt;"> 
 <tbody> 
 <tr> 
 <td style="width:141.65pt;"> 方式 </td> 
 <td style="width:351pt;"> 方式说明 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:141.65pt;"> var arr = [1,2,3,”a”,true]; </td> 
 <td style="vertical-align:top;width:351pt;"> 常用的JS数组创建方式。 数组长度为5 <img alt="" height="219" src="https://img-blog.csdnimg.cn/20200707220432486.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1MTMx,size_16,color_FFFFFF,t_70" width="474"> &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:141.65pt;"> var arr = new Array(); </td> 
 <td style="vertical-align:top;width:351pt;"> 常用的JS数组创建方式。创建一个数组对象，数组长度默认为0 &nbsp; &nbsp; <img alt="" height="215" src="https://img-blog.csdnimg.cn/20200707220502490.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1MTMx,size_16,color_FFFFFF,t_70" width="485"> </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:141.65pt;"> var arr = new Array(4); &nbsp; </td> 
 <td style="vertical-align:top;width:351pt;"> 数组长度是4，相当于开辟了长度为4的空间，每个元素是undefined。 &nbsp; <img alt="" height="216" src="https://img-blog.csdnimg.cn/2020070722052616.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1MTMx,size_16,color_FFFFFF,t_70" width="484"> &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:141.65pt;"> var arr = new Array(“a”,”b”,true); </td> 
 <td style="vertical-align:top;width:351pt;"> 创建了一个数组，长度3, 数组元素是”a”,”b”,true &nbsp; <img alt="" height="220" src="https://img-blog.csdnimg.cn/20200707220543689.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzA1MTMx,size_16,color_FFFFFF,t_70" width="486"> &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

代码:

![20200707221336584.png][]

# 二. **获取元素的四种方式【重点】** #

<table style="width:423.6pt;"> 
 <tbody> 
 <tr> 
 <td style="width:166.1pt;"> 方法名 </td> 
 <td style="width:257.5pt;"> 方法说明 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:166.1pt;"> getElementById(id值) </td> 
 <td style="vertical-align:top;width:257.5pt;"> 通过元素的ID值 获取到某个元素对象 &nbsp; 找到对象返回元素对象 找不到对象，返回null &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:166.1pt;"> getElementsByName(name值) </td> 
 <td style="vertical-align:top;width:257.5pt;"> 通过元素的name值 获取到所有符合要求的元素对象 &nbsp; 找到对象返回数组 找不到返回空数组 &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:166.1pt;"> getElementsByTagName(标签名) </td> 
 <td style="vertical-align:top;width:257.5pt;"> 通过元素的标签名 获取到所有符合要求的元素对象 &nbsp; 找到对象返回数组 找不到返回空数组 &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:166.1pt;"> getElementsByClassName(class值) </td> 
 <td style="vertical-align:top;width:257.5pt;"> 通过元素的class值 获取到所有符合要求的元素对象 &nbsp; 找到对象返回数组 找不到返回空数组 &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

代码:

# 三. **DOM对象** #

## 1.**DOM简述（了解）** ##

DOM是将标记型文档中所有内容（标签、文本、属性）都封装成对象，

*  一个HTML文档加载到内存中就会形成一个DOM对象

## 2. **DOM和BOM关系（了解）** ##

**BOM包含DOM**

**BOM：window**

**DOM：document**

**window.document**

## 3. **节点属性【重点】** ##

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="width:182.2pt;"> 属性 </td> 
 <td style="width:243.9pt;"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:182.2pt;"> parentNode </td> 
 <td style="vertical-align:top;width:243.9pt;"> 返回节点的父节点 </td> 
 </tr> 
 </tbody> 
</table>

代码:

# 四. **JS事件总结【重点】** #

<table style="margin-left:-5.65pt;width:429.25pt;"> 
 <tbody> 
 <tr> 
 <td style="width:140.1pt;"> 事件名 </td> 
 <td style="width:289.15pt;"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:140.1pt;"> onload </td> 
 <td style="vertical-align:top;width:289.15pt;"> 某个页面或图像被完成加载 时触发 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:140.1pt;"> onsubmit </td> 
 <td style="vertical-align:top;width:289.15pt;"> 提交按钮被点击时触发 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:140.1pt;"> onclick </td> 
 <td style="vertical-align:top;width:289.15pt;"> 点击某个对象 时触发 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:140.1pt;"> ondblclick </td> 
 <td style="vertical-align:top;width:289.15pt;"> 双击某个对象 时触发 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:140.1pt;"> onblur </td> 
 <td style="vertical-align:top;width:289.15pt;"> 元素失去焦点 时触发 失去焦点前提：必须先获取焦点 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:140.1pt;"> onfocus </td> 
 <td style="vertical-align:top;width:289.15pt;"> 元素获得焦点 时触发 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:140.1pt;"> onchange </td> 
 <td style="vertical-align:top;width:289.15pt;"> 域的内容被用户改变 时触发 </td> 
 </tr> 
 </tbody> 
</table>

焦点（关注点）：**一个网页只有一个焦点**

焦点在输入框中有直接体现：闪烁的光标

案例:

> * 需求：校验用户名框体*  
> *     框体失去焦点时*  
> *     判断用户名的长度是否在6~10之间。*  
> *         符合要求：用户名后面√*  
> *         不符合要求：用户名后面×*

代码:

鼠标键盘事件：

<table style="margin-left:-5.65pt;width:429.25pt;"> 
 <tbody> 
 <tr> 
 <td style="width:140.1pt;"> 事件名 </td> 
 <td style="width:289.15pt;"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:140.1pt;"> onkeydown&nbsp; </td> 
 <td style="vertical-align:top;width:289.15pt;"> 某个键盘的键被按下 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:140.1pt;"> onkeypress </td> 
 <td style="vertical-align:top;width:289.15pt;"> 某个键盘的键被按下或按住 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:140.1pt;"> onkeyup&nbsp; </td> 
 <td style="vertical-align:top;width:289.15pt;"> 某个键盘的键被松开、弹起 前提：必须先按下 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:140.1pt;"> onmousedown </td> 
 <td style="vertical-align:top;width:289.15pt;"> 某个鼠标按键被按下 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:140.1pt;"> onmouseup </td> 
 <td style="vertical-align:top;width:289.15pt;"> 某个鼠标按键被松开 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:140.1pt;"> onmouseover </td> 
 <td style="vertical-align:top;width:289.15pt;"> 鼠标被移到某元素之上 &nbsp;&nbsp;移入 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:140.1pt;"> onmouseout </td> 
 <td style="vertical-align:top;width:289.15pt;"> 鼠标从某元素移开 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;移出 前提：必须先移入 </td> 
 </tr> 
 </tbody> 
</table>

# 五.**JS-全局函数** #

eval():把字符串作为JavaScript代码执行。

> 适用环境：
> 
> 1、灵活使用JS代码（传入字符串，变为JS代码执行）
> 
> 2、JSON（后期）

**isNaN()**：判断某个值 是否为非数字（NaN）。

> **URL/URI编码：中文及特殊符号   %16进制**
> 
> **作用：保证数据传递的完整性。**
> 
>  
> 
> **encodeURI():编码**
> 
> **decodeURI():解码**

> 字符串转数字：
> 
> parseInt(string);    string按照字面值转换为整数类型，小数点后面部分不关注。
> 
> **parseFloat(****string****)**; string按照字面值转换为小数类型。

# 六. **JS-扩展知识（了解）** #

for..in  循环

Array方法

<table style="width:492.65pt;"> 
 <tbody> 
 <tr> 
 <td style="width:111.75pt;"> 常用属性和方法 </td> 
 <td style="width:380.9pt;"> 描述 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:111.75pt;"> length属性 </td> 
 <td style="vertical-align:top;width:380.9pt;"> 数组中成员个数 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:111.75pt;"> join(separator) </td> 
 <td style="vertical-align:top;width:380.9pt;"> 把数组的所有成员使用分隔符separator拼凑成一个字符串 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:111.75pt;"> pop() </td> 
 <td style="vertical-align:top;width:380.9pt;"> 删除并返回数组的最后一个元素 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:111.75pt;"> push(val,….) </td> 
 <td style="vertical-align:top;width:380.9pt;"> 向数组的末尾添加一个或更多元素，并返回新的长度。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:111.75pt;"> reverse() </td> 
 <td style="vertical-align:top;width:380.9pt;"> 颠倒数组中元素的顺序。 </td> 
 </tr> 
 </tbody> 
</table>

代码:

看完恭喜你,又知道了一点点!!!

**你知道的越多,不知道的越多! **

**~感谢志同道合的你阅读,  你的支持是我学习的最大动力 ! ****加油 ,陌生人一起努力,共勉!!**

> **注: 如果本篇有需要改进的地方或错误,欢迎大神们指定一二~~**

[20200707221336584.png]: https://img-blog.csdnimg.cn/20200707221336584.png