JavaScript

最新推荐文章于 2024-06-16 18:09:06 发布
最新推荐文章于 2024-06-16 18:09:06 发布
阅读量197 收藏
点赞数
分类专栏： javaweb 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44736296/article/details/119717957
版权

JavaScript

一、JS基础

1.JS简介

1.1. 什么是JS

  • JS，全称JavaScript，是一种直译式脚本语言，是一种动态类型、弱类型、基于对象的脚本语言，内置支持类型。

  • JS语言和Java语言对比：

对比JavaJS
运行环境JVM虚拟机JS引擎，是浏览器的一部分
是否跨平台运行跨平台跨平台
语言类型强类型语言弱类型，动态类型语言
是否需要编译需要编译，是编译型语言不需要编译，是解释型语言
是否区分大小写区分大小写区分大小写
1.2 JS的作用

具体来说，有两部分作用：

  • JS代码可以操作浏览器(BOM)：进行网址跳转、历史记录切换、浏览器弹窗等等

  • JS代码可以操作网页(DOM)：操作HTML的标签、标签的属性、样式、文本等等

    注意：JS的是在浏览器内存中运行时操作，并不会修改网页源码，所以刷新页面后网页会还原

1.3 JS的组成
  • ECMAScript(核心)：是JS的基本语法规范
  • BOM：Browser Object Model，浏览器对象模型，提供了与浏览器进行交互的方法
  • DOM：Document Object Model，文档对象模型，提供了操作网页的方法
1.4. 小结
  1. JS的概念:JS是一门运行在浏览器的，解释型的、基于对象的脚本语言
  2. JS的作用:处理用户和前端页面的交互
    1. 操作浏览器
    2. 操作HTML页面的标签、属性、文本、样式等等
  3. JS的组成部分:
    1. ECMAScript:基本语法
    2. BOM:浏览器对象模型，操作浏览器的代码
    3. DOM:文档对象模型，操作HTML文档的方法

2.JS引入

2.1. 内部JS
2.1.1语法
  • 在html里增加<script>标签，把js代码写在标签体里
<script>
	//在这里写js代码
</script>
3.1.2示例
  • 创建html页面，编写js代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js引入方式-内部js</title>
    <script>
        //操作浏览器弹窗
        alert("hello, world");
    </script>
</head>
<body>

</body>
</html>
  • 打开页面，浏览器会弹窗

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EVrUdQt8-1629024932208)(E:/Java/03-就业阶段_JAVAWEB阶段/03-就业阶段_JAVAWEB课件/day23 JavaScript/笔记/img/1571279916433.png)]

2.2. 外部JS
2.2.1语法
  • 把js代码写在单独的js文件中，js文件后缀名是.js
  • 在HTML里使用<script>标签引入外部js文件
<script src="js文件的路径"></script>
2.2.2示例

  • 创建一个my.js文件，编写js代码

    • 第1步：创建js文件

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MmvujEw4-1629024932211)(E:/Java/03-就业阶段_JAVAWEB阶段/03-就业阶段_JAVAWEB课件/day23 JavaScript/笔记/img/1571279674760.png)]

    • 第2步：设置js文件名称

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W7BOgN25-1629024932212)(E:/Java/03-就业阶段_JAVAWEB阶段/03-就业阶段_JAVAWEB课件/day23 JavaScript/笔记/img/1571279704696.png)]

    • 第3步：编写js代码
alert("hello, world! 来自my.js");
  • 创建一个html，引入my.js文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js引入方式-外部js</title>
    <!--引入外部的my.js文件-->
    <script src="../js/my.js"></script>
</head>
<body>

</body>
</html>
  • 打开页面，浏览器会弹窗

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9CdeveFE-1629024932220)(E:/Java/03-就业阶段_JAVAWEB阶段/03-就业阶段_JAVAWEB课件/day23 JavaScript/笔记/img/1571279953863.png)]

2.4.小结
2.4.1语法
  1. 内部脚本
<script>
	//js代码
</script>

  1. 外部脚本

    • 定义一个js文件
    • 通过script标签引入
    <script src="js文件路径">
</script>
2.4.2注意事项

  • 一个script标签，不能既引入外部js文件，又在标签体内写js代码。

    • 错误演示
    <script src="../js/my.js">
	alert("hello");
</script>
    • 正确演示
    <script src="../js/my.js"></script>
<script>
	alert("hello");
</script>

3.JS基本语法

3.1 变量
  • JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。 定义变量需要用关键字 ‘var’或者’let’
