JavaScript两小时快速入门笔记

最新推荐文章于 2024-05-21 02:06:32 发布
最新推荐文章于 2024-05-21 02:06:32 发布
阅读量2k 收藏 50
点赞数 8
分类专栏： # JavaScript 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44653420/article/details/123098722
版权

JavaScript两小时快速入门笔记

一、概述

JavaScript语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。

JS是Netscape网景公司的产品，最早取名为LiveScript;为了吸引更多的java程序员。更名为JavaScript.

JS是弱类型，Java是强类型

特点：

  1. 交互性（他可以做的就是信息的动态交互）
  2. 安全性（不允许直接访问本地硬盘）
  3. 跨平台性（只要是可以解释JS的浏览器都可以执行，和平台无关）

二、JavaScript和html代码的结合方式

2.1 第一种方式

 只需要在head标签中，或者在body标签中，使用script标签来书写javascript代码

测试代码：

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

        //alert 是JavaScript语言提供的一个警告框函数。
        //它可以接受任意类型的参数，这个参数就是警告框的提示信息
        alert("Hello javaScript!");
    </script>
    
</head>
<body>

</body>
</html>

在这里插入图片描述

2.2 第二种方式

 使用script标签引入单独的JavaScript

测试代码：

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

        //alert 是JavaScript语言提供的一个警告框函数。
        //它可以接受任意类型的参数，这个参数就是警告框的提示信息
        alert("Hello javaScript!");
    </script>-->

    <!--
        现在需要使用script引入外部的js文件来执行
         src属性专门用来引入js文件路径（可以是相对路径，也可以是绝对路径）

         script标签可以用来定义js代码，也可以用来引入js文件
         但是，两个功能二选一使用，不可以同时使用两个功能
    -->
    
    <script type = "text/javascript" src="js1.js"></script>

</head>
<body>

</body>
</html>

三、变量

JavaScript的变量类型：

变量类型名称
数值类型number
字符串类型string
对象类型object
布尔类型boolean
函数类型function

JavaScript里特殊的值：

类型含义
undefined未定义，所有js变量未赋予初始值的时候，默认值都是undefined
null空值
NAN全称是： Not a Number。非数字。非数值

JS中的定义变量格式：

var 变量名;
var 变量名 = 值;

测试代码：

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

        //alert 是JavaScript语言提供的一个警告框函数。
        //它可以接受任意类型的参数，这个参数就是警告框的提示信息
        alert("Hello javaScript!");
    </script>-->

    <!--
        现在需要使用script引入外部的js文件来执行
         src属性专门用来引入js文件路径（可以是相对路径，也可以是绝对路径）

         script标签可以用来定义js代码，也可以用来引入js文件
         但是，两个功能二选一使用，不可以同时使用两个功能
    -->


    <script type = "text/javascript">
        // var i;
        // i = 12;
        // alert(i);
        // alert(typeof(i)) // 取出变量的数据类型  number

        var a = 12;
        var b = "abc"
        alert(a * b)   // NAN是非数字，非数值

    </script>

</head>
<body>

</body>
</html>

javascript的关系运算符和java的关系运算符有略微的区别：（其他的都一样）

在这里插入图片描述

测试代码：

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

        //alert 是JavaScript语言提供的一个警告框函数。
        //它可以接受任意类型的参数，这个参数就是警告框的提示信息
        alert("Hello javaScript!");
    </script>-->

    <!--
        现在需要使用script引入外部的js文件来执行
         src属性专门用来引入js文件路径（可以是相对路径，也可以是绝对路径）

         script标签可以用来定义js代码，也可以用来引入js文件
         但是，两个功能二选一使用，不可以同时使用两个功能
    -->


    <script type = "text/javascript">
        // var i;
        // i = 12;
        // alert(i);
        // alert(typeof(i)) // 取出变量的数据类型  number

        // var a = 12;
        // var b = "abc"
        // alert(a * b)   // NAN是非数字，非数值


        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

javascript的逻辑运算与java的逻辑运算符还有些不一样：

&& 且运算。
第一种：当表达式全为真的时候，返回最后一个表达式的值
第二种：当表达式有一个为假的时候。返回第一个为假的表达式

|| 或运算
第一种：当表达式全为假的时候，返回最后一个表达式的值
第二种：只要表达式有一个为真，返回第一个为真的表达式

