JavaScript
JavaScript是一门跨平台、面向对象的脚本语言，来控制网页行为的，它能使网页可交互。
功能：可以来增强用户和HTML页面的交互过程，可以来控制html元素，让页面有动态效果，增强用户体验
ECMAScript：客户端脚本语言的标准
基本语法
与html结合方式
JavaScript和html结合的方式为内部JS和外部JS，
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部JS：可定义在html页面的任意位置-->
<script>
alert("Hello World!")
</script>
<!--外部JS-->
<script src="js/a.js"></script>
</head>
<body>
<input type="text">
</body>
注释
单行注释：//
多行注释：/**/
输出语言
使用window.alert() 写入警告框
使用document.write()写入HTML输出
使用console.log()写入浏览器控制台
数据类型
原始数据类型（基本数据类型）：
1、number：数字（整数/小数/NaN-not a number一个不是数字的数字类型）
2、string：字符串 字符/字符串
3、boolean：true和false
4、null：一个对象为空的占位符
5、underfined：未定义 如果一个变量没有给初始化值，则会被默认赋值为underfined
引用数据类型：对象
变量：一小块存储数据的内存空间
JavaScript中用var关键字（variable的缩写）来声明变量。
var的作用域为全局变量，变量可以重复定义
ES6新增了let关键字来定义变量，它的用法类似于var,但是所声明的变量，只在let关键字所在的代码块内部有效，且不允许重复声明
ES6新增了const关键字，用来声明一个只能的常量，一旦声明，常量的值就不能改变。
Java语言是强类型语言，而JavaScript是弱类型语言，变量可以存放不同类型的值。
强类型：在开辟变量存储空间时，定义了空间将来存储的数据类型，只能存储固定类型的数据
弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据
语法：通过var 变量名 = 初始化值；
<script>
//定义变量
var a = 3;
alert(a);
</script>
不同数据类型的定义值
<script>
//定义number类型
var num1 = 1;
var num2 = 1.2;
var num3 = NaN;
//输出到页面上
document.write(num1+"<br>");//1
document.write(num2+"<br>");//2
document.write(num3+"<br>");//3
//定义string类型
var str1 = "abc";
var str2 = 'def';
document.write(str1+"<br>");//abc
document.write(str2+"<br>");//def
//定义boolean类型
var flog = true;
document.write(flog+"<br>");//true
//定义null、undefined
var obj = null;
var o = undefined;
var b;
document.write(obj+"<br>");//null
document.write(o+"<br>");//undefined
document.write(b+"<br>");//undefined
</script>
对变量或值调用typeof运算符可以返回其数据类型
<script>
//定义number类型
var num1 = 1;
var num2 = 1.2;
var num3 = NaN;
//输出到页面上
document.write(num1+"---"+typeof(num1)+"<br>");//1---number
document.write(num2+"---"+typeof(num2)+"<br>");//1.2---number
document.write(num3+"---"+typeof(num3)+"<br>");//NaN---number
//定义string类型
var str1 = "abc";
var str2 = 'def';
document.write(str1+"---"+typeof(str1)+"<br>");//abc---string
document.write(str2+"---"+typeof(str2)+"<br>");//def---string
//定义boolean类型
var flog = true;
document.write(flog+"---"+typeof(flog)+"<br>");//true---boolean
//定义null、undefined
var obj = null;
var o = undefined;
var b;
document.write(obj+"---"+typeof(obj)+"<br>");//null---object
document.write(o+"---"+typeof(o)+"<br>");//undefined---undefined
document.write(b+"---"+typeof(b)+"<br>");//undefined---undefined
</script>
运算符
1、一元运算符：只有一个运算数的运算符++ --，+（正号）
在JS中，如果运算数不是运算符要求的类型，那么JS引擎会自动的将运算数进行类型转换，将其他类型转换为number
string类型转number：按照字面值转换，如果字面值不是数字，则转为NaN（不是数数字的数字），而且NaN和任何数字做运算最终值还是NaN，一般使用parseInt进行转换。
boolean转number：true转为1，false转为0
其余转换也是NaN
2、算数运算符：+ - * / %…
3、赋值运算符：= += -+ …
4、比较运算符：> < >= <= ===(全等于) …
其中双等于的比较规则如下：
类型相同比较：直接比较
字符串，按照字典顺序比较，按位逐一比较（ASCII），直到得出大小为止，
类型不同比较：先进行类型转换，再比较
字符串会转换为数字再和数字比较
===，全等，在比较之前，先判断类型，如果类型不一样，则直接返回false
5、逻辑运算符：&& || ！（与&&、或||属于短路操作，即如果第一个操作数能够决定结果，那么就不会再对第二个操作数求值。||第一个为true就不再继续运算，而&&第一个为false就不再继续运算）
其他类型转boolean
number：0或NaN为假，其他为真
string：除了空字符串，其它都是true
null&undefined：都是false
对象：所有对象都为true
6、三元运算符 ? :表达式
<script>
var a = 3;
var b = 4;
var c = a > b ? 1:0;
alert(c);//0
</script>
流程控制语句
if…else…
if(obj){//防止空指针异常，如果obj为空则为false，if语句就不会在执行了。
//Java中可以写成obj=true
}
switch：在Java中switch语句中可以接收的数据类型为 byte、int、short、char，枚举（1.5）、string（1.7)；但是在JS中任意类型都可接收
while
do while
for
特殊语法
<script>
//特殊语法1：JS中语句以分号结尾，如果一行只有一条语句，则分号可以省略
var a = 3;
alert(a);
//特殊语法2：变量定义使用var关键字，也可以不使用
//用：定义的变量是局部变量
//不用：定义的是全局变量，不建议使用
var b = 4;
</script>
使用JS输出一个99乘法表
<head>
<meta charset="UTF-8">
<title>99</title>
<style>
td{
border:1px solid;
}
</style>
<script>
document.write("<table align='center'>");
//1、使用基本for循环嵌套展示乘法表
for (var i = 1; i <=9 ; i++) {
document.write("<tr>");
for (var j = 1; j <=i ; j++){
document.write("<td>");
//输出
document.write(i + "*" + j + "=" + (i * j) + "   ");
document.write("</td>");
}
//输出换行
//document.write("<br>")
document.write("</tr>")
}
//2、完成表格的嵌套
document.write("</table>")
</script>
</head>
基本对象
Function：函数对象
Function:函数对象，其实和Java中的方法一样，Java中一个方法或者函数是对象的一部分，但在JS中Function就是一个对象。
<script>
//Function:函数（方法）对象
//1、创建：
// 1. var fun = new Function(形参列表，方法体);
// 2.function 方法名称（形式参数列表）{
// 方法体
// }
// 3.var 方法名 = function(形式参数列表){
// 方法体
// }
//
//2、方法：
//3、属性：
// length:代表形参的个数
//4、特点：
// 1.方法定义时，形参的类型不用写，返回值类型也不用写
// 2.方法是一个对象，如果定义名称相同的方法，后一个会覆盖前一个方法
// 3.在JS中方法的调用只与方法的名称有关，和参数列表无关
// 4.在方法声明中有一个隐藏的内置对象（数组），arguments，封装了所有实际参数
//5、调用：
// 方法名称（实际参数列表）;
//1、创建方式1
var fun1 = new Function("a","b","alert(a);");
//调用方法
fun1(3,4);
alert(fun1.length);
//1、创建方式2
function fun2(a,b){
alert(a+b);
}
fun2(3,4);
alert(fun2.length);
//1、创建方式3
var fun3 = function (a,b){
alert(a+b);
}
fun3(3,4);
alert(fun3.length);
</script>
Array：数组对象
<script>
/*
* Array：数组对象
* 1、创建
* 1.var arr = new Array(元素列表);
* 2.var arr = new Array(默认长度);
* 3.var arr = [元素列表];
* 2、方法
* 1.join(参数):将数组中的元素按照指定的分割符拼接为字符串
* 2.push():向集合的末尾添加一个或更多的元素，并返回新的长度
* 3、属性
* 1.length:数组的长度
* 4、特点
* 1.JS中，数组中元素的类型可变的
* 2.JS中，数组的长度是可变的
* 3.
* */
//1、创建方式1
var arr1 = new Array(1,2,3);
var arr2 = new Array(5);
var arr3 = [3,4,5];
var arr4 = new Array();//创建一个空数组
var arr5 = [1,"abc",true];//数组中元素的类型可变的
document.write(arr5[0] + "<br>");//按照数组的下标访问数组元素
document.write(arr5[3] + "<br>");//因为数组长度可变，所以可以越界，arr5会自动扩容，其内容为undefined
alert(arr5.length);//访问3下标长度为4
document.write(arr5 + "<br>");
document.write(arr5.join("--") + "<br>")//join()如果不进行传参会按照逗号分隔，如果指定就为指定的格式
arr5.push(10);//向集合的末尾添加一个或更多的元素，并返回新的长度
document.write(arr5.join("--") + "<br>")
document.write(arr1 + "<br>");//123
document.write(arr2 + "<br>");//,,,,其中5代表元素的长度
document.write(arr3 + "<br>");//345
</script>
Boolean：对象表示两个值：true或false
new Boolean(value);//构造函数
Boolean(value);//转换函数
Date：对象用于处理日期和时间
<script>
/*
* Date:日期对象
* 1、var date = new Date();
* 2、方法：
* tolocaleString():返回当前date对象对应的时间本地字符串格式
* getTime():获取毫秒值，返回当前日期对象描述的时间到1970年1月1日零点的毫秒值差
*
* */
var date = new Date();
document.write(date + "<br>");//Mon Aug 23 2021 22:09:21 GMT+0800 (中国标准时间)
document.write(date.toLocaleString() + "<br>");//2021/8/23下午10:09:21
document.write(date.getTime() + "<br>");//1629727911686
</script>
Math：数学
<script>
/*
* Math:数学
* 1、创建：
* 特点：Math对象不用创建，直接使用 math.方法名();
* 2、方法：
* random():返回0-1之间的随机数,包含0不包含1
* ceil(x):对数进行上舍入,向上取整
* floor(x):对数进行下舍入，向下取整
* round(x):把数四舍五入为最接近的整数
* 3、属性：PI
* */
document.write(Math.PI + "<br>");//3.141592653589793
document.write(Math.random() + "<br>");//返回0-1之间的随机数
document.write(Math.round(3.14) + "<br>");//3
document.write(Math.ceil(3.14) + "<br>");//4
document.write(Math.floor(3.14) + "<br>");//3
/*
* 取1-100之间的随机数
* 1、Math.random()产生随机数，范围（0-1]小数
* 2、乘以100-->[0，99.999]小数
* 3、舍弃小数部分：floor-->[0-99]整数
* 4、+1:为[1-100]之间的随机整数
* */
var number = Math.floor(Math.random() * 100) + 1;
document.write(number);
</script>
Number：原始数据类型的包装类
String：原始数据类型的包装类
RegExp：正则表达式对象
正则表达式：定义字符串的组成规则
1、定义单个字符 [ ]：如[a] a [ab] a或b [a~z ] a到z
注意：特殊符号代表特殊含义的单个字符：\d:单个数组字符[0-9] \w:单个单词字符[a-z 0-9 A-Z]
2、量词符号： ？：出现0次或1次
*：出现0次或多次
+：出现1次或多次
{m,n}：表示 m<=数量<=n,\w{6,12}:表示6-12位单词字符
m如果缺省：{，n}：最多n次
n如果缺省：{m，}：最少m次
3、开始结束符号 ^：开始 $：结束
4、正则对象：
var reg = new RegExp(“正则表达式”);
var reg = /正则表达式/;
<script>
//正则对象
//1、创建
var reg = new RegExp("正则表达式");
var reg = /正则表达式/;
//2、方法
//test(参数):验证指定的字符串是否符合正则定义的规范
var reg1 = new RegExp("^\\w{6,12}$");//定义两根反斜线是为了防止单个\转义
var reg2 = /^\w{6,12}$/;
alert(reg1);
alert(reg2)
var username = "zhangsan";
//验证
var flog = reg1.test(username);
alert(flog);//true
</script>
Global：全局对象
全局对象，这个Global中封装的方法不需要对象就可以直接调用。方法名();
方法：
<script>
//encodeURI():url编码
//decodeURI():url解码
//encodeURIComponent():url编码 编码字符更多
//decodeURIComponent():url解码
//parseInt():将字符串转数字
// 逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number
//isNaN():判断一个值是否是NaN
// NaN参与的==比较全部为false，也就是说NaN==NaN也显示为faluse，所以需要使用isNaN来判断该指是否为NaN
//eval():可以解析JS片段，使得字符串alert(123)按照真正的JS代码来指定弹出效果。
var str = "小甜甜";
var encede = encodeURI(str);//编码
document.write(encede + "<br>");//%E5%B0%8F%E7%94%9C%E7%94%9C
var s = decodeURI(encede);//解码
document.write(s + "<br>");//小甜甜
var str1 = "刘辣子";
var encede1 = encodeURIComponent(str1);
document.write(encede1 + "<br>");//%E5%88%98%E8%BE%A3%E5%AD%90
var s1 = decodeURIComponent(encede1);
document.write(s1 + "<br>");//刘辣子
var str2 = "123abc";
var number = parseInt(str2);
alert(number + 1);//124,成功将字符转换为数字，abc是不会转的
var str3 = "a123abc";
var number1 = parseInt(str3);
alert(number1 + 1);//NaN
var a = NaN;
document.write(a == NaN + "<br>");//false,所以需要使用isNaN()来判断
document.write(isNaN(a) + "<br>");//true
var jscode = "alert(123)";
alert(jscode);//alert(123)
eval(jscode);//123
</script>
DOM和事件
DOM介绍
功能：控制HTML文档的内容
代码：获取页面的标签（元素）对象 Element
document.getElementById(“id值”)；通过元素的id获取元素对象
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img id="light" src="img/off.gif">
<script>
//通过id获取元素对象
var light = document.getElementById("light");
alert(light);
light.src = "img/on.gif";
</script>
</body>
</html>
操作Element对象：
1、设置标签体属性值：明确获取的对象是哪一个、查看API文档找其中有哪些属性可以设置
<body>
<img id="light" src="img/off.gif">
<script>
//通过id获取元素对象
var light = document.getElementById("light");
alert("更换图片？");
light.src = "img/on.gif";
</script>
</body>
2、修改标签体的内容：属性（innerHTML）
<h1 id = "title">哈哈哈哈哈</h1>
<script>
//获取h1标签对象
var title = document.getElementById("title");
alert("我要换内容了")
//修改内容
title.innerHTML = "hahahaah";
</script>
事件介绍
功能：某些组件被执行了某些操作后，触发某些代码的执行
如何绑定事件：
1、直接在HTML标签上，指定事件的属性（操作），属性值就是js的代码。事件：onclick-----单击事件
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<script>
function fun(){
alert('我被点了');
}
</script>
</head>
<body>
<img id="light" src="img/off.gif" onclick="fun();">
</body>
2、通过JS获取元素对象，指定事件属性，设置一个函数耦合度低
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
</head>
<body>
<img id="light1" src="img/off.gif" >
<script>
function fun(){
alert('我被点了');
}
//1、获取light1对象
var light1 = document.getElementById("light1");
//2、绑定事件
light1.onclick = fun();
</script>
</body>
BOM概述
1、概念：Browser Object Model 浏览器对象模型，将浏览器的各个组成部分封装成对象。
2、组成：
Window：窗口对象
Navigator:浏览器对象
Screen:显示器屏幕对象
History：历史记录对象
Location：地址栏对象
Window
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>window</title>
<script>
/* window:窗口对象
* 1、创建
* 2、方法
* 与弹出框框有关的方法
* alert() 显示带有一段消息和一个确认按钮的警告框。
* confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
* 如果用户点击确定按钮，则方法返回true
* 如果用户点击取消按钮，则方法返回false
* prompt() 显示可提示用户输入的对话框。
* 返回值：获取用户输入的值
* 与打开关闭有关的方法
* close() 关闭浏览器窗口（谁调用关闭谁）。
* open() 打开一个新的浏览器窗口或查找一个已命名的窗口(会返回一个新的Window对象)。
* 与定时器有关的方法
* setTimeout() 在指定的毫秒数后调用函数或计算表达式。
* 参数：JS代码或者方法对象 毫秒值
* 返回值：唯一标识，用于取消定时器
* clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
* setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
* clearInterval() 取消由 setInterval() 设置的 timeout。
* 3、属性:
* a.获取其他BOM对象history location Navigator Screen
* b.获取DOM对象document
*
* 4、特点
* Window对象不用创建可以直接使用，window使用--->window.方法名();
* window引用可以省略，方法名（);
* */
alert("hello world！");
window.alert("hahaha");
confirm("您确定要退出？");
var flag = confirm("您确定要退出？");
if (flag) {
//退出操作
alert("欢迎下次光临！")
}else {
//提示：手别抖
alert("手别抖....")
}
//输入框
var result = prompt("请输入用户名");
document.write(result);
//打开一个新窗口
open();
</script>
</head>
<body>
<input id="openBtn" type="button" value="打开窗口">
<input id="closeBtn" type="button" value="关闭已经打开的那个窗口">
<script>
var openBtn = document.getElementById("openBtn");
var newWindow;//定义一个新窗口，就可以使用新的窗口进行调用，而不是关闭当前窗口
openBtn.onclick = function (){
//打开一个新窗口
newWindow = open("https://www.baidu.com/");//在open中进行传参
}
var closeBtn = document.getElementById("closeBtn");
closeBtn.onclick = function (){
//并不是关闭一个新窗口，而是谁调用我我关闭谁
newWindow.close("https://www.baidu.com/");//其实close是window.close,关闭当前窗口，因此这样写并不会关闭新的开的窗口
}
//一次性定时器
setTimeout("alert('boom~~');",3000);
setTimeout("fun();",3000);
var id = setTimeout(fun,3000);
//取消定时器
clearTimeout(id);
function fun(){
alert('boom~~');
}
//循环定时器
var ii = setInterval(fun,2000);
clearInterval(ii)//取消循环定时器
//获取history,其他Bom对象的获取方法一样
var h1 = window.history;
var h2 = history;
//获取Dom对象、
window.document.getElementById("");//window.可以省略
document.getElementById("");
</script>
</body>
</html>
轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img id = "img" src="../img/banner_1.jpg" width="100%">
<script>
/*
* 1、在页面上使用img标签展示图片
* 2、定义一个方法修改图片的src属性
* 3、定义一个定时器，每隔3秒调用方法一次*/
//修改图片src属性
var number = 1;//定义开始的数字为1，用于后面来拼接src属性
function fun(){
number ++;
//判断number是否大于3
if (number > 3){
number = 1;
}
//获取img对象
var img = document.getElementById("img");
img.src = "../img/banner_"+number+".jpg";
}
//2、定义定时器
setInterval(fun,3000);
</script>
</body>
</html>
Loncation地址栏对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
* 1、创建（获取）
* window.location
* location
* 2、方法
* reload() 重新加载当前文档。刷新
* 3、属性
* href 设置或返回完整的 URL。
* */
//reload方法，定义一个按钮，点击按钮，刷新当前页面
</script>
</head>
<body>
<input type="button" id = "btn" value="刷新">
<input type="button" id = "gocsdn" value="去csdn">
<script>
/*
* 1、创建（获取）
* window.location
* location
* 2、方法
* reload() 重新加载当前文档。刷新
* 3、属性
* href 设置或返回完整的 URL。
* */
//reload方法，定义一个按钮，点击按钮，刷新当前页面
//1.获取按钮
var btn = document.getElementById("btn");
//2、绑定单击事件
btn.onclick = function (){
//3、刷新页面
location.reload();
}
//获取href
var href = location.href;
alert(href);
//点击按钮，访问csdn https://www.csdn.net/
//1.获取按钮
var gocsdn = document.getElementById("gocsdn");
//2、绑定单击事件
gocsdn.onclick = function (){
//3、访问csdn
location.href = "https://www.csdn.net/";
}
</script>
</body>
</html>
自动跳转首页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
text-align: center;//让p标签居中
}
span{
color: red;
}
</style>
<script>
/*
* 1、显示页面效果<p>
* 2、秒数倒计时（定时器）
* 2.1定义一个方法，获取span标签，修改span标签体的内容。时间--
* 2.2定义一个定时器，1秒执行一次该方法
* 2.3
* */
</script>
</head>
<body>
<p>
<span id= "time">5</span>秒之后，自动跳转到首页...
</p>
<script>
/*
* 1、显示页面效果<p>
* 2、秒数倒计时（定时器）
* 2.1定义一个方法，获取span标签，修改span标签体的内容。时间--
* 2.2定义一个定时器，1秒执行一次该方法
* 3、在方法中判断时间如果<=0,则跳转到首页
* */
//倒计时读秒效果实现
var second = 5;
function showTime(){
second --;
//判断时间如果<0，则跳转到首页
if (second <= 0 ){
location.href = "https://www.csdn.net/";
}
var time = document.getElementById("time");
//控制属性是.属性名，控制内容为inner
time.innerHTML = second +"";//second +""为了将其变为字符串
}
//设置定时器1秒执行一次该方法
setInterval(showTime,1000);
</script>
</body>
</html>
History
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" id = "btn" value="获取历史记录个数">
<a href = history.html>ahahah</a>
<input type="button" id = "forward" value="前进">
<script>
/*
* 1、创建（获取）
* window.history
* history
* 2、方法：
* back() 加载 history 列表中的前一个 URL。
forward() 加载 history 列表中的下一个 URL。
go(参数) 加载 history 列表中的某个具体页面。
* 参数：如果是正数则前进几个历史记录 负数则后退几个历史记录
*
*
* 3、属性：
* length 返回当前窗口历史列表中的 URL 数量。
* */
//1、获取按钮
var btn = document.getElementById("btn")
//2、绑定单击事件；
btn.onclick = function (){
//3、获取历史记录个数
var length = history.length;
alert(length);
}
//1、获取按钮
var forward = document.getElementById("forward")
//2、绑定单击事件；
forward.onclick = function (){
//3、前进
//history.forward();
history.go(1);
}
</script>
</body>
</html>
DOM概述
概念：Document Object Model 文档对象模型
将标记语言文档的各个组成部分，封装为对象，可以使用这些对象，对标记语言文档进行CRUD动态操作
W3C DOM 标准被分为3个不同的部分
核心：DOM - 针对任何结构化文档的标准模型
Document：文档对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document</title>
<script>
/*
* Document:文档对象
* 1、创建（获取）：在html dom模型中可以使用window对象来获取
* 1、window.document
* 2、document
* 2、方法
* 1、获取Element对象
* getElementById() 根据id属性值获取元素对象，id属性值一般唯一。
* getElementsByTagName() 根据元素名称获取元素对象们。
* getElementsByClassName():根据class属性值获取元素对象们，返回值是一个数组
* getElementsByName（） 根据name属性值获取元素对象们，返回值是一个数组
*
* 2、创建其他DOM对象
*
* 3、属性
* */
</script>
</head>
<body>
<div id = "div1">div1</div>
<div id = "div2">div2</div>
<div id = "div3">div3</div>
<div class="cls1">div4</div>
<div class="cls1">div5</div>
<input type="text" name="username">
<script>
/*
* Document:文档对象
* 1、创建（获取）：在html dom模型中可以使用window对象来获取
* 1、window.document
* 2、document
* 2、方法
* 1、获取Element对象
* getElementById() 根据id属性值获取元素对象，id属性值一般唯一。
* getElementsByTagName() 根据元素名称获取元素对象们。
* getElementsByClassName():根据class属性值获取元素对象们，返回值是一个数组
* getElementsByName（） 根据name属性值获取元素对象们，返回值是一个数组
*
* 2、创建其他DOM对象
* createAttribute(name) 创建拥有指定名称的属性节点，并返回新的 Attr 对象。
* createComment() 创建注释节点。
* createElement() 创建元素节点。
* createTextNode() 创建文本节点。
*
* 3、属性
* */
//getElementsByTagName() 根据元素名称获取元素对象们。返回是一个数组
var divs = document.getElementsByTagName("div")
alert(divs.length);
//getElementsByClassName():根据class属性值获取元素对象们，返回值是一个数组
var div_cls = document.getElementsByClassName("cls");
alert(div_cls.length);
//getElementsByName（） 根据name属性值获取元素对象们，返回值是一个数组
var ele_username = document.getElementsByName("username");
alert(ele_username.length);
//createElement() 创建元素节点。
var table = document.createElement("table");
alert(table);
</script>
</body>
</html>
Element：元素对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Element</title>
</head>
<body>
<a>点我试一试</a>
<input type="button" id="btn_set" value="设置属性">
<input type="button" id="btn_remove" value="删除属性">
<script>
/*
* 获取：通过document来获取和创建
* 方法：
* removeAttribute() 删除指定的属性。
* setAttribute() 添加新属性。
* */
var btn_set = document.getElementById("btn_set");
btn_set.onclick = function (){
//1、获取a标签，后面加[0]意为访问具体的这一个a标签
var element_a = document.getElementsByTagName("a")[0];
element_a.setAttribute("href","https://www.baidu.com");
}
var btn_remove = document.getElementById("btn_remove");
btn_remove.onclick = function (){
//1、获取a标签，后面加[0]意为访问具体的这一个a标签
var element_a = document.getElementsByTagName("a")[0];
element_a.removeAttribute("href","https://www.baidu.com");
}
</script>
</body>
</html>
Attribute：属性对象
Text：文本对象
Comment：注释对象
Node:节点对象，为其他5个的父对象
特点：所有dom对象都可以被认为是一个节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Node</title>
<style>
div{
border: 1px solid red;
}
#div1{
width: 200px;
height:200px;
}
#div2{
width: 100px;
height:100px;
}
#div3{
width: 100px;
height:100px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">div2</div>
div1
</div><!--div1是div节点中的子节点-->
<a href="javascript:void(0);" id="del">删除div的子节点div2</a><!--超链接如果为空，页面实则为刷新后跳转才不变-->
<a href="javascript:void(0);" id="add">添加div的子节点div3</a>
<script>
/*
* 1、方法
* CRUD dom树：
* appendChild() 向节点的子节点列表的结尾添加新的子节点。
* removeChild() 删除（并返回）当前节点的指定子节点。
* replaceChild() 用新节点替换一个子节点。
* 多学一点：
* 超链接功能：1、可以被点击，样式 2、点击后跳转到href指定的url
* 需求:保留1功能，去掉2功能-->href = "javascript:void(0);"
* 2、属性
* parentNode 返回节点的父节点。
* */
//1、获取超链接
var element_a = document.getElementById("del");
//2、绑定单击事件
element_a.onclick = function (){
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div1.removeChild(div2);
}
//1、获取超链接
var element_add = document.getElementById("add");
//2、绑定单击事件
element_add.onclick = function (){
var div1 = document.getElementById("div1");
//给div1添加子节点
//创建div节点
var div3 = document.createElement("div");
div3.setAttribute("id","div3");
div1.append(div3);
}
var div2 = document.getElementById("div2")
var div1 = div2.parentNode;
alert(div1);
</script>
</body>
表格的添加删除操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<style>
table{
border: 1px solid;
margin: auto;
width: 500px;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<div>
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="gender" placeholder="请输入性别">
<input type="button" value="添加" id="btn_add">
</div>
<table>
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a> </td>
</tr>
</table>
<script>
/*
* 一、添加
* 1、给添加按钮绑定单击事件
* 2、获取文本框的内容
* 3、创建td，设置td文本为文本框的内容
* 4、创建tr
* 5、将td添加到tr中
* 6、获取table，将tr添加到table中
* 二、删除
* 1、确定点击的是哪一个超链接
* 2、
*
* */
//1.获取按钮
document.getElementById("btn_add").onclick = function() {
//2、获取文本框的内容
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
//3.创建td，赋值td的标签体
//id的td
var td_id = document.createElement("td");
var text_id = document.createTextNode(id);
td_id.appendChild(text_id);
//name的td
var td_name = document.createElement("td");
var text_name = document.createTextNode(name);
td_name.appendChild(text_name);
//gender的td
var td_gender = document.createElement("td");
var text_gender = document.createTextNode(gender);
td_gender.appendChild(text_gender);
//a标签的td
var td_a = document.createElement("td");
var ele_a = document.createElement("a");
ele_a.setAttribute("href","javascript:void(0);");
ele_a.setAttribute("onclick","delTr(this);");
var text_a = document.createTextNode("删除");
ele_a.appendChild(text_a);
td_a.appendChild(ele_a);
//4.创建tr
var tr = document.createElement("tr")
//5.添加td到tr中
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_a);
//6.获取table
var table = document.getElementsByTagName("table")[0];
table.appendChild(tr);
}
//删除方法
function delTr(obj){
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</body>
</html>
XML： DOM - 针对XML文档的标准模型
HTML： DOM - 针对HTML文档的标准模型
标签体的设置和获取，innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
border:1px solid red;
}
</style>
</head>
<body>
<div id="div1">
div
</div>
<script>
var div = document.getElementById("div1");
var innerHTML = div.innerHTML;
alert(innerHTML);
//div标签中替换一个文本输入框
//div.innerHTML = "<input type = 'text'>";
//div标签中追加一个文本输入框
div.innerHTML += "<input type = 'text'>";
</script>
</body>
</html>
也可修改表格添加的按钮（使用innerTHML）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<style>
table{
border: 1px solid;
margin: auto;
width: 500px;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<div>
<input type="text" id="id" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="gender" placeholder="请输入性别">
<input type="button" value="添加" id="btn_add">
</div>
<table>
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a> </td>
</tr>
</table>
<script>
/*
* 一、添加
* 1、给添加按钮绑定单击事件
* 2、获取文本框的内容
* 3、创建td，设置td文本为文本框的内容
* 4、创建tr
* 5、将td添加到tr中
* 6、获取table，将tr添加到table中
* 二、删除
* 1、确定点击的是哪一个超链接
* 2、
*
* */
//1.获取按钮
document.getElementById("btn_add").onclick = function() {
//2、获取文本框的内容
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
//6.获取table
var table = document.getElementsByTagName("table")[0];
//追加一行
table.innerHTML += "<tr>\n" +
" <td>"+id+"</td>\n" +
" <td>"+name+"</td>\n" +
" <td>"+gender+"</td>\n" +
" <td><a href=\"javascript:void(0);\" οnclick=\"delTr(this);\">删除</a> </td>\n" +
" </tr>"
}
//删除方法
function delTr(obj){
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</body>
</html>
使用html元素对象的属性
控制元素的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1{
border: 1px solid red;
width: 100px;
height: 100px;
}
.d2{
border: 1px solid blue;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
<script>
//使用元素的style属性
var div1 = document.getElementById("div1");
div1.onclick = function (){
//修改样式方式1
div.style.border = "1px solid red";
div1.style.width = "200px";
//font-size,像这样有两个单词使用—连接则将-去掉
div1.style.fontSize = "20px";
}
//提前定义好类选择器的样式，通过元素的className属性来设置其class属性值
var div2 = document.getElementById("div2");
div2.onclick = function (){
div2.className = "d1";
}
</script>
</body>
</html>
事件监听机制：
概念：某些组件被执行了某些操作后，出发某些代码的执行
事件：某些操作，如：单击，双击，键盘按下，鼠标移动
事件源：组件 ，如：按钮，文本输入框…
监听器：代码。
注册监听：将事件，事件源，监听器结合在一起，当事件源上发生了某个事件，则出发执行某个监听器代码。
常见事件
1、点击事件
onclick 当用户点击某个对象时调用的时间句柄
ondblclick:双击事件
2、焦点事件
onblur:失去焦点
onfocus:元素获得焦点（点击后光标会闪烁）
3、加载事件
onload:一张页面或一幅图像完成加载
4、鼠标事件
onmousedown:鼠标按钮被按下
onmousemove:鼠标被移动
onmouseout:鼠标从某元素移开
onmouseover:鼠标移到某元素之上
onmouseup:鼠标按键被松开
5、键盘事件
onkeydown:某个键盘按键被按下
onkeyup:某个键盘 按键被松开
onkeypress:某个键盘按键被按下并松开
6、选中和改变
onchange:域的内容被改变
onselect:文本被选中
7、表单事件
onsubmit:确认按钮被点击
onreset：重置按钮被点击
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
function fun(){
return checkForm();
}
-->
<form action="#" id="form" onclick="return checkForm();">
<input name="username" id="username">
<input type="submit" value="提交">
</form>
<script>
//onload:一张页面或一幅图像完成加载,（js代码位于body上方时，因页面未加载完成出现报错）
window.onload = function (){
//onblur:失去焦点,一般用于表单校验
document.getElementById("username").onblur = function (){
//alert("失去焦点了！");
}
//onmouseover:鼠标移到某元素之上
document.getElementById("username").onmouseover = function (){
//alert("鼠标来了！");
}
//onmousedown:鼠标按钮被按下,
//定义方法时，定义一个形参，接收event对象
//event对象的button属性可以获取鼠标按钮被点击了
document.getElementById("username").onmousedown = function (){
//alert("鼠标点击进去了！");
}
//对于具体按下哪个键，可以进行传参
document.getElementById("username").onmousedown = function (event){
//alert(event.button);//左键1，中0，右2
}
}
//onkeydown:某个键盘按键被按下
document.getElementById("username").onkeydown = function (){
//alert("键盘点击了！");
}
//onchange:域的内容被改变
document.getElementById("username").onchange = function (){
//alert("input文本框中内容改变了！");
}
//onsubmit:确认按钮被点击,可以阻止表单的提交
document.getElementById("form").onsubmit = function (){
//校验用户名格式是否正确
var flag = false;
return flag;//如果返回false表单是不会被提交的
}
function checkForm(){
return false;//通过点击事件的函数也可
}
</script>
</body>
</html>
480
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
