JavaWeb学习总结（一）JavaScript详解

最新推荐文章于 2021-08-22 14:20:09 发布

ZaynFox

最新推荐文章于 2021-08-22 14:20:09 发布

阅读量689

点赞数 1

分类专栏： # JavaWeb 文章标签： JavaScript

本文链接：https://blog.csdn.net/allenfoxxxxx/article/details/93382620

版权

JavaWeb 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一、JavaScript基础知识

（一）简介

（1）概念：

JavaScript是一种基于对象和事件驱动的 , 并具有安全性能的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。Javascript 语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行 JavaScript 代码。

（2）特点：

JavaScript 是脚本语言。
JavaScript 是解析型语言，边执行边解释。
交互性（它可以做的就是信息的动态交互）
安全性（不允许直接访问本地硬盘）
跨平台性（只要是可以解释 JS 的浏览器都可以执行，和平台无关）

（二）JavaScript基本结构

JavaScript 代码必须位于 <script> 与 </script> 标签之间。 <script></script> 一般放在在 head 标签中，或者在 body 标签中。

    <script type="text/javascript">
    <!--
    JavaScript 语句;
    -->
    </script >

有的网页中用缺省type="text/Javascript"，这种写法是正确的，因为HTML5中可省略type属性，HTML5默认为是text/Javascript。

（三）JavaScript和HTML代码的结合方式

1.第一种方式

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8">
	<title>Title</title> 
	<script type="text/javascript"> 
		// alert 是 JavaScript 语言提供的一个警告框函数。 
		// 它可以接收任意类型的参数，这个参数就是警告框的提示信息 
		alert("hello javaScript!"); 
	</script> 
</head> 
<body> 
</body> 
</html>

在这里插入图片描述

2.第二种方式

使用 script 标签引入单独的 JavaScript 代码文件
假设有一个JavaScript文件，【1.js】:

alert("hello!");

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Title</title> 
	<!--现在需要使用 script 引入外部的 js 文件来执行 src 属性专门用来引入 js 文件路径（可以是相对路径，也可以是绝对路径） 
	script 标签可以用来定义 js 代码，也可以用来引入 js 文件 但是，两个功能二选一使用。一个script标签不能同时使用两个功能 --> 
	<script type="text/javascript" src="1.js"></script> 
</head>
<body> 
</body> 
</html>

（四）JavaScript的输出

1. 弹窗（浏览器事件）

语法：alert("Hello,World!");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    alert("Hello,World!");
</script>
</body>
</html>

在这里插入图片描述

2. 输出在网页上（文档对象事件）

语法：document.write("Hello,World!");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    document.write(Date());
</script>
</body>
</html>

3. 控制台输出（调试语法）

语法：console.log("Hello,World!");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    console.log("Hello,World!");
</script>
</body>
</html>

在这里插入图片描述

4. 写在网页上（使用 innerHTML 写入到 HTML 元素）

语法：document.getElementById("xxx").innerHTML = "Hello,World!";

<!DOCTYPE html>
<html lang="en">
<body>

<div id="abc"></div>

<script>
    document.getElementById("abc").innerHTML = "Hello,World!";
</script>

</body>
</html>

在这里插入图片描述

（五）prompt()

prompt("提示信息", "输入框的默认信息");

案例
prompt("请输入你喜欢的颜色","红色");
在这里插入图片描述
prompt("请输入你的用户名","");

（六）变量

什么是变量？
变量是可以存放某些值的内存的命名。

1.JavaScript 的变量类型

数值类型： number
字符串类型： string
对象类型： object
布尔类型： boolean
函数类型： function

2.JavaScript 里特殊的值

undefined 未定义，所有 js 变量未赋于初始值的时候，默认值都是 undefined.
null 空值
NaN 全称是：Not a Number。非数字、非数值。

3.定义变量

格式：
var 变量名;
var 变量名 = 值;

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var i;
        // alert(i); // undefined
        i = 12;
        // typeof()是JavaScript语言提供的一个函数。
        // 它可以取变量的数据类型返回
        // alert( typeof(i) ); // number
        i = "abc";
        // alert( typeof(i) ); // String
        var a = 12;
        var b = "abc";
        alert( a * b ); // 结果：NaN
    </script>
</head>
<body>

</body>
</html>

4.String对象

（1）属性

length

var str="this is JavaScript";
var strLength=str.length; //长度是18

（2）方法

方法名称	说明
charAt(index)	返回在指定位置的字符
indexOf(str，index)	查找某个指定的字符串在字符串中首次出现的位置
substring(index1，index2)	返回位于指定索引index1和index2之间的字符串，[index1,index2)
split(str)	将字符串分割为字符串数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var str = "i love you";
        //javascript数组下标从 0 开始
        document.write("<h1>"+(str.length)+"<br/>");
        document.write("<h1>"+(str.charAt(3))+"<br/>");
        document.write("<h1>"+(str.indexOf("v"))+"<br/>");
        document.write("<h1>"+(str.substring(2,6))+"<br/>");
        document.write("<h1>"+(str.split(" "))+"<br/>");
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

（七）JavaScript中单引号与双引号的使用

1.单独使用

单引号和双引号在各自单独用时是没有什么区别的，比如：

var a="你好";//双引号,变量a的内容是字符串  你好
var b='你好';//单引号,变量b的内容是字符串  你好
console.info(a===b);//输出true，它们本质都是一样的字符串

2.混合使用

双引号中用单引号可以不用加反斜杠，例如：
var x="my name 'is' xxx"
双引号中用双引号需要加反斜杠，例如：
var x="my name \"is\" xxx" 此处需要在两个上引号前各加一个加反斜杠
单引号中用双引号不需要加反斜杠，当然加了也可以，例如：
var x1 ='my name "is" xxx'