并且&&运算与||运算有短路：有一个有了结果 后面的逻辑运算都不执行

测试代码：

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

        //alert 是JavaScript语言提供的一个警告框函数。
        //它可以接受任意类型的参数，这个参数就是警告框的提示信息
        alert("Hello javaScript!");
    </script>-->

    <!--
        现在需要使用script引入外部的js文件来执行
         src属性专门用来引入js文件路径（可以是相对路径，也可以是绝对路径）

         script标签可以用来定义js代码，也可以用来引入js文件
         但是，两个功能二选一使用，不可以同时使用两个功能
    -->


    <script type = "text/javascript">
        // var i;
        // i = 12;
        // alert(i);
        // alert(typeof(i)) // 取出变量的数据类型  number

        // var a = 12;
        // var b = "abc"
        // alert(a * b)   // NAN是非数字，非数值

        /*var a = "12"
        var b = 12

        alert(a == b)  //仅仅是字面上的比较  true
        alert(a === b)  // 字面上的比较 还有 数值类型的比较 false*/
        
        var a = "abc"
        var b = true;
        var d = false;
        var c = null;

        // alert(b && a)
        // alert(c && a)

        alert(a || d)
        alert(d || c)
        
    </script>

</head>
<body>

</body>
</html>

五、数组

数组定义方式：

JS中数组的定义：
格式：var 数组名 = []; // 空数组
var 数组名 = [1,‘abc’,true]; // 定义数组同时赋值元素

测试代码：

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

        //alert 是JavaScript语言提供的一个警告框函数。
        //它可以接受任意类型的参数，这个参数就是警告框的提示信息
        alert("Hello javaScript!");
    </script>-->

    <!--
        现在需要使用script引入外部的js文件来执行
         src属性专门用来引入js文件路径（可以是相对路径，也可以是绝对路径）

         script标签可以用来定义js代码，也可以用来引入js文件
         但是，两个功能二选一使用，不可以同时使用两个功能
    -->


    <script type = "text/javascript">
        var arr = [];//定义一个空数组

        arr[0] = 12;

        arr[2] = "abc"

        // javascript语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动给数组进行扩容
        
        alert(arr.length);  // 数组长度3

    </script>

</head>
<body>

</body>
</html>

测试代码：

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

        //alert 是JavaScript语言提供的一个警告框函数。
        //它可以接受任意类型的参数，这个参数就是警告框的提示信息
        alert("Hello javaScript!");
    </script>-->

    <!--
        现在需要使用script引入外部的js文件来执行
         src属性专门用来引入js文件路径（可以是相对路径，也可以是绝对路径）

         script标签可以用来定义js代码，也可以用来引入js文件
         但是，两个功能二选一使用，不可以同时使用两个功能
    -->


    <script type = "text/javascript">
        var arr = [];//定义一个空数组

        arr[0] = 12;

        arr[2] = "abc"

        // javascript语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动给数组进行扩容

        alert(arr.length);  // 数组长度3

        for (var i = 0; i < arr.length; i++) {
            alert(arr[i])
        }

    </script>

</head>
<body>

</body>
</html>

六、函数

1.使用function关键字定义函数

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

测试代码：

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

        //alert 是JavaScript语言提供的一个警告框函数。
        //它可以接受任意类型的参数，这个参数就是警告框的提示信息
        alert("Hello javaScript!");
    </script>-->

    <!--
        现在需要使用script引入外部的js文件来执行
         src属性专门用来引入js文件路径（可以是相对路径，也可以是绝对路径）

         script标签可以用来定义js代码，也可以用来引入js文件
         但是，两个功能二选一使用，不可以同时使用两个功能
    -->


    <script type = "text/javascript">
         function fun(){
             alert("无参函数被调用");
         }

         fun();

         function fun2(a,b){
             alert("a=" + a + ",b=" + b);
         }

         fun2(1,2)

         //定义带有返回值的函数
         function fun3(a,b){
             var result = a + b;
             return result;
         }
         alert(fun3(1,2))

    </script>

</head>
<body>

</body>
</html>

2.函数定义第二种方式

就是把函数名调到前面

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

测试代码：

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

    <script  type = "text/javascript">


        var fun = function (a,b){
            alert(a + b)
        }

        fun(1,2)
        
    </script>
    
