JavaScript
概述
简介
Javascript是一种由Netscape(网景)的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，遗留的速度问题，为客户提供更流畅的浏览效果。
JavaScript 的正式名称是 "ECMAScript"。JavaScript的组成包含ECMAScript[定义了脚本语言的所有属性、方法和对象]、DOM[document对象代表整个html文档，可用来访问页面中的所有元素]、BOM[Browser Object Model，即浏览器对象模型]。JS是一种运行于浏览器端上的小脚本语句,可以实现网页如文本内容动,数据动态变化和动画特效等
脚本语言：JavaScript不会产生编译出来的字节码文件，而是在程序的运行过程中对源文件逐行进行解释。
基于对象：JavaScript是一种基于对象的脚本语言，可以创建对象，使用现有的对象。但是面向对象的三大特性：『封装』、『继承』、『多态』中，JavaScript能够实现封装，可以模拟继承，不支持多态，所以它不是面向对象的编程语言。
弱类型：JavaScript中也有明确的数据类型，但是声明一个变量后它可以接收任何类型的数据，并且会在程序执行过程中根据上下文自动转换类型。
事件驱动：JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。
跨平台性：JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言。
JS的引入方式
内部脚本方式引入/内嵌式
在页面中,通过一对script标签引入JS代码；script代码放置位置具备随意性,一般放在head标签中
function 函数名(){
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小标题</title>
<style>
/* 通过选择器确定样式的作用范围 */
.btn1 {
display: block;
width: 150px;
height: 40px;
background-color: rgb(245, 241, 129);
color: rgb(238, 31, 31);
border: 3px solid rgb(238, 23, 66);
font-size: 22px;
font-family: '隶书';
line-height: 30px;
border-radius: 5px;
}
</style>
<script>
function suprise(){
alert("Hello,我是惊喜")
}
</script>
</head>
<body>
<button class="btn1" onclick="suprise()">点我有惊喜</button>
</body>
</html>外部脚本方式引入
可以将脚本放在独立的js文件中,通过script标签引入外部脚本文件
一对script标签要么用于定义内部脚本[元素文本要为空],要么用于引入外部js文件,不能混用
一个html文档中,可以有多个script标签
抽取脚本代码到独立的js文件中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小标题</title>
<style>
/* 通过选择器确定样式的作用范围 */
.btn1 {
display: block;
width: 150px;
height: 40px;
background-color: rgb(245, 241, 129);
color: rgb(238, 31, 31);
border: 3px solid rgb(238, 23, 66);
font-size: 22px;
font-family: '隶书';
line-height: 30px;
border-radius: 5px;
}
</style>
<script src="js/button.js" type="text/javascript"></script>
</head>
<body>
<button class="btn1" onclick="suprise()">点我有惊喜</button>
</body>
</html>JS的数据类型和运算符
JS的数据类型
数值类型：数值类型统一为 number,不区分整数和浮点数
字符串类型：字符串类型为 string 和JAVA中的String相似,JS中不严格区分单双引号,都可以用于表示字符串
布尔类型：布尔类型为boolean 和Java中的boolean相似,但是在JS的if语句中,非空字符串会被转换为'真',非零数字也会被认为是'真'
引用数据类型：引用数据类型对象是Object类型, 各种对象和数组在JS中都是Object类型
function类型：JS中的各种函数属于function数据类型
命名未赋值：js为弱类型语言,统一使用 var 声明对象和变量,在赋值时才确定真正的数据类型,变量如果只声明没有赋值的话,数据类型为undefined
赋予NULL值：在JS中,如果给一个变量赋值为null,其数据类型是Object, 可以通过typeof关键字判断数据类型
var i = 10
console.log(i)
console.log(typeof i)
i = "asdf"
console.log(i)
console.log(typeof i)
i = 1>10
console.log(i)
console.log(typeof i)
i = new Object()
console.log(i)
console.log(typeof i)
function fun1(){
}
console.log(fun1)
console.log(typeof fun1)
var y
console.log(y)
console.log(typeof y)
y = null
console.log(y)
console.log(typeof y)JS的变量
1 弱类型变量,可以统一声明成var
2 var声明的变量可以再次声明
3 变量可以使用不同的数据类型多次赋值
4 JS的语句可以以; 结尾,也可以不结尾
5 变量标识符严格区分大小写
6 标识符的命名规则参照JAVA
7 如果使用了 一个没有声明的变量,那么运行时会报uncaught ReferenceError: *** is not defined at index.html:行号:列号
8 如果一个变量只声明,没赋值,那么值是undefined
JS的运算符
算数运算符 + - * / %
/ 在除0时,结果是Infinity ,而不是报错
%在模0时,结果是NaN,意思为 not a number ,而不是报错
复合算数运算符 ++ -- += -= *= /= %=
在/=0时,结果是Infinity ,而不是报错
在%=0时,结果是NaN,意思为 not a number ,而不是报错
关系运算符 > < >= <= == === !=
== 符号,如果两端的数据类型不一致,会尝试将两端的数据转换成number,再对比number大小
'123' 这种字符串可以转换成数字
true会被转换成1 false会被转换成0
=== 符号,如果两端数据类型不一致,直接返回false,数据类型一致在比较是否相同
逻辑运算符 || && ：几乎和JAVA中的一样,需要注意的是,这里直接就是短路的逻辑运算符,单个的 | 和 & 以及 ^ 是位运算符
条件运算符 条件? 值1 : 值2：几乎和JAVA中的一样
位运算符 | & ^ << >> >>>：和 java中的类似(了解)
JS的流程控制和函数
JS分支结构
if结构
if()中的非空字符串会被认为是true
if()中的非零数字会被认为是true
if()中的非空对象会被认为是true
if('false'){// 非空字符串 if判断为true
console.log(true)
}else{
console.log(false)
}
if(''){// 长度为0字符串 if判断为false
console.log(true)
}else{
console.log(false)
}
if(1){// 非零数字 if判断为true
console.log(true)
}else{
console.log(false)
}
if(new Object){// 非空对象 if判断为true
console.log(true)
}else{
console.log(false)
}
if(0){
console.log(true)
}else{
console.log(false)
}switch结构
var monthStr=prompt("请输入月份","例如:10 ");
var month= Number.parseInt(monthStr)
switch(month){
case 3:
case 4:
case 5:
console.log("春季");
break;
case 6:
case 7:
case 8:
console.log("夏季");
break;
case 9:
case 10:
case 11:
console.log("秋季");
break;
case 1:
case 2:
case 12:
console.log("冬季");
break;
default :
console.log("月份有误")
}注：prompt返回的结果就是用户在窗口上输入的值，以string类型返回
JS循环结构
while结构
/* 打印99 乘法表 */
var i = 1;
while(i <= 9){
var j = 1;
while(j <= i){
document.write(j+"*"+i+"="+i*j+" ");
j++;
}
document.write("<hr/>");
i++;
}for循环
/* 打印99 乘法表 */
for( var i = 1;i <= 9; i++){
for(var j = 1;j <= i;j++){
document.write(j+"*"+i+"="+i*j+" ");
}
document.write("<hr/>");
}foreach循环
括号中的临时变量表示的是元素的索引,不是元素的值,
()中也不在使用: 分隔,而是使用 in 关键字进行分隔
var cities =["北京","上海","深圳","武汉","西安","成都"]
document.write("<ul>")
for(var index in cities){
document.write("<li>"+cities[index]+"</li>")
}
document.write("</ul>")JS函数声明
函数没有权限控制符
没有返回值类型,也没有void,需要返回在函数体中直接return即可
参数列表中,无需数据类型
调用函数时,实参和形参的个数可以不一致[多的参数不处理，可以通过给arguments查看全部参数]
声明函数时需要用function关键字
J函数没有异常列表
函数也可以作为参数传递给另一个方法
var sum = function (a, b){
console.log(arguments)
return a+b
}
function add(getSum ){
return getSum(20,30)
}
// 调用函数 接收结果
var result = add(sum)
console.log(result)方式一：
function 函数名 (参数列表){函数体}function sum(a, b){
return a+b;
}
var result =sum(10,20);
console.log(result)方式二：
var 函数名 = function (参数列表){函数体}var add = function(a, b){
return a+b;
}
var result = add(1,2);
console.log(result);JS的对象和JSON
JS声明对象的语法
语法1 通过new Object()直接创建对象
var person =new Object();
// 给对象添加属性并赋值
person.name="张小明";
person.age=10;
person.foods=["苹果","橘子","香蕉","葡萄"];
// 给对象添加功能函数
person.eat= function (){
console.log(this.age+"岁的"+this.name+"喜欢吃:")
for(var i = 0;i<this.foods.length;i++){
console.log(this.foods[i])
}
}
//获得对象属性值
console.log(person.name)
console.log(person.age)
//调用对象方法
person.eat();语法2 通过 {}形式创建对象
语法为 var person ={"属性名":"属性值","属性名","属性值","函数名":函数}var person ={
"name":"张小明",
"age":10,
"foods":["苹果","香蕉","橘子","葡萄"],
"eat":function (){
console.log(this.age+"岁的"+this.name+"喜欢吃:")
for(var i = 0;i<this.foods.length;i++){
console.log(this.foods[i])
}
}
}
//获得对象属性值
console.log(person.name)
console.log(person.age)
//调用对象方法
person.eat();JSON格式
JSON（JavaScript Object Notation, JS对象简谱）是一种轻量级的数据交换格式。JSON 就是一种字符串格式,这种格式无论是在前端还是在后端,都可以很容易的转换成对象,所以常用于前后端数据传递
JSON的语法
var obj="{'属性名':'属性值','属性名':{'属性名':'属性值'},'属性名':['值1','值1','值3']}"通过JSON.parse()方法可以将一个JSON串转换成对象
通过JSON.stringify()方法可以将一个对象转换成一个JSON格式的字符串
var personStr = `{
"name": "张小明",
"age": 20,
"girlFriend": {
"name": "铁铃",
"age": 23
},
"foods": ["苹果", "香蕉", "橘子", "葡萄"],
"pets": [
{ "petName": "大黄", "petType": "dog" },
{ "petName": "小花", "petType": "cat" }
]
}`;
console.log(personStr)
console.log(typeof personStr)
/* 将一个JSON串转换为对象 */
var person =JSON.parse(personStr);
console.log(person)
console.log(typeof person)
/* 获取对象属性值 */
console.log(person.name)
console.log(person.age)
console.log(person.girlFriend.name)
console.log(person.foods[1])
console.log(person.pets[1].petName)
console.log(person.pets[1].petType)JS常见对象
数组[长度自增，类型不固定]
new Array() 创建空数组
new Array(5) 创建数组时给定长度
new Array(ele1,ele2,ele3,... ... ,elen); 创建数组时指定元素值
[ele1,ele2,ele3,... ... ,elen]; 相当于第三种语法的简写concat() - 连接两个或更多的数组，并返回结果
copyWithin() - 从数组的指定位置拷贝元素到数组的另一个指定位置中
entries() - 返回数组的可迭代对象
every() - 检测数值元素的每个元素是否都符合条件
fill() - 使用一个固定值来填充数组
filter() - 检测数值元素，并返回符合条件所有元素的数组
find() - 返回符合传入测试（函数）条件的数组元素
findIndex() - 返回符合传入测试（函数）条件的数组元素索引
forEach() - 数组每个元素都执行一次回调函数
from() - 通过给定的对象中创建一个数组
includes() - 判断一个数组是否包含一个指定的值
indexOf() - 搜索数组中的元素，并返回它所在的位置
isArray() - 判断对象是否为数组
join() - 把数组的所有元素放入一个字符串
keys() - 返回数组的可迭代对象，包含原始数组的键(key)
lastIndexOf() - 搜索数组中的元素，并返回它最后出现的位置
map() - 通过指定函数处理数组的每个元素，并返回处理后的数组
pop() - 删除数组的最后一个元素并返回删除的元素
push() - 向数组的末尾添加一个或更多元素，并返回新的长度
reduce() - 将数组元素计算为一个值（从左到右）
reduceRight() - 将数组元素计算为一个值（从右到左）
reverse() - 反转数组的元素顺序
shift() - 删除并返回数组的第一个元素
slice() - 选取数组的一部分，并返回一个新数组
some() - 检测数组元素中是否有元素符合指定条件
sort() - 对数组的元素进行排序
splice() - 从数组中添加或删除元素
toString() - 把数组转换为字符串，并返回结果
unshift() - 向数组的开头添加一个或更多元素，并返回新的长度
valueOf() - 返回数组对象的原始值
Array.of() - 将一组值转换为数组
Array.at() - 接收一个整数值并返回该索引对应的元素，允许正数和负数
Array.flat() - 创建一个新数组，每个子数组元素都会被展开到新数组中
Array.flatMap() - 使用映射函数映射每个元素，然后将结果压缩成一个新数组Boolean对象
toString() - 把布尔值转换为字符串，并返回结果
valueOf() - 返回 Boolean 对象的原始值Date对象
getDate() - 从 Date 对象返回一个月中的某一天 (1 ~ 31)
getDay() - 从 Date 对象返回一周中的某一天 (0 ~ 6)
getFullYear() - 从 Date 对象以四位数字返回年份
getHours() - 返回 Date 对象的小时 (0 ~ 23)
getMilliseconds() - 返回 Date 对象的毫秒(0 ~ 999)
getMinutes() - 返回 Date 对象的分钟 (0 ~ 59)
getMonth() - 从 Date 对象返回月份 (0 ~ 11)
getSeconds() - 返回 Date 对象的秒数 (0 ~ 59)
getTime() - 返回 1970 年 1 月 1 日至今的毫秒数
getTimezoneOffset() - 返回本地时间与格林威治标准时间 (GMT) 的分钟差
getUTCDate() - 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)
getUTCDay() - 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)
getUTCFullYear() - 根据世界时从 Date 对象返回四位数的年份
getUTCHours() - 根据世界时返回 Date 对象的小时 (0 ~ 23)
getUTCMilliseconds() - 根据世界时返回 Date 对象的毫秒(0 ~ 999)
getUTCMinutes() - 根据世界时返回 Date 对象的分钟 (0 ~ 59)
getUTCMonth() - 根据世界时从 Date 对象返回月份 (0 ~ 11)
getUTCSeconds() - 根据世界时返回 Date 对象的秒钟 (0 ~ 59)
getYear() - 已废弃，请使用 getFullYear() 代替
parse() - 返回1970年1月1日午夜到指定日期（字符串）的毫秒数
setDate() - 设置 Date 对象中月的某一天 (1 ~ 31)
setFullYear() - 设置 Date 对象中的年份（四位数字）
setHours() - 设置 Date 对象中的小时 (0 ~ 23)
setMilliseconds() - 设置 Date 对象中的毫秒 (0 ~ 999)
setMinutes() - 设置 Date 对象中的分钟 (0 ~ 59)
setMonth() - 设置 Date 对象中月份 (0 ~ 11)
setSeconds() - 设置 Date 对象中的秒钟 (0 ~ 59)
setTime() - 以毫秒设置 Date 对象
setUTCDate() - 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)
setUTCFullYear() - 根据世界时设置 Date 对象中的年份（四位数字）
setUTCHours() - 根据世界时设置 Date 对象中的小时 (0 ~ 23)
setUTCMilliseconds() - 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)
setUTCMinutes() - 根据世界时设置 Date 对象中的分钟 (0 ~ 59)
setUTCMonth() - 根据世界时设置 Date 对象中的月份 (0 ~ 11)
setUTCSeconds() - 根据世界时 (UTC) 设置指定时间的秒字段
setYear() - 已废弃，请使用 setFullYear() 代替
toDateString() - 把 Date 对象的日期部分转换为字符串
toGMTString() - 已废弃，请使用 toUTCString() 代替
toISOString() - 使用 ISO 标准返回字符串的日期格式
toJSON() - 以 JSON 数据格式返回日期字符串
toLocaleDateString() - 根据本地时间格式，把 Date 对象的日期部分转换为字符串
toLocaleTimeString() - 根据本地时间格式，把 Date 对象的时间部分转换为字符串
toLocaleString() - 根据本地时间格式，把 Date 对象转换为字符串
toString() - 把 Date 对象转换为字符串
toTimeString() - 把 Date 对象的时间部分转换为字符串
toUTCString() - 根据世界时，把 Date 对象转换为字符串
UTC() - 根据世界时返回 1970 年 1 月 1 日到指定日期的毫秒数
valueOf() - 返回 Date 对象的原始值Math
abs(x) - 返回 x 的绝对值
acos(x) - 返回 x 的反余弦值
asin(x) - 返回 x 的反正弦值
atan(x) - 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值
atan2(y,x) - 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）
ceil(x) - 对数进行上舍入
cos(x) - 返回数的余弦
exp(x) - 返回 Ex 的指数
floor(x) - 对 x 进行下舍入
log(x) - 返回数的自然对数（底为e）
max(x,y,z,...,n) - 返回 x,y,z,...,n 中的最高值
min(x,y,z,...,n) - 返回 x,y,z,...,n 中的最低值
pow(x,y) - 返回 x 的 y 次幂
random() - 返回 0 ~ 1 之间的随机数
round(x) - 四舍五入
sin(x) - 返回数的正弦
sqrt(x) - 返回数的平方根
tan(x) - 返回角的正切
tanh(x) - 返回一个数的双曲正切函数值
trunc(x) - 将数字的小数部分去掉，只保留整数部分Number
isFinite() - 检测指定参数是否为无穷大
isInteger() - 检测指定参数是否为整数
isNaN() - 检测指定参数是否为 NaN
isSafeInteger() - 检测指定参数是否为安全整数
toExponential(x) - 把对象的值转换为指数计数法
toFixed(x) - 把数字转换为字符串，结果的小数点后有指定位数的数字
toLocaleString(locales, options) - 返回数字在特定语言环境下的表示字符串
toPrecision(x) - 把数字格式化为指定的长度
toString() - 把数字转换为字符串，使用指定的基数
valueOf() - 返回一个 Number 对象的基本数字值String
charAt() - 返回在指定位置的字符
charCodeAt() - 返回在指定的位置的字符的 Unicode 编码
concat() - 连接两个或更多字符串，并返回新的字符串
endsWith() - 判断当前字符串是否是以指定的子字符串结尾的（区分大小写）
fromCharCode() - 将 Unicode 编码转为字符
indexOf() - 返回某个指定的字符串值在字符串中首次出现的位置
includes() - 查找字符串中是否包含指定的子字符串
lastIndexOf() - 从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置
match() - 查找找到一个或多个正则表达式的匹配
repeat() - 复制字符串指定次数，并将它们连接在一起返回
replace() - 在字符串中查找匹配的子串，并替换与正则表达式匹配的子串
replaceAll() - 在字符串中查找匹配的子串，并替换与正则表达式匹配的所有子串
search() - 查找与正则表达式相匹配的值
slice() - 提取字符串的片断，并在新的字符串中返回被提取的部分
split() - 把字符串分割为字符串数组
startsWith() - 查看字符串是否以指定的子字符串开头
substr() - 从起始索引号提取字符串中指定数目的字符
substring() - 提取字符串中两个指定的索引号之间的字符
toLowerCase() - 把字符串转换为小写
toUpperCase() - 把字符串转换为大写
trim() - 去除字符串两边的空白
toLocaleLowerCase() - 根据本地主机的语言环境把字符串转换为小写
toLocaleUpperCase() - 根据本地主机的语言环境把字符串转换为大写
valueOf() - 返回某个字符串对象的原始值
toString() - 返回一个字符串事件的绑定
HTML 事件可以是浏览器行为，也可以是用户行为。 当这些一些行为发生时,可以自动触发对应的JS函数的运行,我们称之为事件发生.JS的事件驱动指的就是行为触发代码运行的这种特点
常见事件
鼠标事件
onclick - 当用户点击某个对象时调用的事件句柄
oncontextmenu - 在用户点击鼠标右键打开上下文菜单时触发
ondblclick - 当用户双击某个对象时调用的事件句柄
onmousedown - 鼠标按钮被按下
onmouseenter - 当鼠标指针移动到元素上时触发
onmouseleave - 当鼠标指针移出元素时触发
onmousemove - 鼠标被移动
onmouseover - 鼠标移到某元素之上
onmouseout - 鼠标从某元素移开
onmouseup - 鼠标按键被松开键盘事件
onkeydown - 某个键盘按键被按下
onkeypress - 某个键盘按键被按下并松开
onkeyup - 某个键盘按键被松开表单事件
onblur - 元素失去焦点时触发
onchange - 该事件在表单元素的内容改变时触发（input, keygen, select, 和 textarea）
onfocus - 元素获取焦点时触发
onfocusin - 元素即将获取焦点时触发
onfocusout - 元素即将失去焦点时触发
oninput - 元素获取用户输入时触发
onreset - 表单重置时触发
onsearch - 用户向搜索域输入文本时触发（input="search"）
onselect - 用户选取文本时触发（input 和 textarea）
onsubmit - 表单提交时触发事件的绑定
通过属性绑定
<head>
<meta charset="UTF-8">
<title>小标题</title>
<script>
function testDown1(){
console.log("down1")
}
function testDown2(){
console.log("down2")
}
function testFocus(){
console.log("获得焦点")
}
function testBlur(){
console.log("失去焦点")
}
function testChange(input){
console.log("内容改变")
console.log(input.value);
}
function testMouseOver(){
console.log("鼠标悬停")
}
function testMouseLeave(){
console.log("鼠标离开")
}
function testMouseMove(){
console.log("鼠标移动")
}
</script>
</head>
<body>
<input type="text"
onkeydown="testDown1(),testDown2()"
onfocus="testFocus()"
onblur="testBlur()"
onchange="testChange(this)"
onmouseover="testMouseOver()"
onmouseleave="testMouseLeave()"
onmousemove="testMouseMove()"
/>
</body>通过事件属性绑定函数,在行为发生时会自动执行函数
一个事件可以同时绑定多个函数[用“，”分隔]
一个元素可以同时绑定多个事件
方法中可以传入 this对象,代表当前元素
onsubmit="reruen testSubmit()"弹窗的三种方式：
alert():信息提示框
prompt():信息输入框
comfirm():信息确认框function testSubmit() {
var flag = confirm("确定要提交表单吗？");
if(!flag){
//event.preventDefault(); // 阻止表单提交
return false;
}
return true;
};通过DOM编程绑定
通过DOM编程,用代码触发,执行某些代码相当于发生了某些行为
<head>
<meta charset="UTF-8">
<title>小标题</title>
<script>
// 页面加载完毕事件,浏览器加载完整个文档行为
window.onload=function(){
var in1 =document.getElementById("in1");
// 通过DOM编程绑定事件
in1.onchange=testChange
}
function testChange(){
console.log("内容改变")
console.log(event.target.value);
}
</script>
</head>
<body>
<input id="in1" type="text" />
</body>BOM编程
概述
BOM(Browser Object Model)，即浏览器对象模型。通过window对象及属性的一系列方法 控制浏览器行为。将浏览器窗口的各个组成部分抽象成各个对象,通过各个对象的API操作组件行为的一种编程。
location对象 window对象的属性之一，代表浏览器的地址栏
history对象 window对象的属性之一，代表浏览器的访问历史
screen对象 window对象的属性之一，代表屏幕
navigator对象 window对象的属性之一，代表浏览器软件本身
document对象 window对象的属性之一，代表浏览器窗口目前解析的html文档
console对象 window对象的属性之一，代表浏览器开发者工具的控制台
localStorage对象 window对象的属性之一，代表浏览器的本地数据持久化存储
sessionStorage对象 window对象的属性之一，代表浏览器的本地数据会话级存储通过BOM编程控制浏览器行为演示
三种弹窗方式
<head>
<meta charset="UTF-8">
<title>小标题</title>
<script>
function testAlert(){
//普通信息提示框
window.alert("提示信息");
}
function testConfirm(){
//确认框
var con =confirm("确定要删除吗?");
if(con){
alert("点击了确定")
}else{
alert("点击了取消")
}
}
function testPrompt(){
//信息输入对话框
var res =prompt("请输入昵称","例如:张三");
alert("您输入的是:"+res)
}
</script>
</head>
<body>
<input type="button" value="提示框" onclick="testAlert()"/> <br>
<input type="button" value="确认框" onclick="testConfirm()"/> <br>
<input type="button" value="对话框" onclick="testPrompt()"/> <br>
</body>页面跳转
<head>
<meta charset="UTF-8">
<title>小标题</title>
<script>
function goAtguigu(){
var flag =confirm("即将跳转到尚硅谷官网,本页信息即将丢失,确定吗?")
if(flag){
// 通过BOM编程地址栏url切换
window.location.href="http://www.atguigu.com"
}
}
</script>
</head>
<body>
<input type="button" value="跳转到尚硅谷" onclick="goAtguigu()"/> <br>
</body>通过BOM编程实现会话级和持久级数据存储
会话级数据 : 内存型数据,是浏览器在内存上临时存储的数据,浏览器关闭后,数据失去,通过window的sessionStorge属性实现
持久级数据 : 磁盘型数据,是浏览器在磁盘上持久存储的数据,浏览器关闭后,数据仍在,通过window的localStorge实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function saveItem(){
// 让浏览器存储一些会话级数据
window.sessionStorage.setItem("sessionMsg","sessionValue")
// 让浏览器存储一些持久级数据
window.localStorage.setItem("localMsg","localValue")
console.log("haha")
}
function removeItem(){
// 删除数据
sessionStorage.removeItem("sessionMsg")
localStorage.removeItem("localMsg")
}
function readItem(){
console.log("read")
// 读取数据
console.log("session:"+sessionStorage.getItem("sessionMsg"))
console.log("local:"+localStorage.getItem("localMsg"))
}
</script>
</head>
<body>
<button onclick="saveItem()">存储数据</button>
<button onclick="removeItem()">删除数据</button>
<button onclick="readItem()">读取数据</button>
</body>
</html>DOM编程
概述
DOM(Document Object Model)编程就是使用document对象的API完成对网页HTML文档进行动态修改,以实现网页数据和样式动态变化效果的编程。用window对象的document属性的相关API完成对页面元素的控制的编程
dom树中节点的类型
node 节点,所有结点的父类型
element 元素节点,node的子类型之一,代表一个完整标签
attribute 属性节点,node的子类型之一,代表元素的属性
text 文本节点,node的子类型之一,代表双标签中间的文本
获取页面元素的方式
直接获取
var el1 =document.getElementById("username") // 根据元素的id值获取页面上唯一的一个元素
var els =document.getElementsByTagName("input") // 根据元素的标签名获取多个同名元素
var els =document.getElementsByName("aaa") // 根据元素的name属性值获得多个元素
var els =document.getElementsByClassName("a") // 根据元素的class属性值获得多个元素
function fun1(){
//1 获得document
//2 通过document获得元素
var el1 =document.getElementById("username")
// 根据元素的id值获取页面上唯一的一个元素
console.log(el1)
}
function fun2(){
var els =document.getElementsByTagName("input")
// 根据元素的标签名获取多个同名元素
for(var i = 0 ;i<els.length;i++){
console.log(els[i])
}
}
function fun3(){
var els =document.getElementsByName("aaa")
// 根据元素的name属性值获得多个元素
console.log(els)
for(var i =0;i< els.length;i++){
console.log(els[i])
}
}
function fun4(){
var els =document.getElementsByClassName("a")
// 根据元素的class属性值获得多个元素
for(var i =0;i< els.length;i++){
console.log(els[i])
}
}间接获取
var cs=div01.children // 通过父元素获取全部的子元素
var firstChild =div01.firstElementChild // 通过父元素获取第一个子元素
var lastChild = div01.lastElementChild // 通过父元素获取最后一个子元素
var parent = pinput.parentElement // 通过子元素获取父元素
var pElement = pinput.previousElementSibling // 获取前面的第一个元素
var nElement = pinput.nextElementSibling // 获取后面的第一个元素
function fun5(){
// 先获取父元素
var div01 = document.getElementById("div01")
// 获取所有子元素
var cs=div01.children // 通过父元素获取全部的子元素
for(var i =0;i< cs.length;i++){
console.log(cs[i])
}
console.log(div01.firstElementChild) // 通过父元素获取第一个子元素
console.log(div01.lastElementChild) // 通过父元素获取最后一个子元素
}
function fun6(){
// 获取子元素
var pinput =document.getElementById("password")
console.log(pinput.parentElement) // 通过子元素获取父元素
}
function fun7(){
// 获取子元素
var pinput =document.getElementById("password")
console.log(pinput.previousElementSibling) // 获取前面的第一个元素
console.log(pinput.nextElementSibling) // 获取后面的第一个元素
}操作元素属性值
属性操作
操作元素的属性
元素名.属性名=""操作元素的样式[驼峰转换]
元素名.style.样式名="" 样式名"-" 要进行驼峰转换 function changeAttribute(){
var in1 =document.getElementById("in1")
// 语法 元素.属性名=""
// 获得属性值
console.log(in1.type)
console.log(in1.value)
// 修改属性值
in1.type="button"
in1.value="嗨"
}
function changeStyle(){
var in1 =document.getElementById("in1")
// 语法 元素.style.样式名="" 原始样式名中的"-"符号 要转换驼峰式 background-color > backgroundColor
in1.style.color="green"
in1.style.borderRadius="5px"
}内部文本操作
操作元素的文本[区分内容是否携带HTML标签]
元素名.innerText 只识别文本
元素名.innerHTML 同时可以识别html代码 function changeText(){
var div01 =document.getElementById("div01")
/*
语法 元素名.innerText 只识别文本
元素名.innerHTML 同时可以识别html代码
*/
console.log(div01.innerText)
div01.innerHTML="<h1>嗨</h1>"
}增删元素
var element =document.createElement("元素名") // 创建元素
父元素.appendChild(子元素) // 在父元素中追加子元素
父元素.insertBefore(新元素,参照元素) // 在某个元素前增加元素
父元素.replaceChild(新元素,被替换的元素) // 用新的元素替换某个子子元素
元素.remove() // 删除当前元素
function addCs(){
// 创建一个新的元素
// 创建元素
var csli =document.createElement("li") // <li></li>
// 设置子元素的属性和文本 <li id="cs">长沙</li>
csli.id="cs"
csli.innerText="长沙"
// 将子元素放入父元素中
var cityul =document.getElementById("city")
// 在父元素中追加子元素
cityul.appendChild(csli)
}
function addCsBeforeSz(){
// 创建一个新的元素
// 创建元素
var csli =document.createElement("li") // <li></li>
// 设置子元素的属性和文本 <li id="cs">长沙</li>
csli.id="cs"
csli.innerText="长沙"
// 将子元素放入父元素中
var cityul =document.getElementById("city")
// 在父元素中追加子元素
//cityul.insertBefore(新元素,参照元素)
var szli =document.getElementById("sz")
cityul.insertBefore(csli,szli)
}
function replaceSz(){
// 创建一个新的元素
// 创建元素
var csli =document.createElement("li") // <li></li>
// 设置子元素的属性和文本 <li id="cs">长沙</li>
csli.id="cs"
csli.innerText="长沙"
// 将子元素放入父元素中
var cityul =document.getElementById("city")
// 在父元素中追加子元素
//cityul.replaceChild(新元素,被替换的元素)
var szli =document.getElementById("sz")
cityul.replaceChild(csli,szli)
}
function removeSz(){
var szli =document.getElementById("sz")
// 哪个元素调用了remove该元素就会从dom树中移除
szli.remove()
}
function clearCity(){
var cityul =document.getElementById("city")
/* var fc =cityul.firstChild
while(fc != null ){
fc.remove()
fc =cityul.firstChild
} */
cityul.innerHTML=""
//cityul.remove()
}正则表达式
概述
正则表达式是描述字符模式[格式]的对象。正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。
正则表达式应用
验证[是否包含某个值，boolean]
使用正则表达式对象来调用方法。
// 创建一个最简单的正则表达式对象
var reg = /o/;
// 创建一个字符串对象作为目标字符串
var str = 'Hello World!';
// 调用正则表达式对象的test()方法验证目标字符串是否满足我们指定的这个模式，返回结果true
console.log("/o/.test('Hello World!')="+reg.test(str));匹配[是否包含某个值，下标]
// 创建一个最简单的正则表达式对象
var reg = /o/;
// 创建一个字符串对象作为目标字符串
var str = 'Hello World!';
// 在目标字符串中查找匹配的字符，返回匹配结果组成的数组
var resultArr = str.match(reg);
// 数组长度为1
console.log("resultArr.length="+resultArr.length);
// 数组内容是o
console.log("resultArr[0]="+resultArr[0]);替换
使用字符串对象来调用方法。
// 创建一个最简单的正则表达式对象
var reg = /o/;
// 创建一个字符串对象作为目标字符串
var str = 'Hello World!';
var newStr = str.replace(reg,'@');
// 只有第一个o被替换了，说明我们这个正则表达式只能匹配第一个满足的字符串
console.log("str.replace(reg)="+newStr);//Hell@ World!
// 原字符串并没有变化，只是返回了一个新字符串
console.log("str="+str);//str=Hello World!全文查找
如果不使用g对正则表达式对象进行修饰，则使用正则表达式进行查找时，仅返回第一个匹配；使用g后，返回所有匹配。
// 目标字符串
var targetStr = 'Hello World!';
// 没有使用全局匹配的正则表达式
var reg = /[A-Z]/;
// 获取全部匹配
var resultArr = targetStr.match(reg);
// 数组长度为1
console.log("resultArr.length="+resultArr.length);
// 遍历数组，发现只能得到'H'
for(var i = 0; i < resultArr.length; i++){
console.log("resultArr["+i+"]="+resultArr[i]);
}// 目标字符串
var targetStr = 'Hello World!';
// 使用了全局匹配的正则表达式
var reg = /[A-Z]/g;
// 获取全部匹配
var resultArr = targetStr.match(reg);
// 数组长度为2
console.log("resultArr.length="+resultArr.length);
// 遍历数组，发现可以获取到“H”和“W”
for(var i = 0; i < resultArr.length; i++){
console.log("resultArr["+i+"]="+resultArr[i]);
}忽略大小写
//目标字符串
var targetStr = 'Hello WORLD!';
//没有使用忽略大小写的正则表达式
var reg = /o/g;
//获取全部匹配
var resultArr = targetStr.match(reg);
//数组长度为1
console.log("resultArr.length="+resultArr.length);
//遍历数组，仅得到'o'
for(var i = 0; i < resultArr.length; i++){
console.log("resultArr["+i+"]="+resultArr[i]);
}//目标字符串
var targetStr = 'Hello WORLD!';
//使用了忽略大小写的正则表达式
var reg = /o/gi;
//获取全部匹配
var resultArr = targetStr.match(reg);
//数组长度为2
console.log("resultArr.length="+resultArr.length);
//遍历数组，得到'o'和'O'
for(var i = 0; i < resultArr.length; i++){
console.log("resultArr["+i+"]="+resultArr[i]);
}元字符使用
var str01 = 'I love Java';
var str02 = 'Java love me';
// 匹配以Java开头
var reg = /^Java/g;
console.log('reg.test(str01)='+reg.test(str01)); // false
console.log("<br />");
console.log('reg.test(str02)='+reg.test(str02)); // truevar str01 = 'I love Java';
var str02 = 'Java love me';
// 匹配以Java结尾
var reg = /Java$/g;
console.log('reg.test(str01)='+reg.test(str01)); // true
console.log("<br />");
console.log('reg.test(str02)='+reg.test(str02)); // false字符集合的使用
//数字+字母+下划线，6-16位
var targetStr="HelloWorld";
var reg=/^[a-z0-9A-Z_]{6,16}$/;
var b = reg.test(targetStr);//true
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。
更多推荐
10
0- 0
已为社区贡献2条内容
所有评论(0)