JavaScript

最新推荐文章于 2024-05-03 23:30:14 发布
最新推荐文章于 2024-05-03 23:30:14 发布
阅读量147 收藏
点赞数 1
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52352342/article/details/119210381
版权

JavaScript

1、JavaScript

RUNOOB网

1.1、JavaScript介绍

  • JavaScript 是一种客户端脚本语言。运行在客户端浏览器中，每一个浏览器都具备解析 JavaScript 的引擎。

  • 脚本语言：不需要编译，就可以被浏览器直接解析执行了。

  • 核心功能就是增强用户和 HTML 页面的交互过程，让页面有一些动态效果。以此来增强用户的体验！

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mN9RASUm-1627539731133)(.\img\javaScript表格介绍.png)]

    1995 年，NetScape (网景)公司，开发的一门客户端脚本语言：LiveScript。后来，请来 SUN 公司的专家来 进行修改，后命名为：JavaScript。
1996 年，微软抄袭 JavaScript 开发出 JScript 脚本语言。 
1997 年，ECMA (欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，统一了所有客户 端脚本语言的编码方式。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YOGd6kDL-1627539731134)(.\img\javaScript介绍.png)]

1.2、快速入门

  • 实现步骤
  1. 创建一个 HTML。
  2. 在标签下面编写一个
  • 具体实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS快速入门</title>
</head>
<body>
    <button id="btn">点我呀</button>
</body>
</html>

引入js的方式一：内部方式

<script>
    document.getElementById("btn").onclick=function () {
        alert("点我干嘛？");
    }
</script>

引入js的方式一：外部方式

  • 创建js文件

    document.getElementById("btn").onclick=function () {
    alert("点我干嘛？");
}

  • 在html中引用外部js文件

    <script src="js/my.js"></script>

1.3、开发环境搭建

  • Node.js:JavaScript 运行环境

  • VSCode：编写前端技术的开发工具

    根据《安装工具.pdf》文档安装Node.js和VSCode。相关资料都在“资料”文件夹中。

1.4、快速入门总结

  • JavaScript 是一种客户端脚本语言。

  • 组成部分

    ECMAScript、DOM、BOM

  • 和 HTML 结合方式

    内部方式：<script></script>
外部方式：<script src=文件路径></script>

2、JavaScript基本语法

2.1、注释

  • 单行注释

    // 注释的内容

  • 多行注释

    /*
注释的内容
*/

2.2、输入输出语句

  • 输入框 prompt(“提示内容”);
  • 弹出警告框 alert(“提示内容”);
  • 控制台输出 console.log(“显示内容”);
  • 页面内容输出 document.write(“显示内容”);

2.3、变量和常量

​ JavaScript 属于弱类型的语言，定义变量时不区分具体的数据类型。

  • 定义局部变量 let 变量名 = 值;

    //1.定义局部变量
let name = "张三";
let age = 23;
document.write(name + "," + age +"<br>");

  • 定义全局变量 变量名 = 值;

    //2.定义全局变量
{
    let l1 = "aa";
    l2 = "bb";
}
//document.write(l1);
document.write(l2 + "<br>");

  • 定义常量 const 常量名 = 值;

    //3.定义常量
const PI = 3.1415926;
//PI = 3.15;
document.write(PI);

2.4、原始数据类型和typeof方法

2.4.1、原始数据类型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iwIyPVAW-1627539731135)(.\img\原始数据类型.png)]

2.4.2、typeof

typeof 用于判断变量的数据类型

let age = 18; 
document.write(typeof(age)); // number

2.5、运算符

  • 算数运算符

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k1BpNGgf-1627539731137)(.\img\算术运算符.png)]

  • 赋值运算符

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A6NPY4L3-1627539731138)(.\img\赋值运算符.png)]

  • 比较运算符

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ujjdf1wa-1627539731140)(.\img\比较运算符.png)]

  • 逻辑运算符

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F1tGj8tX-1627539731141)(.\img\逻辑运算符.png)]

  • 三元运算符

    • 三元运算符格式

      (比较表达式) ? 表达式1 : 表达式2;

    • 执行流程

      如果比较表达式为true，则取表达式1

      如果比较表达式为false，则取表达式2

2.6、流程控制和循环语句

  • if 语句

    //if语句
let month = 3;
if(month >= 3 && month <= 5) {
    document.write("春季");
}else if(month >= 6 && month <= 8) {
    document.write("夏季");
}else if(month >= 9 && month <= 11) {
    document.write("秋季");
}else if(month == 12 || month == 1 || month == 2) {
    document.write("冬季");
}else {
    document.write("月份有误");
}

document.write("<br>");

  • switch 语句

    //switch语句
switch(month){
    case 3:
    case 4:
    case 5:
        document.write("春季");
        break;
    case 6:
    case 7:
    case 8:
        document.write("夏季");
        break;
    case 9:
    case 10:
    case 11:
        document.write("秋季");
        break;
    case 12:
    case 1:
    case 2:
        document.write("冬季");
        break;
    default:
        document.write("月份有误");
        break;
}

document.write("<br>");**for 循环**

  • for循环

    //for循环
for(let i = 1; i <= 5; i++) {
    document.write(i + "<br>");
}

  • while 循环

    //while循环
let n = 6;
while(n <= 10) {
    document.write(n + "<br>");
    n++;
}

2.7、数组

  • 数组的使用和 java 中的数组基本一致，但是在 JavaScript 中的数组更加灵活，数据类型和长度都没有限制。
  • 定义格式
    • let 数组名 = [元素1,元素2,…];
  • 索引范围
    • 从 0 开始，最大到数组长度-1
  • 数组长度
    • 数组名.length
  • 数组高级运算符…
    • 数组复制
    • 合并数组
    • 字符串转数组

2.8、函数

  • 函数类似于 java 中的方法，可以将一些代码进行抽取，达到复用的效果

  • 定义格式

    function 方法名(参数列表) {
		 方法体; 
		 return 返回值; 
	}

  • 可变参数

    function 方法名(…参数名) {
		方法体; 
        return 返回值; 
 }

  • 匿名函数

    function(参数列表) {
		方法体; 
	}

2.9、小结

  • 注释：单行// 多行/**/
  • 输入输出语句：prompt()、alert()、console.log()、document.write()
  • 变量和常量：let、const
  • 数据类型：boolean、null、undefined、number、string、bigint
  • typeof 关键字：用于判断变量的数据类型
  • 运算符：算数、赋值、逻辑、比较、三元运算符
  • 流程控制和循环语句：if、switch、for、while
  • 数组：数据类型和长度没有限制，let 数组名 = [长度/元素]
  • 函数：类似方法，抽取代码，提高复用性

3、JavaScript DOM

3.1、DOM介绍

  • DOM(Document Object Model)：文档对象模型。
  • 将 HTML 文档的各个组成部分，封装为对象。借助这些对象，可以对 HTML 文档进行增删改查的动态操作。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4qzaGKXU-1627539731141)(.\img\DOM介绍.png)]

3.2、Element元素的获取操作

  • 具体方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-joRpWwNb-1627539731142)(.\img\DOM的获取方式.png)]

  • 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素的获取</title>
</head>
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div class="cls">div3</div>
    <div class="cls">div4</div>
    <input type="text" name="username"/>
</body>
<script>
    //1. getElementById()   根据id属性值获取元素对象
    let div1 = document.getElementById("div1");
    //alert(div1);

    //2. getElementsByTagName()   根据元素名称获取元素对象们，返回数组
    let divs = document.getElementsByTagName("div");
    //alert(divs.length);

    //3. getElementsByClassName()  根据class属性值获取元素对象们，返回数组
    let cls = document.getElementsByClassName("cls");
    //alert(cls.length);

    //4. getElementsByName()   根据name属性值获取元素对象们，返回数组
    let username = document.getElementsByName("username");
    //alert(username.length);

    //5. 子元素对象.parentElement属性   获取当前元素的父元素
    let body = div1.parentElement;
    alert(body);