int i = 10;   		 var i = 10;        或者 i = 10;
String a = "哈哈";   let str = "哈哈";  或者 str = "哈哈";  或者 str = "哈哈"
...


注意:
	1.var或者可以省略不写,建议保留
	2.最后一个分号可以省略,建议保留
	3.同时定义多个变量可以用","隔开，公用一个‘var’关键字. var c = 45,d='qwe',f='68';
3.2 数据类型

1.五种原始数据类型

数据类型描述示例
number数值类型1, 2, 3, 3.14
boolean布尔类型true, false
string字符串类型"hello", ‘hello’
object对象类型new Date(), null
undefined未定义类型var a;

2.typeof操作符

  • 作用： 用来判断变量是什么类型

  • 写法：typeof(变量名) 或 typeof 变量名

  • null与undefined的区别：

    ​ null: 对象类型，已经知道了数据类型，但对象为空。
    ​ undefined：未定义的类型，并不知道是什么数据类型。

3.小练习

  • 定义不同的变量,输出类型,

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xhWRmZG0-1629024932224)(E:/Java/03-就业阶段_JAVAWEB阶段/03-就业阶段_JAVAWEB课件/day23 JavaScript/笔记/img/tu_13.png)]

  • 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    var i = 5;   //整数
    var f = 3.14;  //浮点
    var b = true;  //布尔
    var c = 'a';  //字符串
    var str = "abc";   //字符串
    var d = new Date();  //日期
    var u;   //未定义类型
    var n = null; //空
    document.write("整数：" + typeof(i) + "<br/>");
    document.write("浮点 ：" + typeof(f) + "<br/>");
    document.write("布尔：" + typeof(b) + "<br/>");
    document.write("字符：" + typeof(c) + "<br/>");
    document.write("字符串：" + typeof(str) + "<br/>");
    document.write("日期：" + typeof(d) + "<br/>");
    document.write("未定义的类型：" + typeof(u) + "<br/>");
    document.write("null：" + typeof(n) + "<br/>");
</script>
</body>
</html>

字符串转换成数字类型

  • 全局函数(方法)，就是可以在JS中任何的地方直接使用的函数，不用导入对象。不属于任何一个对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mrr1H3ir-1629024932226)(E:/Java/03-就业阶段_JAVAWEB阶段/03-就业阶段_JAVAWEB课件/day23 JavaScript/笔记/img/tu_14.png)]

3.3 运算符
  • 关系运算符:> >= < <=
  • number类型和字符串做-,*,/的时候,字符串自动的进行类型转换,前提字符串里面的数值要满足number类型
var i = 3;
var j = "6";
alert(j-i);//结果是3, "6" ==> 6  
alert(j*i);//结果是18, 
alert(j/i);//结果是2,
  • 除法,保留小数
var i = 2;
var j = 5; 
alert(j/i);
  • == 比较数值, === 比较数值和类型
var i = 2;
var j = "2"; 
alert(i==j); // ==比较的仅仅是数值, true
alert(i===j); // ===比较的是数值和类型.false
3.4语句
  • for循环
<script>
    //将数据装到表格中
    document.write("<table border='1' cellspacing='0' width='900px'>")
for(let j=1;j<=9;j++){
    //一行
    document.write("<tr>")
    for(let i=1;i<=j;i++){
        //一个单元格
        document.write("<td>")

        //每一个乘法表达式就是td中的内容
        document.write(j+"x"+i+"="+(j*i))

        document.write("</td>")
    }
    document.write("</tr>")
}

document.write("</table>")
</script>
  • if… else
var a = 6;
if(a==1)
{
    alert('语文');
}
else if(a==2)
{
    alert('数学');
}
else
{
    alert('不补习');
}
  • switch
<script>
	var str = "java"; 

	switch (str){
		case "java":
			alert("java");
			break;
		case "C++":
			alert("C++");
			break;

		case "Android":
			alert("Android");
			break;	
       }
</script>
3.4.小结
  1. 变量通过 var 定义
  2. 数据类型
    • number
    • boolean
    • string
    • object
    • undefined
  3. 运算符
    • 字符串可以和number类型进行-,*,/运算的
    • 除法保留小数
    • == 比较的是值, ===比较的是值和类型
  4. 语句: 基本和java一样

4.函数(重点)

4.1. 什么是函数
  • 函数： 是被设计为执行特定任务的代码块 ，在被调用时会执行
  • 函数类似于Java里的方法，用于封装一些可重复使用的代码块
4.2. 普通(有名)函数
4.2.1语法
  • 定义普通函数
