JS


JS

1.JavaScript简介

Javascript 语言,简称js,诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行 JavaScript 代码。 JS 是 Netscape 网景公司的产品，说一个小故事，网景公司起初也做Netscape浏览器。最早取名为 LiveScript;为了吸引更多 java 程序员。更名为 JavaScript。 JS 是弱类型，Java 是强类型。

强类型语言在定义变量的时候的数据类型已确定，而且不可变；弱类型则相反

int num = 11;   //java中num为整形，而且不可以随便变化
​
var num1;  //js定义变量
num1 = 12;  //变量为数值型
num1 = "changed";  //变量为字符串类型,js的变量类型直接改变了，不需要管java的自动类型提升，强转和数据类型兼容的事情，这在java里面是行不通的

注释： js的单行注释和多行注释，与java一样

特点：

  1. 交互性（它可以做的就是信息的动态交互）

  2. 安全性（不允许直接访问本地硬盘）

  3. 跨平台性（只要是可以解释 JS 的浏览器都可以执行，因为浏览器的内核有js解释器，和平台操作系统无关)

image-20210314121427065.png

2.js与html的两种结合方式

2.1内部模式

只需要在 head 标签中，或者在 body 标签中， 使用 script 标签

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

个人的对比思考：

对于js的alert()函数，功能特别像java的println()函数，不过前者是弹出框信息，后者是在控制台打印信息

2.2外部模式

使用 script 标签引入单独的 JavaScript 代码

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

2.3js理解

js和html结合方式 对比参考 css与html结合方式,她们之间就像双胞胎一样。

3.变量

分类；

  • 数值类型： number 类似于java的byete,short,int,long,float,double的统称

  • 字符串类型： string 类似于java的String和char的统称

  • 对象类型： object

  • 布尔类型： boolean

  • 函数类型： function 这个和java里面不一样

js里特殊的值

  • undefined 未定义，所有 js 变量未赋于初始值的时候，默认值都是 undefined. 这个也和java不同，java不允许局部变量没有赋值就使用

  • null 空值

  • NaN 全称是：Not a Number。非数字。非数值。这个也和java不同

格式：

//第一种方式
var 变量名;
变量名 = "变量值";
//第二种方式
var 变量名 = 变量值;

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var num;
        alert("num = " + num);//undefined
        num = 12.3;
        //typeof()是js提供的一个函数
        //它可以取变量的数据类型返回
        alert("num = " + num);//12
        alert(typeof(num));//number
        num = "ab";
        alert(typeof(num));//string类型
​
        var a = 12;
        var b = "abc";
        alert(a * b);//NaN是非数字，非数值
    </script>
</head>
​
<body>
​
</body>
</html>

4.关系（比较）运算

针对于 == 和 ===的区别，其他关系运算符和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>

5.逻辑运算

  • 且运算： &&

  • 或运算： ||

  • 取反运算： !

上面这三种运算逻辑和Java还不一样。详细情况见下面代码

在js语言中，所有的变量，都可以做为一个 boolean 类型的变量去使用。0 、null、 undefined、””(空串) ,fasle都认为是false。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /* 在 JavaScript 语言中，所有的变量，都可以做为一个 boolean 类型的变量去使用。
        0 、null、 undefined、””(空串),false 都认为是false    */
        // var a = 0;
        // if (a){
        //     alert("零为真");
        // }else {
        //     alert("零为假");
        // }
        // var b = null;
        // if (b){
        //     alert("null为真");
        // }else {
        //     alert("null为假");
        // }
        // var c = undefined;//var c;
        // if (c){
        //     alert("undefined为真");
        // }else {
        //     alert("undefined为假");
        // }
        // var d = "";
        // if (d){
        //     alert("空串为真");
        // }else {
        //     alert("空串为假");
        // }
        /*
        
       老师的 && 且运算。
    有两种情况：
    第一种：当表达式全为真的时候。返回最后一个表达式的值。
    第二种：当表达式中，有一个为假的时候。返回假的表达式的值,有两个为假的时候，返回第一个假的表达式的值
​
      老师的  || 或运算
    第一种情况：当表达式全为假时，返回最后一个表达式的值
    第二种情况：有一个表达式为真。返回那个为真的表达式的值。有两个表达式为真，返回第一个表达式为真的值。
    并且 && 与运算 和 ||或运算 有短路。
    短路就是说，当这个&&或||运算有结果了之后 。后面的表达式不再执行
​
    算了，老师的这个总结不好，弹幕里面有一个结论很简洁：
    弹幕：进行布尔值的且和或运算，当运算到某一个变量就得出最终结果之后，就返回那个变量。
    我的细化：比如：进行且运算时，那要算到至少一个false时或者是全是true的时候才是最终结果。
    我的细化：比如，进行或运算时，那要算到至少一个true时或者是全是false的时候才是最终结果。
    */
    var a = "abc";
    var b = "true";
    var d = false;
    var c = null;
