Web前端：JavaScript最强总结 附详细代码 （带常用案例！）_javascript在前端的应用

console.log(parseFloat(“199.99”));//199.99
console.log(parseFloat(“1024 2048 4096”));//1024
console.log(parseFloat(" 128 "));//128
console.log(parseFloat(“10年”));//10
console.log(parseFloat(“今天是8号”));//NaN

* 字符串中只返回第一个数字。
* 开头和结尾的空格是允许的。
* 如果字符串的第一个字符不能被转换为数字，那么 parseFloat() 会返回 NaN。


**parseInt(string,radix)**


可解析一个字符串，并返回一个整数




| 参数 | 描述 |
| --- | --- |
| string | 必需，要被解析的字符串。 |
| radix | 可选，表示要解析的数字的基数。该值介于 2 ~ 36 之间 |


当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。  
 当忽略参数 radix , JavaScript 默认数字的基数如下:


* 如果 string 以 “0x” 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数
* 如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进 制或十六进制的数字
* 如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数

console.log(parseInt(“66”));//66
console.log(parseInt(“199.99”));//199
console.log(parseInt(“1024 2048 4096”));//1024
console.log(parseInt(" 128 "));//128
console.log(parseInt(“10年”));//10
console.log(parseInt(“今天是8号”));//NaN
console.log(parseInt(“10”,10));//10
console.log(parseInt(“010”));//10
console.log(parseInt(“10”,8));//8
console.log(parseInt(“0x10”));//16
console.log(parseInt(“10”,16));//16

PS:旧浏览器由于使用旧版本的ECMAScript(ECMAScript版本小于ECMAScript 5，当字符串以"0"开 头时默认使用八进制，ECMAScript 5使用的是十进制)，所以在解析(“010”) 将输出8。

* 只有字符串中的第一个数字会被返回。
* 开头和结尾的空格是允许的。
* 如果字符串的第一个字符不能被转换为数字，那么 parseInt() 会返回 NaN。 在字符串以"0"为开始时旧的浏览器默认使用八进制基数。ECMAScript 5，默认的是十进制 的基数。


### JavaScript的自定义函数


**自定义函数语法**  
 **使用function关键字定义函数**

function 自定义函数名称(参数列表){
//函数体
}

**自定义函数实例**  
 注意:1、函数的形参直接写参数名称，不需要声明类型，即不需要写var.  
 2、函数的返回取决于函数体中是否有return关键字。


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210330110632287.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1MjIxMjM5,size_16,color_FFFFFF,t_70)


### JavaScript的匿名函数


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210330110651867.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1MjIxMjM5,size_16,color_FFFFFF,t_70)


## JavaScript变量的作用域


### 局部 JavaScript 变量


在 JavaScript 函数内部声明的变量(使用 var)是 变量，所以只能在函数内部访问。


在不同的函数中可以声明名称相同变量，因为局部变量出该函数就失效了。


### 全局 JavaScript 变量


在函数外声明的变量是 变量，网页上的所有脚本和函数都能访问它。

### 变量的生命周期


JavaScript 变量的生命期从它们被声明的时间开始。  
 局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。


## JavaScript自定义对象


对象也是一个变量，但对象可以包含多个值(多个变量)


### 定义对象


对象中可以有属性，也可以有方法


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210330111033216.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1MjIxMjM5,size_16,color_FFFFFF,t_70)


### 对象的属性


可以说 “JavaScript 对象是变量的容器”。  
 但是，我们通常认为 “JavaScript 对象是键值对的容器”。  
 键值对通常写法为 name : value (键与值以冒号分割)。  
 键值对在 JavaScript 对象通常称为 对象属性。


### 访问对象的属性

//访问对象的属性
//方式1:
var n = student.name;
//方式2:
var n2 = student[“name”];

### 访问对象的方法


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210330112001412.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1MjIxMjM5,size_16,color_FFFFFF,t_70)


## JavaScript Window–浏览器对象模型


浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。



> 
> BOM:Browser Object Model，中文浏览器对象模型。
> 
> 
> 


虽然现在BOM尚无正式标准，但是由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同 方法和属性，因此window常被认为是 BOM 的方法和属性。


### window对象


所有浏览器都支持 window 对象。它表示浏览器窗口。( 没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象)。


所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。 全局变量是 window 对象的属性。


全局函数是 window 对象的方法。


Window 对象表示浏览器中打开的窗口。


### window对象属性




| 属性 | 描述 |
| --- | --- |
| document | 对 Document 对象的只读引用 |
| history | 对 History 对象的只读引用 |
| location | 用于窗口或框架的 Location 对象 |
| name | 设置或返回窗口的名称 |


#### history对象


window.history 对象包含浏览器的历史。  
 window.history对象在编写时可不使用 window 这个前缀。


常用方法:


* history.back() - 与在浏览器点击后退按钮相同
* history.forward() - 与在浏览器中点击向前按钮相同
* history.go(1/-1)  
 参数为1:等同于 history.forward()，  
 参数为-1，等同于 history.back()

前进
后退
前进go
后退go

#### location对象


window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。


**常用属性和方法:**


