JavaScript大集合笔记

JavaScript

一、JavaScript简介

1. 什么是JavaScript？

JavaScript简称JS，由网景分公司开发的客户端脚本语言，不需要编译，可以直接执行

补充：

机器语言（0,1代码）-----汇编语言（助记符)------高级语言（ ① 解释 ②编译）

高级语言---->编译obj目标程序文件---->连接link.exe可执行性文件

解释：

WEB前端三层：

结构层HTML，定义页面的结构
样式层CSS，定义页面的样式
行为层JavaScript，用来实现交互，提升用户体验

2. JavaScript作用

在客户端动态的操作页面
在客户端数据的校验
在客户端发送异步请求

二、引用方式

1. 内联方式

在页面中使用script标签，在script标签的标签中编写js代码

 <script>js代码；</script>

2. 行内方式

在普通的标签中编写js代码，一般需要结合事件属性，如onclick、onmouseover等

对象：客观存在的，并且可以相互区别的事物----如：各种标签

eg:对象：

外观-----宽度、高度，背景色----CSS
事件------多态性同一个事件发生的对象不同，所引发的反应也不同

3. 外部方式

使用单独的.js文件定义，然后在页面中使用script标签引入外部脚本文件

 <script type="text/javascript" src="/js/hello.js"></script>

注意：如果某个script标签用于引入外部的js文件，则该script标签的标签中不能再写js代码

三、基本用法

1. 变量

js是一门弱类型的语言，声明变量时使用var关键字，不需要指定变量的类型

语法：var 变量名=常数或表达式；

注意：

1. 由字母，数字，汉字，下划组成
2. 由字母，汉字，下划线开头
3. 不能和保留字同名
4. 大小写敏感

回忆：

数据类型：常量和变量

常量：具体的值，不变的量----常数项

变量：变化的量，存放常量的是—容器

int a,b,c; //变量在使用前必须强制进行定义或声名
a= 10;//将整型常量10放到整型变量a
b= 20;
c= a + b;//将a+b的和赋值给整型变量c
print("c=%d",c)

在ECMAScript 6规范中新增let关键字，也用于声明变量

使用let声明的变量支持模块级作用域，而使用var声明的变量不支持模块级作用域

注：在IDEA中配置ES版本settings–>Language&FrameWorks–>JavaScript–>JavaScript Version

2. 输入和输出

输出：

alert() 弹出警告框
console.log() 输出到浏览器的控制台
document.write() 输出到页面

输入：

prompt() 弹出一个输入框，获取用户输入的数据

使用typeof 变量名判断变量的类型

使用Number(变量名)将字符串转换为数值

3. 转义字符

常用转义字符

\n换行
\t制表位，缩进
\"双引号
\'单引号
\a响铃，警告

4. 注释

单行注释：//

多行注释：/* */

5. 编码规范

代码区分大小写

每条语句以分号结尾

代码缩进

四、核心语法

1. 数据类型

常量：具体的值 eg:‘abc’ ‘20’ 3.14 100

变量：存放常量的量—容器

基础数据的类型：

string字符串
number 数值（NaN表示非数字Not a Number,其自身是number类型,表示数值是不正常状态）
boolean布尔
null空类型
undefined未定义类型

数据类型转换：

转换为number

使用Number()、parselnt()、parsFloat()
转换为string

拼接空字符串
转换为布尔

使用Boolean()

注意：0、空字符串、undefined、null、NaN会被转换为逻辑假false，其他的类型在转换为布尔时，转换为true

2. 运算符

算术运算符：+、-、*、/、%、**、++、–

比较运算符：>、>=、<、<=、==、= = =、！=

赋值运算符：=、+=、-=、*=、/=、%=、**=

逻辑运算符：&&并且、||或、！非

条件运算符：条件？表达式1：表达式2

3. 选择结构

if…else、switch

4. 循环结构

while、do…while、for、for…in

break、continue

break:退出整个循环

continue:结束本次循环，返回到条件判断处继续进行下一次是否执行循环的条件判断

 /*for...in...对集合进行遍历*/var str = 'welcome to JavaScript';for(var s in str)// console.log(s);//输出字符串的索引或下标console.log([s]);

5.数组

5.1 定义方式

语法

var arr = new Array();
var arr = new Array(值1，值2,.....);
var arr = [值1，值2,.....]

注意：

数组长度会自动扩展
数组中元素的默认值为undefined
使用数组的length属性可以获得数组的长度（数组中有多少个元素）

5.2 常用方法

方法	描述
sort()	排序，默认按字符编码的顺序排列，非string类型会自动转换为string，可自定义比较规则
reverse()	反转，将数组元素倒序排列
join(separator)	将数组中元素使用指定的分隔符链接成字符串，默认通过逗号进行连接
indexOf()	返回指定元素在数组中首次出出的位置
slice(beign,end)	截取数组中索引从beign到end的元素，左闭右开，如果省略第二个参数，则表示截取到末尾
toString()	将数组转换为字符串

5.3 二维数组

二维数组可以认为是特殊的的一维数组，即一维数组中的每个元素又是一个一维数组

语法：

var arr = new Array();
arr[0] = new Array();
arr[1] = new Array();
arr[][]=值;var arr = [[值1，值2...],[值1，值2...],[值1，值2...]
]

6. 函数

6.1 自定义函数

语法：

function 函数名（参数1，参数2...）
{函数体；
}

注意：

定哟函数时不需要指定参数的类型
实参个数和形参个数可以不同，未给形参传入实参的，其默认值为undefined
不需要指定返回值的类型，如果有返回值，直接使用return返回
如果函数中没有使用return语法返回值，则默认返回undefined

变量的作用域：

局部作用域

在函数中声明的变量，只能在该函数内访问，函数运行结束后变量自动销毁
全局作用域

在函数外部声明的变量，在任何位置都可以访问
块级作用域

使用let关键字声明变量，只能在声明它的代码块内访问

6.2 回调函数

不会立即执行函数调用，满足一定条件时才会执行或者由别的代码调用执行，称为回调函数callback

调用时只写函数名，没有小括号（）和参数

应用：

作为事件绑定的函数
作为另一个函数的参数

6.3 匿名函数

没有名字的函数，称为匿名函数，一般用于回调

应用场景：

用于函数的回调

 window.onclick=function () {console.log(111);
};

用于一次性执行的函数，会自动执行，称为自动执行函数-----用于定义一个插件
```
(function () {console.log(333);})()
```

6.4 箭头函数

ES6中允许使用箭头=>定义函数，称为箭头函数，也叫lambda表达式，也是一种特殊匿名函数

五、复合数据

1. string

1.1 定义方式

语法:

var str = 'welcome';//基本数据类型string
var str = new String('welcome');//引用数据类型string

使用length属性获取字符串的长度

1.2 常用方法

方法	描述
charAt()	返回在指定索引位置的字符，也可以使用`[索引]`的方式
indexOf()	返回某个指定的字符串在原字符串中首次出现的位置
lastindexOf()	返回某个指定的字符串在原字符串中最后出现的位置
toLowerCase()	将字符串转换为小写字母
toUpperCase()	将字符串转换为大写字母
subString()	提取字符串两个指定的索引号之间的字符
replace()	将指定的字符串替换为新的字符串
split()	将字符串分隔为字符串数组
trim()	去除字符串前后两端的空格

2. Date

2.1 定义方式

语法：

var date = new Date();//定义一个日期对象，表示当前时间
var date = new Date(year,month,day,hour,minute,second);//参数为指定的年，月，日，时，分，秒
var date = new Date(millSeconds);//参数为当前时间与1970-1-1 0:0:0相差的毫秒数

2.2 常用方法

方法名	说明
getFullyare()	以四位数返回年份
getMonth()	返回月份[0,11]，0表示1月
getDate()	返回一个月中某一天（1-31）
getHours()	返回小时（0,23）
getMinutes()	返回分钟（0,59）
getSeconds()	返回秒数（0,59）
getMillseconds()	返回毫秒（0-999）
getDay()	返回一周中某一天（0-6），0表示周数
getTime()	返回从1970-1-1 0:0:0至今相差的毫秒数

3. JSON

3.1 JSON简介

JavaScript object Notation是一种轻量级的数据交换格式，用于表示JavaScript对象的一种方式

采用与编程语言无关的文本格式，易于阅读和编写，同时也易于解析和生成

3.2 基本用法

语法{"属性名"：属性值，"属性名"：属性值,.....}

注意：