function 函数名(形参列表){
    函数体
    [return 返回值;]
}
  • 调用普通函数
var result = 函数名(实参列表);
4.2.2示例
  • 计算两个数字之和
<script>
    //js的函数的作用:为了封装代码，在要使用这些代码的地方直接调用函数
    //js的函数的声明方式:1. 普通函数(命名函数)  2.匿名函数
    //普通函数: function 函数名(参数名,参数名...){函数体}，函数没有返回值类型，没有参数类型
    function total(a,b,c) {
        console.log("arguments数组中的数据:"+arguments.length)
        console.log(a+","+b+","+c)
        return a+b+c
    }

    //调用函数
    //var num = total(1,2,3);
    //console.log(num)

    //js的函数还有俩特点:1. 函数声明时候的参数个数和函数调用时候传入的参数个数，可以不一致;因为函数内部有一个arguments数组，用于存放传入的参数
    //2. js的函数是没有重载的，同名函数后面的会覆盖前面的

    function total(a,b) {
        return a+b
    }

    var num = total(1,2,3);
    console.log(num)
</script>
4.3匿名函数

匿名函数，也叫回调函数，类似于Java里的函数式接口里的方法

function(形参列表){
    函数体
    [return 返回值;]
}
4.4小结

  1. 语法

    • 普通(有名)函数
    function 函数名(参数列表){
	函数体
	[return ...]
}
    • 匿名函数
    function(参数列表){
	函数体
	[return ...]
}

  2. 特点

    • 参数列表里面直接写参数的变量名, 不写var
    • 函数没有重载的, 后面的直接把前面的覆盖了

5.JS事件(很重点)

5.1. 事件介绍
  • HTML 事件是发生在 HTML 元素上的“事情”， 是浏览器或用户做的某些事情
  • 事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。
5.2 常见事件
属性此事件发生在何时…
onclick当用户点击某个对象时调用的事件句柄。
ondblclick当用户双击某个对象时调用的事件句柄。
onchange域的内容被改变。
onblur元素失去焦点。
onfocus元素获得焦点。
onload一张页面或一幅图像完成加载。
onsubmit确认按钮被点击；表单被提交。
onkeydown某个键盘按键被按下。
onkeypress某个键盘按键被按住。
onkeyup某个键盘按键被松开。
onmousedown鼠标按钮被按下。
onmouseup鼠标按键被松开。
onmouseout鼠标从某元素移开。
omouseover鼠标移到某元素之上。
onmousemove鼠标被移动。
5.3. 事件绑定
5.3.1普通函数方式

说白了设置标签的属性

<标签 属性="js代码，调用函数"></标签>
5.3.2匿名函数方式
<script>
    标签对象.事件属性 = function(){
        //执行一段代码
    }
</script>
5.4事件使用
5.4.1重要的事件

  • 点击事件

    需求: 没点击一次按钮 弹出hello…

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

    <input type="button" value="另一个按钮" id="btn">
        <script>
        //当点击的时候要调用的函数
        function fn1() {
        alert("我被点击了...")
    }

//给另外一个按钮，绑定点击事件:
//1.先根据id获取标签
let btn = document.getElementById("btn");
//2. 设置btn的onclick属性(绑定事件)
//绑定命名函数
//btn.onclick = fn1

//绑定匿名函数
btn.onclick = function () {
    console.log("点击了另外一个按钮")
}
</script>

  • 获得焦点(onfocus)和失去焦点(onblur)

    需求:给输入框设置获得和失去焦点

var ipt = document.getElementById("ipt");

//绑定获取焦点事件
ipt.onfocus = function () {
    console.log("获取焦点了...")
}

//绑定失去焦点事件
ipt.onblur = function () {
    console.log("失去焦点了...")
}

  • 内容改变(onchange)

    需求: 给select设置内容改变事件

<body>
    <!--内容改变(onchange)-->
    <select onchange="changeCity(this)">
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="sz">深圳</option>
    </select>

</body>
<script>
    function changeCity(obj) {
        console.log("城市改变了"+obj.value);
    }
</script>
  • 等xx加载完成(onload) 可以把script放在body的后面/下面, 就可以不用了
window.onload = function () {
    //浏览器窗体加载完毕之后要执行的代码写到这里面
}
5.4.2掌握的事件
  • 键盘相关的, 键盘按下(onkeydown) 键盘抬起(onkeyup)
//给输入框绑定键盘按键按下和抬起事件
ipt.onkeydown = function () {
    //当按键按下的时候，数据并没有到达输入框
    //输出输入框里面的内容
    //console.log(ipt.value)
}