</head>
<body>

</body>
</html>

说明：JS不允许函数重载,会直接覆盖上一次的函数定义

3.函数的arguments隐形参数（只在function函数内部）

就是在function函数中不需要定义，但是却可以直接用来获取所有参数的变量。我们管它叫做隐形参数。

隐形参数特别想java基础的可变长参数一样。可变长参数其实是一个数组。那么js中的隐形参数也跟java的可变长参数一样。操作类似于数组。

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript测试</title>
    <script  type = "text/javascript">
        var fun = function (){
            alert(arguments[0])
            alert(arguments[1])
            alert(arguments[2])
            alert(arguments.length)  // 查看数组的长度
        }
        // alert(arguments.length())
        fun(1,2,3)

    </script>

</head>
<body>
</body>
</html>

测试代码：

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

    <script  type = "text/javascript">


        // var fun = function (){
        //     alert(arguments[0])
        //     alert(arguments[1])
        //     alert(arguments[2])
        //
        //     alert(arguments.length)  // 查看数组的长度
        //
        //
        //     for (var i = 0; i < arguments.length; i++) {
        //         alert(arguments[i])
        //     }
        //
        //
        // }
        // // alert(arguments.length())
        // fun(1,2,3)

        function sum(num1,num2){

            var result = 0;
            for (var i = 0; i < arguments.length; i++) {
                result += arguments[i];
            }

            return result;
        }
        alert(sum(1,2,3,4,54,56));
    </script>

</head>
<body>

</body>
</html>

七、object自定义对象

7.1 方法一

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

对象的访问：
  变量名.属性/函数名();

测试代码：

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

        var obj = new Object();
        obj.name = "华仔";
        obj.age = 18;

        obj.fun = function (){
            alert("姓名： " + this.name + ",年龄" + this.age)
        }

        obj.fun();
    </script>

</head>
<body>

</body>
</html>

7.2 方法二

{}花括号形式的自定义对象

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

对象的访问：
变量名.属性/函数名()

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript测试</title>
    <script type = "text/javascript">
        var obj = {
            name: "张三",
            age:19,
            fun:function(){

                alert("姓名：" + this.name + ", 年龄：" + this.age);
            }
        };
        alert(typeof(obj));
        alert(obj.age);
        obj.fun();
    </script>
</head>
<body>

</body>
</html>

八、js中的事件

什么是事件？事件是电脑输入设备与页面进行交互的响应。我们称之为事件。

常用的事件：

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

事件的注册又分为静态注册和动态注册两种：

静态注册事件：通过html标签的事件属性直接赋予事件响应后的代码，这种方式我们叫做静态注册。

动态注册事件：是指先通过js代码得到标签的dom对象，然后再通过dom对象.时间名 = function(){} 这种形式赋予事件响应后的代码，叫做动态注册。

  动态注册基本步骤：
* 获取标签对象
* 标签对象.事件名 = function(){}

九、onload事件

测试代码：静态事件

<!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>
    <script type = "text/javascript">
        // onload事件的方法
        // function onloadfun()
        // {
        //     alert('静态注册onload事件')
        // }

        window.onload = function (){
            alert("动态注册的onload事件");
        }

    </script>
</head>

<!--静态注册onload事件 onload事件是浏览器解析完页面之后就会自动触发的事件-->

<!--<body onload = "onloadfun();">-->

<body>

</body>
</html>

十、onclick事件

测试代码：静态注册事件


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

    </script>


</head>
<body>
    <button onclick= "onclickFun();">按钮1</button>
    <button>按钮2</button>

</body>
</html>

测试代码：动态注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type = "text/javascript">
        window.onload = function(){
            // 1获取标签对象
            /*
            * docunment 是javascript语言提供的一个对象  表示整个页面
            *
            * */
            var btnObj = document.getElementById("btn01");  // 根据id获取标签对象

            // 2 通过标签对象.事件名 = function(){}
            btnObj.onclick = function(){
                alert("动态注册的onclick事件");
            }
        }
    </script>


</head>
<body>
    <button onclick= "onclickFun();">按钮1</button>
    <button id = “btn01">按钮2</button>
</body>
</html>

十一、onblur事件