JSON结构是由一系列的键值对所组成的的，称为JSON对象
属性名必须用双引号括起来

使用：

简单的JSON对象
复合属性，属性的值为JSON对象
JSON对象的集合

3.3 JSON转换

JSON转换为字符串

var person = {"name":"hector","age":20,"height":180.5
};
var str = JSON.stringfy(person);

字符串转换为JSON

var user = '{"name":"tom","age":20}';
var obj = JSON.parse(user);
var users = '[{"id":"9527","username":"admin","password":"123","status":1},{"id":"9528","username":"admin","password":"111","status":1}]'
var obj = JSON.parse(users);

4. 对象类型

4.1 对象简介

补充：

1.对象：客观存在的并且可以互相区别的事物 eg：一个同学一本书页面上的命令按钮复选框

2.描述一个对象

属性-----外观，长相

方法-----行为模式-----干什么

事件-----单击，双击

3.对象有三个基本特征：封装、继承和多态

对象类型可以理解为JAVA中的引用数据类型

JavaScript是面向对象的语言，但并不是人们常说的纯粹的面向对象的语言，因为它不支持某些特征

4.2 创建对象

三种方式

使用Object

//新创建的对象没有属性和方法
var 对象名 = new Object();
//为对象添加属性
对象名.属性名 = 属性值;
//为对象添加方法
对象名.方法名 = function{方法体;
};
//调用属性和方法
对象名.属性名 或 对象名['属性名'];
对象名.方法名

使用构造函数，模拟类的定义，相当于自定义了一个类型

function 构造函数名(形参1,形参2,....){//为了区别于普通函数，构造函数名建议首字母大写this.属性名=形参1;this.属性名=形参2;this.方法名=function(){方法体;};
}

使用JSON格式定义对象，一般只在JSON对象中定义属性

var JSON对象 ={属性名:属性值,//属性名和方法名可不用加引号属性名:属性值,...
};

六、DOM操作

1. DOM简介

Document Object Model文档对象模型

浏览器加载html文档时，会将html文档解析为一个树形结构，称为DOM树

HTML文档和DOM树节点是——对应的关系
当DOM树被改变时，与之对应的HTML文档会随之改变
当需要对HTML中内容进行动态改变时，可以使用DOM来进行操作
DOM提供了一组用来操作html文档的API，即提供了一套属性、方法和事件
树上的每个节点都量一个DOM对象，树的顶层为documen对象，表示整个文档

2. 查询操作

即获取DOM对象

方法和属性	含义
document.getElementById(“id值”)	根据id属性来查询节点，返回匹配的第一个节点
document.getElementsByName(“name属性值”)	根据name属性来查询，返回所有匹配的节点集合
document.getElementsByTagName(“标签名”);	根据标签名来查询，返回所有匹配的节点集合
document.querySelector(“选择器”)	根据css选择器来查询，返回匹配的第一个节点
document.querySelectorAll(“选择器”)	根据css选择器来查询，返回所有匹配的节点集合
parentNode属性	查询当前节点的父节点
previousSibling属性	查询当前节点的上一个节点
nextSibling属性	查询当前节点的下一个节点
firstChild属性	查询当前节点的第一个节点
lastChild属性	查询当前节点的最后一节点

3. 访问操作

3.1 访问属性

即获取/设置DOM对象的属性

DOM对象的属性和HTML标签的属性几乎是一样的，一般情况下DOM对象都会存在一个与应对的HTML标签同名的属性

用法：DOM对象、属性

3.2 访问内容

即获取/设置标签中的内容

两种方式：

使用innerHTML

用法：DOM对象.innerHTML即内容解析为HTML
使用innertText

用法：DOM对象.innertText将内容作为纯文本

3.3 访问CSS

即获取/设置CSS样式

两种方式：

使用style属性

用法：DOM对象.style.样式属性

如果CSS属性中有短横线-.需要在访问时去掉短横线，然后将其后的单词首字改为大写
使用className属性

用法：DOM对象.className

4.添加操作

方法	含义
document.createElement(“标签名”)	创建一个元素节点，即标签
document.createTextNode(“文本内容”)	创建一个文本节点，即标签中的文本内容
node.appendChild(newNode)	将一个新的节点newNode添加到指定的节点node中子节点的末尾
node.insertBefore(newNode,refNode)	将一个新的节点newNode添加到node节点中子节点refNode之前
node.replaceChild(newNode,refNode)	用一个新的节点newNode替换原有的node节点中的子节点refNode

5. 删除操作

方法	含义
node.remove()	删除当前节点
node.removeChild(refNode)	删除当前节点中指定的节点

七、事件处理

1. 简介

事件：发生在HTML元素上的事情，可以是用户的行为，也可以是浏览器的行为，如：

用户点击了某个HTML元素
用户将鼠标移动到某个HTML元素上‘
用户输入数据时光标离开
页面加载完成

事件源：事件触发的源头，即触发事件的元素，如按钮、输入框、超链接等

事件对象：当一个事件发生时，这个事件相关的详细信息会保存在一个对象中，称为event对象

事件监听：监听事件的发生，绑定事件函数，当事件被触发后执行该事件的函数，即回调函数

2. 绑定事件

两种方式：

静态绑定，通过标签的事件属性绑定

<input type="button" value="按钮1" onclick="f1()">

动态绑定，通过JS代码来绑定事件

<input type="button" value="按钮" id="brn">
<script>var btn = document.getElementById("btn");btn.onclick=function{console.log("动态绑定");};
</script>

注意：

可以通过事件回调函数的第一个参数获取事件对象event
在事件回调函数中，this表示事件源，即发生事件的元素

3.常用事件

3.1 鼠标事件

事件名	描述
onclick	鼠标单击
ondblclick	鼠标双击
onmouseover	鼠标移动某元素之上
onmouseout	鼠标从某元素上移开
onmousedown	鼠标按钮被按下
onmouseup	鼠标按键被松开
onmousemove	鼠标被移动

3.2 键盘事件

事件名	描述
onkeydown	某个键盘的键被按下去
onkeyup	某个键的盘被公开
onkeypress	某个键盘的键被按下去且松开

3.3 表单事件

事件名	描述
onfocus	元素获得焦点
onblur	元素失去焦点
onchange	域的内容发生改变，一般用于文件选择器和下拉列表
onselect	文本内容被选中
onsubmit	表单提交前触发，回调函数返回true表示允许表单提交，返回false表示阻止表单提交

4. 事件操作

4.1 事件冒泡

概念：当一个HTML元素产生事件时，该事件会从当前元素（事件源）开始，往上冒泡直到页面的根元素，所有经过的节点都会收到该事件并执行

特点：先触发子级元素的事件，在触发父级元素的事件

阻止事件冒泡：event.stopPropagation()或event.cancelBubble=true;

4.2 事件默认行为

概念：当一个事件发生时浏览器自己默认做的事情，如：点击链接时默认会跳转，右键单击时默认会弹出菜单

阻止事件的默认行为：event.preventDefault()

5. 示例：下拉列表

5.1 Select和Option对象

Select对象：表示HTML表单中的一个下拉列表

属性：

length 设置或返回下拉列表中选项的数量

selectedlndex 设置或返回下拉列表中被选中项的索引

value 返回下拉列表中被选中项的值

options 返回下拉列表中所有的选项，值Option对象数组（当该数组改变时对应下拉列表的选项也会跟着改变）
方法：

add()向下拉列表中添加一个选项
事件：

onchange 下拉列表的选项改变时触发

Option对象：表示HTML表单中下拉列表的一个选项

属性：

text 设置或返回在页面中显示的文本值

value 设置或返回传递给服务器的值
构造函数：

Option（文本值，服务器值）创建一个选项

5.2 二级菜单联动

实现省市级联动的效果

八、BOM操作

1. BOM简介

JavaScript由三个部分组成

ECMAScript核心语法----JS简称ECMAScript，ES
DOM文档对象模型
BOM浏览器对象模型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r6oanF9s-1593343283769)(C:\Users\lenovo\Desktop\2020-06-19 15_08_35-PlayerPluginWnd.png)]

2. window对象

常用属性：

document、location、history等，都是子级对象

常用方法：

方法名	含义
alert(text)	显示一个带有提示信息和确认按钮的警告框
prompt(text)	显示一个带有提示信息、文本输入框、确定和取消按钮的输入框，返回值为输入的数据
confirm(text)	显示一个带有提示信息、确定和取消按钮的确认框，确定时返回true，取消时返回false
open(url,name,options)	打开具有指定名称的新窗口，并加载给定url所指定的文档
setTimeout(fn,delay)	设置一次性计时器，在指定毫秒值后执行某个函数
setInterval(fn,delay)	设置周期性计时器，周期性循环执行某个函数
clearTimeout(timer)	清楚一次性计时器
clearInterval(timer)	清楚周期性计时器