​
    alert(a && b);//true
    alert(b && a);//"abc"
    alert(a && d);//false
    alert(c && a);//null
    alert(a && d && c);//false
    alert(a && c && d);//null
    alert(c && d);//null
    alert(d || c);//null
    alert(c || d);//false
    alert(a || c);//"abc"
    alert(b || c);//true
    </script>
</head>
<body>
​
</body>
</html>

6.数组（超级重点，必须掌握）

格式：

var 数组名 = [];//空数组
var 数组名 = [1,"abc",true];
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var arr = [];
        alert(arr.length);
        arr[0] = 12;
        alert(arr[0]);//12
        alert(arr.length);//0
​
        // javaScript 语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作。
        // 特别强调：自动扩容是在赋值的时候，如果只读的情况，长度还是没变
        //这个和Java集合中的自动扩容类似
        arr[2] = "abc";
        alert(arr.length);//3
        alert(arr[1]);//undefined
        // 特别强调：自动扩容是在赋值的时候，如果只读的情况，长度还是没变,例子如下：
        alert(arr[9]);//undefined
        alert(arr.length);//3
        //数组的遍历：注意一下，js的var变量别写成int,会出错
        for (var i = 0; i < arr.length; i++) {
            alert(arr[i]);//会把元素一个一个按照警告框显示出来，3个元素那就会有3个警告框，会显示3次，不过相对于控制台来说，显示的好慢
​
        }
    </script>
</head>
<body>
​
</body>
</html>

7.函数（重点）

7.1格式1：函数名写在function关键字后面

 function 函数名(形参列表){
    函数体
 }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //定义一个无参函数
        function fun(){
            alert("无参函数fun()被调用了");
        }
​
    //    函数调用之后才会被执行
        fun();   //无参函数fun()被调用了
​
        //定义一个有参函数，注意，js里面的形参列表不需要写数据类型，这点和java是不一样的
        function fun2(a,b){
            alert("有参函数fun2()被调用了,a =>" + a + ",b =>" + b);
        }
        //调用有参函数
        fun2(12,"abc");  //有参函数fun2()被调用了,a =>12,b =>abc
​
//在 JavaScript 语言中，如何定义带有返回值的函数？
//只需要在函数体内直接使用 return 语句返回值即可
        //定义带返回值的函数
        function sum(num1,num2){
            var result = num1 + num2;
            return result;
        }
        alert(sum(12,23));//35
    </script>
</head>
<body>
​
</body>
</html>

7.2格式2：函数名写在function关键字前面

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 fun1 = function(a,b){
            alert("有参函数fun1()被调用了,a =>" + a + ",b =>" + b);
        }
        fun1(1,2);//有参函数fun1()被调用了,a =>1,b =>2
​
        var fun2 = function (num1,num2){
            return num1 + num2;
        }
        alert(fun2(1,2));//3
    </script>
</head>
<body>
​
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 特别注意：在 Java 中函数允许重载。但是在 JS 中函数的重载会直接覆盖掉上一次的定义
        //原因：就是在function函数中不需要定义，但却可以直接获取所有参数的变量，我们在管他叫隐形参数
        //隐形参数特别像 java 基础的可变长参数一样。
       //public void fun( Object ... args );
//可变长参数其他是一个数组。(可变形参)
//那么 js 中的隐形参数也跟 java 的可变长参数一样。操作类似
        function fun(a,b){
            alert("有参函数fun(a,b)");
        }
        function fun(){
            alert("无参函数");
        }
        fun(12,"acc")//无参函数
​
    </script>
​
</head>
<body>
​
</body>
</html>