</script>
</html>

3.3、Element元素的增删改操作 (了解)

  • 具体方法

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-USSbL0Cz-1627539731145)(.\img\DOM的增删改.png)]

  • 代码实现

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素的增删改</title>
</head>
<body>
    <select id="s">
        <option>---请选择---</option>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
    </select>
</body>
<script>
    //1. createElement()   创建新的元素
    let option = document.createElement("option");
    //为option添加文本内容
    option.innerText = "深圳";

    //2. appendChild()     将子元素添加到父元素中
    let select = document.getElementById("s");
    select.appendChild(option);

    //3. removeChild()     通过父元素删除子元素
    //select.removeChild(option);

    //4. replaceChild()    用新元素替换老元素
    let option2 = document.createElement("option");
    option2.innerText = "杭州";
    select.replaceChild(option2,option);

</script>
</html>

3.4、Attribute属性的操作

  • 具体方法

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-alvN7mvf-1627539731148)(.\img\Attribute属性的操作.png)]

  • 代码实现

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性的操作</title>
    <style>
        .aColor{
            color: blue;
        }
    </style>
</head>
<body>
    <a>点我呀</a>
</body>
<script>
    //1. setAttribute()    添加属性
    let a = document.getElementsByTagName("a")[0];
    a.setAttribute("href","https://www.baidu.com");

    //2. getAttribute()    获取属性
    let value = a.getAttribute("href");
    //alert(value);

    //3. removeAttribute()  删除属性
    //a.removeAttribute("href");

    //4. style属性   添加样式
    //a.style.color = "red";

    //5. className属性   添加指定样式
    a.className = "aColor";

</script>
</html>

3.5、Text文本的操作

  • 具体方法

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EHPwGkYL-1627539731152)(.\img\Text文本的操作.png)]

  • 代码实现

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本的操作</title>
</head>
<body>
    <div id="div"></div>
</body>
<script>
    //1. innerText   添加文本内容，不解析标签
    let div = document.getElementById("div");
    div.innerText = "我是div";
    //div.innerText = "<b>我是div</b>";

    //2. innerHTML   添加文本内容，解析标签
    div.innerHTML = "<b>我是div</b>";

</script>
</html>

3.6、DOM小结

  • DOM(Document Object Model)：文档对象模型
    • Document：文档对象
  • Element：元素对象
    • Attribute：属性对象
  • Text：文本对象
  • 元素的操作
    • getElementById()
    • getElementsByTagName()
    • getElementsByName()
    • getElementsByClassName()
    • 子元素对象.parentElement属性
    • createElement()
    • appendChild()
    • removeChild()
    • replaceChild()
  • 属性的操作
    • setAtrribute()
    • getAtrribute()
    • removeAtrribute()
    • style属性
  • 文本的操作
    • innerText
    • innerHTML

4、JavaScript 事件

4.1、事件介绍

事件指的就是当某些组件执行了某些操作后，会触发某些代码的执行。

  • 常用的事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B5k0Polb-1627539731153)(.\img\常用的事件.png)]

  • 了解的事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jMZ1GXj8-1627539731154)(.\img\了解的事件.png)]

4.2、事件操作

绑定事件

  • 方式一

    通过标签中的事件属性进行绑定。

    <button id="btn" onclick="执行的功能"></button>

  • 方式二

    通过 DOM 元素属性绑定。

    document.getElementById("btn").onclick = 执行的功能

4.3、事件小结

  • 事件指的就是当某些组件执行了某些操作后，会触发某些代码的执行。
  • 常用的事件 onload onsubmit onclick ondblclick onblur onfocus onchange
  • 绑定事件方式
    • 方式一：通过标签中的事件属性进行绑定。
    • 方式二：通过 DOM 元素属性绑定。

5、JavaScript综合案例

5.1、案例效果介绍

  • 在“姓名、年龄、性别”三个文本框中填写信息后，添加到“学生信息表”列表（表格）中。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zbgVDnoX-1627539731156)(.\img\综合案例-添加功能分析.png)]

5.2、添加功能的分析

  1. 为添加按钮绑定单击事件。
  2. 创建 tr 元素。
  3. 创建 4 个 td 元素。
  4. 将 td 添加到 tr 中。
  5. 获取文本框输入的信息。
  6. 创建 3 个文本元素。
  7. 将文本元素添加到对应的 td 中。
  8. 创建 a 元素。
  9. 将 a 元素添加到对应的 td 中。
  10. 将 tr 添加到 table 中。

5.3、添加功能的实现

<!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="name" placeholder="请输入姓名" autocomplete="off">
    <input type="text" id="age"  placeholder="请输入年龄" autocomplete="off">
    <input type="text" id="gender"  placeholder="请输入性别" autocomplete="off">
    <input type="button" value="添加" id="add">
</div>

    <table id="tb">
        <caption>学生信息表</caption>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
        </tr>

        <tr>
            <td>张三</td>
            <td>23</td>
            <td>男</td>
            <td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td>
        </tr>

        <tr>
            <td>李四</td>
            <td>24</td>
            <td>男</td>
            <td><a href="JavaScript:void(0);" onclick="drop(this)">删除</a></td>
        </tr>

    </table>

</body>
<script>
    //一、添加功能
    //1.为添加按钮绑定单击事件
    document.getElementById("add").onclick = function(){
        //2.创建行元素
        let tr = document.createElement("tr");
        //3.创建4个单元格元素
        let nameTd = document.createElement("td");
        let ageTd = document.createElement("td");
        let genderTd = document.createElement("td");
        let deleteTd = document.createElement("td");
        //4.将td添加到tr中
        tr.appendChild(nameTd);
        tr.appendChild(ageTd);
        tr.appendChild(genderTd);
        tr.appendChild(deleteTd);
        //5.获取输入框的文本信息
        let name = document.getElementById("name").value;
        let age = document.getElementById("age").value;
        let gender = document.getElementById("gender").value;
        //6.根据获取到的信息创建3个文本元素
        let nameText = document.createTextNode(name);
        let ageText = document.createTextNode(age);
        let genderText = document.createTextNode(gender);
        //7.将3个文本元素添加到td中
        nameTd.appendChild(nameText);
        ageTd.appendChild(ageText);
        genderTd.appendChild(genderText);
        //8.创建超链接元素和显示的文本以及添加href属性
        let a = document.createElement("a");
        let aText = document.createTextNode("删除");
        a.setAttribute("href","JavaScript:void(0);");
        a.setAttribute("onclick","drop(this)");
        a.appendChild(aText);
        //9.将超链接元素添加到td中
        deleteTd.appendChild(a);
        //10.获取table元素，将tr添加到table中
        let table = document.getElementById("tb");
        table.appendChild(tr);
    }
</script>
</html>

5.4、删除功能的分析

  • 删除功能介绍

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gyy7y0TM-1627539731156)(.\img\综合案例-删除功能分析.png)]

  • 删除功能分析
  1. 为每个删除超链接添加单击事件属性。
  2. 定义删除的方法。
  3. 获取 table 元素。
  4. 获取 tr 元素。
  5. 通过 table 删除 tr。

5.5、删除功能的实现

//二、删除的功能
//1.为每个删除超链接标签添加单击事件的属性
//2.定义删除的方法
function drop(obj){
//3.获取table元素
let table = obj.parentElement.parentElement.parentElement;
//4.获取tr元素
let tr = obj.parentElement.parentElement;
//5.通过table删除tr
table.removeChild(tr);
}