常用事件：

方法名	描述
onload	页面加载完成
onscroll	窗口滚动条滑动
onclick	鼠标单击

注意：由于window对象是BOM结构的顶层对象，所以在调用window的属性和方法时可以省略window

3. location对象

常用属性：

href 设置或返回地址栏中的url

常用方法：

reload 重新加载当前页面

4. history对象

常用方法：

方法名	含义
back()	后退，加载history列表中的上一个url
forward()	前进，加载history列表中的下一个url

九、数据校验

1. 正则表达式

1.1 简介

正则表达式是一门独立的语言，有自已的语法，用于检测指定字符串是否符合特定规则正则表达式就是用来定义规则的，称为Regular Expresstion

在JavaScript中提供了RegExp对象，表示正则表达式

1.2 定义方式

创建正则表达式对象，两种方式：

使用字变量

var reg = /pattern/attribute;

使用构造函数

var reg = new RegExp(pattern,attribute);

说明：

pattern表示匹配模式，用于指定匹配规则，由元字符、量词、特殊符号组成
attribute 表示匹配特征，取值：i忽略大小写、g全局匹配、m多行匹配

1.3 匹配规则

元字符：具有特殊含义的字符

符号	描述
\s	匹配任何的空白字符
\S	任何非空白字符
\d	匹配一个数字字符，等价于[0-9]
\D	除了数字之外的任何字符
\w	匹配一个数字、下划线或字母字符
\W	任何非单字字符，等价于匹配非数字、非下划线或非字母字符
.	匹配除换行符之外的任意字符

量词：指定字符出现的次数

符号	描述
{n}	匹配前一项的n次
{n,}	匹配前一项n次，或者多次
{n,m}	匹配前一项至少n次，但不超过m次
*	匹配前一项0次或多次，等价于{0,}
+	匹配前一项1次或多次，等价于{1,}
？	匹配前一项0次或1次，也就是说前一项是可选的，等价于{0,1}

特殊符号：具有特殊含义的符号

符号	描述
/…/	代表一个模式的开始和结束
^	匹配字符串的开始，即表示行的开始
$	匹配字符串的结束，即表示行的结束
[ ]	表示可匹配的列表
( )	用于分组
\|	表示或者
[^ ]	在[ ]中的脱字符表示非

注： [\u4E00-\u9FA5] 用于匹配中文字符

1.4 基本用法

使用正则表达式对象的test方法

语法：

var flag =reg.test(字符串);

判断字符串是否符合正则表达式对象所指定的模式规是，返回true或false

2.表单校验

2.1 目的

客户端表单校检的目的

保证输入的数据符合要求
减轻服务器的压力

2.2实现

通过onsubmit事件绑定回调函数，判断表单数据是否符合要求

如果不符合要求，则返回false
如果符合要求，则返回true

案例text01.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 1.内联方式 --><script>//alert("hello JavaScript")</script><!-- 3.引用外部的js脚本文件 --><script type="text/javascript" src="/js/hello.js">alert('呵呵呵')</script>
</head>
<body>第一个JavaScript程序<hr><!-- 2.行内方式 --><input type="button" value="点我" onclick="alert('我被点了，晕啦！')"><!-- <div onmouseover="alert('走开')">把鼠标移上来</div> --><a href="" onclick="alert('超链接被触发了！')">我是超链接</a><!-- 使用超链接href属性执行JS时必须添加javascript --><a href="javascript:alert('超链接被触发啦！')">我是超链接</a></body>
</html>

hello.js

alert('哈哈')

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EYfqkOAL-1593343283772)(C:\Users\lenovo\Desktop\js\图片\案例01.png)]

案例text02.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>//变量var namename='张无忌';name='tom';//alert('name');var 姓名姓名="赵敏"alert=(姓名)  //姓名是变量名var age=18;var a=5,b=2,c=7;var age=18;var Age=19;alert('age');sex = "male";//强烈不建议alert('sex');{// var x = 6;// alert(x);let y =10;// alert(y);}alert(y);</script>
</head>
<body></body>
</html>

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x9Lw9jqV-1593343283774)(C:\Users\lenovo\Desktop\js\图片\案例02.png)]

案例text03.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>//输出信息// alert('呵呵);// console.log('哈哈');// document.write('嘻嘻);//输入//var name=prompt("请输入你的年龄");//console.log(age,typeof age);//console.log(age+2);//age =Number(age);//console.log(age+2);//转义字符console.log('he\'llo\nworld');console.log('welcome to \n JavaScript');//这是单行注释/*这是多行注释这是多行注释*/</script>
</head>
<body></body>
</html>

案例text04.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>/*数据类型*///var name ='tom';//var age = 18;//var height = 180.5;//var flag = true;//var hobby =null;//var date = new   Date();//var arr = new Array();//console.log(typeof name);//console.log(typeof age);//console.log(typeof height);//console.log('hello'-5);//返回NaN//console.log(typeof flag);//console.log(typeof hobby);//如果数据是null、Date、Array等返回值是object//console.log(typeof date);//console.log(typeof arr);//console.log(typeof sex);//返回undefined/*类型转换*///1.转换为数值var a ='12';console.log(a,typeof a);//方式一，使用Number//a = Number(a); 赋值号=左边的a代表的是容器或本身    右边的a代表的是容器中的值//a = Number('12.5');// a = Number('12abc');// a = Number('ab12');//console.log(a,typeof a);//方式二：使用persInt()//a=parseInt(a);//a=parseInt('12.5');//a=parseInt('12abc');//按字符顺序依次进行解析//a=parseInt('abc12');//方式三：使用parseFloat()//a=parseFloat(a);//a=parseFloat('12.5');//a=parseFloat('12abc');//按字符顺序依次进行解析//a=parseFloat('abc12');//将布尔值转换为数值//a = Number(false);//js中true用1或非0表示   false用0表示//console.log(a,typeof a,typeof true);//将数值转换为字符串//var a= 12;//console.log(a,typeof a);//a = a + '';// # 后接空字符串  左边a---变量本身  右边a---值//console.log(a,typeof a);/*将数值、字符串转换为布尔*///var a = Boolean(0);//var a = Boolean('');//var a = Boolean(null);//var a = Boolean(undefined);//var a = Boolean(NaN);//var a = Boolean(4);//var a = Boolean('tom');//console.log(a,typeof a);var name ='tom';if(name){console.log(name);}</script>
</head>
<body></body>
</html>

案例text05.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>/*算术运算符：+、-、*、/、%、**、++、--*///var a= 5;//var b = 3;//var c = '2';//var c = 'aaa';//var d = true;//console.log(a+b);//console.log(a-b);//console.log(a*b);//console.log(a/b);//console.log(a%b);//console.log(a**b);//a的b次方// console.log(a-c);//会将数字字符c转换为数值，再进行算术运算//var a = 1;//var b = 2;//console.log(a++);//表达式会返回变化前a的值，表达式执行完a自加a= a + 1//console.log(a);//console.log(++a);//表达式会返回变化后a吧值，表达式执行完a也是变化后的值//console.log(a);//console.log(b--);//先引用，后加减//console.log(--b);//无自加减，后引用/*比较运算符：>、>=、<、<=、==、= = =、！=*///var a = 5;//var b = 5;//var c = false;//js中true表示为1，false表示为0//console.log(a>b);//console.log(a<b);//console.log(a>=b);//console.log(a<=b);//console.log(a==b);//只判断内容是否相等//console.log(a===b);//全等于，既要判断内容、也要判断类型//console.log(a+b);//console.log(a-b);//会将数字字符b转换为数值，再进行算术减运算//console.log(a+b);//会将数值a转换为字符串，然后进行字符串的首尾相联/*赋值运算符：=、+=、-=、*=、/=、%=、**=*///var a = 2;//console.log(a);//a = 9;//将整数9赋值给a;//console.log(a);//var a = 1;//a += 2;//a = a + 2//a**=2;//a = a ** 2//console.log(a);//逻辑运算符：&&并且、||或、|与//var x = true;//var y = false;//console.log(x&&y);//两边为真就是真，一边为假就是假//console.log(x||y);//一边为真就是真，两边为假就是假//console.log(!x);//逻辑运算短路问题//var a = 2;//var b = 5;//console.log(a && b);//console.log(a || b);/*条件运算符：条件？表达式1：表达式2*/var a = 3;var b = 2;console.log(a>b?a+b:a-b)</script>
</head>
<body></body>
</html>