测试代码：静态注册

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

    <script type = "text/javascript">
        // 静态注册失去焦点事件
        function onblurFun(){
            // console 是控制台对象 是由javascript语言提供，专门用来向浏览器的console进行打印输出，用于测试使用
            //log 是打印的方法
            console.log("静态注册失去焦点事件");  // 文本框失去焦点时候 F12 看到console打印这条语句
        }
        
    </script>

</head>
<body>
    用户名:<input type = "text" onblur = "onblurFun();"><br/>
    密码:<input type = "text">

</body>
</html>

测试代码：动态注册

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

    <script type = "text/javascript">
        // 静态注册失去焦点事件
        function onblurFun(){
            // console 是控制台对象 是由javascript语言提供，专门用来向浏览器的console进行打印输出，用于测试使用
            //log 是打印的方法
            console.log("静态注册失去焦点事件");  // 文本框失去焦点时候 F12 看到console打印这条语句
        }

        // 动态注册onblur事件
        window.onload = function (){
            //获取标签对象
            var passwordobj = document.getElementById("password");  // 根据id获取标签对象

            passwordobj.onblur = function (){

                console.log("动态注册失去焦点事件");
            }
        }

    </script>
</head>
<body>
    用户名:<input type = "text" onblur = "onblurFun();"><br/>
    密码:<input id = "password" type = "text"><br/>  

</body>
</html>

效果图：

在这里插入图片描述

十二：onchange事件

测试代码：静态注册

<!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>
        <option>马斯克</option>
    </select>
</body>
</html>

测试代码：动态注册

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

    <script type = "text/javascript">
        function onchangeFun(){
            alert("不 你不喜欢");
        }

        window.onload = function (){

            var nvshen = document.getElementById("01");

            nvshen.onchange = function (){
                alert("你的女神根本不是她们！")
            }
        }



    </script>
</head>
<body>
    请选择你心目中的男神
    <!--静态注册onchange事件-->
    <select onchange="onchangeFun();">

        <option>--男神--</option>
        <option>张一鸣</option>
        <option>马云</option>
        <option>乔布斯</option>
        <option>马斯克</option>
    </select>

    请选择你心目中的女神
    <select id = "01">
        <option>--女神--</option>
        <option>李飞飞</option>
        <option>蘇姿丰</option>
        <option>凤姐</option>
    </select>



</body>
</html>

十三、onsubmit事件

测试代码：静态注册

<!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>
    <form action = "http://localhost:8080" method = "get" onsubmit = "return onsubmitFun();">
        <input type = "submit" value = "静态注册"/>
    </form>

</body>
</html>

测试代码：动态注册

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

    <script type = "text/javascript">
        // 静态注册表单提交事件
        // 提交表单  需要验证所有的表单项  如果有一个不合法 就阻止表单提交
        function onsubmitFun(){
            alert("静态注册表单提交事件--输入不合法");
            return false;
        }

        window.onload = function (){
            // 获取标签对象
            var form1 = document.getElementById("form01")
            form1.onsubmit = function (){
                alert("动态注册表单提交事件--输入不合法");
                return false;
            }
        }

    </script>
    
</head>
<body>
    <form action = "http://localhost:8080" method = "get" onsubmit = "return onsubmitFun();">
        <input type = "submit" value = "静态注册"/>
    </form>

    <form action = "http://localhost:8080" id = "form01">
        <input type = "submit" value = "动态注册"/>
    </form>

</body>
</html>

十四、document对象概念的介绍

1.DOM模型

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

大白话，就是把文档中的标签，属性，文本，转换成为对象来管理
那么，他们是如何是先把标签，属性，文本转换成对象来管理。这就是我们马上要学习的重点

2.Document对象

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

在这里插入图片描述

测试代码：

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

    <script type = "text/javascript">
        // 需求：当用户点击校验按钮，要获取输出框中的内容。然后验证是否合法
        // 验证的规则：必须有字母，数字，下划线组成。长度是5 ~ 12 位
        function onclickFun(){
            // 当我们需要操作一个标签的时候  一定要先获取这个标签对象
            var username = document.getElementById("username");
            // alert(username.value);  // 获取输入框的值

            var username_text = username.value();

            // 验证字符串是否符合某一个规则  需要使用正则表达式
            var patt = /^\w{5,12}$/;
            /*
            * test() 方法用于测试某个字符串  是不是匹配规则
            * */

            if(patt.test(username_text)){
                alert("用户名合法");
            }
            else{
                alert("用户名不合法！");
            }

        }
    </script>