（八）关系（比较）运算

大于小于与Java一样，这里只说与Java不一样的：

等于： == 等于是简单的做字面值的比较
全等于： === 除了做字面值的比较之外，还会比较两个变量的数据类型；相反，也有不等于!==

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        var a = "12";
        var b = 12;

        alert( a == b ); // true，字面上相等
        alert( a === b ); // false

    </script>
</head>
<body>

</body>
</html>

（九）逻辑运算

与运算： && 有两种情况：
第一种：当表达式全为真的时候，返回最后一个表达式的值
第二种：当表达式中，有一个为假的时候，返回第一个为假的表达式的值
或运算： || 有两种情况：
第一种：当表达式全为假的时候，返回最后一个表达式的值
第二种：当表达式中，有一个为真的时候，返回第一个为真的表达式的值
取反运算： !

&& 与运算和 ||或运算 有短路。
短路就是说，当这个&&或||运算有结果了之后，后面的表达式不再执行

在 JavaScript 语言中，所有的变量，都可以做为一个 boolean 类型的变量去使用。

0 、null、 undefined、””(空串) 都认为是 false

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var a = "abc";
        var b = true;
        var d = false;
        var c = null;
/*         && 且运算。
		有两种情况：
		第一种：当表达式全为真的时候。返回最后一个表达式的值。
		第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值*/
        // alert( a && b );//true
        // alert( b && a );//true
        // alert( a && d ); // false
        // alert( a && c ); // null

 /*      || 或运算
       第一种情况：当表达式全为假时，返回最后一个表达式的值
       第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值*/
        // alert( d || c ); // null
        // alert( c|| d ); //false
        // alert( a || c ); //abc
        // alert( b || c ); //true
    </script>
</head>
<body>

</body>
</html>

（十）数组

几种创建数组格式：

var 数组名 = new Array(数组长度);
var 数组名 = new Array("元素1","元素2","元素3");
var 数组名 = []; // 定义空数组 
var 数组名 = [1,'abc',true]; // 定义数组同时赋值元素

类别	名称	描述
属性	length	设置或返回数组中元素的数目
方法	join( )	把数组的所有元素放入一个字符串，通过指定的分隔符进行分隔
方法	sort()	对数组排序
方法	push()	向数组末尾添加一个或更多元素，并返回新的长度

案例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var arr = []; // 定义一个空数组
        // javaScript语言中的数组会自动的给数组做扩容操作，数组最大的下标值，就是我们赋过值的最大下标。
        arr[2] = "abc";
        alert(arr.length); //3
        alert(arr[1]);// undefined
        //数组的遍历
        for (var i = 0; i < arr.length; i++){
            alert(arr[i]);//undefined undefined abc
        }
    </script>
</head>
<body>
</body>
</html>

案例2

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

    <script>
        var arr = new Array(5);
        arr[0] = "单车";
        arr[1] = "地铁";
        arr[2] = "公交车";
        arr[3] = "汽车";
        arr[4] = "电动车";
        console.log("==============================arr数组打印");
        console.log(arr[0]);
        console.log(arr[1]);
        console.log(arr[2]);
        console.log(arr[3]);
        console.log(arr[4]);

        //1.创建一个string对象
        //2.通过split分割为数组
        //3.修改数组元素的值
        //4.打印查看
        var fruit = "apple,orange,banana,peach,watermelon";
        var arrList = fruit.split(",");//将字符串分割为字符串数组
        console.log("==============================arrList数组打印");
        console.log(arrList[0]);
        console.log(arrList[1]);
        console.log(arrList[2]);
        console.log(arrList[3]);
        console.log(arrList[4]);

        //join(),通过指定的分隔符链接数组元素,返回字符串.
        console.log("==============================arrList重新组成字符串");
        var str = arrList.join(" ");
        console.log(str);

        //sort(),对数组排序
        console.log("==============================排序前");
        var num = "9 4 7 2 8 4 6 5 1 4";
        var numList = num.split(" ");
        console.log(numList);
        console.log("==============================排序后");
        //排序 , 默认为升序
        numList.sort();
        console.log(numList);

        //push()
        console.log("==============================Push前");
        console.log(numList);
        console.log("==============================Push后");
        //push(): 向数组元素中添加内容 , 默认排在最后面.
        numList.push("7");
        console.log(numList);
    </script>

</head>
<body>

</body>
</html>

在这里插入图片描述

（十一）for/in循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var fruit=["apple","banana","watermelon","peach"];
        for(var i in fruit){        //   for/in循环
            document.write(fruit[i]+"<br/>");
        }
        </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

（十二）函数

函数的含义 : 类似于Java中的方法，是完成特定任务的代码语句块
比Java使用更简单 : 不用定义属于某个类，直接使用
函数分类 : 系统函数和自定义函数

1.常用的系统函数

parseInt (“字符串”)
- 将字符串转换为整型数字
- 如: parseInt (“86”)将字符串“86“转换为整型值86
parseFloat(“字符串”)
- 将字符串转换为浮点型数字
- 如: parseFloat(“34.45”)将字符串“34.45“转换为浮点值34.45
isNaN()
- 用于检查其参数是否是非数字

2.自定义函数

（1）第一种方式，使用 function 关键字来定义函数。

格式

function 函数名(形参列表){ 
	函数体 
}