案例text06.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>//使用Math对象进行数字运算，用法：Math.方法名（参数）//1.求绝对值console.log(Math.abs(-5));//2.计算次方console.log(Math.pow(2,3));//3.四舍五入console.log(Math.round(123.456));//4.向上取整，向下取整console.log(Math.ceil(3.5));//返回大于3.5的最小整数console.log(Math.floor(3.4));//返回小于等于3.5的最大整数//6.最大值，最小值console.log(Math.max(23,1,54,2,-6));console.log(Math.min(23,1,54,2,-6));//7.圆周率console.log(Math.PI);</script>
</head>
<body></body>
</html>

案例text07.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>var age = 25;if(age>=60)console.log('老年');else if(age>=30)console.log('中年');else if(age>=16)console.log('少年');elseconsole.log('童年');var day = '星期五';switch(day){case '星期一':console.log('吃包子');break;case '星期二':console.log('吃油条');break;case '星期三':case '星期四':console.log('吃面条');break;case '星期五':console.log('吃油饼');break;default:console.log('不吃了');break;}</script>
</head>
<body></body>
</html>

案例text08.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>//whilevar i =1;//循环变量赋初值var sum = 0;while(i<=100)//循环控制条件{sum += i;i++;//循环增量，使用循环趋于结束}console.log(sum);//do-whilevar i = 1;var sum =0;var cnt =0;do{if(i%7==0){sum=sum+i;cnt++;}i++;}while(i<=100);console.log(sum,cnt);//for循环var sum =0;var cnt =0;for(var i = 1;i<=100;i++)if(i%7==0) {sum += i;cnt++;}console.log(sum,cnt);/*for...in...对集合进行遍历*/var str = 'welcome to JavaScript';for(var s in str)// console.log(s);//输出字符串的索引或下标console.log([s]);</script>
</head>
<body></body>
</html>

案例text09.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>var arr = new Array();arr[0]=12;arr[1]=9;//...//console.log(arr.length);//length属性可以返回数值中有多个元素//console.log(arr[0]);//console.log(arr[1]);//console.log(arr[arr.length]);//var arr = new Array('tom','jack','alice');//console.log(arr[0]);//console.log(arr[arr.length-1]);//console.log(arr);//将1-100之间所有能被3整除的数字，放到数组nums中，输出这个数组，并统计个数//var nums =new Array();//var cnt =0;//cnt可以统计个数，也可以代表下标//for(var i =1 ;i<=100;i++)//   if(i%3==0)//   {//       nums[cnt]=i;//       cnt++;//     }//console.log(nums);var nums = new Array();for(var i =1; i<=100;i++)if(i%3==0)nums[nums.length]=i;//length属性是动态变化的，每当向数组中添加元素时，length属性值都会改变console.log(nums);//var arr =['tom','jack','alice','mike','admin'];//console.log(arr);//arr.sort();//console.log(arr);//var arr = [21,4,34,1,42,23,15,146];//console.log(arr);//arr.sort();//console.log(arr);var arr =['tom','jack','alice','mike','admin','jack'];console.log(arr);arr.reverse();console.log(arr);console.log(arr.join);console.log(arr.join('-'));console.log(arr.indexOf('jack'));console.log(arr.lastIndexOf('jack'));console.log(arr.slice(1,4));console.log(arr.slice(1));console.log(arr.toString());</script>
</head>
<body></body>
</html>

案例text10.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>//var arr = new Array();//arr[0] = new Array()；//arr[1] = new Array();//arr[0][0]=12;//arr[0][1]=9;//arr[1][0]=10;var arr = [[12,54,2,67],[1,32,12,5],[6,34,7,23]];//console.log(arr);for(var i =0 ;i<arr.length;i++){for(var j =0 ;j<arr[i].length;j++)document.write(arr[i][j]+'&nbsp;&nbsp;&nbsp;&nbsp;');document.write('<br>');}//document.write(arr[i],'<br>');</script>
</head>
<body></body>
</html>

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HE930kTM-1593343283776)(C:\Users\lenovo\Desktop\js\图片\案例10-.png)]

案例text11.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>/*自定义函数*///1.定义函数function show() {console.log('嘿嘿')}function calc(num1,num2,num3)//num1,num2,num3形式参数，简称形参{//console.log(num1,num2,num3);var sum = num1+num2+num3;console.log(sum);//return sum;}//2.调用函数 功能：1返回值return//show();//var result = calc(12,6,3)//12,6,3实际参数，简称实参//console.log(result);//变量的作用域//var c = 6;//全局变量//function fn() {//    var a = 5;//局部变量//    console.log(a);//   console.log(c);}function fn() {if(true){let a = 5;//局部变量console.log(a);}console.log(a);}{var d = 2;//全局变量let x = 4;//块级变量console.log(x);}//console.log(d);//fn();//console.log(c);//console.log(a);</script>
</head>
<body></body>
</html>

案例text12.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function f1() {console.log('111');}//f1();//window.οnclick=f1();window.onclick=f1;/*函数本身也是一种数据类型数据类型：string、number、boolean、null、undefined、object、function*///console.log(typeof f1);//var a = f1;//console.log(typeof a);//a();//将函数作为另一个函数的参数function f2(x,y) {console.log(x);//console.log(y);y();}//f2(5,f1);//当f1函数作为实参传递给形参y时，f1这个函数并没有执行,而是将函数体代码输出/*示例*/var arr =[12,43,5,6,7,9];console.log(arr);/*定义一个比较器升序：如果第一个参数大于第二个参数，则返回正数如果第一个参数小于第二个参数，则返回负数如果两个参数相等，则返回0*/function comapreFn(a,b) {return b-a;//if(a>b)//   return 1;//else if(a<b)//    return -1;//else//    return 0;}//arr.sort(comapreFn);//console.log(arr);function show(value,index) {console.log(index,value);}arr.forEach(show);</script>
</head>
<body></body>
</html>

案例text13.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>/*1.用于回调*///function show() {//    console.log('111');//}//window.οnclick=show;window.onclick=function () {console.log('111');}function f1() {console.log(222);}//var a = f1;//如果单纯就要把f1这个函数赋值给avar a =function () {console.log(222);}//a();var arr =[12,4,23,6,28,86];function show(value,index) {console.log(index,value);}//arr.forEach(show);arr.forEach(function (value,index) {console.log(index,value);});//function () {//   console.log('1111');//}//这是错误的//2.自执行函数(function () {console.log(333);})()</script>
</head>
<body></body>
</html>

案例text14.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>/*箭头函数语法参数=>返回值*///var a = function (x) {//  return x*2;//}var a = x => x*2;//优点：语法更加简洁console.log(a(4));//例2：如果箭头函数没有参数或有2个以上的参数，则必须使用小括号（）表示参数部分（）var a = function () {return 5;}var a =() =>5;console.log(a(4));//示例3：如果箭头函数的函数体多于一句话，则必须使用大括号{}将它们括起来//var a = function (x,y) {//    var sum = x + y;//    return sum;//};//var a = (x,y) =>{//    var sum = x+y;//    return sum;//};//console.log(a(12,34));//var a =function (x) {//    console.log(x);//};var a = x => console.log(x);a(5);console.log(a(5));//应用场景var arr =[12,4,23,6,26,86];arr.forEach((value,index)=>{console.log(index,value);});window.onclick=()=>{console.log(111);};</script>
</head>
<body></body>
</html>

案例text15.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>var str = 'hello world!';//var str = new String('hello world');//console.log(typeof str);//console.log(str);//console.log(str.length);console.log(str.charAt(0),str.charAt(3),str[0],str[str.length-1]);console.log(str.indexOf('0'));console.log(str.lastIndexOf('o'));console.log(str.toLowerCase());console.log(str.toUpperCase());console.log(str.substring(1,4));//左闭右开   包含左边不包含边console.log(str.substring(1));//直接取至末尾//console.log(str);//str = str.replace('JS','JavaScript');//由于replace()方法生成的是原字符串的副本，如果重新赋值，会改变字符串的内容//console.log(str);//console.log(str.split(' '));//str = str.split(' ',3);//console.log(str,typeof str);console.log(str,str.length);str = str.trim();console.log(str,str.length);</script>
</head>
<body></body>
</html>