7.3arguments隐形参数（只在function函数内）

<script type="text/javascript">
    function fun(){
        alert(arguments);//[object Arguments]
        alert(arguments.length);//查看可变形参的个数
        //数组遍历
        for (var i = 0; i < arguments.length; i++) {
            alert(arguments[i]);
        }
        alert("无参函数");
    }
    fun(12,"acc",true);

    //需求：要求编写一个函数，用于计算所有参数相加的和并返回
    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;
    }
    alert(sum(1,2,3,"abc",4,5,6,7,8,9));//如果不加if语句的话，结果就是6abc456789，加了的话，结果是45

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

</head>
<body>

</body>
</html>

8.两种方式的自定义对象

8.1Object形式

<!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.name);
        alert(obj.age);
        obj.fun();

    </script>

</head>
<body>

</body>
</html>

8.2{}花括号形式

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

</body>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 对象的定义  属性，函数名之间都是用逗号分隔，写在花括号里面最后的属性或者函数名不需要加上逗号
        // var 变量名 = {
        //     属性名:值,
        //     属性名:值,
        //     函数名:function(){}
        // };
        // 对象的访问
        // 变量名.属性/函数名()
        var obj = {
            name:"JackWangCode",
            age:23,
            fun:function(){
                alert("姓名：" + this.name + "年龄" + this.age)
            }
        };
        alert(obj.name);
        alert(obj.age);
        obj.fun();
    </script>
</head>
</html>

9.js中的事件

定义：

事件是电脑输入设备与页面进行交互的响应。

9.1常见的事件

常见事件英文中文用途
onload 加载完成事件 页面加载完成之后，常用于做页面 js 代码初始化
onclick 单击事件 常用于按钮的点击响应操作
onblur 失去焦点事件 常用用于输入框失去焦点后验证其输入内容是否合法
onchange 内容发生改变事件 常用于下拉列表和输入框内容发生改变后操作
onsubmit 表单提交事件 常用于表单提交前，验证所有表单项是否合法

事件注册（事件绑定）

定义

告诉浏览器，当事件响应后要执行哪些代码

9.2分类

9.2.1静态注册事件

定义

通过html标签的事件属性直接赋予事件响应后的代码

以下代码是结合常用的事件来举例的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //onload事件的方法
        function onloadfun(){
            alert(“静态注册onload事件，所有代码”);
        }
​
​
    </script>
</head>
<!--静态注册 onload 事件
onload 事件是浏览器解析完页面之后就会自动触发的事件-->
<body onload="onloadfun();">
​
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript">
    function onclickfun(){
        alert("静态注册onclick事件");
    }
</script>
<body>
<button onclick="onclickfun();">按钮1</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //静态注册事件
        function onblurFun(){
            //console是js语言提供的控制台对象，专门用来向浏览器的控制器打印输出，用于测试使用
            //log()是打印的方法,跟java里面的输出方法类似
            //按以下fn + f12键就可以看到浏览器的控制台,操作：每点进输入框(焦点)，每当离开输入框一次就会打印一次(失去焦点)
            console.log("静态注册失去焦点事件");
        }
    </script>
</head>
<body>
    用户名:<input type="text" onblur="onblurFun();"><br />
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function onchangeFun(){
            alert("你个坏银，一天换一个女神");
        }
    </script>
</head>
<body onchange="onchangeFun();">
    请选择你心中的火影女神
    <select>
        <option>--女神--</option>
        <option>纲手</option>
        <option>雏田</option>
        <option>天天</option>
        <option>佐井</option>
        <option>小樱</option>
        <option>水影</option>
    </select>
</body>
</html>
<!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>
<!--onsubmitFun()方法里的return false可以阻止表单提交,特别注意，onsubmit里面的return不可以少-->
    <form action="http://www.baidu.com" method="get" onsubmit="return onsubmitFun();">
        <input type="submit" value="静态注册">
    </form>
</body>
</html>

9.2.2动态注册事件

定义

先通过js代码得到标签的dom对象，然后通过dom对象.事件名=function(){}这种形式赋予事件响应后的代码

动态注册基本步骤：

  1. 获取标签对象

  2. 标签对象.事件名=function(){}

以下代码是结合常用的事件来举例的