</head>
<body>
    用户名:<input type = "text" id = "username"/>
    <button onclick = "onclickFun();">校验</button>

</body>
</html>

3. 正则表达式(具体用法 查看文档)

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

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

语法：

在这里插入图片描述

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式</title>

    <script type = "text/javascript">
        // 表示要求字符串中，是否包含字母e
        // var patt = new RegExp("e");


        // var patt = /e/;  // 表示字符串包含字母e
        // var patt = /[abc]/;  // 表示要求字符串中，是否包含字母a或b或c

        var patt = /[a-z]/; // 表示要求字符串是否包含小写字母
        var str = "abcde";
        alert(patt.test(str));
    </script>
</head>

<body>

</body>
</html>

\w 元字符用于查找单词字符。
单词字符包括：a-z、A-Z、0-9，以及下划线，包含_(下划线)字符。

语法

new RegExp("\w")

更加简单的方式：
/\w/

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式</title>

    <script type = "text/javascript">
        // 表示要求字符串中，是否包含字母e
        // var patt = new RegExp("e");


        // var patt = /e/;  // 表示字符串包含字母e
        // var patt = /[abc]/;  // 表示要求字符串中，是否包含字母a或b或c

        // var patt = /[a-z]/; // 表示要求字符串是否包含小写字母
        var patt = /\w/;  // 表示字符串是否包含字母
        var str = "abcde";

        alert(patt.test(str));

    </script>

</head>

<body>

</body>
</html>

关于量词:
在这里插入图片描述

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式</title>

    <script type = "text/javascript">
        // 表示要求字符串中，是否包含字母e
        // var patt = new RegExp("e");


        // var patt = /e/;  // 表示字符串包含字母e
        // var patt = /[abc]/;  // 表示要求字符串中，是否包含字母a或b或c

        // var patt = /[a-z]/; // 表示要求字符串是否包含小写字母
        // var patt = /\w/;  // 表示字符串是否包含字母

        var patt = /a+/;//  字符串至少包含一个a
        var str = "abcde";


        alert(patt.test(str));
    </script>

</head>

<body>

</body>
</html>

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式</title>

    <script type = "text/javascript">
        // 表示要求字符串中，是否包含字母e
        // var patt = new RegExp("e");
        // var patt = /e/;  // 表示字符串包含字母e
        // var patt = /[abc]/;  // 表示要求字符串中，是否包含字母a或b或c

        // var patt = /[a-z]/; // 表示要求字符串是否包含小写字母
        // var patt = /\w/;  // 表示字符串是否包含字母

        // var patt = /a+/;//  字符串至少包含一个a

        // 要求字符串是否包含至少连续三个a 最多五个a
        var patt = /^a{3,5}$/;


        var str = "abcde";


        alert(patt.test(str));

    </script>
</head>

<body>

</body>
</html>

4.表单提交验证提示效果

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

    <script type = "text/javascript">
        // 需求：当用户点击校验按钮，要获取输出框中的内容。然后验证是否合法
        // 验证的规则：必须有字母，数字，下划线组成。长度是5 ~ 12 位
        function onclickFun(){
            // 当我们需要操作一个标签的时候  一定要先获取这个标签对象
            var username = document.getElementById("username");

            // 获取标签对象
            var usernameSpan = document.getElementById("usernameSpan")

            // alert(username.value);  // 获取输入框的值

            var username_text = username.value;





            // 验证字符串是否符合某一个规则  需要使用正则表达式
            var patt = /^\w{5,12}$/;
            /*
            * test() 方法用于测试某个字符串  是不是匹配规则
            * */

            if(patt.test(username_text)){
                // alert("用户名合法");

                // span对象的属性innerHtml  可读 可写 表示其实标签与结束标签中的内容
                usernameSpan.innerHTML = "用户名合法！";

            }
            else{
                // alert("用户名不合法！");
                usernameSpan.innerHTML = "用户名不合法！";
            }

        }
    </script>


</head>
<body>
    用户名:<input type = "text" id = "username"/>
    <span id = "usernameSpan" style="color:red;"></span>
    <button onclick = "onclickFun();">校验</button>

</body>
</html>

在这里插入图片描述