ipt.onkeyup = function () {
    //输出输入框的内容:当键盘按键抬起的时候，数据已经到达了输入框
    console.log(ipt.value)
}
  • 鼠标相关的, 鼠标在xx之上(onmouseover ), 鼠标按下(onmousedown),鼠标离开(onmouseout)
//给输入框绑定鼠标移入事件
ipt.onmouseover = function () {
    console.log("鼠标移入了...")
}
//给输入框绑定鼠标移出事件
ipt.onmouseout = function () {
    console.log("鼠标移出了...")
}
5.4.小结
1. 绑定事件的方式:
   	1. 通过在标签上设置标签的属性，进行绑定，也就是通过命名函数(普通函数)进行绑定
   	2. 通过js代码获取到标签，然后设置标签的属性进行绑定，也就是通过匿名函数绑定事件



2. JS的常见的事件介绍:
   	1. onclick
   	2. ondblclick
   	3. onmouseover
   	4. onmouseout
   	5. onfocus  获取焦点
   	6. onblur   失去焦点

6.正则表达式(了解)

6.1正则表达式概述

​ 正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。

​ 用我们自己的话来说: 正则表达式用来校验字符串是否满足一定的规则的公式

6.2 正则表达式的语法
6.2.1创建对象
  • 对象形式：var reg = new RegExp("正则表达式")当正则表达式中有"/"那么就使用这种
  • 直接量形式：var reg = /正则表达式/一般使用这种声明方式
6.2.2常用方法
方法描述参数返回值
test(string)校验字符串的格式要校验的字符串boolean，校验通过返回true
6.2.3常见正则表达式规则
符号作用
\d数字
\D非数字
\w英文字符：a-zA-Z0-9_
\W非英文字符
.通配符，匹配任意字符
{n}匹配n次
{n,}大于或等于n次
{n,m}在n次和m次之间
+1~n次
*0~n次
?0~1次
^匹配开头
$匹配结尾
[a-zA-Z]英文字母
[a-zA-Z0-9]英文字母和数字
[xyz]字符集合, 匹配所包含的任意一个字符
6.3使用示例

需求:

  1. 出现任意数字3次
  2. 只能是英文字母的, 出现6~10次之间
  3. 只能由英文字母和数字组成，长度为4～16个字符，并且以英文字母开头
  4. 手机号码: 以1开头, 第二位是3,4,5,6,7,8,9的11位数字

步骤:

  1. 创建正则表达式
  2. 调用test()方法
<script>
    //1.出现任意数字3次
    //a. 创建正则表达式
    var reg1  = /^\d{3}$/; //出现任意数字3次
    //b. 校验字符串
    var str1 = "3451";
    var flag1 = reg1.test(str1);
    //alert("flag1="+flag1);

    //2.只能是英文字母的, 出现6~10次之间
    var reg2  =/^[a-zA-Z]{6,10}$/;
    var str2 = "abcdef11g";
    //alert(reg2.test(str2));

    //3 用户名：只能由英文字母和数字组成，长度为4～16个字符，并且以英文字母开头
    var reg3  =/^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
    var str3 = "zs";
   // alert(reg3.test(str3));


    //4. 手机号码: 以1开头, 第二位是3,4,5,6,7,8,9的11位数字
    //var reg4  =/^1[3456789]\d{9}$/i; //忽略大小写的
    var reg4  =/^1[3456789]\d{9}$/; //不忽略大小写的
    var str4 = "188245899";
    alert(reg4.test(str4));


</script>
6.4.小结
  1. 正则概念: 就是用来校验字符串的规则
  2. 正则使用步骤
    • 创建正则表达式对象
    • 调用test()方法

7.内置对象之Array数组(了解)

7.1 创建数组对象
7.1.1语法
  • var arr = new Array(size)
  • var arr = new Array(element1, element2, element3, ...)
  • var arr = [element1, element2, element3, ...];一般采用这种方式创建
7.1.2数组的特点
  • 数组中的每个元素可以是任意类型
  • 数组的长度是可变的，更加类似于Java里的集合List