JavaScript:
	概念: 内置在客户端浏览器中脚本语言
	作用:
		HTML: 显示页面内容
		CSS:  美化页面
		JS:   给页面添加动画效果, 改善用户体验
	应用:
		全选和全不选
		表单校验
		返回上一个页面
		删除确认
		轮播图
	组成:
		EAMAScript 基本语法
		BOM 浏览器对象模型
		DOM 文档对象模型
		
EAMAScript基本语法: 和java几乎一致
	1. JS引入方式
		概念:在HTML页面中引入JS脚本
		方式:
			1. 内部方式
				<script>  JS代码  </script>
			2. 外部方式

总结

1. 概述

概述: 运行在刘拉起客户端的脚本语言
作用: 给页面添加动画效果, 改善用户体验
应用:
	1. 切换验证码
	2. 全选和全不选  ★★★
	3. 删除/退出询问
	4. 表单校验
组成部分:
	ECMAScript 基本语法
	DOM   文档对象模型
	BOM   浏览器对象模型

2. 引入方式 ★

1. 内部引入: 在HTML标签中使用<script>引入
	<script>
        alert("我是内部引入");
    </script>

2. 外部引入
		2.1 编写外部js文件
        2.2 HTML中引入js文件
		<script src="js/1.js"></script>

注意事项:
	<script src="js/1.js">
        alert("我是外部引入方式!!!")   // 外部引入方式中, 编写的JS代码全部不执行
    </script>

3. ECMAScript语法

1. 弹出框 ★

1. alert()  警告框
2. confirm() 确认框

2. 输出

console.log("日志输出...."); 	输出到浏览器控制台
document.write("输出到页面~~") 	输出到页面

3. 变量

var 变量名 = 值; 或 let 变量名 = 值;

JS是弱类型语言, var或者let可以接收任意类型参数
	let a = 1;
	let b = "hello";
	let c = true;

4. 数据类型

string
number
bigint
boolean
null
undefined

5. 运算符

 / 除法:  保留小数
 == : 只比较值
 ===: 全等, 先比较类型,再比较值

6. 数组

JAVA数组特点:
	1. 长度是固定
	2. 数据类型是固定
	
JS数组:
	1. 长度不固定
	2. 数组中可以存放任意类型数据
	
数组定义方式:
	1. var 变量名 = [值];
	2. var 变量名 = [值,值,..];
	3. var 变量名 = new Array(长度);  创建一个指定长度的数组
	4. var 变量名 = new Array(值,值,..);
	
高级 ...
	复制  var arr = [...被复制数组名]
	合并  var arr = [...数组1,...数组2]
	字符串转数组 var arr = [..."字符串"];

7. 函数

定义方式:
	1. 声明函数
		function  函数名([形参列表]){
		
		}
	2. 匿名函数	
		var 函数名 = function ([形参列表]){
		
		}
	3. 调用函数
		函数名([实参列表]);
	
注意事项: JS中同名函数只执行最后一个, 和参数无关

	function sum(a, b) {
        alert("1111");
        return a + b;
    }


    function sum(a, b, c) {
        alert("2222");
        return a + b + c;
    }


    // JS 同名函数会覆盖, 只执行最后一个, 和参数无关
    document.write(sum(1,2))

4. DOM对象

概念: 文档对象模型. 浏览器会将整个HTML文档都加载进内存形参一颗DOM树
操作:
	1. 获取标签 
	2. 获取标签属性
	3. 获取标签标签体内容
	4. 增删改标签 -- 了解
	
获取元素:
	1. document.getElementById(id值);  	根据ID获取一个元素
	2. document.getElementsByTagName(标签名);  根据标签名获取一组元素
	3. document.getElementsByName(name属性值);    根据name属性值获取一组元素
	4. document.getElementsByClassName(class属性值); 根据class属性值获取一组元素
	5. 元素对象.parentElement;   获取父标签
	
增删改元素: -- 了解

5. 常见事件

鼠标事件:
	onclick: 单击事件  ★★★
	ondblclick: 双击事件
	onmouseover: 鼠标移入事件
	onmouseout: 鼠标移出

键盘事件:  了解
	onkeydown: 按下
	onkeyup:  弹起
	onkeypress: 按住

表单相关事件:
	onfocus: 获取焦点
	onblur: 失去焦点, 表单校验  ★★★
	onchange: 改变事件, 常用<select>选择框  ★★★
	onsubmit: 表单提交事件 ★★★

页面加载事件:
	onload:  当整个页面内容都加载成功以后,自动执行该事件. ★★★
	
事件绑定:  将事件和标签绑定在一起, 实现: 点击某一个按钮, 触发了单击事件.
	1. 通过标签的事件属性绑定
		<开始标签 id="abc" onXxx="函数()"> 标签体内容 </结束标签>
	2. 派发事件
		<开始标签 id="abc"> 标签体内容 </结束标签>
		1. 获取标签
		2. 动态给标签绑定事件.

案例1. 验证码切换

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户登录</title>
</head>
<body>

<%--
    前端开发小技巧:
           1. 确定事件
           2. 获取操作标签对象
           3. 执行操作
--%>

<script>
    
    onload =  function () {
        //1. 获取图片标签对象
        var img = document.getElementById("code");

        //2. 绑定单击事件
        img.onclick  = function () {
            //3. 切换图片  ?后面的参数没有实际意义, 主要是为了欺骗服务器,让其认为每次都是新的请求, 每次返回一个新的图片
            img.src = "/day05/checkCode?"+new Date().getTime();
        }
    }
   

</script>

<form action="/day05/loginServlet" method="post">
    用户名:<input type="text" name="username"><br>
    密码: <input type="password" name="password"><br>
    验证码: <input type="text" name="checkCode">
    <img src="/day05/checkCode" id="code">
    <br>
    <input type="submit" value="登录">

    <div style="color: red">
        <%--显示登录错误信息--%>
        ${msg}
    </div>
</form>

</body>
</html>

案例2. 全选和全不选

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>

    <!--
        1. 给第一个复选框绑定单击事件
        2. 获取第一个复选框checked属性值 (选中状态)
        3. 获取剩余复选框, 设置checked属性值 = 第一个复选框checked属性值
    -->

    <script>

        onload = function () {
            //1. 给第一个复选框绑定单击事件
            document.getElementById("firstCb").onclick = function () {
                //2. 获取第一个复选框checked属性值 (选中状态)
                // this: 表示当前操作的元素对象
                var flag = this.checked;
                //3. 获取剩余复选框
                var cbs = document.getElementsByClassName("itemSelect");
                //4. 遍历数组
                for (var i = 0; i < cbs.length; i++) {
                    //5. 设置每一个复选框checked属性值 = 第一个复选框checked属性值
                    cbs[i].checked = flag;
                }
            }
        }

    </script>

</head>
<body>
<table id="tab1" border="1" width="800" align="center">
    <tr>
        <td colspan="5"><input type="button" value="删除"></td>
    </tr>
    <tr>
        <th><input type="checkbox" id="firstCb"></th>
        <th>分类ID</th>
        <th>分类名称</th>
        <th>分类描述</th>
        <th>操作</th>
    </tr>
    <tr>
        <td><input type="checkbox" class="itemSelect"></td>
        <td>1</td>
        <td>手机数码</td>
        <td>手机数码类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="itemSelect"></td>
        <td>2</td>
        <td>电脑办公</td>
        <td>电脑办公类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="itemSelect"></td>
        <td>3</td>
        <td>鞋靴箱包</td>
        <td>鞋靴箱包类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox" class="itemSelect"></td>
        <td>4</td>
        <td>家居饰品</td>
        <td>家居饰品类商品</td>
        <td><a href="">修改</a>|<a href="">删除</a></td>
    </tr>