在 JavaScript 语言中，如何定义带有返回值的函数？
只需要在函数体内直接使用 return 语句返回值即可！

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 定义一个无参函数
        function fun(){
            alert("无参函数fun()被调用了");
        }
        // 函数只有调用才会执行
        // fun();

        function fun2(a ,b) {
            alert("有参函数fun2()被调用了 a=>" + a + ",b=>"+b);
        }
        // fun2(12,"abc");

        // 定义带有返回值的函数
        function sum(num1,num2) {
            var result = num1 + num2;
            return result;
        }
        alert( sum(100,50) );//150
    </script>
</head>
<body>

</body>
</html>

（2）第二种方式

格式

var 函数名 = function(形参列表) { 
	函数体 
}

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var fun = function () {
            alert("无参函数");
        }
        // fun();

        var fun2 = function (a,b) {
            alert("有参函数a=>" + a + ",b=>" + b);
        }
        // fun2(1,2);

        var sum = function (num1,num2) {
            return num1 + num2;
        }
        alert( sum(100,50) );
    </script>
</head>
<body>

</body>
</html>

注：在 Java 中函数允许重载。但是在JavaScript中函数的重载会直接覆盖掉上一次的定义

3.函数的 arguments 隐形参数

就是在 function 函数中不需要定义，但却可以直接用来获取所有参数的变量。我们管它叫隐形参数。隐形参数特别像 java 基础的可变参数 public void fun( Object ... args ); 。可变参数其实是一个数组。那么 JavaScript中的隐形参数也跟 java 的可变参数一样，操作类似数组。

案例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 需求：要求 编写一个函数。用于计算所有参数相加的和并返回
        function sum(num1,num2) {
            var result = 0;
            for (var i = 0; i < arguments.length; i++) {
                result += arguments[i];
            }
            return result;
        }
        //虽然定义的函数参数列表只有两个，但是实参可以传多个，原因是JavaScript有隐形参数，可以直接用来获取所有参数的变量
        alert( sum(1,2,3,4,"abc",5,6,7,8,9) );
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述
与Java中的字符串拼接一个道理

案例2

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

    <script type="text/javascript">
        // 需求：要求 编写一个函数。用于计算所有参数相加的和并返回
        function sum(num1,num2) {
            var result = 0;
            for (var i = 0; i < arguments.length; i++) {
                if (typeof(arguments[i]) == "number") {
                    result += arguments[i];
                }
            }
            return result;
        }
        //虽然定义的函数参数列表只有两个，但是实参可以传多个，原因是JavaScript有隐形参数，可以直接用来获取所有参数的变量
        alert( sum(1,2,3,4,"abc",5,6,7,8,9) );
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

（十三）自定义对象

1.Object形式的自定义对象

格式

对象的定义：

var 变量名 = new Object(); // 对象实例（空对象） 
变量名.属性名 = 值; // 定义一个属性 
变量名.函数名 = function(){} // 定义一个函数

对象的访问：

变量名.属性 
变量名.函数名();

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        // 对象的定义：
        //     var 变量名 = new Object();   // 对象实例（空对象）
        //     变量名.属性名 = 值;		  // 定义一个属性
        //     变量名.函数名 = function(){}  // 定义一个函数
        var obj = new Object();
        obj.name = "华仔";
        obj.age = 18;
        obj.fun = function () {
            alert("姓名：" + this.name + " , 年龄：" + this.age);
        }
        // 对象的访问：
        //     变量名.属性
        //    变量名.函数名();
        // alert( obj.age );
        obj.fun();

    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

2.大括号形式的自定义对象

格式

对象的定义：

var 变量名 = { // 空对象 
	属性名：值, // 定义一个属性 
	属性名：值, // 定义一个属性 
	函数名：function(){} // 定义一个函数 
};

对象的访问：

变量名.属性 
变量名.函数名();

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 对象的定义：
        // var 变量名 = {			// 空对象
        //     属性名：值,			// 定义一个属性
        //     属性名：值,			// 定义一个属性
        //     函数名：function(){}	// 定义一个函数
        // };
        var obj = {
            name:"华仔",
            age:18,
            fun : function () {
                alert("姓名：" + this.name + " , 年龄：" + this.age);
            }
        };

        // 对象的访问：
        //     变量名.属性 
        //   变量名.函数名();
        //alert(obj.name);
        obj.fun();
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

（十四）事件

什么是事件？
事件是电脑输入设备与页面进行交互的响应。我们称之为事件。
常用的事件：
- onload 加载完成事件：页面加载完成之后，常用于做页面 js 代码初始化操作
- onclick 单击事件：常用于按钮的点击响应操作。
- onblur 失去焦点事件：常用用于输入框失去焦点后验证其输入内容是否合法。
- onchange 内容发生改变事件：常用于下拉列表和输入框内容发生改变后操作
- onsubmit 表单提交事件：常用于表单提交前，验证所有表单项是否合法。
事件的注册又分为静态注册和动态注册两种：
- 什么是事件的注册（绑定）？
  其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。
- 静态注册事件：通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。
- 动态注册事件：是指先通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件响应后的代码，叫动态注册。
  动态注册基本步骤：
  1、获取标签对象
  2、标签对象.事件名 = fucntion(){}

1.onload 加载完成事件

onload事件是浏览器解析完页面之后就会自动触发的事件

（1）静态注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // onload事件的方法
        function onloadFun() {
            alert('静态注册onload事件');
        }
    </script>
</head>
<body onload="onloadFun();">

</body>
</html>

在这里插入图片描述

（2）动态注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // onload事件动态注册。是固定写法
        window.onload = function () {
            alert("动态注册的onload事件");
        }
    </script>
</head>
<body >

</body>
</html>

在这里插入图片描述

2.onclick单击事件

（1）静态注册