7.1.3示例
  • 创建数组，并把数组输出到浏览器控制台上
    • 说明：把数据输出到控制台：console.log(value)
  //1.数组定义方式
    //1.1 方式一  new Array(size);
    var array01 = new Array(4);
    array01[0] = 1;
    array01[1] = 2;
    array01[2] = 3;
    array01[3] = 99;


    //1.2 方式二  new Array(ele,ele...);
    var array02 = new Array(1, 2, 3, 99);

    //1.3 方式三  [ele,ele]
    var array03 = [1, 2, 3, 99];


    //2.数组特点  ①js里面数组可以存放不同类型的数据 ②js里面的数组可变, 没有越界的概念
    var array04 = [1, 2, 3, "哈哈"];

    //console.log(array04[0]); //1
    //console.log(array04[3]); //"哈哈"
    //console.log(array04[5]); //在Java里面是数组越界 js里面是undefined

    console.log(array04.length);  //4
    array04[6] = "你好";  //[1,2,3,"哈哈",undefined,undefined,"你好"]
    console.log(array04.length);  //7
7.2数组常见的方法
7.2.1API介绍
方法描述
concat()连接两个或更多的数组，并返回结果。
join()把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
reverse()颠倒数组中元素的顺序。
7.2.2示例
//3.常用的方法
//3.1 concat() 连接两个或更多的数组，并返回结果。【重点】
var array05 = [1, 2, 3, 4];
var array06 = ["哈哈", "你好", 100, 200];
var array07 = array05.concat(array06);
console.log(array07);

//3.2 join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
var str =   array05.join("**");  
console.log(str);

//3.3 reverse() 颠倒数组中元素的顺序。
array06 =  array06.reverse();
console.log(array06);
7.3二维数组
  1. 数组里面再放数组 就是二维数组
  2. 示例
    //4.二维数组
    //方式一:
    var citys = new Array(3);
    citys[0] = ["深圳", "广州", "东莞", "惠州"];
    citys[1] = ["武汉", "黄冈", "黄石", "鄂州", "荆州"];
    citys[2] = ["济南", "青岛", "烟台", "淄博", "聊城"];

    var citys02 = [
        ["深圳", "广州", "东莞", "惠州"],
        ["武汉", "黄冈", "黄石", "鄂州", "荆州"],
        ["济南", "青岛", "烟台", "淄博", "聊城"]
    ];
    for (var i = 0; i < citys02.length; i++) {
        var cityArray = citys02[i];
        
        console.log(cityArray);

        for(var j = 0;j<=cityArray.length;j++){
            console.log(cityArray[j]);
        }
    }
7.4.小结
  1. 数组定义语法
var array = new Array(size);  		//定义了没有赋值
var array = new Array(ele,ele,ele); //定义了并且赋值了
var array = [ele,ele,ele];          //定义了并且赋值了
  1. 数组的特点
    • js的数组里面可以存放不同类型的数据
    • js的数组的长度可变
  2. 数组常用的方法
    • 数组.concat(数组) 把2个,多个拼接成一个数组==
    • 数组.join(分隔符) 把数组里面的元素拼接成一个字符串
    • 数组.reverse() 反转
  3. 二维数组
    • 数组里面的元素也是数组

8.内置对象之-Date日期(了解)

8.1. 创建日期对象
8.1.1语法

  • 创建当前日期：var date = new Date()

  • 创建指定日期：var date = new Date(年, 月, 日)

    注意：月从0开始，0表示1月

  • 创建指定日期时间：var date = new Date(年, 月, 日, 时, 分, 秒)

    注意：月从0开始，0表示1月

8.1.2示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日期</title>
</head>
<body>

<script>
    //创建当前日期
    var date1 = new Date();
    console.log(date1);

    //创建指定日期: 2019-11-11
    var date2 = new Date(2019, 10, 11);
    console.log(date2);

    //创建指定日期时间：2019-11-11 20:10:10
    var date3 = new Date(2019, 10, 11, 20, 10, 10);
    console.log(date3);
</script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7l3XSjcp-1629024932228)(E:/Java/03-就业阶段_JAVAWEB阶段/03-就业阶段_JAVAWEB课件/day23 JavaScript/笔记/img/1571473450137.png)]

8.2. 日期常用方法
8.2.1API介绍
方法描述
Date()返回当日的日期和时间。
getDate()从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth()从 Date 对象返回月份 (0 ~ 11)。
getFullYear()从 Date 对象以四位数字返回年份。
getHours()返回 Date 对象的小时 (0 ~ 23)。
getMinutes()返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds()返回 Date 对象的毫秒(0 ~ 999)。
getTime()返回 1970 年 1 月 1 日至今的毫秒数（时间戳）。
parse()返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setDate()设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth()设置 Date 对象中月份 (0 ~ 11)。
setFullYear()设置 Date 对象中的年份（四位数字）。
setYear()请使用 setFullYear() 方法代替。
setHours()设置 Date 对象中的小时 (0 ~ 23)。
setMinutes()设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds()设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds()设置 Date 对象中的毫秒 (0 ~ 999)。
setTime()以毫秒设置 Date 对象。
toLocaleString()根据本地时间格式，把 Date 对象转换为字符串。