</table>
</body>
</html>

二.JavaScript面向对象

1.1、面向对象介绍

​ 在 Java 中我们学习过面向对象，核心思想是万物皆对象。在 JavaScript 中同样也有面向对象。思想类似。

​ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NHNFOLNW-1627540359752)(.\img\面向对象介绍.png)]

1.2、类的定义和使用

  • 结构说明

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yTsZuIwE-1627540359755)(.\img\类的定义和使用.png)]

  • 代码实现

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类的定义和使用</title>
</head>
<body>
    
</body>
<script>
    //定义Person类
    class Person{
        //构造方法
        constructor(name,age){
            this.name = name;
            this.age = age;
        }

        //show方法
        show(){
            document.write(this.name + "," + this.age + "<br>");
        }

        //eat方法
        eat(){
            document.write("吃饭...");
        }
    }

    //使用Person类
    let p = new Person("张三",23);
    p.show();
    p.eat();
</script>
</html>

    1.3、字面量类的定义和使用

  • 结构说明

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qqJJDIei-1627540359756)(.\img\字面量定义类和使用.png)]

  • 语法

    let 变量名 = {
    属性名:属性值,
    属性名:属性值,
    ...
};

属性值类型:
	1. 原始数据类型
	2. 数组
	3. 对象
	4. 方法

  • 代码实现

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字面量定义类和使用</title>
</head>
<body>
    
</body>
<script>
    //定义person
    let person = {
        name : "张三",
        age : 23,
        hobby : ["听课","学习"],
        gf:{name:"妹子",age:18},
        eat : function() {
            document.write("吃饭...");
        }
    };

    //使用person
  document.write(person.name + "," + person.age + "," + person.hobby[0] + "," + person.hobby[1] + "<br>");
  document.write("女友:" + person.gf.name + "<br>");
  person.eat();
</script>
</html>

1.3、继承

  • 继承：让类与类产生子父类的关系，子类可以使用父类有权限的成员。

  • 继承关键字：extends

  • 顶级父类：Object

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>继承</title>
</head>
<body>
    
</body>
<script>
    //定义Person类
    class Person{
        //构造方法
        constructor(name,age){
            this.name = name;
            this.age = age;
        }

        //eat方法
        eat(){
            document.write("吃饭...");
        }
    }

    //定义Worker类继承Person
    class Worker extends Person{
        constructor(name,age,salary){
            super(name,age);
            this.salary = salary;
        }

        show(){
            document.write(this.name + "," + this.age + "," + this.salary + "<br>");
        }
    }

    //使用Worker
    let w = new Worker("张三",23,10000);
    w.show();
    w.eat();
</script>
</html>

1.4、小结

  • 面向对象

    把相关的数据和方法组织为一个整体来看待，从更高的层次来进行系统建模，更贴近事物的自然运行模式。

  • 类的定义

    class 类{} 字面量定义

  • 类的使用

    let 对象名 = new 类名(); 对象名.变量名 对象名.方法名()

  • 继承

    让类和类产生子父类关系，提高代码的复用性和维护性。

    子类 extends 父类

    Object 顶级父类

2、JavaScript内置对象

2.1、Number

  • 方法介绍

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NDFagH5d-1627540359757)(.\img\Number.png)]

  • 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Number</title>
</head>
<body>
    
</body>
<script>
    //1. parseFloat()  将传入的字符串浮点数转为浮点数
    document.write(Number.parseFloat("3.14") + "<br>");

    //2. parseInt()    将传入的字符串整数转为整数
    document.write(Number.parseInt("100") + "<br>");
    document.write(Number.parseInt("200abc") + "<br>"); // 从数字开始转换，直到不是数字为止

</script>
</html>

2.2、Math

  • 方法介绍

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kzrBcKgr-1627540359758)(.\img\Math.png)]

  • 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Math</title>
</head>
<body>
    
</body>
<script>
    //1. ceil(x) 向上取整
    document.write(Math.ceil(4.4) + "<br>");    // 5
    
    //2. floor(x) 向下取整
    document.write(Math.floor(4.4) + "<br>");   // 4
    
    //3. round(x) 把数四舍五入为最接近的整数
    document.write(Math.round(4.1) + "<br>");   // 4
    document.write(Math.round(4.6) + "<br>");   // 5
    
    //4. random() 随机数,返回的是0.0-1.0之间范围(含头不含尾)
    document.write(Math.random() + "<br>"); // 随机数
    
    //5. pow(x,y) 幂运算 x的y次方
    document.write(Math.pow(2,3) + "<br>"); // 8
</script>
</html>

2.3、Date

  • 方法说明

    • 构造方法

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bsh9ilCQ-1627540359760)(.\img\Date.png)]

    • 成员方法

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fb2Z3Fdf-1627540359761)(.\img\Date-2.png)]

  • 代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Date</title>
</head>
<body>
    
</body>
<script>
    //构造方法
    //1. Date()  根据当前时间创建对象
    let d1 = new Date();
    document.write(d1 + "<br>");

    //2. Date(value) 根据指定毫秒值创建对象
    let d2 = new Date(10000);
    document.write(d2 + "<br>");

    //3. Date(year,month,[day,hours,minutes,seconds,milliseconds]) 根据指定字段创建对象(月份是0~11)
    let d3 = new Date(2222,2,2,20,20,20);
    document.write(d3 + "<br>");

    //成员方法
    //1. getFullYear() 获取年份
    document.write(d3.getFullYear() + "<br>");

    //2. getMonth() 获取月份
    document.write(d3.getMonth() + "<br>");

    //3. getDate() 获取天数
    document.write(d3.getDate() + "<br>");

    //4. toLocaleString() 返回本地日期格式的字符串
    document.write(d3.toLocaleString());
</script>
</html>

2.4、String

  • 方法说明

    • 构造方法

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xhF6Kacq-1627540359762)(.\img\String.png)]

    • 成员方法

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dhifNLVh-1627540359764)(.\img\String-2.png)]

  • 代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>String</title>
</head>
<body>
    
</body>
<script>
    //1. 构造方法创建字符串对象
    let s1 = new String("hello");
    document.write(s1 + "<br>");

    //2. 直接赋值
    let s2 = "hello";
    document.write(s2 + "<br>");

    //属性
    //1. length   获取字符串的长度
    document.write(s2.length + "<br>");

    //成员方法
    //1. charAt(index)     获取指定索引处的字符
    document.write(s2.charAt(1) + "<br>");

    //2. indexOf(value)    获取指定字符串出现的索引位置
    document.write(s2.indexOf("l") + "<br>");

    //3. substring(start,end)   根据指定索引范围截取字符串(含头不含尾)
    document.write(s2.substring(2,4) + "<br>");

    //4. split(value)   根据指定规则切割字符串，返回数组
    let s3 = "张三,23,男";
    let arr = s3.split(",");
    for(let i = 0; i < arr.length; i++) {
        document.write(arr[i] + "<br>");
    }

    //5. replace(old,new)   使用新字符串替换老字符串
    let s4 = "你会不会跳伞啊？让我落地成盒。你妹的。";
    let s5 = s4.replace("你妹的","***");
    document.write(s5 + "<br>");
</script>
</html>

2.5、RegExp

正则表达式：是一种对字符串进行匹配的规则。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CBrh0rLd-1627540359765)(.\img\RegExp.png)]

  • 方法说明

    • 构造方法&成员方法

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q9nCOTfO-1627540359766)(.\img\RegExp-2.png)]

    • 规则

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kgwgSUTv-1627540359768)(.\img\RegExp-3.png)]

  • 代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RegExp</title>