案例1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onclickFun() {
            alert("静态注册onclick事件");
        }
    </script>
</head>
<body>
    <!--静态注册onClick事件-->
    <button onclick="onclickFun();">按钮1</button>
</body>
</html>

在这里插入图片描述
案例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <script>
        function study() {
            for (var i=1;i<=5;i++) {
                document.write("<h3>欢迎学习JavaScript</h3>")
            }
        }

        function study2(nums) {
            for (var i=1;i<=nums;i++) {
                document.write("<h3>欢迎学习JavaScript"+i+"</h3>")
            }
            //console.log(arguments[1]);
        }

        function add(num1,num2) {
            num1=parseInt(num1);
            num2=parseInt(num2);
            document.write("运算结果:"+(num1+num2));
            //return num1+num2;
        }
    </script>

</head>
<body>
<!--调用无参函数：-->
<input type="button" value="点我打印1" onclick="study()">
<!--调用有参函数：-->
<input type="button" value="点我打印2" onclick="study2(prompt('请输入循环次数',''))">
<input type="button" value="点我做两个整数的加法运算"
       onclick="add(prompt('请输入第一个数'),prompt('请输入第二个数'))">

</body>
</html>

在这里插入图片描述
点第一个按钮：

点第二个按钮：

加粗样式
点第三个按钮：

（2）动态注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 动态注册onclick事件
        //由于HTML代码是由上往下执行的，因此要先动态加载body里的内容才知道btn01是什么
        window.onload = function () {
            // 1 获取标签对象
            /*
            * document 是JavaScript语言提供的一个对象（文档）
            * getElementById通过id属性获取标签对象
            **/
            var btnObj = document.getElementById("btn01");//返回按钮这个对象
            // alert( btnObj );//object HTMLButtonElement
            // 2 通过标签对象.事件名 = function(){}
            btnObj.onclick = function () {
                alert("动态注册的onclick事件");
            }
        }
    </script>
</head>
<body>
    <button id="btn01">按钮2</button>
</body>
</html>

在这里插入图片描述

3.onblur失去焦点事件

（1）静态注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 静态注册失去焦点事件
        function onblurFun() {
            // console是控制台对象，是由JavaScript语言提供，专门用来向浏览器的控制器打印输出， 用于测试使用
            // log() 是打印的方法
            console.log("静态注册失去焦点事件");
        }
    </script>
</head>
<body>
    用户名:<input type="text" onblur="onblurFun();"><br/>
    密码:<input id="password" type="text" ><br/>
</body>
</html>

在这里插入图片描述

（2）动态注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 动态注册 onblur事件
        //由于HTML代码是由上往下执行的，因此要先动态加载body里的内容才知道password是什么
        window.onload = function () {
            //1 获取标签对象
           var passwordObj = document.getElementById("password");
           // alert(passwordObj);//object HTMLInputElement
            //2 通过标签对象.事件名 = function(){};
            passwordObj.onblur = function () {
                console.log("动态注册失去焦点事件");
            }
        }
    </script>
</head>
<body>
    用户名:<input type="text"><br/>
    密码:<input type="text" id="password" ><br/>
</body>
</html>

在这里插入图片描述

4.onchange内容发生改变事件

（1）静态注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onchangeFun() {
            alert("支付方式已经改变了");
        }
    </script>
</head>
<body>
    <!--静态注册onchange事件-->
    <select onchange="onchangeFun();">
        <option>--请选择支付方式--</option>
        <option>支付宝</option>
        <option>微信</option>
        <option>银行卡</option>
    </select>
</body>
</html>

在这里插入图片描述

（2）动态注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 动态注册 onchange事件
        //由于HTML代码是由上往下执行的，因此要先动态加载body里的内容才知道sel01是什么
        window.onload = function () {
            //1 获取标签对象
            var selObj = document.getElementById("sel01");
            // alert( selObj );//object HTMLSelectElement
            //2 通过标签对象.事件名 = function(){}
            selObj.onchange = function () {
                alert("支付方式已经改变了");
            }
        }
    </script>
</head>
<body>
    <!--静态注册onchange事件-->
    <select id="sel01">
        <option>--请选择支付方式--</option>
        <option>支付宝</option>
        <option>微信</option>
        <option>银行卡</option>
    </select>
</body>
</html>

在这里插入图片描述

5.onsubmit表单提交事件

（1）静态注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" >
        // 静态注册表单提交事务
        function onsubmitFun(){
            // 开发中提交后要验证所有表单项是否合法，如果有一个不合法就阻止表单提交
            alert("静态注册表单提交事件----发现不合法");
            return false;
        }
    </script>
</head>
<body>
    <!--return false 可以阻止 表单提交 -->
    <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
        <input type="submit" value="静态注册"/>
    </form>
</body>
</html>

在这里插入图片描述

（2）动态注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" >
        // 动态注册 onsubmit事件
        //由于HTML代码是由上往下执行的，因此要先动态加载body里的内容才知道form01是什么
        window.onload = function () {
            //1 获取标签对象
            var formObj = document.getElementById("form01");
            //2 通过标签对象.事件名 = function(){}
            formObj.onsubmit = function () {
                // 开发中提交后要验证所有表单项是否合法，如果有一个不合法就阻止表单提交
                alert("动态注册表单提交事件----发现不合法");
                return false;
            }
        }

    </script>
</head>
<body>
    <!--return false 可以阻止 表单提交 -->
    <form action="http://localhost:8080" id="form01">
        <input type="submit" value="动态注册"/>
    </form>
</body>
</html>

在这里插入图片描述

二、JavaScript操作BOM对象

（一）BOM模型