<!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>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function (){
            //动态注册onclick事件
            // 1.获取标签对象
            var btnObj = document.getElementById("btn01");
            /*
       * document 是 JavaScript 语言提供的一个对象（文档）<br/>
       * get 获取
       * Element 元素（就是标签）
       * By 通过。。 由。。经。。。
       * Id id 属性
       *
       * getElementById 通过 id 属性获取标签对象
       **/
            alert(btnObj);
        //    2.通过标签对象.事件名=function(){}
            btnObj.onclick = function(){
                alert("动态注册的onclick事件");
            }
​
        }
​
    </script>
</head>
<body>
    <button id="btn01">按钮</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //动态注册onblur事件
        window.onload = function (){
            //1.获取标签对象
            var passwordObj = document.getElementById("password");
            alert(passwordObj);
            //2.通过标签对象.事件名=function(){}
            passwordObj.onblur = function (){
                console.log("动态注册失去焦点事件");
            }
        }
​
    </script>
</head>
<body>
 密码:<input id="password" type="text"><br />
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function(){
        //    1.获取标签对象
            var selectObj = document.getElementById("select01");
            // alert(selectObj);
        //    2.对象.事件名 = function(){}
            selectObj.onchange = function (){
                alert("你个坏银，一天换一个男神");
            }
        }
    </script>
</head>
<body>
    请选择你心目中的火影男神
    <select id="select01">
        <option>---男神---</option>
        <option>鸣人</option>
        <option>佐助</option>
        <option>鹿丸</option>
        <option>宇智波斑</option>
        <option>宇智波鼬</option>
        <option>带土</option>
    </select>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function(){
            var formObj = document.getElementById("form01");
            // alert(formObj);
            formObj.onsubmit = function(){
                alert("动态注册表单提交事件--------发现不合法");
                return false;
            //    如果是合法的话，那就return true;就可以了
            }

        }
    </script>
</head>
<body>
<form action="http://www.baidu.com" method="get" id="form01">
    <input type="submit" value="动态注册">
</form>
</body>
</html>

10.DOM模型

10.1定义：

DOM 全称是 Document Object Model 文档对象模型

大白话，就是把文档中的标签，属性，文本，转换成为对象来管理

10.2Document 对象的理解：

image-20210327085654926.png

 

第一点：Document 它管理了所有的 HTML 文档内容

第二点：document 它是一种树结构的文档。有层级关系

第三点：它让我们把所有的标签都对象化

第四点：我们可以通过 document 访问所有的标签

怎么把html标签对象化

<body>
<div id="div01">div01</div>
</body>
​
相当于
​
class Dom{
private String id; // id 属性
private String tagName; //表示标签名
private Dom parentNode; //父亲
private List<Dom> children; // 孩子结点
private String innerHTML; // 起始标签和结束标签中间的内容
}

10.3document对象的方法(超级重点，必须掌握)

方法功能
document.getElementById(elementId) 通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id
document.getElementsByName(elementName) 通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性
document.getElementsByTagName(tagName) 通过标签名查找标签 dom 对象,tagName是标签名
document.creatElement(tagName) 通过标签名创建一个标签对象,tagName是标签名

10.3.1getElementById 方法

getElementById示例代码

需求：校验输入框内容是否合法第0版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*
        * 需求：当用户点击了校验按钮，要获取输入框的内容，然后验证其是否合法
        * 验证的规则是：必须由字母，数字，下划线组成，并且长度是5到12位
        *
        * */
    function onclickFun(){
        //1.当我们需要操作一个标签的时候，一定要先获取这个标签对象
        var usernameObj = document.getElementById("username");
        // alert(usernameObj);
        //[object HTMLInputElement]，这就是dom对象
        // alert(usernameObj.type);alert(usernameObj.id);alert(usernameObj.value);这些内容也都可以获取，
    //    并且随着输入框的内容变化而变化
        var usernametext = usernameObj.value;
    //    2.如何验证字符串符合某个规则，需要使用正则表达式技术
        var patt = /^\w{5,12}$/;  //patt表示pattern，字符串的模式
        /*
        * test()方法用于测试某个字符串是不是匹配我的规则
        * 匹配就返回true,否则就返回false
        * */
        if(pattern.test(usernametext)){
            alert("用户名合法!");
        }else {
            alert("用户名非法!");
        }
​
    }
    </script>