</head>
<body>
    
</body>
<script>
    //1.验证手机号
    //规则：第一位1，第二位358，第三到十一位必须是数字。总长度11
    let reg1 = /^[1][358][0-9]{9}$/;
    document.write(reg1.test("18688888888") + "<br>");

    //2.验证用户名
    //规则：字母、数字、下划线组成。总长度4~16
    let reg2 = /^[a-zA-Z_0-9]{4,16}$/;
    document.write(reg2.test("zhang_san123"));
</script>
</html>

2.6、Array

  • 成员方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z035BTTP-1627540359770)(.\img\Array.png)]

  • 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Array</title>
</head>
<body>
    
</body>
<script>

    let arr = [1,2,3,4,5];

    //1. push(元素)    添加元素到数组的末尾
    arr.push(6);
    document.write(arr + "<br>");

    //2. pop()         删除数组末尾的元素
    arr.pop();
    document.write(arr + "<br>");

    //3. shift()       删除数组最前面的元素
    arr.shift();
    document.write(arr + "<br>");

    //4. includes(元素)  判断数组中是否包含指定的元素
    document.write(arr.includes(2) + "<br>");

    //5. reverse()      反转数组元素
    arr.reverse();
    document.write(arr + "<br>");

    //6. sort()         对数组元素排序
    arr.sort();
    document.write(arr + "<br>");

</script>
</html>

2.7、Set

JavaScript 中的 Set 集合，元素唯一，存取顺序一致。

  • 方法说明

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VIPHaQns-1627540359776)(.\img\Set.png)]

  • 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Set</title>
</head>
<body>
    
</body>
<script>
    // Set()   创建集合对象
    let s = new Set();

    // add(元素)   添加元素
    s.add("a");
    s.add("b");
    s.add("c");
    s.add("c");

    // size属性    获取集合的长度
    document.write(s.size + "<br>");    // 3

    // keys()      获取迭代器对象
    let st = s.keys();
    for(let i = 0; i < s.size; i++){
        document.write(st.next().value + "<br>");
    }

    // delete(元素) 删除指定元素
    document.write(s.delete("c") + "<br>");
    let st2 = s.keys();
    for(let i = 0; i < s.size; i++){
        document.write(st2.next().value + "<br>");
    }
</script>
</html>

2.8、Map

JavaScript 中的 Map 集合，key 唯一，存取顺序一致。

  • 方法说明

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6rKpA7tG-1627540359779)(.\img\Map.png)]

  • 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Map</title>
</head>
<body>
    
</body>
<script>
    // Map()   创建Map集合对象
    let map = new Map();

    // set(key,value)  添加元素
    map.set("张三",23);
    map.set("李四",24);
    map.set("李四",25);

    // size属性     获取集合的长度
    document.write(map.size + "<br>");

    // get(key)     根据key获取value
    document.write(map.get("李四") + "<br>");

    // entries()    获取迭代器对象
    let et = map.entries();
    for(let i = 0; i < map.size; i++){
        document.write(et.next().value + "<br>");
    }

    // delete(key)  根据key删除键值对
    document.write(map.delete("李四") + "<br>");
    let et2 = map.entries();
    for(let i = 0; i < map.size; i++){
        document.write(et2.next().value + "<br>");
    }
</script>
</html>

2.9、Json

  • JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式。

    • 它是基于 ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
    • 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于计算机解析和 生成，并有效的提升网络传输效率。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1zGCefLh-1627540359780)(.\img\json-2.png)]

  • 方法说明

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ipYkG032-1627540359782)(.\img\json-常用方法.png)]

  • 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON</title>
</head>
<body>
    
</body>
<script>
    //定义天气对象
    let weather = {
        city : "北京",
        date : "2088-08-08",
        wendu : "10° ~ 23°",
        shidu : "22%"
    };

    //1.将天气对象转换为JSON格式的字符串
    let str = JSON.stringify(weather);
    document.write(str + "<br>");

    //2.将JSON格式字符串解析成JS对象
    let weather2 = JSON.parse(str);
    document.write("城市：" + weather2.city + "<br>");
    document.write("日期：" + weather2.date + "<br>");
    document.write("温度：" + weather2.wendu + "<br>");
    document.write("湿度：" + weather2.shidu + "<br>");
</script>
</html>

2.10、表单校验

  • 案例说明

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QHN7TIBc-1627540359784)(.\img\案例-表单校验.png)]

  • 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单校验</title>
    <link rel="stylesheet" href="css/style.css"></link>
</head>
<body>
    <div class="login-form-wrap">
        <h1>程序员</h1>
        <form class="login-form" action="#" id="regist" method="get" autocomplete="off">
            <label>
                <input type="text" id="username" name="username" placeholder="Username..." value="">
            </label>
            <label>
                <input type="password" id="password" name="password" placeholder="Password..." value="">
            </label>
            <input type="submit" value="注册">
        </form>
    </div>
</body>
<script>
    //1.为表单绑定提交事件
    document.getElementById("regist").onsubmit = function() {
        //2.获取填写的用户名和密码
        let username = document.getElementById("username").value;
        let password = document.getElementById("password").value;

        //3.判断用户名是否符合规则  4~16位纯字母
        let reg1 = /^[a-zA-Z]{4,16}$/;
        if(!reg1.test(username)) {
            alert("用户名不符合规则，请输入4到16位的纯字母！");
            return false;
        }

        //4.判断密码是否符合规则  6位纯数字
        let reg2 = /^[\d]{6}$/;
        if(!reg2.test(password)) {
            alert("密码不符合规则，请输入6位纯数字的密码！");
            return false;
        }

        //5.如果所有条件都不满足，则提交表单
        return true;
    }
    
</script>
</html>

2.11、小结

  • 内置对象是 JavaScript 提供的带有属性和方法的特殊数据类型。
  • 数字日期 Number Math Date
  • 字符串 String RegExp
  • 数组集合 Array Set Map
  • 结构化数据 JSON
Math对象:  
	random()  0-1之间随机小数, 含头不含尾
Date对象:  切换验证码  getTime();
RegExp:
	方法: boolean 正则对象.test(数据);
JSON对象:  前端框架(前后端分离)
	{键:值,键:值,..}
	[{键:值,键:值},{键:值,键:值},...]

3、JavaScript BOM

  • BOM(Browser Object Model)：浏览器对象模型。
  • 将浏览器的各个组成部分封装成不同的对象，方便我们进行操作。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WAcOF4g8-1627540359786)(.\img\BOM介绍.png)]

3.1、Windows窗口对象

  • 定时器

    • 唯一标识 setTimeout(功能，毫秒值)：设置一次性定时器。
    • clearTimeout(标识)：取消一次性定时器。
    • 唯一标识 setInterval(功能，毫秒值)：设置循环定时器。
    • clearInterval(标识)：取消循环定时器。

  • 加载事件

    • window.onload：在页面加载完毕后触发此事件的功能。

  • 语法

    1. 循环定时器
    开启:
        var pp = setInterval("JS代码块",毫秒值);
    	setInterval(函数对象,毫秒值);
    关闭:
    	clearInterval(定时器标识)
2. 一次性定时器
	开启:
        var pp = setTimeout("JS代码块",毫秒值);
    关闭:
    	clearTimeout(定时器标识)
 