BOM : 浏览器对象模型 ( Browser Object Model )
BOM提供了独立于内容的 , 可以与浏览器窗口进行互动的对象结构
在这里插入图片描述

（二）Window对象

1.Window对象的常用属性

属性名称	说明
history	有关客户访问过的URL的信息
location	有关当前URL的信息

语法
window.属性名= "属性值"

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //浏览器自动加载跳转到指定的url
        window.location="https://www.baidu.com";
        //跳板
    </script>
</head>
<body>

<!--手动跳转<a href="javascript:location='https://www.baidu.com'">点击跳转到百度</a>-->

</body>
</html>

2.Window对象的常用方法

方法名称	说明
prompt( )	显示可提示用户输入的对话框
alert( )	显示带有一个提示信息和一个确定按钮的警示框
confirm( )	显示一个带有提示信息、确定和取消按钮的对话框
close( )	关闭浏览器窗口
open( )	打开一个新的浏览器窗口，加载给定 URL 所指定的文档
setTimeout( )	在指定的毫秒数后调用函数或计算表达式
setInterval( )	按照指定的周期（以毫秒计）来调用函数或表达式

（1）confirm()：

显示一个带有提示信息、确定和取消按钮的对话框
confirm()与alert ()、 prompt()区别
- alert( )：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变
- prompt( )：两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息
- confirm( )：一个参数，确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用

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

    <script>
            var x=confirm("确定要退出吗？");
            if(x) document.write("你按下了确定按钮");
            else document.write("你按下了取消按钮")
    </script>

</head>
<body>

</body>
</html>

在这里插入图片描述
点击确定：

点击取消：

（2）open():