案例text16.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>//var date = new Date();//var date = new Date(2020,2,14,15,23,54);//月份的取值范围[0,11] 0表示1月//var date = new Date(12343431);var year = date.getFullYear();var month =date.getMonth();var d =date.getDate();var hour = date.getHours();var minute =date.getMinutes();var second =date.getSeconds();let millseconds = date.getMilliseconds();//console.log(millseconds);var weekday = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']let day = date.getDay();//console.log(weekday[day]);var currenttime = year + '年' + checkdate(month) + '月'+ checkdate(d) + '日' +  checkdate(hour) + ':' +checkdate(minute)+':'+checkdate(second) +'.'+weekday[day];console.log(currenttime);let time = date.getTime();console.log(time);function checkdate(num) {if(num<10)return '0' + num;elsereturn num;}//console.log(d,typeof d);//console.log(date,typeof date);</script>
</head>
<body></body>
</html>

案例text17.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>//定义一个JSON对象var user = {"id":"1001","name":"tom","age":20,"height":180.5,"address":{"province":"山西","city":"太原","district":"迎泽区"},"ismarrid":true};//访问方式：对象名，属性名//console.log(user.name);//console.log(user.age)//console.log(user.address.city);//JSON对象数组//var nums = [12,3,43,5,25,87];var users =[{"id":"9527","username":"admin","password":"123","status":1},{"id":"9528","username":"admin","password":"111","status":1},{"id":"9529","username":"admin","password":"222","status":0},{"id":"9527","username":"admin","password":"3333","status":1},]for (var i =0;i<users.length;i++){var u = users[i];// console.log(u.username,u.password,u.status);}/*JSON对象和字符串直接的转换*///1.将JSON对象转换为这串// console.log(typeof user);// console.log(user);//// var str = JSON.stringify(user);// console.log(typeof str);// console.log(str);/*2.将字符串转换为JSON对象*/var str = '{"name":"hector","age":"20","height":180.5}';// console.log(typeof str);// console.log(str);// var obj = JSON.parse(str);// console.log(typeof obj);// console.log(obj);var str = '[{"id":"9527","username":"admin","password":"123","status":1},{"id":"9528","username":"admin","password":"111","status":1},]';console.log(str,typeof str);var obj = JSON.parse(str);console.log(obj,typeof obj);</script>
</head>
<body></body>
</html>

案例text18.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>/*1. 使用object*/var stu = new Object();//添加属性stu.name="tom";stu.age=20;stu.height=180.5;//添加方法stu.study = function () {console.log(stu.name+"正在学习....");};stu.run = function () {console.log(stu.name+"正在参加马拉松！");};//调用属性 和 方法//console.log(stu.name,stu['age']);//console.log(syu.age);//stu.run();//stu.study();/*2. 使用构造函数*///var date = new Date(2020,5,20);/console.log(date);function Student(name,age,sex) {//console.log(name,age,sex);this.username = name；this.age = age;this.sex = sex;//方法this.show = function () {console.log("我叫"+this.username+"正在学习..."+"年龄:"+this.age+"性别："+this.sex);};this.study=function () {console.log("正在学习....");};}//Student('tom','20','male');var student= new Student('tom','20','male');//console.log(student.username,student.age,student.sex);//student.show();//student.study();/*3,使用JSON对象*/var student ={name:"tom",age:19,sex:"male",study:function () {console.log("正在学习....");}};console.log(student.name);console.log(student['age']);student.study();</script>
</head>
<body></body>
</html>

案例text19.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function query() {//console.log(111);/*1.根据id获取，返回单个值*///var objDiv=document.getElementById("mydiv");//console.log(typeof objDiv,objDiv);/*2.根据name获取，返回集合，也就是数组*///var objs = document.getElementsByName("hobby");//console.log(typeof objs);//for(var index in objs)//console.log(objs[index]);/*3.根据标签名和获取，返回集合*///var objs = document.getElementsByTagName("input");//console.log(objs);//for(var index in objs)//    console.log(objs[index]);/*4.根据CSS选择器来获取单个对象*///var obj = document.querySelectorAll("#div2");//var obj = document.querySelector(".aaa");//var obj = document.querySelector("p.aaa");//console.log(obj);/*5.根据CSS选择器来获取多个对象*/var objs = document.querySelectorAll(".aaa");console.log(objs.length);for(var index in objs)console.log(objs[index]);/*6.根据已有节点获取其他节点*/var obj = document.getElementById("second");console.log(obj);console.log(obj.parentNode);console.log(obj.previousSibling);console.log(obj.nextSibling);console.log(obj.parentNode.firstChild);console.log(obj.parentNode.lastChild);}</script>
</head>
<body><input type="button" value="获取页面中的元素" onclick="query()"><hr><div id="mydiv" class="aaa">hello</div><div id="div2" class="aaa">world</div><p class="aaa">welcome</p>爱好：<input type="checkbox" value="eat" name="hobby">吃饭<input type="checkbox" value="sleep" name="hobby">睡觉<input type="checkbox" value="doudou" name="hobby">打豆豆<ul>aaaa<li>tom</li><li id="second">jack</li><li>alice</li><li>mike</li></ul>
</body>
</html>

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TfQAuIFh-1593343283778)(C:\Users\lenovo\Desktop\js\图片\案例19.png)]

案例text20.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.hello{width: 300px;height: 300px;background:blue;font-size:40px;}.world{text-decoration: underline;font-weight: blod;}</style><script>function getProperty() {//获取属性的值//let obj = document.getElementById("baidu");//console.log(obj,typeof obj);//console.log(obj.href);//console.log(obj.target);//let obj = document.getElementById("female");//console.log(obj.value);//let obj = document.getElementById('male');//console.log(obj.checked);//返回值true或false//设置属性的值//let obj = document.getElementById("male");//obj.checked=true;//var obj = document.getElementById("baidu");//obj.href="https://www.sxgjpx.net";//obj.target="_self";}function getContent() {let obj = document.getElementById("mydiv");// console.log(obj.innerHTML);console.log(obj.innerText);//设置内容//obj.innerHTML="<h2>世界你好<h2>";//obj.innerText="<h2>你好世界<h2>";}function getStyle() {//var obj = document.getElementById('mydiv');//console.log(obj.style);//console.log(obj.style.width);//console.log(obj.style.height);//console.log(obj.style.background);//console.log(obj.borderTopRightRadius);//obj.style.width="300px";//obj.style.background="blue";//obj.style.fontSize="20px";obj.className="world";console.log(obj.className);}</script>
</head>
<body><input type="button" value="获取属性" onclick="getProperty()"><input type="button" value="访问内容" onclick="getProperty()"><hr><br><!-- <a href="https://www.baidu.com" target="_blank" id="baidu">百度</a><br> --><a href="https://www.baidu.com" target="_blank" id="baidu">点我</a><br>用户名：<input type="text" value="" name="username" id="username"><br>性  别：<input type="radio" value="male" name="sex" id="male " checked>男<input type="radio" value="female" name="sex" id="female">女<br><div class="mydiv">hello world</div>
</body>
</html>

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AKtPEXHp-1593343283780)(C:\Users\lenovo\Desktop\js\图片\案例20.png)]

案例text21.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#logo{width: 100px;height: 50px;}</style><script>function change() {if($("baidu").checked) {$("logo").src = "images/baidu.png";$("txtSearch").name="wd";$("frmSearch").action="https://www.baidu.com/s";$("btnSearch").value="百度搜索";}else if($("sogou").checked) {$("logo").src = "images/sogou.png";$("txtSearch").name="query";$("frmSearch").action="https://www.sogou.com/web";$("btnSearch").value="搜狗搜索";}else{$("logo").src="data:images/360.png";$("txtSearch").name="q";$("frmSearch").action="https://www.so.com/s";$("btnSearch").value="360搜索";}}// 用来简化元素的获取function $(id) {return document.getElementById(id);}</script>
</head>
<body><input type="radio" name="search" id="baidu" onclick="change"><label fro="baidu">百度</label><input type="radio" name="search" id="sogou" onclick="change"><label fro="sogou">搜狗</label><input type="radio" name="search" id="360" onclick="change"><label fro="baidu">360</label><fotm action="https://www.baidu.com/s"><img src="data:images/baidu1.png" id="logo"><br><input type="text" name="wd" id="txtSearch"  placeholder="请输入查询关键字"><input type="submit" id="btnSearch" value="百度搜索"></fotm>
</body>
</html>