演示:
	setInterval("alert(123)",3000);  正确 
	setInterval("fun()",3000);  正确
	setInterval(fun,3000);  正确
	
	setInterval(fun(),3000);  错误
	setInterval("fun",3000);  错误

  • 代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>window窗口对象</title>
    <script>
        //一、定时器
        function fun(){
            alert("该起床了！");
        }
    
        //设置一次性定时器
        //let d1 = setTimeout("fun()",3000);
        //取消一次性定时器
        //clearTimeout(d1);
    
        //设置循环定时器
        //let d2 = setInterval("fun()",3000);
        //取消循环定时器
        //clearInterval(d2);
    
        //加载事件
        window.onload = function(){
            let div = document.getElementById("div");
            alert(div);
        }
    </script>
</head>
<body>
    <div id="div">dddd</div>
</body>
<!-- <script>
    //一、定时器
    function fun(){
        alert("该起床了！");
    }

    //设置一次性定时器
    //let d1 = setTimeout("fun()",3000);
    //取消一次性定时器
    //clearTimeout(d1);

    //设置循环定时器
    //let d2 = setInterval("fun()",3000);
    //取消循环定时器
    //clearInterval(d2);

    //加载事件
    let div = document.getElementById("div");
    alert(div);
</script> -->
</html>

3.2、Location地址栏对象

  • href 属性

    就是浏览器的地址栏。我们可以通过为该属性设置新的 URL，使浏览器读取并显示新的 URL 的内容。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KaXTkVM4-1627540359786)(.\img\Location-注册成功.png)]

  • 代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>location地址栏对象</title>
    <style>
        p{
            text-align: center;
        }
        span{
            color: red;
        }
    </style>
</head>
<body>
    <p>
        注册成功！<span id="time">5</span>秒之后自动跳转到首页...
    </p>
</body>
<script>
    //1.定义方法。改变秒数，跳转页面
    let num = 5;
    function showTime() {
        num--;

        if(num <= 0) {
            //跳转首页
            location.href = "index.html";  //删除
        }

        let span = document.getElementById("time");
        span.innerHTML = num;
    }

    //2.设置循环定时器，每1秒钟执行showTime方法
    setInterval("showTime()",1000);
</script>
</html>

3.3、案例-动态广告

  • 案例分析和实现
<!-- 广告图片 -->
<img src="img/ad_big.jpg" id="ad_big" width="100%"/>
  • 在 css 样式中，display 属性可以控制元素是否显示
style="display: none;"
  • 设置定时器，3 秒后显示广告图片
//1.设置定时器，3秒后显示广告图片
setTimeout(function(){
    let img = document.getElementById("ad_big");
    img.style.display = "block";
},3000);
  • 设置定时器，3 秒后隐藏广告图片
//2.设置定时器，3秒后隐藏广告图片
setTimeout(function(){
let img = document.getElementById("ad_big");
img.style.display = "none";
},6000);

3.4、小结

  • **BOM(Browser Object Model)：**浏览器对象模型。
  • 将浏览器的各个组成部分封装成不同的对象，方便我们进行操作。
    • Window：窗口对象
    • Location：地址栏对象
    • Navigator：浏览器对象
    • History：当前窗口历史记录对象
    • Screen：显示器屏幕对象
  • Window 窗口对象
    • setTimeout()、clearTimeout()：一次性定时器
    • setInterval()、clearInterval()：循环定时器
    • onload 事件：页面加载完毕触发执行功能
  • Location 地址栏对象 href 属性：跳转到指定的 URL 地址

4、JavaScript封装

封装思想

  • **封装：**将复杂的操作进行封装隐藏，对外提供更加简单的操作。

  • 获取元素的方法

    • document.getElementById(id值)：根据 id 值获取元素
    • document.getElementsByName(name值)：根据 name 属性值获取元素们
    • document.getElementsByTagName(标签名)：根据标签名获取元素们

  • 代码实现

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>封装</title>
</head>
<body>
    <div id="div1">div1</div>
    <div name="div2">div2</div>
</body>
<script src="my.js"></script>
<script>
    let div1 = getById("div1");
    alert(div1);

    // let div1 = document.getElementById("div1");
    // alert(div1);

    // let divs = document.getElementsByName("div2");
    // alert(divs.length);

    // let divs2 = document.getElementsByTagName("div");
    // alert(divs2.length);
</script>
</html>

    js封装

    function getById(id){
    return document.getElementById(id);
}

function getByName(name) {
    return document.getElementsByName(name);
}

function getByTag(tag) {
    return document.getElementsByTagName(tag);
}

我们之前的操作都是基于原生 JavaScript 的，比较繁琐。 JQuery 是一个前端框架技术，针对 JavaScript 进行了一系列的封装，使得操作变得非常简单！ 期待吧……

5. 案例-切换验证码

步骤分析:
	1. 给图片绑定单击事件
	2. 触发事件后, 修改图片对象的src属性


<!DOCTYPE html> 
<html lang="zh-CN">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>管理员登录</title>

    <!-- 1. 导入CSS的全局样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="js/jquery-2.1.0.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
		// 切换验证码
		function changeImg() {
			//1.获取图片对象
			var img = document.getElementById("vcode");

			//2.修改src属性  ?后面的参数没有实际意义, 主要是欺骗服务器让其认为每次都是一个新的请求,每次服务器给浏览器返回一个新的图片
			img.src = "/mybatis/checkCode?"+new Date().getTime();
		}
    </script>
  </head>
  <body>
  	<div class="container" style="width: 400px;">
  		<h3 style="text-align: center;">管理员登录</h3>
        <form action="login" method="post">
	      <div class="form-group">
	        <label for="user">用户名：</label>
	        <input type="text" name="user" class="form-control" id="user" placeholder="请输入用户名"/>
	      </div>
	      
	      <div class="form-group">
	        <label for="password">密码：</label>
	        <input type="password" name="password" class="form-control" id="password" placeholder="请输入密码"/>
	      </div>
	      
	      <div class="form-inline">
	        <label for="vcode">验证码：</label>
	        <input type="text" name="verifycode" class="form-control" id="verifycode" placeholder="请输入验证码" style="width: 120px;"/>
	        <img src="/mybatis/checkCode" onclick="changeImg()" title="看不清点击刷新" id="vcode"/>
	      </div>
	      <hr/>
	      <div class="form-group" style="text-align: center;">
	        <input class="btn btn btn-primary" type="submit" value="登录">
	       </div>
	  	</form>
		
		<!-- 出错显示的信息框 -->
	  	<div class="alert alert-warning alert-dismissible" role="alert">
		  <button type="button" class="close" data-dismiss="alert" >
		  	<span>&times;</span></button>
		   <strong>登录失败!</strong>
		</div>
  	</div>
  </body>
</html>

6. 案例-全选/全不选

步骤
	1. 给第一个复选框绑定单击事件
	2. 获取其他复选框
	3. 遍历数组, 设置每一个复选框checked属性和第一个复选框checked属性一致


  <script>
        // 删除用户
        function deleteUser(uid) {
            // 删除询问
            if (confirm("亲,您确定删除么?")) {
                // 访问服务器删除Servlet资源, 执行删除操作  BOM
                location.href = "${pageContext.request.contextPath}/userServlet?method=delete&id=" + uid;
            }
        }

        /* 全选/全不选
        	1. 给第一个复选框绑定单击事件
            2. 获取其他复选框
            3. 遍历数组, 设置每一个复选框checked属性和第一个复选框checked属性一致
         */

        // 页面加载事件
        onload = function () {
            //1. 给第一个复选框绑定单击事件
            document.getElementById("firstCb").onclick = function () {
                // JS函数方法中, this关键字: 表示当前点击JS对象(复选框对象)
                //alert(this.checked);

                //2. 获取其他复选框
                var cbs = document.getElementsByName("id");
                // 3. 遍历数组
                for (var i = 0; i < cbs.length; i++) {
                    //设置每一个复选框checked属性和第一个复选框checked属性一致
                    cbs[i].checked = this.checked;
                }
            }
        }

    </script>