语法：window.open("弹出窗口的url","窗口名称","窗口特征”)
window.open("www.baidu.com","百度","width=200,height=100")

窗口特征

窗口特征	描述
channelmode=yes\|no\|1\|0	是否使用剧院模式显示窗口。默认为 no。
directories=yes\|no\|1\|0	是否添加目录按钮。默认为 yes。
fullscreen=yes\|no\|1\|0	是否使用全屏模式显示浏览器。默认是 no。处于全屏模式的窗口必须同时处于剧院模式。
height=pixels	窗口文档显示区的高度。以像素计。
left=pixels	窗口的 x 坐标。以像素计。
location=yes\|no\|1\|0	是否显示地址字段。默认是 yes。
menubar=yes\|no\|1\|0	是否显示菜单栏。默认是 yes。
resizable=yes\|no\|1\|0	窗口是否可调节尺寸。默认是 yes。
scrollbars=yes\|no\|1\|0	是否显示滚动条。默认是 yes。
status=yes\|no\|1\|0	是否添加状态栏。默认是 yes。
titlebar=yes\|no\|1\|0	是否显示标题栏。默认是 yes。
toolbar=yes\|no\|1\|0	是否显示浏览器的工具栏。默认是 yes。
top=pixels	窗口的 y 坐标。
width=pixels	窗口的文档显示区的宽度。以像素计。

（三）history对象

常用方法：

名称	说明
back()	加载 history 对象列表中的前一个URL
forward()	加载 history 对象列表中的下一个URL
go()	加载 history 对象列表中的某个具体URL

浏览器的后退：
history.back()或history.go(-1)
浏览器的前进：
history.forward或history.go(1)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function goBack()
        {
            window.history.back()
        }
    </script>
</head>
<body>

<input type="button" value="点我后退" onclick="goBack()">

</body>
</html>

在这里插入图片描述
如果点击后无法后退，那是因为以前的历史列表中没有URL

（四）Location对象

1.常用属性

名称	说明
host	设置或返回主机名和当前URL的端口号
hostname	设置或返回当前URL的主机名
href	设置或返回完整的URL

2.常用方法

名称	说明
reload()	重新加载当前文档
replace()	用新的文档替换当前文档

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function reloadPage()
        {
            location.reload()
        }
    </script>
</head>
<body>

<input type="button" value="刷新页面" onclick="reloadPage()">

</body>
</html>

在这里插入图片描述

（五）Date对象

1.创建语法

var 日期对象=new Date(参数)

2.常用方法

方法	说明
getDate()	返回 Date 对象的一个月中的每一天，其值介于1～31之间
getDay()	返回 Date 对象的星期中的每一天，其值介于0～6之间
getHours()	返回 Date 对象的小时数，其值介于0～23之间
getMinutes()	返回 Date 对象的分钟数，其值介于0～59之间
getSeconds()	返回 Date 对象的秒数，其值介于0～59之间
getMonth()	返回 Date 对象的月份，其值介于0～11之间
getFullYear()	返回 Date 对象的年份，其值为4位数
getTime()	返回自某一时刻（1970年1月1日）以来的毫秒数

3.相关方法

定时方法
- 隔一段时间后调用一次：setTimeout("调用的函数",等待的毫秒数)
- 例：var myTime＝setTimeout("disptime() ", 1000 );1秒（1000毫秒）之后执行disptime（）一次
- 每隔一段时间调用一次：setInterval("调用的函数",间隔的毫秒数)
- 例：var myTime＝setInterval("disptime() ", 1000 );每隔1秒（1000毫秒）执行disptime（）一次
清除方法
- clearTimeout()
  - clearTimeout(setTimeOut()返回的ID值)
    - 例如var myTime＝setTimeout("disptime() ", 1000 ); clearTimeout(myTime);
- clearInterval()
  - clearInterval(setInterval()返回的ID值)
    - 例如var myTime＝setInterval("disptime() ", 1000 ); clearInterval(myTime)；

案例
模拟时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="time"></div>

<input type="button" value="start" onclick="startTime()">
<input type="button" value="stop" onclick="stopTime()">

<script>
    var myTime;
    function clock() {
        //获得一个时间
        var now = new Date();
        console.log(now);

        var hh =  now.getHours();
        var mm = now.getMinutes();
        var ss = now.getSeconds();

        document.getElementById("time").innerHTML ="现在时间为:" + hh + ":" + mm + ":" + ss;
    }
    //每隔一秒刷新一次时间
    function startTime() {
        myTime = setInterval("clock()",1000);
    }
   //停止刷新时间
    function stopTime() {
        clearInterval(myTime);
    }

</script>
</body>
</html>

在这里插入图片描述

（六）Math对象

常用方法

方法	说明	示例
ceil()	对数进行上舍入	Math.ceil(25.5);返回26 Math.ceil(-25.5);返回-25
floor()	对数进行下舍入	Math.floor(25.5);返回25 Math.floor(-25.5);返回-26
round()	把数四舍五入为最接近的数	Math.round(25.5);返回26 Math.round(-25.5);返回-26
random()	返回0~1之间的随机数	Math.random();例如：0.6273608814137365

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div>
    颜色 : <span id="color"></span>
    <input type="button" value="点我变色" onclick="test()">
</div>

<script>
    function test() {
        var color = Array("红色","绿色","蓝色","紫色","黑色","棕色","青色");
        var num = Math.ceil(Math.random()*7)-1;
        document.getElementById("color").innerHTML = color[num];
    }
</script>

</body>
</html>

在这里插入图片描述

三、JavaScript RegExp 对象（正则表达式）

（一）RegExp 对象

正则表达式是描述字符模式的对象。

正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。

（二）语法

var patt=new RegExp(pattern,modifiers);

或者更简单的方式:

var patt=/pattern/modifiers;

pattern（模式）描述了表达式的模式
modifiers(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配

案例
表示要求字符串中，是否包含字母a

var patt=new RegExp("a");
或者
var patt=/a/;

（三）修饰符

修饰符用于执行区分大小写和全局匹配:

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

（四）方括号

方括号用于查找某个范围内的字符：

表达式	描述
[abc]	查找方括号之间的任何字符。
[^abc]	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
[A-z]	查找任何从大写 A 到小写 z 的字符。
[adgk]	查找给定集合内的任何字符。
[^adgk]	查找给定集合外的任何字符。
`(red\|blue\|green)`	查找任何指定的选项。

（五）元字符

元字符（Metacharacter）是拥有特殊含义的字符：

元字符	描述
.	查找单个字符，除了换行和行结束符。
\w	查找单词字符。包含字母，数字，下划线
\W	查找非单词字符。
\d	查找数字。
\D	查找非数字字符。
\s	查找空白字符。
\S	查找非空白字符。
\b	匹配单词边界。
\B	匹配非单词边界。
\0	查找 NUL 字符。
\n	查找换行符。
\f	查找换页符。
\r	查找回车符。
\t	查找制表符。
\v	查找垂直制表符。
\xxx	查找以八进制数 xxx 规定的字符。
\xdd	查找以十六进制数 dd 规定的字符。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

（六）量词

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。
n{X}	匹配包含 X 个 n 的序列的字符串。（是否包含连续X个n）
n{X,Y}	匹配包含 X 或 Y 个 n 的序列的字符串。（是否包含至少X个连续的n，最多Y个连续的n）
n{X,}	匹配包含至少 X 个 n 的序列的字符串。（是否包含至少X个连续的n）
n$	匹配任何结尾为 n 的字符串。
^n	匹配任何开头为 n 的字符串。
?=n	匹配任何其后紧接指定字符串 n 的字符串。
?!n	匹配任何其后没有紧接指定字符串 n 的字符串。

（七）RegExp 对象方法

方法	描述	FF	IE
compile	编译正则表达式。	1	4
exec	检索字符串中指定的值。返回找到的值，并确定其位置。	1	4
test 检索字符串中指定的值。	返回 true 或 false。	1	4

（八）支持正则表达式的 String 对象的方法

方法	描述	FF	IE
search	检索与正则表达式相匹配的值。	1	4
match	找到一个或多个正则表达式的匹配。	1	4
replace	替换与正则表达式匹配的子串。	1	4
split	把字符串分割为字符串数组。	1	4

（九）案例演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
    //要求5-12位单词字符
        var patt = /^\w{5,12}$/;
        var str = "abc_123";
        alert( patt.test(str) );//test()方法用于测试某个字符串，是不是匹配我的规则，匹配就返回true。不匹配就返回false.
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

四、JavaScript操作DOM对象

（一）DOM概述

DOM : Document Object Model ( 文档对象模型 )
就是把文档中的标签，属性，文本等转换成为对象来管理

（二）Document对象

1.Document文档树内存结构

在这里插入图片描述

Document 对象的理解：

Document 它管理了HTML 文档中的所有内容。
Document 它是一种树结构的文档，有层级关系。
它让我们把所有的标签都 对象化
我们可以通过 Document 访问所有的标签对象。

2.Document 对象中的方法介绍

document.getElementById(elementId) 通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值
document.getElementsByName(elementName) 通过标签的 name 属性查找标签 dom 对象，elementName是标签的 name 属性值
document.getElementsByTagName(tagname) 通过标签名查找标签 dom 对象。tagname 是标签名
document.createElement( tagName) 方法，通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名

注：
document 对象的三个查询方法，如果有 id 属性，优先使用 getElementById 方法来进行查询如果没有 id 属性，则优先使用 getElementsByName 方法来进行查询如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName
以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。

（1）getElementById 方法示例

需求：当用户点击了校验按钮，要获取输出框中的内容。然后验证其是否合法。验证的规则是：必须由字母，数字。下划线组成。并且长度是5到12位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" >
        function onclickFun() {
            // 1 当我们要操作一个标签的时候，一定要先获取这个标签对象。
            var usernameObj = document.getElementById("username");

            var usernameText = usernameObj.value;
            // 如何验证字符串符合某个规则 ，需要使用正则表达式技术
            var patt = /^\w{5,12}$/;

            var usernameSpanObj = document.getElementById("usernameSpan");
            /*
            *  test()方法用于测试某个字符串，是不是匹配我的规则 ，
            *  匹配就返回true。不匹配就返回false.
            * */
            if (patt.test(usernameText)) {
                // alert("用户名合法！");
                // innerHTML 表示起始标签和结束标签中的内容
            	// innerHTML 这个属性可读，可写
                // usernameSpanObj.innerHTML = "用户名合法！";
                usernameSpanObj.innerHTML = "<img src=\"right.png\" width=\"18\" height=\"18\">";//正确时显示的图片
            } else {
                // alert("用户名不合法！");
                // usernameSpanObj.innerHTML = "用户名不合法！";
                usernameSpanObj.innerHTML = "<img src=\"wrong.png\" width=\"18\" height=\"18\">";//错误时显示的图片
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username" value="wzg"/>
    <span id="usernameSpan" style="color:red;">

    </span>
    <button onclick="onclickFun()">校验</button>
</body>
</html>

在这里插入图片描述

（2）getElementByName 方法示例

需求：实现一键全选或全不选或反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 全选
        function checkAll() {
            // 让所有复选框都选中
            // document.getElementsByName();是根据 指定的name属性查询返回多个标签对象集合
            // 这个集合的操作跟数组 一样
            // 集合中每个元素都是dom对象
            // 这个集合中的元素顺序是他们在html页面中从上到下的顺序
            var hobbies = document.getElementsByName("hobby");
            // checked表示复选框的选中状态。如果选中是true，不选中是false
            // checked 这个属性可读，可写
            for (var i = 0; i < hobbies.length; i++){
                hobbies[i].checked = true;
            }
        }
        //全不选
        function checkNo() {
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++){
                hobbies[i].checked = false;
            }
        }
        // 反选
        function checkReverse() {
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = !hobbies[i].checked;
                // if (hobbies[i].checked) {
                //     hobbies[i].checked = false;
                // }else {
                //     hobbies[i].checked = true;
                // }
            }
        }
    </script>
</head>
<body>
    兴趣爱好：
    <input type="checkbox" name="hobby" value="cpp">C++
    <input type="checkbox" name="hobby" value="java">Java
    <input type="checkbox" name="hobby" value="js">JavaScript
    <br/>
    <button onclick="checkAll()">全选</button>
    <button onclick="checkNo()">全不选</button>
    <button onclick="checkReverse()">反选</button>
</body>
</html>

在这里插入图片描述

（3）getElementByTagName 方法示例

需求：实现一键全选（动态注册实现）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function(){
            var btn=document.getElementById("btn01");
            btn.onclick=function () {
                var inputs = document.getElementsByTagName("input");
                for (var i = 0; i < inputs.length; i++){
                    inputs[i].checked = true;
                }
            }
        }
    </script>
</head>
<body>
兴趣爱好：
<input type="checkbox" value="cpp">C++
<input type="checkbox" value="java">Java
<input type="checkbox" value="js">JavaScript
<br/>
<button id="btn01">全选</button>
</body>
</html>

在这里插入图片描述

（4）createElement方法示例

需求：需要我们使用js代码来创建html标签，并显示在页面上，标签的内容就是：<div>Hello,world!</div>

方法一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            var divObj = document.createElement("div"); // 此时在内存中 <div></div>
            divObj.innerHTML = "Hello,world!"; // 此时在内存中<div>Hello,world!</div>,但，还只是在内存中
            // 需要添加子元素到body中
            document.body.appendChild(divObj);
        }
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

方法二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            var divObj = document.createElement("div"); // 此时在内存中 <div></div>
            var textNodeObj = document.createTextNode("Hello,world!"); 
            divObj.appendChild(textNodeObj); //<div>Hello,world!</div>,但，还只是在内存中
            // 需要添加子元素到body中
            document.body.appendChild(divObj);
        }
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