5.getElementsByName(str)

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>快速入门</title>

    <script>
        //全选
        function checkAll(){
            // 让所有的复选框都选中
            // document.getElementsByName(); 是根据指定的name属性查询返回多个标签对象集合
            // 这个集合的操作跟数组一样
            // 集合中的每一个元素都是dom对象

            // 取出所有name属性是hobby的标签  返回一个数组
            var hobbies = document.getElementsByName("hobby");

            // checked表示复选框的选中状态。如果选中的是true,不选中是false
            // 这个属性可读,可写
            // alert(hobbies[1].checked);

            for (var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = true;
            }


        }

        // 全不选
        function checkNo(){
            // 让所有的复选框都选中
            // document.getElementsByName(); 是根据指定的name属性查询返回多个标签对象集合
            // 这个集合的操作跟数组一样
            // 集合中的每一个元素都是dom对象

            // 取出所有name属性是hobby的标签  返回一个数组
            var hobbies = document.getElementsByName("hobby");

            // checked表示复选框的选中状态。如果选中的是true,不选中是false
            // 这个属性可读,可写
            // alert(hobbies[1].checked);

            for (var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = false;
            }

        }

        // 反选
        function checkReverse(){
            // 取出所有name属性是hobby的标签  返回一个数组
            var hobbies = document.getElementsByName("hobby");

            // checked表示复选框的选中状态。如果选中的是true,不选中是false
            // 这个属性可读,可写
            // alert(hobbies[1].checked);

            for (var i = 0; i < hobbies.length; i++) {
                if(hobbies[i].checked)
                {
                    hobbies[i].checked = false;
                }
                else
                {
                    hobbies[i].checked = true;
                }
            }

        }



    </script>


</head>
<body>

    兴趣爱好：
    <input type="checkbox" name="hobby" value="cpp" checked="checked">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>

6.getElementsByTagName(str)

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

    <script type = "text/javascript">
        //document.getElementsByTagName("input")  按照标签名来选取对象
        //返回一个集合  集合中都是dom对象

        var inputs = document.getElementsByTagName("input");

        for (var i = 0; i < inputs.length; i++) {
            inputs[i].checked = true;
        }

    </script>


</head>
<body>
    兴趣爱好：
    <input type="checkbox" name="hobby" value="cpp" checked="checked">C++
    <input type="checkbox" name="hobby" value="java">Java
    <input type="checkbox" name="hobby" value="js">JavaScript
    <br/>

<button onclick="checkAll()">全选</button>


</body>
</html>

注意：document对象的三个查询方法，如果有id属性，优先使用getElementById方法来进行查询，其次是getElementsByName方法进行查询
在这里插入图片描述

补充说明方法：

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

    <script type = "text/javascript">


        window.onload = function (){
            // 现在需要我们使用js代码来创建html标签，并显示在页面上
            //标签的内容是:


            var div1 = document.createElement("div");//创建一个div dom对象

            div1.innerHTML = "姐姐，你可以和我一起做爱心巧克力吗？" ;// 设置文本内容  但是div只是在内存中

            document.body.appendChild(div1);// 添加子节点   加载div标签
            
        }
        

    </script>


</head>
<body>