二、JS的BOM

1概述

​ Browser Object Model ,浏览器对象模型. 为了便于对浏览器的操作，JavaScript封装了浏览器中各个对象，使得开发者可以方便的操作浏览器中的各个对象。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aXZJUqaa-1629024932230)(E:/Java/03-就业阶段_JAVAWEB阶段/03-就业阶段_JAVAWEB课件/day23 JavaScript/笔记/img/tu_1.bmp)]

2.BOM里面的五个对象
2.1 window: 窗体对象
方法作用
alert()显示带有一段消息和一个确认按钮的警告框
confirm()显示带有一段消息以及确认按钮和取消按钮的对话框
prompt()弹出输入框
setInterval(‘函数名()’,time)按照指定的周期（以毫秒计）来调用函数或计算表达式
setTimeout(‘函数名()’,time)在指定的毫秒数后调用函数或计算表达式
clearInterval()取消由 setInterval() 设置的 Interval()。
clearTimeout()取消由 setTimeout() 方法设置的 timeout。
//1. 警告框
//window.alert("hello")

//2. 确认框
/*let flag = confirm("你确定要删除吗?");
        console.log(flag)*/

//3. 输入框
let age = prompt("请输入你的年龄");

if (parseInt(age) >= 18) {
    alert("可以访问")
}else {
    alert("请大一点了再访问")
}

//定时器的话就是隔一段事件执行一个任务
//1. setTimeout(),只执行一次的定时器,其实也就相当于一个延时器
//第一个参数是要执行的匿名函数，第二个参数是执行时间
/*setTimeout(function () {
            document.write("hello world")
        },3000)*/

//2. setInterval(),循环执行的定时器
//第一个参数是要执行的匿名函数，第二个参数是间隔时间，该方法的返回值是这个定时器id
let i = 0
var id = setInterval(function () {
    i ++
    document.write("你好世界<br/>")

    //我们还有一个方法，clearInterval(定时器的id)清除定时器
    if (i == 5) {
        clearInterval(id)
    }
},2000);
2.2,navigator:浏览器导航对象【了解】
属性作用
appName返回浏览器的名称
appVersion返回浏览器的平台和版本信息
2.3,screen:屏幕对象【了解】
方法作用
width返回显示器屏幕的分辨率宽度
height返回显示屏幕的分辨率高度
2.4,history:历史对象【了解】
方法作用
back()加载 history 列表中的前一个 URL
forword()加载 history 列表中的下一个 URL
go()加载 history 列表中的某个具体页面
2.5 location:当前路径信息(最重要)
属性作用
host设置或返回主机名和当前 URL 的端口号
href设置或返回完整的 URL
port设置或返回当前 URL 的端口号

location.href; 获得路径

location.href = “http://www.baidu.com”; 设置路径,跳转到百度页面

3.小结
  1. BOM: 浏览器对象模型, JS里面封装了五个对象 用来操作浏览器的
  2. window对象
    • alert() 弹出警告框
    • confirm() 弹出确认框
    • prompt() 弹出输入框
    • setInterval(‘函数()’,时间) 周期执行
    • setTimeout(’‘函数()’,时间) 延迟执行
  3. location
    • location.href; 获得路径
    • location.href=""; 设置路径

三、JS的DOM(最重要)

1. 什么是dom

  • DOM：Document Object Model，文档对象模型。是js提供的，用来访问网页里所有内容的(标签,属性,标签的内容)

2. 什么是dom树

  • 当网页被加载时，浏览器会创建页面的DOM对象。DOM对象模型是一棵树形结构：网页里所有的标签、属性、文本都会转换成节点对象，按照层级结构组织成一棵树形结构。
    • 整个网页封装成的对象叫document
    • 标签封装成的对象叫Element
    • 属性封装成的对象叫Attribute
    • 文本封装成的对象叫Text

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2WXb0agN-1629024932231)(E:/Java/03-就业阶段_JAVAWEB阶段/03-就业阶段_JAVAWEB课件/day23 JavaScript/笔记/img/dom树.png)]

一切皆节点, 一切皆对象

小结
  1. dom: 文档对象模型, 用来操作网页
  2. dom树: html通过浏览器加载到内存里面形成了一颗dom树, 我们就可以操作dom树节点(获得节点, 添加节点, 删除节点)

3.操作标签