案例text22.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function doAdd() {//创建一个li//1.创建元素的节点var li = document.createElement("li");//2.设置文本内容//var txt = document.createTextNode('alice');//li.appendChild(txt);li.innerText="alice";//设置文本console.log(li);//3.设置属性//li.id="fourth";li.setAttribute("id","fourth");//设置属性//console.log(li.getAttribute("id"));//获取属尾//console.log(li.id);//将li放到ul的末尾，添加到节点var ul = document.getElementById("myul");ul.appendChild(li);//5.将alice添加到jack的前面// ul.insertBefore(li,document.getElementById("second"));ul.replaceChild(li,document.getElementById("second"));}function doDelete() {//删除当前节点//document.getElementById("first").remove();var ul = document.getElementById("myul");// ul.removeChild(document.getElementById("first"));ul.removeChild(ul.lastChild);}</script>
</head>
<body><input type="button" value="添加" onclick="doAdd()"><input type="button" value="删除" onclick="doDelete()"><ul id="myul"><li id="first">tom</li><li id="second">jack</li><li>mike</li></ul>
</body>
</html>

案例text23.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function f1() {console.log(111);//var btn2 = document.getElementById("btn2");//由于代码执行到此时，该部分代码先执行，而后面的代码没有执行所以取不到//console.log(btn2);}window.onload=function () {//var btn2 = document.getElementById("btn2");//当浏览器加载完成后引发的事件//console.log(btn2);//btn2.οnclick=function () {//    console.log(222);//};//document.getElementById("btn2").οnclick=function () {//    console.log(222);//};//document.getElementById("btn2").οnclick=f1;document.getElementById("btn2").onclick=function (event) {console.log(222);console.log(event);console.log(event.srcElement);console.log(this);//this表示事件源};//为复选框绑定事件var hobbies = document.getElementById("hobby");//console.log(hobbies[0]);//console.log(hobbies[1]);//console.log(hobbies[2]);for(var i =0;i<hobbies.length;i++){hobbies[i].onclick =function () {//console.log(222);console.log(this.value);};}};</script>
</head>
<body><!--方式1：静态绑定--><!--<input type="button" value="按钮1" onclick="alert('哈哈')">--><input type="button" value="按钮1" onclick="f1()"><!--方式2：动态绑定--><input type="button" value="按钮2" id="btn2">
吃饭爱好：<input type="checkbox" name="hobby" value="eat">吃饭<input type="checkbox" name="hobby" value="sleep">睡觉<input type="checkbox" name="hobby" value="doudou">打豆豆
</body>
</html>

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WFC1fS5G-1593343283782)(C:\Users\lenovo\Desktop\js\图片\案例23.png)]

案例text24.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#container{text-align: center;}#mytable{width: 500px;text-align: center;border:1px solid #ccc;margin: 0 auto;}#mytable td,#mytable th{border:1px solid #ccc;text-align: center;}#mytable tfoot td{text-align: right;}#myform{line-height: 30px;}</style><script>window.onload=function () {//为添加按钮绑定事件$("btnAdd").onclick=function () {//创建trvar tr = document.createElement("tr");//创建tdvar tdName = document.createElement("td");var tdAge = document.createElement("td");var tdSex = document.createElement("td");var tdPhone = document.createElement("td");var tdDelete = document.createElement("td");//将数据添加到td中tdName.innerText = $("name").value;tdAge.innerText = $("age").value;tdSex.innerText = $("m").checked?$("m").value:$("f").value;tdPhone.innerText = $("phone").value;//创建一个input按钮var bthDelete = document.createElement("input");bthDelete.type="button";bthDelete.value="删除";tdDelete.appendChild(bthDelete);//将td添加到tr中tr.appendChild(tdName);tr.appendChild(tdAge);tr.appendChild(tdSex);tr.appendChild(tdPhone);tr.appendChild(tdDelete);//将tr添加到tbody中$("tb").appendChild(tr);};//为每行的删除按钮绑定事件var btnDeletes = document.querySelectorAll(".delete");for(var i=0;i<btnDeletes.length;i++){btnDeletes[i].onclick=function(){this.parentNode.parentNode.remove();};}//为首行删除按钮绑定事件$("btnDeleteFirst").onclick=function(){$("tb").getElementsByTagName("tr")[0].remove();//在tbody中找tr};//为末行删除按钮添加绑定事件$("btnDeleteLast").onclick=function(){var trs =$("tb").getElementsByTagName("tr");trs[trs.length-1].remove();};};function  $(id) {return document.getElementById(id);}</script>
</head>
<body>
<div id="container"><table id="mytable"><thead><tr><th>姓名</th><th>年龄</th><th>性别</th><th>电话</th><th>操作</th></tr></thead><tbody id="tb"><tr><td>tom</td><td>20</td><td>male</td><td>110</td><td><input type="button" value="删除" class=＂delete＂></td></tr><tr><td>jack</td><td>22</td><td>male</td><td>119</td><td><input type="button" value="删除" class=＂delete＂></td></tr><tr><td>alice</td><td>20</td><td>female</td><td>120</td><td><input type="button" value="删除" class=＂delete＂></td></tr></tbody><tfoot><td colspan="5"><input type="button" value="从首行删除" id="bthDeleteFirst"><input type="button" value="从末行删除" id="bthDeleteLast"></td></tfoot></table><form action="" id="myform">姓名：<input type="text" id="name"><br>年龄：<input type="text" id="age"><br>性别：<input type="radio" name="sex" id="m" value="male" checked>男<input type="radio" name="sex" id="f" value="male">女 <br>电话：<input type="text" id="phone"> <br><hr><input type="button" value="添  加" id="btnAdd"><input type="button" value="删  除"></form>
</div>
</body>
</html>

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4ALJe922-1593343283783)(C:\Users\lenovo\Desktop\js\图片\案例24.png)]

案例text25.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#username{outline: none;}.txtborder{border: 1px solid red;}#img{width:160px;height:160px;}</style><script>window.onload=function () {/*鼠标事件*///document.getElementById("btn").οnclick=function (){//document.getElementById("btn").οndblclick=function (){//document.getElementById("btn").οnmοuseοver=function (){//document.getElementById("btn").οnmοusedοwn=function () {//    console.log(111);//};//document.getElementById("btn").οnmοuseοut=function(){//document.getElementById("btn").οnmοuseup=function (){//document.getElementById("btn").οnmοusemοve=function () {//    console.log(222);//};/*键盘事件*///document.getElementById("username").onkeydown = function () {//    console.log(111);//};//document.getElementById("username").οnkeyup=function () {document.getElementById("username").onkeypress=function (event) {console.log(222);console.log(event);};/*表单事件*///document.getElementById("username").οnfοcus=function (event) {//    console.log(222);//    this.className="txtborder";//};//document.getElementById("username").οnblur=function (event) {//    console.log(222);//    this.className="";//失去焦点时取消classname属性//};//document.getElementById("head").οnchange=function () {//        console.log(111);//        console.log(this.files);//    document.getElementById("img").src= window.URL.createObjectURL(this.files[0]);//};//document.getElementById("username").οnselect=function () {//    console.log(222);//};document.getElementById("frm").onsubmit=function () {console.log(111);return true;//允许提交return false;//返回false禁止提交}}</script>
</head>
<body><form action="" id="frm"><input type="button" value="点 我" id="btn"> <br>用户名：<input type="text" id="username" name="username"><br><img src="" id="img"> <br>头像：<input type="file" id="head" multiple><br><input type="submit" value="提交"></form>
</body>
</html>

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GhGhvnrj-1593343283785)(C:\Users\lenovo\Desktop\js\图片\案例25-.png)]

案例text26.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{width: 200px;height: 200px;background: pink;}p{width: 100px;height: 100px;background:#ccc;}</style><script>function f1(event) {// console.log(event);// event.stopPropagation();//阻止事件冒泡，W3C标准方式// event.cancelBubble=true;// alert(111);}window.onload=function(){//绑定鼠标右键点击事件document.getElementById("btn").oncontextmenu=function(){event.preventDefault();//阻止默认行为this.style.color="red";};document.getElementById("mya").onclick=function (event) {event.preventDefault();//阻止事件默认行为this.innerHTML="新浪";};};</script>
</head>
<body><div onclick="alert(333)"><p onclick="alert(222)"><!--<input type="button" value="点我" onclick="alert(111)">--><input type="button" value="点我" onclick="f1(event)" id="btn"></p></div><a href="https://www.baidu.com" id="mya" target="_blank">百度</a><a href="#" id="mya" target="_blank">百度</a>
</body>
</html>

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7fUQOXQ3-1593343283786)(C:\Users\lenovo\Desktop\js\图片\案例26.png)]