3.节点的常用属性和方法

节点就是标签对象

（1）节点属性

属性名称	描述
parentNode	返回节点的父节点
childNodes	返回子节点集合，childNodes[i]
firstChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild	返回节点的最后一个子节点
nextSibling	下一个节点
previousSibling	上一个节点
className	用于获取或设置标签的 class 属性值
innerHTML	表示获取/设置起始标签和结束标签中的内容
innerText	表示获取/设置起始标签和结束标签中的文本

（2）节点方法

通过具体的元素节点调用
getElementsByTagName(tagName) 获取当前节点的指定标签名的孩子节点
appendChild(oChildNode) 可以添加一个子节点，oChildNode是要添加的孩子节点
getAttribute("属性名")获取指定属性名的属性值
setAttribute("属性名","属性值")设置指定属性名的属性值
removeChild(node)删除指定的节点
replaceChild(newNode, oldNode)用其他的节点替换指定的节点

案例1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom查询</title>
<script type="text/javascript">
	window.onload = function(){
		//1.查找#city下所有li节点
		var btn01Ele = document.getElementById("btn01");
		btn01Ele.onclick = function(){
			//1 获取id为city的节点
			//2 通过city节点.getElementsByTagName按标签名查子节点
			var lis = document.getElementById("city").getElementsByTagName("li");
			console.log(lis.length)
		};
		//2.返回#city的所有子节点
		var btn02Ele = document.getElementById("btn02");
		btn02Ele.onclick = function(){
			//1 获取id为city的节点
			//2 通过city获取所有子节点
			console.log(document.getElementById("city").childNodes.length);
		};
		//3.返回#phone的第一个子节点
		var btn03Ele = document.getElementById("btn03");
		btn03Ele.onclick = function(){
			// 查询id为phone的节点
			console.log( document.getElementById("phone").firstChild.innerHTML );
		};
		//4.返回#bj的父节点
		var btn04Ele = document.getElementById("btn04");
		btn04Ele.onclick = function(){
			//1 查询id为bj的节点
			var bjObj = document.getElementById("bj");
			//2 bj节点获取父节点
			console.log( bjObj.parentNode.innerHTML );
		};
		//5.返回#android的前一个兄弟节点
		var btn05Ele = document.getElementById("btn05");
		btn05Ele.onclick = function(){
			// 获取id为android的节点
			// 通过android节点获取前面兄弟节点
			console.log( document.getElementById("android").previousSibling.innerHTML );
		};
		//6.读取#username的value属性值
		var btn06Ele = document.getElementById("btn06");
		btn06Ele.onclick = function(){
			console.log(document.getElementById("username").value);
		};
		//7.设置#username的value属性值
		var btn07Ele = document.getElementById("btn07");
		btn07Ele.onclick = function(){
			document.getElementById("username").value = "小明";
		};
		//8.返回#city的内容
		//与innerText不同的是，innerHTML还包括JavaScript代码，innerText是纯文本
		var btn08Ele = document.getElementById("btn08");
		btn08Ele.onclick = function(){
			console.log(document.getElementById("city").innerHTML);
		};
	};
