JavaScript

2021/8/15 22:05:47

编程Tag： js javascript 标签 var console document log

本文主要是介绍JavaScript，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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. onm ouseover
   	4. onm ouseout
   	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="显示密码" onm ousedown="showPassword()" onm ouseup="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) 删除属性


这篇关于JavaScript的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！


相关编程文章

更多>
本站官方QQ
官方QQ:
23002807

沪ICP备2023033072号-1

     

扫一扫关注最新编程教程