3.1. 获取标签
方法描述返回值
document.getElementById(id)根据id获取标签Element对象
document.getElementsByName(name)根据标签name获取一批标签Element类数组
document.getElementsByTagName(tagName)根据标签名称获取一批标签Element类数组
document.getElementsByClassName(className)根据类名获取一批标签Element类数组
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>获取标签的方法介绍</title>
    </head>
    <body>
        <div id="d1" name="n1">hello div1</div>
        <div class="c1">hello div2</div>
        <span class="c1">hello span1</span>
        <span name="n1">hello span2</span>
        <script>
            //根据id获取标签
            //console.log(document.getElementById("d1"))

            //根据name获取标签的数组
            //console.log(document.getElementsByName("n1"))

            //根据标签名获取标签
            //console.log(document.getElementsByTagName("div"))

            //根据类名获取标签
            //console.log(document.getElementsByClassName("c1"))

            //扩展俩方法:1. 获取单个标签
            //console.log(document.querySelector("#d1"))

            //2. 获取多个标签
            console.log(document.querySelectorAll("span"))
        </script>
    </body>
</html>
3.2. 操作标签
方法描述返回值
document.createElement(tagName)创建标签Element对象
parentElement.appendChild(sonElement)插入标签
element.remove()删除标签
<body>
    <ul id="city">
        <li>北京</li>
        <li id="sh">上海</li>
        <li>深圳</li>
        <li>广州</li>
    </ul>
    <input type="button" value="添加" onclick="addCity()">
    <input type="button" value="删除" onclick="removeCity()">
    <script>
        //点击添加按钮，往城市列表的最后面添加"长沙"
        function addCity() {
            //1. 创建一个li标签
            var liElement = document.createElement("li");
            //2. 设置li标签体的文本内容为"长沙"
            liElement.innerText = "长沙"
            //3. 往id为city的ul中添加一个子标签
            //3.1 获取id为city的ul
            var city = document.getElementById("city");
            //3.2 往city里面添加子标签
            city.appendChild(liElement)
        }

        //点击删除按钮，删除上海
        function removeCity() {
            //要删除某一个标签: 那个标签.remove()
            document.getElementById("sh").remove()
        }
    </script>