</head>
<body>
    用户名: <input type="text" id="username" value="JackWangCode"/><br />
<button onclick="onclickFun();">校验</button>
</body>
</html>
10.3.1.1正则表达式，详见w3cschool菜鸟教程
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //注意：以下的“包含”就是子集，存在就行了。只要子集中存在这样的字符串就可以了
        //表示要求字符串中是否包含字母e
        // var patt = new RegExp("e");一般不这样new，一般把构造器里面的内容放进两条斜杆//之间
        // var patt = /e/;//这样也是正则表达式对象,功能也是一样的
​
​
        //表示要求字符串中是否包含字母a或b或c
        // var patt = /[abc]/;
        //表示要求字符串是否包含任意小写字母a-z
        // var patt = /[a-z]/;
        // 表示要求字符串是否包含任意大写字母A-Z
        // var patt = /[A-Z]/;
        //表示要求字符串是否包含任意数字0-9
        // var patt = /[0-9]/;
        // \w 元字符用于查找单词字符:要求字符串是否包含大小写字母，数字，下划线这些单词字符
        // var patt = /\w/;
        //表示要求字符串是否包含至少一个a
        // var patt = /a+/;
        //表示要求字符串中是否 *包含* 零个 或 多个a。也就是说，从字符串第一个就开始检测，如果不包含a，那么就是true
        // var patt = /a*/;
        //表示要求字符串中是否 包含 零个或一个a
        // var patt = /a?/;
        //表示要求字符串是否包含连续三个a
        // var patt = /a{3}/;
        //表示要求字符串是否包含至少3个连续的a或者是5个连续的a
        // var patt = /a{3,5}/;
        //表示要求字符串至少包含3个a
        // var patt = /a{3,}/;
        //表示要求字符串必须以a结尾
        // var patt = /a$/;
        //表示要求字符串必须以a开头
        // var patt = /^a/;
​
        //要求字符串从头到尾都必须完全匹配3-5个，不能多，也不能少，否则都是false
        // var patt = /^a{3,5}$/;
​
        //要求字符串是5-12位的数字，字母或者下划线
        var patt = /^\w{5,12}$/;
​
        alert(patt);
        var str = "JackWangCode";
        alert(patt.test(str));
​
​
    </script>
</head>
<body>
​
</body>
</html>

getElementById 方法示例代码 改进版校验输入框内容是否合法第一版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*
        * 需求：当用户点击了校验按钮，要获取输入框的内容，然后验证其是否合法，不是以警告框的形式，而是一个在
        * 校验按钮旁边就能判断用户名是否合法
        * 验证的规则是：必须由字母，数字，下划线组成，并且长度是5到12位
        *
        *
        * */
        function onclickFun(){
            var usernameObj = document.getElementById("username");
            var usernametext = usernameObj.value;
            //1.当我们需要操作一个标签的时候，一定要先获取这个标签对象
​
            // [object HTMLInputElement]，这就是dom对象
            // alert(usernameObj.type);alert(usernameObj.id);alert(usernameObj.value);这些内容也都可以获取，
            //    并且随着输入框的内容变化而变化
            //    2.如何验证字符串符合某个规则，需要使用正则表达式技术
            var patt = /^\w{5,12}$/;  //patt表示pattern，字符串的模式
            /*
            * test()方法用于测试某个字符串是不是匹配我的规则
            * 匹配就返回true,否则就返回false
            * */
​
            // 当我们需要操作一个标签的时候，一定要先获取这个标签对象
            var usernameSpanObj = document.getElementById("usernameSpan");
            // alert(usernameSpanObj);
            //alert(usernameSpanObj);的结果会得到[object HTMLSpanElement]
            //innnerHTML表示起始标签和结束标签中的内容
            //innerHTML这个属性可读可写
            // alert(usernameSpanObj.innerHTML);
            if(patt.test(usernametext)){
                // alert("用户名合法");
                usernameSpanObj.innerHTML = "用户名合法";
            }else {
                // alert("用户名非法");
                usernameSpanObj.innerHTML = "用户名非法";
            }
​
        }
    </script>
</head>
<body>
    用户名: <input type="text" id="username" value="JackWangCode"/>
    <span id="usernameSpan" ></span>
    <button onclick="onclickFun();">校验</button>