* window.location 对象在编写时可不使用 window 这个前缀。
* href 当前窗口正在浏览的网页地址
* replace(url) 转向到url网页地址
* reload() 重新载入当前网址，如同按下刷新按钮

获取当前页面的URL地址
刷新

跳转到index

跳转到百度

### window对象方法




| 方法 | 描述 |
| --- | --- |
| alert() | 显示带有一段消息和一个确认按钮的警告框 |
| confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框 |
| prompt() | 显示可提示用户输入的对话框 |
| open() | 设置或返回窗口的名称 |
| close() | 打开一个新的浏览器窗口或查找一个已命名的窗口 |
| setTimeout() | 关闭浏览器窗口 |
| setInterval() | 在指定的毫秒数后调用函数或计算表达式 |
| clearInterval() | 取消由 setInterval() 设置的 timeout |
| clearTimeout() | 取消由 setTimeout() 方法设置的 timeout |


#### 打开和关闭浏览器案例

打开百度
打开-index
关闭当前页面

#### 弹框案例

#### 定时器案例

div--显示时间1

停止定时器clearInterval

div--显示时间2

停止定时器clearTimeout

## JavaScript之事件


HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。


### HTML事件


HTML 事件可以是浏览器行为，也可以是用户行为。


例如页面加载完成、你点击个按钮、文本框输入了文字等等，都是HTML事件的案例。


通过当事件发生时，我们希望可以做些事情，例如点击完毕按钮之后希望跳转页面、文本框输入完毕之 后验证有效性等，那么这些要做的事情我们就可以通过JavaScript实现。


### 常用的HTML事件




| 事件 | 描述 |
| --- | --- |
| onchange | HTML 元素改变 |
| onclick | 用户点击 HTML 元素 |
| onmouseover | 用户在一个HTML元素上移动鼠标 |
| onmouseout | 用户从一个HTML元素上移开鼠标 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已完成页面的加载 |
| onfocus | 元素获取焦点时触发 |
| onblur | 元素失去焦点时触发 |

<body onload="myLoad()">
    <input id="userName" onkeydown="fun5()" onfocus="fun6()" onblur="fun7()"/>
    <input id="password" type="password" />
    <button id="btn" type="button" onclick="fun2()"  
	onmouseover="fun3()" onmouseout="fun4()">点击我试试</button>
	
	<select id="month" onchange="fun1()"> 
		<option>1月份</option> 
		<option>2月份</option>
    </select>
</body>

## JavaScript之DOM模型


通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。



> 
> DOM:Document Object Model,文档对象模型
> 
> 
> 


当网页被加载时，浏览器会创建页面的文档对象模型


**HTML DOM 模型被构造为对象的树:**


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210330114747104.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1MjIxMjM5,size_16,color_FFFFFF,t_70)  
 通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML：


* JavaScript 能够改变页面中的所有 HTML
* 元素 JavaScript 能够改变页面中的所有 HTML 属性
* JavaScript 能够改变页面中的所有 CSS 样式
* JavaScript 能够对页面中的所有事件做出反应


### document对象


当浏览器载入 HTML 文档, 它就会成为 **Document 对象**


Document 对象是 HTML 文档的根节点  
 Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问


**提示:** Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。


### document对象常用方法


#### 查找 HTML 元素常用方法




| 方法 | 描述 |
| --- | --- |
| document.getElementById() | 返回对拥有指定 id 的第一个对象的引用。 |
| document.getElementsByClassName() | 返回文档中所有指定类名的元素集合，作为 NodeList 对象 |
| document.getElementsByTagName() | 返回带有指定标签名的对象集合 |
| document.getElementsByName() | 返回带有指定名称的对象集合 |

div

• li11111111111
• li11111111111
• li11111111111
• li11111111111

#### 修改 HTML 内容和属性


**修改内容**


修改 HTML 内容的最简单的方法是使用 innerHTML 属性

修改 HTML 元素的内容的语法:
document.getElementById(id).innerHTML= HTML。

**PS: 绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档**


**修改 HTML 属性**

修改 HTML 元素属性的语法:
方式1:
document.getElementById(id).attribute=新属性值;

方式2:
document.getElementById(id).setAttribute(属性名，属性值);

div

var mydiv=document.getElementById("mydiv"); mydiv.innerHTML="新的div内容"; document.getElementById("myimg").src="x1.jpg";

hello world

var h1=document.getElementById("myh1"); h1.setAttribute("class","bg");//设置属性 console.log(h1.getAttribute("class"));//获取属性class console.log(h1.getAttribute("style"));//获取属性style

#### 修改 HTML 元素的css


修改 HTML 元素css的语法:  
 document.getElementById(id).style.property=新样式

document.getElementById(“myli”).style.color=“blue”;
document.getElementById(“myli”).style.fontFamily=“微软雅黑”;
document.getElementById(“myli”).style.fontSize=“24px”;

### HTML DOM 元素 (节点)


#### 创建新的 HTML 元素


要创建新的 HTML 元素 (节点)需要先创建一个元素，然后在已存在的元素中添加它。

动态添加一个元素-- appendChild
动态添加一个元素-- insertBefore

这是段落1

这是段落2

