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关键字。### JavaScript的匿名函数## JavaScript变量的作用域### 局部 JavaScript 变量在 JavaScript 函数内部声明的变量(使用 var)是 变量，所以只能在函数内部访问。在不同的函数中可以声明名称相同变量，因为局部变量出该函数就失效了。### 全局 JavaScript 变量在函数外声明的变量是 变量，网页上的所有脚本和函数都能访问它。
### 变量的生命周期JavaScript 变量的生命期从它们被声明的时间开始。 局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。## JavaScript自定义对象对象也是一个变量，但对象可以包含多个值(多个变量)### 定义对象对象中可以有属性，也可以有方法### 对象的属性可以说 “JavaScript 对象是变量的容器”。 但是，我们通常认为 “JavaScript 对象是键值对的容器”。 键值对通常写法为 name : value (键与值以冒号分割)。 键值对在 JavaScript 对象通常称为 对象属性。### 访问对象的属性//访问对象的属性
//方式1:
var n = student.name;
//方式2:
var n2 = student[“name”];
### 访问对象的方法## 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 模型被构造为对象的树:** 通过可编程的对象模型，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()方法**这是一个段落。
这是另外一个段落。
#### 删除HTML元素**-removeChild()方法**这是一个段落。
这是另外一个段落。
## 表单验证### 表单验证意义与场景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 = /1+[\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案例### 全选/全不选} }
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以其美观、快速、高效、开放等优势迅速俘获人心
a-zA-Z ↩︎