案例text27.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function getDegree() {var degree =document.getElementById("degree")// console.log(degree.length);// console.log(degree.selectedIndex);var opts = degree.options;// console.log(opts);//console.log(opts[opts.selectedIndex]);// var opt =opts[degree.selectedIndex]// console.log(opt);// console.log(opt.text,opt.value);// opts[1].text="中专";// opts[1].value="zhongzhuan";//当修改了opts数组中的内容时，下拉列表中的值也会改变// console.log(opts[opts.length]);//由于是一个undefined所以会报错// opts[opts.length].text="博士";//报错，为什么?// opts[opts.length].value="boshi";//前面学过的方法// var option = document.createElement("option");// option.innerText="博士";// option.value="boshi";// degree.appendChild(option);//新知识1,更简单// opts[opts.length]=new Option("博士","boshi");//实际上还是操作数组//新知识2// var option=new Option("博士","boshi");// degree.add(option);//在大专前面增加一个中专var option = new Option("中专","zhongzhuan");degree.add(option,degree.getElementsByTagName("option")[1]);}window.onload=function(){document.getElementById("degree").onchange=function(){// console.log(111);// console.log(this.options[this.selectedIndex].value);console.log(this.value);};};</script>
</head>
<body><input type="button" value="操作下拉列表" onclick="getDegree()"><hr>学历：<select id="degree"><option value="0">---请选择学历---</option><option value="gaozhong">高中</option><option value="dazhuan">大专</option><option value="benke">本科</option><option value="yanjiusheng">研究生</option></select>
</body>
</html>

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jb0nMM0b-1593343283787)(C:\Users\lenovo\Desktop\js\图片\案例27.png)]

案例text28.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>var provinces = [{id:1001,name:"山西省",cities:[{id:1,name:"太原市"},{id:2,name:"大同市"},{id:3,name:"长治市"},{id:4,name:"忻州市"},{id:5,name:"吕梁市"}]},{id:1002,name:"山东省",cities:[{id:1,name:"济南市"},{id:2,name:"青岛市"},{id:3,name:"威海市"},{id:4,name:"烟台市"},{id:5,name:"德州市"}]},{id:1003,name:"广东省",cities:[{id:1,name:"广州市"},{id:2,name:"东莞市"},{id:3,name:"青远市"},{id:4,name:"佛州市"},{id:5,name:"深圳市"}]}];window.onload=function(){//初始化省份for(var i in provinces){var p =provinces[i];var option = new Option(p.name,p.id);document.getElementById("province").add(option);}};function change() {//清空城市数据document.getElementById("city").length=0;//获取选择的省份var pid = document.getElementById("province").value;if(pid==0){document.getElementById("city").add(new Option("--请选择城市--"));return ;}for (var i in provinces){var p = provinces[i];if (p.id == pid) {//添加城市var cities = p.cities;for (var j in cities) {var option = new Option(cities[j].name,cities[j].id);document.getElementById("city").add(option);}return;}}}</script>
</head>
<body><!--注意：name可以不用，因为不用提交-->省份：<select id="province" onchange="change()"><option value="0">--请选择省份--</option></select>城市：<select id="city"><option value="0">--请选择城市--</option></select>
</body>
</html>

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tMsreTBW-1593343283788)(C:\Users\lenovo\Desktop\js\图片\案例28.png)]

案例text29.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>//document.getElementById()//window.history//window.location/*window常用方法*///1.alert()//window.alert(111);//alert(111);//2.prompt()//var name = window.prompt("请输入用户名","无名氏");//console.log(name);//3.confirm()//var flag = confirm("确定要删除吗？");//console.log(flag);//4.open()function f1() {open("text28.html","text28","width=200px,height=200px,resizable=no");}//5.setTimeoutvar timer_one;var timer_zq;function f2() {timer_one = setTimeout(function () {console.log(111);},3000);//单位毫秒}//function show() {//    console.log(111);//}//6.setIntervalfunction f3() {timer_zq = setInterval(function () {console.log("起床啦....");},1000)}//周期性计时器使用一次性计时器能否实现//function f2() {//   setTimeout(show,1000);//单位毫秒//}//function show() {//    console.log(111);//    setTimeout(show,1000);//}//7.clearTimeoutfunction f4() {clearTimeout(timer_one);}//8.clearIntervalfunction f5() {clearInterval(timer_zq);}/*window常用事件*/// window.onloadwindow.onscroll=function () {console.log(222);};window.onclick=function () {console.log(333);};window.onload=function () {console.log(444);};//一个对象可以绑定对个事件，但是一个事件不能绑定多次window.onload=function () {console.log(555);};</script>
</head>
<body><input type="button" value="打开一个窗口" onclick="f1()"><br><input type="button" value="一次性计时器" onclick="f2()"><br><input type="button" value="周期性计时器" onclick="f3()"><br><input type="button" value="关闭一次性计时器" onclick="f4()"><br><input type="button" value="关闭周期性计时器" onclick="f5()"><br><hr><p style="background: #ccc;height: 2000px;">hello world!</p>
</body>
</html>

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4N1x9CvX-1593343283789)(C:\Users\lenovo\Desktop\js\图片\案例29.png)]

案例text30.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function f1() {//console.log(location.href);//获取loaction的href属性location.href="https://www.baidu.com";//location.reload();}function f2() {history.back();}function f3() {history.forward();}</script>
</head>
<body><input type="button" value="操作location" onclick="f1()"><input type="button" value="后退" onclick="f2()"><input type="button" value="前进" onclick="f3()">
</body>
</html>

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-627UoCrC-1593343283790)(C:\Users\lenovo\Desktop\js\图片\案例30.png)]

案例text31.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>var timer;var l=0,r=0;//全局变量可以保留上一次调用结束时的值function doStart() {$("start").disabled=true;$("stop").disabled=false;timer =setInterval(function () {r++;if(r>9){r=0;l++;}if(l>9){r=0;l++;}$("imgr").src="data:images/number/"+r+".bmp";$("imgl").src="data:images/number/"+l+".bmp";},100);}function doStop() {$("stop").disabled=true;$("start").disabled=false;}function $(id) {return document.getElementById(id);}</script>
</head>
<body><!--table>(tr>td*2)*2--><table><tr><td><img src="data:images/number/0.bmp" alt="imgl"></td><td><img src="data:images/number/0.bmp" id="imgr"></td></tr><tr><td><input type="button" value="开始" id="start" onclick="doStart()"></td><td><input type="button" value="停止" id="stop"  onclick="doStop()" disabled></td></tr></table>
</body>
</html>

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Tyigdevr-1593343283792)(C:\Users\lenovo\Desktop\js\图片\案例31png.png)]

案例text32.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>//定义正则表达式对象//var reg = /a/i;//console.log(reg.text('heAllo'));//方式2：定义正则表达式对象//var reg = new RegExp('a''i');//console.log(reg.text('helloA'));//规则验证：//var reg = /a\s/;//a字符后是否包含空白自带符//console.log(reg.text('he  allo'));//var reg = /a\s\d/i;//是否包含数字字符//console.log(reg.text('hea 8llo'));//var reg = /a\s\d\w/i;//匹配任何字符  数字、字母、下划线//console.log(reg.text('hela 8lo'));//量词//var reg = /a\s\d[3]\w/i;//连续出现3个数字//console.log(reg.text('hela 7768_lo'));//var reg = /a\s\d[0,3]\w/i;//console.log(reg.text('hela 3a5b_lo'));//var reg = /\d?/i;//console.log(reg.text('hela 4a4_lo'));//特殊符号//var reg = /a/;//是否包含a字符//console.log(reg.text('helalo'));//var reg = /^a/;//是否以a开头//var reg = /a$/;//是否以a结尾//console.log(reg.text('helloa'));//var reg = /\da$/;//以a结尾，且a的前面是个数字//console.log(reg.text('hello9a'));//var reg = /^a$/;//console.log(reg.text('a'));//var reg = /^a\da$/;//以a开头，且以a结尾，中间有一个数字//console.log(reg.text('a7a'));//var reg = /^a\d*a$/;//以a开头，且以a结尾，中间有一个数字，*表示数字可有可无//console.log(reg.text('a7a'));//var reg = /^a\d?a[\dabc]/;//[0-9abc]:表示从数字、a、b、c中选一个结尾//console.log(reg.text('a7a8'));//var reg = /^a\d?a[\dabc][2]$/;//[0-9abc]:表示从数字、a、b、c中选2个结尾//console.log(reg.text('a7aa8'));//var reg = /^a\d?a[\dabc]{2}(\da){3}$/;//(\da){3}数字a可连续出现3次//console.log(reg.text('a7a2b8a9a6a'));//var reg = /^a|b+%/;//b至少出现1次//console.log(reg.text('aabb'));var reg = /^[^abc]{2}/;//只要不是abc开头就行console.log(reg.text('xw'));</script>
</head>
<body></body>
</html>