7. 案例-多选删除

步骤:
	1. 修改"删除选中"按钮为普通按钮
	2. 获取下面所有复选框
	3. 遍历数组, 判断是否至少有一个复选框选中了
		若选中了: 询问是否删除 "亲,您确认要删除选中用户么", 确认后提交表单
		若都没勾选: 给出提示 "亲,请您勾选要删除的用户"
	4. 需要通过JS提交表单, 给<form>添加一个id属性值
		 document.getElementById("form").submit();


<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head>
    <!-- 指定字符集 -->
    <meta charset="utf-8">
    <!-- 使用Edge最新的浏览器的渲染方式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。
    width: 默认宽度与设备的宽度相同
    initial-scale: 初始的缩放比，为1:1 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>用户信息管理系统</title>

    <!-- 1. 导入CSS的全局样式 -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="js/jquery-2.1.0.min.js"></script>
    <!-- 3. 导入bootstrap的js文件 -->
    <script src="js/bootstrap.min.js"></script>
    <style type="text/css">
        td, th {
            text-align: center;
        }
    </style>
    <script>
        // 删除用户
        function deleteUser(uid) {
            // 删除询问
            if (confirm("亲,您确定删除么?")) {
                // 访问服务器删除Servlet资源, 执行删除操作  BOM
                location.href = "${pageContext.request.contextPath}/userServlet?method=delete&id=" + uid;
            }
        }

        /* 全选/全不选
        	1. 给第一个复选框绑定单击事件
            2. 获取其他复选框
            3. 遍历数组, 设置每一个复选框checked属性和第一个复选框checked属性一致
         */

        // 页面加载事件
        onload = function () {
            //1. 获取第一个复选框,给其绑定单击事件
            document.getElementById("firstCb").onclick = function () {
                // JS函数方法中, this关键字: 表示当前点击JS对象(复选框对象)
                //alert(this.checked);

                //2. 获取其他复选框
                var cbs = document.getElementsByName("id");
                // 3. 遍历数组
                for (var i = 0; i < cbs.length; i++) {
                    //设置每一个复选框checked属性和第一个复选框checked属性一致
                    cbs[i].checked = this.checked;
                }
            }

            // 多选删除
            document.getElementById("deleteSel").onclick = function () {
                //1. 获取下面所有复选框
                var cbs = document.getElementsByName("id");
                // 3. 遍历数组
                var flag = false; // 是否删除的开关
                for (var i = 0; i < cbs.length; i++) {
                    //其中某一个复选框选中了
                    if (cbs[i].checked) {
                        flag = true;
                    }
                }
                //4. 判断flag
                if (!flag) {
                    // 一个都没勾选
                    alert("亲,请您勾选要删除的用户");
                    return;
                }

                // 至少勾选了一个, 提交表单
                if (confirm("亲,您确认要删除选中用户么?")) {
                    document.getElementById("form").submit();
                }

            }
        }


    </script>
</head>
<body>
<div class="container">
    <h3 style="text-align: center">用户信息列表</h3>

    <form action="${pageContext.request.contextPath}/userServlet?method=deleteSel" id="form" method="post">
        <div style="float: right;margin: 5px;">

            <a class="btn btn-primary" href="${pageContext.request.contextPath}/add.jsp">添加联系人</a>
            <button class="btn btn-primary" type="button" id="deleteSel">删除选中</button>
        </div>

        <table border="1" class="table table-bordered table-hover">
            <tr class="success">
                <th>
                    <input type="checkbox" id="firstCb">
                </th>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>籍贯</th>
                <th>QQ</th>
                <th>邮箱</th>
                <th>操作</th>
            </tr>

            <%--
                获取域中用户集合, 遍历显示 (一个用户一行数据)
                    for(User u: users)
            --%>
            <c:forEach items="${page.list}" var="u" varStatus="vs">
                <tr>
                    <td><input type="checkbox" name="id" value="${u.id}"></td>
                    <td>${vs.count}</td>
                    <td>${u.name}</td>
                    <td>${u.gender}</td>
                    <td>${u.age}</td>
                    <td>${u.address}</td>
                    <td>${u.qq}</td>
                    <td>${u.email}</td>
                    <td>
                        <a class="btn btn-default btn-sm"
                           href="${pageContext.request.contextPath}/userServlet?method=findOne&id=${u.id}">修改</a>&nbsp;
                        <a class="btn btn-default btn-sm"
                           href="javascript:deleteUser(${u.id})">删除</a>
                    </td>
                </tr>
            </c:forEach>

        </table>
        <nav aria-label="Page navigation">
            <ul class="pagination">

                <li>
                    <a href="${pageContext.request.contextPath}/userServlet?method=pageQuery&pageSize=${page.pageSize}&currentPage=1"
                       aria-label="Previous">
                        <span aria-hidden="true">首页</span>
                    </a>
                </li>
                <li>
                    <a href="${pageContext.request.contextPath}/userServlet?method=pageQuery&pageSize=${page.pageSize}&currentPage=${page.prePage}"
                       aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <c:forEach begin="${page.navigateFirstPage}" end="${page.navigateLastPage}" var="i">
                    <li ${page.pageNum == i ? "class='active'" : ""}><a
                            href="${pageContext.request.contextPath}/userServlet?method=pageQuery&pageSize=${page.pageSize}&currentPage=${i}">${i}</a>
                    </li>
                </c:forEach>
                <li>
                    <a href="${pageContext.request.contextPath}/userServlet?method=pageQuery&pageSize=${page.pageSize}&currentPage=${page.pageNum+1}"
                       aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
                <li>
                    <a href="${pageContext.request.contextPath}/userServlet?method=pageQuery&pageSize=${page.pageSize}&currentPage=${page.pages}"
                       aria-label="Previous">
                        <span aria-hidden="true">尾页</span>
                    </a>
                </li>
            </ul>
        </nav>

    </form>
</div>
</body>
</html>

8. 案例-返回上个页面

<input class="btn btn-default" type="button" οnclick="javascript:history.go(-1)" value="返回"/>

总结

1. 类的定义
	let 变量 = {
		键:值,
		键:值,
		...
	}
	其中值取值类型:
		基本数据类型
		数组
		方法
		对象

2. 内置对象
	Math数学对象:
		random
		floor
		ceil
	Date日期对象:
		getTime() 获取毫秒值
		
	正则表达式对象RegExp
		作用:对数据进行校验
		符号:
			/^  开头
			$/	结尾
			?  零或1次
			+  1或多次
			*  零或多次
	
	JSON对象: 
		概念: 轻量级的数据交换格式
		作用: 数据通信
		方法:  -- 了解
			JSON.stringfy(): 将JSON对象转换为字符串
			JSON.parse() : 将字符串转换为JSON对象
		格式:
			分类:
				对象类型: {键:值,键:值,...}
				数组类型: [...]

案例1 - 表单校验

官网:
	https://niceue.com/validator/demo/index.php
使用步骤
	1. 将"validate"文件夹,复制到web目录下
	2. 在需要校验的页面,引入插件资源
		<script src="validate/jquery-1.11.0.min.js"></script>
		<script src="validate/jquery.validator.min.js"></script>
		<script src="validate/local/zh-CN.js"></script>
		<link href="validate/jquery.validator.css" rel="stylesheet">	
	3. 给表单项添加校验规则
		例如:
			data-rule="用户名:required;length[2~10]"
			data-rule="年龄:required;range[1~150]"