</body>
</html>

getElementById 方法示例代码 改进版校验输入框内容是否合法第二版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*
        * 需求：当用户点击了校验按钮，要获取输入框的内容，然后验证其是否合法，是以对和错的图片来校验是否合法。
        * 对的话，就合法，错的话就非法
        * 验证的规则是：必须由字母，数字，下划线组成，并且长度是5到12位
        *
        *
        * */
        function onclickFun(){
            var usernameObj = document.getElementById("username");
            var usernametext = usernameObj.value;
            //1.当我们需要操作一个标签的时候，一定要先获取这个标签对象
​
            // [object HTMLInputElement]，这就是dom对象
            // alert(usernameObj.type);alert(usernameObj.id);alert(usernameObj.value);这些内容也都可以获取，
            //    并且随着输入框的内容变化而变化
            //    2.如何验证字符串符合某个规则，需要使用正则表达式技术
            var patt = /^\w{5,12}$/;  //patt表示pattern，字符串的模式
            /*
            * test()方法用于测试某个字符串是不是匹配我的规则
            * 匹配就返回true,否则就返回false
            * */
​
            // 当我们需要操作一个标签的时候，一定要先获取这个标签对象
            var usernameSpanObj = document.getElementById("usernameSpan");
            // alert(usernameSpanObj);
            //alert(usernameSpanObj);的结果会得到[object HTMLSpanElement]
            //innnerHTML表示起始标签和结束标签中的内容
            //innerHTML这个属性可读可写
            // alert(usernameSpanObj.innerHTML);
            if(patt.test(usernametext)){
                //注意：这里面的反斜杠是转义的意思
                usernameSpanObj.innerHTML = "<img src=\"right.png\" width=\"18\" height=\"18\">";
            }else {
                usernameSpanObj.innerHTML = "<img src=\"wrong.png\" width=\"18\" height=\"18\">";
            }
​
        }
    </script>
</head>
<body>
用户名: <input type="text" id="username" value="JackWangCode"/>
<span id="usernameSpan" >
</span>
<button onclick="onclickFun();">校验</button>
</body>
</html>

10.3.2getElementsByName方法

需求：让复选框全选，全不选和反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //全选：让所有复选框都选中
       function checkAll(){
           // document.getElementsByName()是根据指定的name属性查询返回多个标签对象的集合NodeList.
           //因为你看这个Elements都是复数形式，不像document.getElementById()一样是单数
           //这个集合的操作跟数组一样，有长度属性// alert(hobbies.length);
           // 还有数组元素// alert(hobbies[0]);，遍历等
           //集合中的每个元素都是dom对象
           var hobbies = document.getElementsByName("hobby");
            //这个集合的元素顺序是他们在html页面中从上到下的顺序//alert(hobbies[1].value);则会出现java的输出结果
           //checked表示复选框的选中状态，如果选中，那么则是元素.checked的值就是true;不选中则是false
           //checked这个属性可读可写
           for (var i = 0; i < hobbies.length; i++) {
               hobbies[i].checked = true;
           }
       }
       //全不选：让所有复选框都不选中,这个就把全选的函数的函数体改成false就行了
        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++) {
                // if (hobbies[i].checked == false){
                //     hobbies[i].checked = true;
                // }else{
                //     hobbies[i].checked = false;
                // }
                hobbies[i].checked = !hobbies[i].checked;//这个代码比if-else更加简洁；选这条代码更合适
​
            }
        }
    </script>
</head>
<body>
    兴趣爱好:
    <input type="checkbox" name="hobby" value="C++" checked="checked">C++
    <input type="checkbox" name="hobby" value="java">Java
    <input type="checkbox" name="hobby" value="C" >C
    <br />
    <button onclick="checkAll();">全选</button>
    <button onclick="checkNo();">全不选</button>
    <button onclick="checkReverse();">反选</button>
​
​
</body>
</html>

10.3.3getElementsByTagName方法

需求：让所有复选框全选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //全选：让所有复选框都选中
        function checkAll(){
            //document.getElementsByTagName("input");是按照指定标签名来进行查询并返回集合
            //这个集合的操作跟数组一样，集合中都是dom对象
            //集合中元素顺序是他们在html页面中从上到下的顺序
            var inputs = document.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].checked = true;