</script>
</head>
<body>

<div>
	<p>
		你喜欢哪个城市?
	</p>
	
	<ul id="city"><li id="bj">北京</li><li>上海</li><li>东京</li><li>首尔</li></ul>
	<br/>
	<p>
		你手机的操作系统是?
	</p>

	<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
</div>

<div>
	name:
	<input type="text" name="name" id="username" value="abcde"/>
</div>
<br/>
<div>
	<div><button id="btn01">查找#city下所有li节点</button></div>
	<div><button id="btn02">返回#city的所有子节点</button></div>
	<div><button id="btn03">返回#phone的第一个子节点</button></div>
	<div><button id="btn04">返回#bj的父节点</button></div>
	<div><button id="btn05">返回#android的前一个兄弟节点</button></div>
	<div><button id="btn06">返回#username的value属性值</button></div>
	<div><button id="btn07">设置#username的value属性值</button></div>
	<div><button id="btn08">返回#city的内容</button></div>
</div>
</body>
</html>

在这里插入图片描述
案例2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<a href="#" id="b" style="">哈哈哈哈哈哈</a>

<script>
    document.getElementById("b").setAttribute("href","https://www.baidu.com");
    var c = document.getElementById("b").getAttribute("href");
    console.log(c);
    // document.getElementById("tt").setAttribute("href","https://www.baidu.com");
    // document.getElementById("tt").setAttribute("style","border: 10px dashed black");
</script>

</body>
</html>

在这里插入图片描述
案例3

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

<ul id="a">
    <li>苹果</li>
    <li>香蕉</li>
    <li>西瓜</li>
</ul>

<p id="b">点击按钮删除列表中的首个项目。</p>
<input type="button" value="删除第一个" onclick="f()">

<script>
    function f()
    {
        var list=document.getElementById("a");
        list.removeChild(list.childNodes[0]);
    }
</script>

</body>
</html>

在这里插入图片描述

4.firstElementChild和lastElementChild

属性名称	描述
firstElementChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastElementChild	返回节点的最后一个子节点

类似的还有

属性名称	描述
nextElementSibling	下一个节点
previousElementSibling	上一个节点

firstElementChild属性返回指定元素的第一个子元素。此属性与firstChild之间的区别在于，firstChild将第一个子节点作为元素节点，文本节点或注释节点（取决于哪个是第一个）返回，而firstElementChild将第一个子节点作为元素节点返回（忽略文本）和注释节点）。此属性是只读的。

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="a">
    <h1>A</h1>
    <ul>
        <li><a href="">aaaa</a></li>
        <li><a href="">bbbb</a></li>
        <li><a href="">cccc</a></li>
        <li><a href="">dddd</a></li>
        <li><a href="">eeee</a></li>
        <li><a href="">ffff</a></li>
    </ul>
</div>

<div id="msg"></div>

<script>
    //返回id="a"的节点的最后一个子节点的第一个子节点的第一个字节点
    var info = document.getElementById("a").lastElementChild.firstElementChild.firstElementChild;
    console.log(info);
    document.write(info.innerHTML);

</script>

</body>
</html>

在这里插入图片描述

5.操作节点样式

style属性

语法
HTML元素.style.样式属性＝"值"。

案例

document.getElementById("titles").style.color="#ff0000"; 
document.getElementById("titles").style.fontSize="25px ";

ZaynFox

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb学习总结（一）JavaScript详解

一、JavaScript基础知识（一）简介（1）概念：JavaScript是一种基于对象和事件驱动的 , 并具有安全性能的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。（2）特点：JavaScript 是脚本语言。JavaScript 是解析型语言，边执行边解释。JavaScript 可向HTML 页面中添加交互行为...
复制链接

扫一扫

专栏目录