案例text33.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>table tr td:first-child{text-align: right;}.error{font-size: 12px;color:red;}.ok{color: green;}</style><script>function checkUsername() {//用户名只能由数字、字母、下划线、横线、中文组成,且只能以数字或字母开头和结尾,长度为6-14位var username = $("username").value;var reg = /^[\da-z][\u4E00-\u9FA5\w-]{4,12}[\da-z]$/i;if(!reg.test(username)){$("usernameInfo").innerText="用户名只能由数字、字母、下划线、横线、中文组成";$("usernameInfo").className="error";return false;}else{$("usernameInfo").innerText="OK!";$("usernameInfo").className="ok";return true;}}function checkPassword() {//密码只能由数字、字母组成，长度为6-10位var password = $("password").value;var reg = /^[\da-z]{6,10}$/;if(!reg.test(password)){$("passwordInfo").innerText="密码只能由数字、字母组成，长度为6-10位";$("passwordInfo").className="error";return false;}else{$("passwordInfo").innerText="OK!";$("passwordInfo").className="ok";return true;}}function checkRepassword() {//两次输入的密码必须相同var password = $("password").value;var repassword = $("repassword").value;if(repassword != password){$("repasswordInfo").innerText="两次输入的密码必须相同";$("repasswordInfo").className="error";return false;}else{$("repasswordInfo").innerText="OK!";$("repasswordInfo").className="ok";return true;}}function checkInput() {console.log(111);return checkUsername()&&checkPassword()&&checkRepassword();}function checkBirthday() {var reg = /^\d{4}-\d{1,2}-\d{1,2}$/;//实际开发中一般要用日期插件}function checkPhone() {var reg = /^1\d{10}$/;}function checkEmail() {//tom@sina.com.cn tom@baidu.comvar reg = /^\w+@\w+(\.[a-z]{2,3}){1,2}$/;// + 表示至少有1个字符点号不能直接写要转义\.//身份证var reg = /[1-9]\d{14}(\d{2}[\dx])?/i;//?表示可有可无 身份证有15位和18位2种}function $(id) {return document.getElementById(id);}</script>
</head>
<body><h2>用户注册</h2><form action="success.html" onsubmit="return checkInput()"><!--table>(tr>td*2)*6--><table><tr><td>用户名：</td><td><input type="text" name="username" id="username"placeholder="请输入用户名" onblur="checkUsername()"><span id="usernameInfo"></span></td></tr><tr><td>密码：</td><td><input type="password" name="password" id="password"placeholder="请输入密码" onblur="checkPassword()"><span id="passwordInfo"></span></td></tr><tr><td>确认密码：</td><td><input type="password" name="repassword"id="repassword" placeholder="请再次输入密码" onblur="checkRepassword()"><span id="repasswordInfo"></span></td></tr><tr><td>出生日期：</td><td><input type="text" name="birthday" id="birthday"placeholder="请输入出生日期" onblur="checkBirthday()"><span id="birthdayInfo"></span></td></tr><tr><td>手机号：</td><td><input type="text" name="phone" id="phone"placeholder="请输入手机号" onblur="checkPhone"><span id="phoneInfo"></span></td></tr><tr><td>邮箱：</td><td><input type="text" name="mail" id="mail"placeholder="请输入邮箱"></td></tr><tr><td colspan="2" style="text-align: left"><input type="submit" value="注 册"><input type="reset" value="重 置"></td></tr></table></form>
</body>
</html>$("repasswordInfo").className="error";return false;}else{$("repasswordInfo").innerText="OK!";$("repasswordInfo").className="ok";return true;}}function checkInput() {console.log(111);return checkUsername()&&checkPassword()&&checkRepassword();}function checkBirthday() {var reg = /^\d{4}-\d{1,2}-\d{1,2}$/;//实际开发中一般要用日期插件}function checkPhone() {var reg = /^1\d{10}$/;}function checkEmail() {//tom@sina.com.cn tom@baidu.comvar reg = /^\w+@\w+(\.[a-z]{2,3}){1,2}$/;// + 表示至少有1个字符点号不能直接写要转义\.//身份证var reg = /[1-9]\d{14}(\d{2}[\dx])?/i;//?表示可有可无 身份证有15位和18位2种}function $(id) {return document.getElementById(id);}</script>
</head>
<body><h2>用户注册</h2><form action="success.html" onsubmit="return checkInput()"><!--table>(tr>td*2)*6--><table><tr><td>用户名：</td><td><input type="text" name="username" id="username"placeholder="请输入用户名" onblur="checkUsername()"><span id="usernameInfo"></span></td></tr><tr><td>密码：</td><td><input type="password" name="password" id="password"placeholder="请输入密码" onblur="checkPassword()"><span id="passwordInfo"></span></td></tr><tr><td>确认密码：</td><td><input type="password" name="repassword"id="repassword" placeholder="请再次输入密码" onblur="checkRepassword()"><span id="repasswordInfo"></span></td></tr><tr><td>出生日期：</td><td><input type="text" name="birthday" id="birthday"placeholder="请输入出生日期" onblur="checkBirthday()"><span id="birthdayInfo"></span></td></tr><tr><td>手机号：</td><td><input type="text" name="phone" id="phone"placeholder="请输入手机号" onblur="checkPhone"><span id="phoneInfo"></span></td></tr><tr><td>邮箱：</td><td><input type="text" name="mail" id="mail"placeholder="请输入邮箱"></td></tr><tr><td colspan="2" style="text-align: left"><input type="submit" value="注 册"><input type="reset" value="重 置"></td></tr></table></form>
</body>
</html>

附件：
链接：https://pan.baidu.com/s/18AukodgOQg4siV1JYls1Xg
提取码：o696

JavaScript大集合笔记相关推荐

Javascript中的陷阱大集合【译】
参考:http://www.2cto.com/kf/201111/111203.html 昨天晚上在自己的个人技术博客上翻译了一篇有关Javascript的文章,今天想想还是把它投稿到博客园吧,大家可 ...
【转载】100多个很有用的JavaScript函数以及基础写法大集合
1.document.write("");为输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4 ...
javascript功能插件大集合，写前端的亲们记得收藏
导读:GitHub 上有一个 Awesome – XXX 系列的资源整理.awesome-javascript 是 sorrycc 发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架.运 ...
【资源共享】eBook分享大集合
文章目录 eBook分享大集合服务器系统类(9) 机器学习类(17) NLP 算法类(19) 网络类(6) 程序语言类 C/C++语言(8) Python语言(14) Java语言(14) PHP语 ...
干货100+ 最超全的web开发工具和资源大集合
干货100+ 最超全的web开发工具和资源大集合作为Web开发者,这是好的时代,也是坏的时代.Web开发技术也在不断变化.虽然很令人兴奋,但是这也意味着Web开发人员需要要积极主动的学习新技术和 ...
小白必看！JS中循环语句大集合
摘要:JavaScript中,一共给开发者提供了一下几种循环语句,分别是while循环,do-while循环,for循环,for Each,for-in循环和for-of循环. 本文分享自华为云社区& ...
计算机课英语谐音,各科老师“谐音梗”大集合，英语课现“脏话”，数学化身段子手...
在很多人的印象之中,老师的想象大多都是严肃却古板的,不论是说话还是打扮都很严谨,学生们见到老师就像是"老鼠见了猫"一样,大气也不敢喘. 随着时代不断地变化,90后也成为了各行各业的 ...
《Head First 系列图书》大集合，附案例分析，免积分下载
<Head First 系列图书>大集合,计划是结合现有的项目做一个教程的,这里先开个头. Head First 系列书籍是由 O'Relly 出版社发行的一系列教育书籍,中文一般翻译为& ...
JavaScript设计模式读书笔记（四）= 技巧型设计模式
全系列目录 JavaScript设计模式读书笔记(一)=> 创建型设计模式 JavaScript设计模式读书笔记(二)=> 结构型设计模式 JavaScript设计模式读书笔记(三)=&g ...