1. 类的定义/对象的定义
	var 变量名 = {
		键:值,
		键:值,
			基本数据类型
			数组
			对象
			方法
	};
2. 内置对象
	Date:  getTime();
	正则对象:
		/^: 开始
		$/: 结束
		[a]: 只能是A
		[abc]: 其中某一个
		a-z
		A-Z
		0-9
		{10} 长度为10
		{10,}
		{,10}
		{4,10}
		
		* 0或多
		? 0/1
		+ 1或多
		
		/d
		/w  _
3. 表单校验插件
	1. 复制文件夹到项目中
	2. 在页面中引入相关文件
	3. 给表单项添加校验规则
		required: 必填的
		math:  匹配
		length
		range[1~100]
		...
		自定义

BOM对象

概念: 浏览器对象模型
组成:
	1. window: 浏览器窗口对象
	2. location: 浏览器地址栏对象
	3. history: 浏览器历史记录对象
		go(-1): 后退
			<input type="button" value="返回" onclick="javascript:history.go(-1)"/>

window: 浏览器窗口对象
	功能:
		1. 弹出框  ★
			alert()
			confirm()
		2. 定时器
			1. 一次性定时器
				开启:  
					let 标识 = setTimeout("代码块",毫秒值);
					let 标识 = setTimeout(函数名,毫秒值);
				关闭	
					clearTimeout(标识);
					
			2. 循环定时器
				开启:  
					let 标识 = setInterval("代码块",毫秒值);
					let 标识 = setInterval(函数名,毫秒值);
				关闭	
					clearInterval(标识);
		
		3. 页面加载事件 onload  ★
		
location: 浏览器地址栏对象
	href: 浏览器URL路径
	location.href; 获取URL路径
	location.href = 设置URL路径;
	
	
	${pageContext.request.contextPath}/userServlet?method=delete&id=${user.id}
滑上又滑落 一收和一放
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript
02-10
javascript官方文档，web前端师的权威文档，web前端的
javaScript api
11-03
JavaScript API 是一种重要的编程资源，它为开发者提供了与JavaScript语言交互的接口和工具。这个离线版的JavaScript API 指南，以CHM（Compiled Help Manual）格式提供，是开发者学习和查阅JavaScript相关功能和...
javascript百炼成仙 第一章 掌握JavaScript基础01 初入宗门
java小白翻身
10-06 17万+
乐阳村，处于脚本大陆东部的边缘地带，民风淳朴，村名日出而作，日落而息。这一日清晨，所有村民来到村庄的门口，正在为一个十五六岁的少年送别。只见那少年虽然身体瘦弱，可是目中绽放出异彩，身躯虽不壮实，倒也挺拔。 “叶小凡，你是我们全村人的骄傲，百年来唯一一个具备修行JavaScript甲等资质的孩子！马上会有千鹤派的大人来接你，今后你一定要认真修行，给我们全村的人争光！” 他叫叶小凡，几天前通过了修行资质的检验，符合修行JavaScript的资质。 “千鹤派！”叶小凡眼前一亮，语气中伴随着激动，两眼放光。千鹤派，
JavaScript基础大总结
Augenstern_QXL的博客
07-31 13万+
✍初始JavaScirpt JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程 ????浏览器执行JS简介 浏览器分成两部分：渲染引擎和 JS 引擎 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit JS 引擎：也称为 JS 解释器。 用来读
19 JavaScript学习：调试
百锦再的博客
04-28 7万+
使用控制台：在浏览器的开发工中的控台输入代码实时查看的函数等信息，帮调试程序4. 使用调试工具一些开环境（）或者浏览器插件提供了专门的调试工具，如Chrome DevTools、Firefox Developer Tools等，可以更，开发者可以发的错误，并及时修复，代码质量和开发效率。使用断点：在浏览器的开发者工具中设置断点，当程序执行到断点处时暂停执行，开发者可以查看当前变量的值、调用栈等信息，帮助定位问题。关键字可以手动触发断点，不需要依赖开发者工具中的设置断点功能，方便在代码中灵活地进行调试。
10 JavaScript学习：函数
百锦再的博客
04-23 7万+
使用 function 关键字：// 函数体使用函数表达式：// 函数体使用箭头函数（ES6）：// 函数体// result 等于 5// result 等于 6。
学习JavaScript这一篇就够了
热门推荐
轻松的小希
11-25 76万+
目录第一章 JavaScript简介1.1、JavaScript的起源1.2、JavaScript的组成1.3、JavaScript的特点1.4、JavaScript的使用1.4.1、标签引用1.4.2、文件引用1.5、JavaScript的输出1.5.1、页面输出1.5.2、控制台输出1.5.3、弹出窗口输出1.6、JavaScript的注释1.6.1、单行注释1.6.2、多行注释第二章 JavaScript基础语法2.1、标识符2.2、字面量和变量2.2.1、字面量2.2.2、变量2.3、数据类型2.3
JavaScript详解
weixin_48373085的博客
01-25 2万+
HTML对象，定时器，表单验证，正则表达式
JavaScript简介
wsdhy_的博客
04-02 4458
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言 脚本语言：最开始从 Script 单词翻译过来的。 java、c、c## c++ 都是非脚本语言 脚本和非脚本语言的区别：在于执行方式。 脚本语言：直接浏览器解析执行。 非脚本的：有一个先编译的过程。会生成中间的可执行代码文件。 动态语言：解释执行JavaScript代码的时候才去确定数据的类型。 弱类型语言： 1：变量的类型由实际的数值来确定。任何的变量可以保存任意的数据的类型。 2：不同数据...
03 JavaScript学习：浏览器中执行 JavaScript
百锦再的博客
04-19 6万+
我比较习惯Chrome浏览器。Chrome 是由 Google 开发的免费网页浏览器，调试代码非常方便。Chrome 官网地址：https://www.google.com/intl/zh-CN/chrome/。
26 JavaScript学习：JSON和void
百锦再的博客
05-03 8万+
在 JavaScript 中，JSON 格式是一种常见的数据交换格式，它与 JavaScript 对象有着相似的结构，但在一些细节上有所不同。在 JSON 中，每个键值对由一个名称和一个值组成，名称是一个字符串，值可以是字符串、数字、布尔值、Null、数组或嵌套对象等不同类型的数据。是一个特殊的表达式，通常用于在 href 属性中作为超链接的 URL，以防止页面跳转。在 JavaScript 中，可以使用内置的 JSON 对象提供的方法将 JSON 字符串转换为 JavaScript 对象。
JavaScript JavaScript JavaScript
最新发布
06-26
JavaScript JavaScript JavaScript
JavaScript实例大全
12-19
这个压缩包“JavaScript实例大全”显然是一份集合了多种JavaScript相关资源的宝典，包括“JavaScript网页设计300例”、“javascript源码大全”以及“jquery 1.7 中文 api 修正版”。 首先，“JavaScript网页设计300...
JavaScript基础
10-22
JavaScript基础
JavaScript.docx
10-27
"JavaScript 基础知识" JavaScript 是一门广泛应用于 Web 开发的编程语言，所有现代的 HTML 页面都可以使用 JavaScript。它非常容易学，本教程将教会您从初级到高级的 JavaScript 知识。 JavaScript 简介 ...
JavaScript学习
08-10
JavaScript学习
JavaScript 正则
04-21
JavaScript 正则
日本JavaScript函数教学课件详解：背景色与样式控制
本教学课件是关于日语版的JavaScript编程语言，专注于讲解函数这一核心概念。课程内容包括以下几个部分： 1. **函数基础**: - 函数定义：讲解了如何在JavaScript中使用`function`关键字来创建一个名为`f`的函数，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值