#### 替换 HTML 元素


**-replaceChild()方法**

这是一个段落。

这是另外一个段落。

替换p1

#### 删除HTML元素


**-removeChild()方法**

这是一个段落。

这是另外一个段落。

删除p1-方式1 删除p1-方式2

## 表单验证


### 表单验证意义与场景


1. 降低服务器压力  
 拦截不合格的数据，避免直接提交到服务器，可以显著降低服务器开销
2. 提升用户体验  
 早期的互联网，表单项都是非常多的，注册个账号，经常需要填写20+个字段。而其中有一个填写不正 确就要等待几十秒时间。如果有了表单验证，反馈是实时的，而且脚本还能把你定位到填写错误的具体 字段。现在虽然无刷新技术早已普及，但是只依赖服务端验证，还是会有几百毫秒的延迟，实际使用会 有一种很难受的粘滞感。


### 表单验证常用事件与属性


表单经常需要做一些非空验证、长度验证、合法性验证等。

英雄会注册

\*用户名: 用户名长度至少6位
\*密码: 密码长度至少8位
\*确认密码: 确认密码与密码一致
\*性别: 请选择性别 女 男

注册 重置

## JavaScript的 RegExp 对象


### 概念


RegExp:是正则表达式(regular expression)的简写。


正则表达式(英语:Regular Expression，在代码中常简写为regex、regexp或RE)使用单个字符串来 描述、匹配一系列符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换。


### 语法


语法:

var reg=new RegExp(/正则表达式主体/,修饰符(可选)); 或更简单的方法
var reg=/正则表达式主体/修饰符(可选);

案例:
var reg=new RegExp(/kaikeba/i);
var reg = /kaikeba/i; //此处定义了一个一个正则表达式。 kaikeba 是一个正则表达式主体 (用于检索)。
i 是一个修饰符 (搜索不区分大小写)。

### 修饰符




| 修饰符 | 描述 |
| --- | --- |
| i | 执行对大小写不敏感的匹配 |
| g | 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止) |
| m | 执行多行匹配 |


### 正则表达式模式


方括号用于查找某个范围内的字符:




| 表达式 | 描述 |
| --- | --- |
| [a-z] | 查找方括号之间的任何字符 |
| [0-9] | 查找任何从 0 至 9 的数字 |
| (xIy) | 查找任何以 I 分隔的选项 |


**元字符是拥有特殊含义的字符:**




| 元字符 | 描述 |
| --- | --- |
| \d | 查找数字 |
| \s | 查找空白字符 |
| \b | 匹配单词边界 |
| \uxxxx | 查找以十六进制数 xxxx 规定的 Unicode 字符 |


**量词:**




| 量词 | 描述 |
| --- | --- |
| n+ | 匹配任何包含至少一个 n 的字符串 |
| n\* | 匹配任何包含零个或多个 n 的字符串 |
| n? | 匹配任何包含零个或一个 n 的字符串 |


### 正则表达式的方法test(str)


test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

var reg = /budingCode/i;
var res=reg.test(“欢迎关注budingCode”);
console.log(res);//true

var reg = /¹+[\u4e00-\u9fa5]*[0-9]$/;
var str=“a公司拼音为9”;
var res=reg.test(str); console.log(res);//true
console.log(reg.test(“a你好239”));//false

### 常用的正则表达式校验案例

## JavaScript案例


### 全选/全不选


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210330122953616.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzU1MjIxMjM5,size_16,color_FFFFFF,t_70)

} }
all.checked=true;
}

全选	序号	名称	单价	数量	总计
	1	小熊饼干1	¥125	1	¥125
	1	小熊饼干2	¥125	1	¥125
	1	小熊饼干3	¥125	1	¥125

### 动态表格




| 表格的属性和方法 | 描述 |
| --- | --- |
| table.rows | 获取表格中的所有行 |


# 学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心



       </script>
    </head>
    <body>
        <table id="myTable" border="1" cellpadding="0" cellspacing="0" width="90%" height="180px">
            <tr>
				<th>全选<input id="all" type="checkbox" onclick="myAll()"/>
				</th> <th>序号</th>
				<th>名称</th>
				<th>单价</th>
				<th>数量</th>
				<th>总计</th> </tr>
			</tr>
			<tr>
				<td><input name="one" type="checkbox" onclick="myOne()"/></td> 
				<td>1</td>
				<td>小熊饼干1</td>
				<td>¥125</td>
				<td>1</td>
				<td>¥125</td>
			</tr> 
			<tr>
				<td><input name="one" type="checkbox" onclick="myOne()"/></td> 
				<td>1</td>
				<td>小熊饼干2</td>
				<td>¥125</td>
				<td>1</td>
				<td>¥125</td>
			</tr> 
			<tr>
				<td><input name="one" type="checkbox" onclick="myOne()"/></td> 
				<td>1</td>
				<td>小熊饼干3</td>
				<td>¥125</td>
				<td>1</td>
				<td>¥125</td>
			</tr> 
        </table>
    </body>
</html>

动态表格

表格的属性和方法	描述
table.rows	获取表格中的所有行

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

---

1. a-zA-Z ↩︎