JS

最新推荐文章于 2024-08-09 18:43:30 发布

JackWangCode

最新推荐文章于 2024-08-09 18:43:30 发布

阅读量198

点赞数

分类专栏： js 文章标签： js html

本文链接：https://blog.csdn.net/weixin_47441922/article/details/115384859

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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一样

特点：

交互性（它可以做的就是信息的动态交互）
安全性（不允许直接访问本地硬盘）
跨平台性（只要是可以解释 JS 的浏览器都可以执行，因为浏览器的内核有js解释器，和平台操作系统无关)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QdwdEcJJ-1617283195160)(https://i.loli.net/2021/03/14/vCQUaY7ou6gVP9s.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(){}这种形式赋予事件响应后的代码

动态注册基本步骤：

获取标签对象
标签对象.事件名=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 对象的理解：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8LBLNmlG-1617283195163)(https://i.loli.net/2021/03/27/tBisH6l4anmrcZS.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" style="color:red;"></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" style="color:red;">
</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标签

王瓜好牛呀

，并显示在页面上

<!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节点的常用属性和方法

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MEF7T5MM-1617283195166)(https://i.loli.net/2021/04/01/HAPbZ1hYDSLFqc3.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>

JackWangCode

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS

JS1.JavaScript简介Javascript 语言,简称js,诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行 JavaScript 代码。 JS 是 Netscape 网景公司的产品，说一个小故事，网景公司起初也做Netscape浏览器。最早取名为 LiveScript;为了吸引更多 java 程序员。更名为 JavaScript。 JS 是弱类型，Java 是强类型。强类型语言在定义变量的时候的数据类型已确定，而且不可变；弱类型则相反int num = 11;
复制链接

扫一扫

专栏目录