</body>
</html>
少写代码少看论文多多睡觉
关注
  • 8
    点赞
  • 踩
  • 50
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Web篇_04 JavaScript两小时速成笔记
凤文Sharing的博客
03-12 4057
JavaScript学习环境准备Js脚本引入方式js测试变量var、let、const数据类型Array 数组Object 对象JSON循环数组的遍历条件函数function面向对象DOM综合案例 JavaScript，本篇文章简称js。来自YouTobe上最热门的Javascript速成教程，硬性要求你有html和css的基础！十分推荐有其他编程语言基础的人阅读！（本人有Java、C++、Python的基础，轻松起飞，完了直接学Vue无压力，照着代码敲到底，你也可以的） 学习环境准备...
狂神JavaScript快速入门学习笔记
luojias的博客
04-22 966
1什么是JavaScript JavaScript是一门世界上最流行的脚本语言 2快速入门 2.1 引入JavaScript 1 内部标签 <script> alert('hello world'); </script> 2外部标签 <script src="kkk.js"></script> 2.2 基本语法入门 2.2.1定义变量 一切变量定义都是var，局部变量建议使用let定义 不加var就是全局变量 ‘use str
Javascript入门学习笔记
weixin_61370021的博客
04-27 4532
JS入门学习笔记，JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
javaScript快速入门(笔记)
abc98526的博客
04-12 1819
1.什么是javaScript javaScript是一门世界上最流行的脚本语言! JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。 javaScript的历史故事: 值得一提的是:javaScript脚本语言是Brendan Eich只花了10天时间制作而成的
JavaScript入门学习笔记
Hi
03-11 1271
1、JavaScript 2、条件语句 3、循环语句 4、函数 5、事件
JavaScript 快速入门教程
qq_53569667的博客
12-31 733
在学习 JavaScript 的过程中，根据狂神Java和菜鸟教程的学习内容整理出来的一些笔记
JavaScript 快速入门手册
Java.慈祥
08-17 9691
JavaScript是一门解释型语言，所谓解释型指语言是指不需要被编译为机器码在执行，而是直接浏览器|node中执行。JavaScript中每一个函数对象都存在一个隐藏的对象属性:prototype原型对象函数以普通函数调用，prototype没有任何作用函数以构造函数调用，new 构造函数(...);
JavaScript新手入门学习笔记
热门推荐
qq_43389754的博客
12-04 4万+
JavaScript介绍 1.1 前端三要素 HTML 超文本标记语言 决定了网页中的视图内容 CSS 层叠样式表 决定了网页中的视图效果 JavaScript 赋予网页动态功能 1.2 JavaScript简介 JavaScript是一种基于对象的事件驱动型、弱类型的脚本语言 基于对象：区别于Java中的面向对象，遵循对象.方法的规则，但是没有类的概念 事件驱动：脚本语言代码需要由网页中的事件来触发执行 脚本语言：JS作为寄生语言，写在HTML网页中 JavaScript在1995年
快速入门Vue笔记
ACMjiayou的博客
02-08 1395
快速入门Vue笔记
JavaScript1小时快速上手笔记快速复习
11-21
根据JavaScript资料整理的快速上手资料,分成21大条知识,适合有其他语言基础的同学快速上手入门,复习,快速复习纸需要大概30分钟不到.推荐阅读.
JavaScript 入门 新手学习笔记
11-17
新手入门JS超详细笔记 各个版本都有，格式条理清晰标注含有例题以及解析
整理Javascript基础入门学习笔记
10-23
整理Javascript基础入门学习笔记，之前一系列的文章是跟我学习Javascript，本文就是进一步学习javascript，希望大家继续关注
JAVASCRIPT从入门到精通读书笔记.pdf
11-27
JAVASCRIPT从入门到精通读书笔记.pdf
JavaScript入门课件与笔记
07-27
适合小白学习的，从入门到精通，从小到大，有浅到深，面面俱到，包含许多基础知识与笔记，还有许多源码，很适合小白学习。
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 209
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
Vue.js的发展史（一）
2301_79683791的博客
05-15 768
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
【学习笔记】后端（Ⅰ）—— NodeJS（Ⅱ）
最新发布
Eddie_hyh的博客
05-21 287
NodeJS（Ⅱ）
React函数式组件的父子方法互相调用，父组件调用子组件方法，子组件调用父组件方法
SongZhengxing_的博客
05-18 185
子组件需要使用 forwardRef 函数包裹，然后使用 useImperativeHandle 暴露属性和方法。编写子组件 Child。
web前端开发笔记vscode
10-26
Web前端开发笔记是一款VS Code插件，它提供了一些常用的Web前端开发知识点和技巧的笔记，包括HTML、CSS、JavaScript、React等。这个插件可以帮助开发者快速查找和学习Web前端开发的知识点，提高开发效率。 该插件的主要功能包括： 1. 提供了一些常用的Web前端开发知识点和技巧的笔记； 2. 可以通过搜索功能快速查找需要的知识点； 3. 支持Markdown格式，可以方便地编辑和添加笔记；4. 可以自定义标签，方便分类管理笔记； 5. 支持导出和导入笔记。 如果你是一名Web前端开发者，这个插件可以帮助你更好地学习和掌握Web前端开发知识，提高开发效率。如果你是一个初学者，这个插件也可以帮助你快速入门Web前端开发。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

少写代码少看论文多多睡觉

求打赏，求关注，求点赞

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值