​
            }
        }
    </script>
</head>
<body>
兴趣爱好:
<input type="checkbox"  value="C++" checked="checked">C++
<input type="checkbox" value="java">Java
<input type="checkbox" value="C" >C
<br />
<button onclick="checkAll();">全选</button>
​
​
</body>
</html>

10.3.4creatElement方法

需求：现在需要我们使用Js代码来创建html标签<div>王瓜好牛呀</div>，并显示在页面上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function (){
            //需求：现在需要我们使用Js代码来创建html标签，并显示在页面上
            //标签内容是：<div>王瓜好牛呀</div>
            var divObj = document.createElement("div");//在内存中<div></div>
            divObj.innerHTML = "王瓜好牛呀";//<div>王瓜好牛呀</div>,还是只在内存中
            //添加子元素
            //body也是一个dom对象，divObj是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 (){
            //需求：现在需要我们使用Js代码来创建html标签，并显示在页面上
            //标签内容是：<div>王瓜好牛呀</div>
            var divObj = document.createElement("div");//在内存中<div></div>
            var textNodeObj = document.createTextNode("王瓜好牛呀");//有一个文本节点对象：王瓜好牛呀
            divObj.appendChild(textNodeObj);//<div>王瓜好牛呀</div>
            //添加子元素
            document.body.appendChild(divObj);
        }
    </script>
</head>
<body>
</body>
</html>

10.3.5总结document对象的方法

document 对象的三个查询方法，如果有 id 属性，优先使用 getElementById 方法来进行查询。

如果没有 id 属性，则优先使用 getElementsByName 方法来进行查询 。

如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName .

以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // alert(document.getElementById("btn01"));//null
        window.onload = function (){
            alert(document.getElementById("btn01"));//[object HTMLButtonElement]
​
        }
        function checkAll(){
            //全选：让所有复选框都选中
​
            // document.getElementById()
            // document.getElementsByName()
            // document.getElementsByTagName()
            //这三个方法都要放在页面加载完成之后执行，才能查询到标签对象
            alert(document.getElementById("btn01"));//[object HTMLButtonElement]
            //当点击全选按钮时，浏览器已经把整个页面读完了，也就是页面加载完了,
            // 所以就不用写在window.onload = 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="C++" checked="checked">C++
<input type="checkbox" value="java">Java
<input type="checkbox" value="C" >C
<br />
<button id="btn01" onclick="checkAll();">全选</button>
​
​
</body>
</html>

10.4节点的常用属性和方法

节点是标签，注释，文本等。但是，针对开发而言，简单来说，节点就是标签对象。

image-20210401202148363.png

代码示例

@CHARSET "UTF-8";
​
body {
   width: 800px;
   margin-left: auto;
   margin-right: auto;
}
​
button {
   width: 300px;
   margin-bottom: 10px;
}
​
#btnList {
   float:left;
}
​
#total{
   width: 450px;
   float:left;
}
​
ul{
   list-style-type: none;
   margin: 0px;
   padding: 0px;
}
​
.inner li{
   border-style: solid;
   border-width: 1px;
   padding: 5px;
   margin: 5px;
   background-color: #99ff99;
   float:left;
}
​
.inner{
   width:400px;
   border-style: solid;
   border-width: 1px;
   margin-bottom: 10px;
   padding: 10px;
   float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
   window.onload = function(){
      //1.查找#bj节点
      document.getElementById("btn01").onclick = function(){
         var bjObj = document.getElementById("bj");
         alert(bjObj.innerHTML);
      }
      //2.查找所有li节点
      var btn02Ele = document.getElementById("btn02");
      btn02Ele.onclick = function(){
         var lis = document.getElementsByTagName("li");
         alert(lis.length);
      };
      //3.查找name=gender的所有节点
      var btn03Ele = document.getElementById("btn03");
      btn03Ele.onclick = function(){
         var genders = document.getElementsByName("gender");
         alert(genders.length);
         
      };
      //4.查找#city下所有li节点
      var btn04Ele = document.getElementById("btn04");
      btn04Ele.onclick = function(){
         //1.获取id为city的节点
         //2.通过city节点.getElementsByTagName()按表签名来查子节点
         var lis = document.getElementById("city").getElementsByTagName("li");
         alert(lis.length);
      };
      //5.返回#city的所有子节点
      var btn05Ele = document.getElementById("btn05");
      btn05Ele.onclick = function(){
         //1.获取id为city的节点
      // 2.通过city节点.childNodes来查询子节点
         //注意：通过childNodes属性来查询子节点，会把换行和空格也当成是节点信息。
         //注意：节点与节点之间的空白字符也算一个节点，5个空白字符+4个li标签
         alert(document.getElementById("city").childNodes.length);
         
      };
      //6.返回#phone的第一个子节点
      var btn06Ele = document.getElementById("btn06");
      btn06Ele.onclick = function(){
      // 1.获取id为phone的节点
      // 2.通过phone节点.firstChild来获取第一个子节点
         alert(document.getElementById("phone").firstChild.innerHTML);
      };
      //7.返回#bj的父节点
      var btn07Ele = document.getElementById("btn07");
      btn07Ele.onclick = function(){
      // 1.获取id为bj的节点
      // 2.通过bj节点.parentNode来获取它的父节点
         alert(document.getElementById("bj").parentNode.innerHTML);
         
      };
      //8.返回#android的前一个兄弟节点
      var btn08Ele = document.getElementById("btn08");
      btn08Ele.onclick = function(){
         // 1.获取id为android的节点
         // 2.通过android的节点.previousSibling来获取上一个兄弟节点
         alert(document.getElementById("android").previousSibling.innerHTML);
      };
      //9.读取#username的value属性值
      var btn09Ele = document.getElementById("btn09");
      btn09Ele.onclick = function(){
         alert(document.getElementById("username").value);
​
      };
      //10.设置#username的value属性值
      var btn10Ele = document.getElementById("btn10");
      btn10Ele.onclick = function(){
          document.getElementById("username").value = "王瓜牛呀";
​
      };
      //11.返回#city的文本值
      var btn11Ele = document.getElementById("btn11");
      btn11Ele.onclick = function(){
         alert(document.getElementById("city").innerText);
      };
   // 12.返回#city的内容   (注意；内容比文本值显示的东西会更加丰富，除了标签之间的文本值，还会包含标签本身)
      var btn12Ele = document.getElementById("btn12");
      btn12Ele.onclick = function(){
         alert(document.getElementById("city").innerHTML);
      };
   };
</script>
</head>
<body>
<div id="total">
   <div class="inner">
      <p>
         你喜欢哪个城市?
      </p>
​
      <ul id="city">
         <li id="bj">北京</li>
         <li>上海</li>
         <li>东京</li>
         <li>首尔</li>
      </ul>
​
      <br>
      <br>
​
      <p>
         你喜欢哪款单机游戏?
      </p>
​
      <ul id="game">
         <li id="rl">红警</li>
         <li>实况</li>
         <li>极品飞车</li>
         <li>魔兽</li>
      </ul>
​
      <br />
      <br />
​
      <p>
         你手机的操作系统是?
      </p>
​
      <ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
   </div>
​
   <div class="inner">
      gender:
      <input type="radio" name="gender" value="male"/>
      Male
      <input type="radio" name="gender" value="female"/>
      Female
      <br>
      <br>
      name:
      <input type="text" name="name" id="username" value="abcde"/>
   </div>
</div>
<div id="btnList">
   <div><button id="btn01">查找#bj节点</button></div>
   <div><button id="btn02">查找所有li节点</button></div>
   <div><button id="btn03">查找name=gender的所有节点</button></div>
   <div><button id="btn04">查找#city下所有li节点</button></div>
   <div><button id="btn05">返回#city的所有子节点</button></div>
   <div><button id="btn06">返回#phone的第一个子节点</button></div>
   <div><button id="btn07">返回#bj的父节点</button></div>
   <div><button id="btn08">返回#android的前一个兄弟节点</button></div>
   <div><button id="btn09">返回#username的value属性值</button></div>
   <div><button id="btn10">设置#username的value属性值</button></div>
   <div><button id="btn11">返回#city的文本值</button></div>
   <div><button id="btn12">返回#city的内容</button></div>
</div>
</body>
</html>
posted @ 2021-04-01 21:22  JackWangCode  阅读(64)  评论(0)    收藏  举报