</body>
3.3.小结
  1. 获得标签
    • document.getElementById("id”) 根据id获得
    • document.getElementsByTagName(“标签名”) 根据标签名获得
    • document.getElementsByClassName(“类名”) 根据类名获得
  2. 操作节点(标签,文本)
    • document.createElement(tagName) 创建标签 Element对象
    • document.createTextNode("文本") 创建文本节点
    • parentElement.appendChild(sonElement) 插入标签
    • element.remove() 删除标签

4.操作标签体

4.1语法
  • 获取标签体内容：标签对象.innerHTML
  • 设置标签体内容：标签对象.innerHTML = "新的HTML代码";
    • innerHTML是覆盖式设置，原本的标签体内容会被覆盖掉；
    • 支持标签的 可以插入标签, 设置的html代码会生效
4.2示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作标签体</title>
</head>
<body>
    <div id="city"><h1>北京</h1></div>
    <script>
        //获取id为city的那个标签的标签体的内容
        var innerHTML = document.getElementById("city").innerHTML;
        console.log(innerHTML)

        //设置id为city的标签体的内容
        document.getElementById("city").innerHTML = "<h1>深圳</h1>"

    </script>
</body>
</html>
4.3. 小结
  1. 获得标签的内容 (一并获得标签)
标签对象.innerHTML;
  1. 设置标签的内容(①会把前面的内容覆盖 ②支持标签的)
标签对象,innerHTML = "html字符串";

5.操作属性

5.1. 讲解

  • 每个标签Element对象提供了操作属性的方法
方法名描述参数
getAttribute(attrName)获取属性值属性名称
setAttribute(attrName, attrValue)设置属性值属性名称, 属性值
removeAttribute(attrName) 了解即可删除属性属性名称
<body>
    <input type="password" id="pwd">
    <input type="button" value="显示密码" onmousedown="showPassword()" onmouseup="hidePassword()">
    <script>
        //目标:按住显示密码按钮的时候，就显示密码框中的密码; 按键松开的时候，就隐藏密码
        //1. 给按钮绑定onmousedown事件
        function showPassword() {
            //让密码框的密码显示: 修改密码框的type属性为text
            document.getElementById("pwd").setAttribute("type","text")
        }

        //2. 给按钮绑定onmouseup事件
        function hidePassword() {
            //就是设置密码框的type为password
            document.getElementById("pwd").setAttribute("type","password")

            //getAttribute(属性名)，根据属性名获取属性值
            var type = document.getElementById("pwd").getAttribute("type");
            console.log(type)
        }
    </script>
</body>

5.2.小结

  1. getAttribute(attrName) 获取属性值
  2. setAttribute(attrName, attrValue) 设置属性值
  3. removeAttribute(attrName) 删除属性
qq_44736296
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javaScript
03-09
Java脚本
javascript
02-10
javascript官方文档，web前端师的权威文档，web前端的
JS操作DOM元素代码的编写
悦分享
11-11 833
JS操作DOM元素代码的编写 DOM树 传统的html文档顺序是:document->html->(head,body) 根据 DOM，HTML 文档中的每个成分都是一个节点。 整个文档是一个文档节点 每个 HTML 标签是一个元素节点 包含在 HTML 元素中的文本是文本节点 每一个 HTML 属性是一个属性节点 注释属于注释节点 一、document对象(DOM...
【2】js代码编写到外部js文件中，然后通过script标签引入
F_aF_a的博客
12-23 1677
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!--可以将js代码编写到外部js文件中，然后通过script标签引入--> <script type="text/javascript" src="s...
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 解释器。 用来读
学习JavaScript这一篇就够了
热门推荐
轻松的小希
11-25 75万+
目录第一章 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 4426
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言 脚本语言：最开始从 Script 单词翻译过来的。 java、c、c## c++ 都是非脚本语言 脚本和非脚本语言的区别：在于执行方式。 脚本语言：直接浏览器解析执行。 非脚本的：有一个先编译的过程。会生成中间的可执行代码文件。 动态语言：解释执行JavaScript代码的时候才去确定数据的类型。 弱类型语言： 1：变量的类型由实际的数值来确定。任何的变量可以保存任意的数据的类型。 2：不同数据...
javascript百炼成仙 第一章 掌握JavaScript基础 1.2直接量
java小白翻身
10-06 7万+
叶小凡的住处被安排在青山院西北角的一个房间里，虽不宽敞，倒也干净。叶小凡两眼露出振奋的眼神，随便吃了点乡亲们准备的干粮后，就立刻开始打坐修行。编程之修，重在积累，而非资质。资质虽然一样重要，可是后天的努力一样必不可少。这些道理，叶小凡还未上山之前，就已经熟知！因此，即便是资质平凡，只要肯下苦功，一样可以修得正果！叶小凡虽然甲等资质，可依然不骄不躁，开始从“JavaScript基础修炼要诀”第一页开始看起。 修炼要诀第一章，直接量。 编程世界，所谓直接量，就是明面上可以见到的数据值。常见的直接量有数字，小数，
JavaWeb—JavaScript
weixin_61843013的博客
06-25 7713
JavaScript的使用
Javascript
03-22
javascript-examples JavaScript网页程式设计
JavaScript入门
03-04
JavaScript入门
HTML入门教程：深度解析HTML，开启你的前端技术之旅
zhangwenok的博客
06-14 1472
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
工具链--nuxt框架 简介（一）
最新发布
qq_35876316的博客
06-16 338
Nuxt框架是一个基于Vue.js的服务器端渲染（SSR）框架，旨在提供一套完整的前端开发解决方案，帮助开发者构建高性能、可扩展的Web应用。是一个功能强大、易于使用的Web开发框架，适用于多种开发场景和需求。Nuxt框架建立在Vue.js之上，它抽象出了管理异步数据、中间件和路由所涉及的大部分复杂配置。Nuxt不仅继承了Vue.js的所有优点，如易用性、灵活性等，还与Node.js紧密集成，使得开发者可以在项目中轻松地使用Node.js的各种功能。
（Javascript）AI数字人mp4转canvas播放并去除背景绿幕
lx_nhs的博客
06-12 582
去除前：去除后： 3、可能会出现的报错 （1）视频路径跨域问题：解决：vue开启代理
VUE el-select Select 选择器 选项是对象，显示是一个值name ，但是绑定的对象值是id方案
mqiqe的专栏
06-14 321
在 Vue 中使用 Element UI 的 el-select 组件时，如果希望显示对象的某个属性（如 name），但实际绑定的是对象的另一个属性（如 id），需要使用 value-key 和 label 属性来分别指定这两个属性。在这个示例中，v-model=“selectedId” 用于绑定选择的值，该值将是选中项的 id。当用户选择一个选项时，selectedId 将被更新为选中项的 id，而 el-select 下拉列表中显示的是每个选项的 name 属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值