2-41 JavaScript

已于 2023-08-30 14:29:29 修改
阅读量121 收藏
点赞数
分类专栏： Note 文章标签： javascript java 开发语言
于 2022-10-27 20:14:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WilsonDone/article/details/127559854
版权

JavaScript简介

  • JavaScript一种解释性脚本语言，是一种动态类型、弱类型、基于原型继承的语言，内置支持类型。

  • 它的解释器被称为JavaScript引擎，作为浏览器的一部分，广泛用于客户端的脚本语言，用来给HTML网页增加动态功能。

  • ps:JS 是弱类型，Java 是强类型。

弱类型：定义变量的时候类型随赋值内容可变。

强类型：定义变量的时候，类型已确定，而且不可变

例如

  • Java： int i = 12；//只能是int类型
  • js --》 var i = ？；//赋值什么数据就是什么类型

特点：

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

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

3. 跨平台性（只要是可以解释 JS 的浏览器都可以执行，和平台无关）

JavaScript组成部分

JavaScript发展史

PiAtIOWug+aYr+eUsU5ldHNjYXBl5YWs5Y+455qEQnJlbmRhbiBFaWNo55SoKioxMOWkqSoq6K6+6K6h5Ye65p2l5LiA6Zeo6ISa5pys6K+t6KiA77yMSmF2YVNjcmlwdOaYr+eUsumqqOaWh+WFrOWPuOeahOazqOWGjOWVhuagh+OAguWujOaVtOeahEphdmFTY3JpcHTlrp7njrDljIXlkKvkuInkuKrpg6jliIbvvJpFQ01BU2NyaXB077yM5paH5qGj5a+56LGh5qih5Z6L77yM5rWP6KeI5Zmo5a+56LGh5qih5Z6L44CCDQo+IC0gTmV0c2NhcGXlnKjmnIDliJ3lsIblhbbohJrmnKzor63oqIDlkb3lkI3kuLpMaXZlU2NyaXB077yM5ZCO5p2lTmV0c2NhcGXlnKjkuI5TdW7lkIjkvZzkuYvlkI7lsIblhbbmlLnlkI3kuLpKYXZhU2NyaXB0KirjgILlvq7ova/mjqjlh7rkuoZKU2NyaXB05p2l6L+O5oiYSmF2YVNjcmlwdOeahOiEmuacrOivreiogOOAguS4pOiAhemDveWxnuS6jkVDTUFTY3JpcHTnmoTlrp7njrDvvIzkuLrkuobkupLnlKjmgKfvvIxFQ0FN77yI5qyn5rSy6K6h566X5py65Yi26YCg5ZWG5Y2P5Lya77yJ5Yib5bu65LqGRUNNQS0yNjLmoIflh4bvvIhFQ01BU2NyaXB077yJ44CCRUNNQVNjcmlwdOacgOaWsOeJiOacrOaYrzIwMTXlj5HluIPnmoQgRUNNQVNjcmlwdCA277yIRVM277yJ44CC

JavaScript如何和页面进行结合

第一种方式

只要在head表中或在body标签中使用 ，【script】标签即可书写JavaScript代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一种结合方式</title>
    <script type="text/javascript">
        //alert弹窗 JS函数 可以一共一个警告框
        alert("hello javaScript");
    </script>
</head>
<body>

</body>
</html>

第二种方式

如果编写JS命令特别多，并且多出使用，就可以创建一个JavaScript文件

请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一种结合方式</title>
<!--    创建一个JS文件并编写了JS代码，可以用script标签中 src属性 引入编写好的JS文件
       src后面是路径【这个路径即可以是绝对路径也可以是相对路径】
       但是引入方式  和 直接编写方式  只能二选一-->
    <script type="text/javascript" src="newJS.js">
    </script>
</head>
<body>

</body>
</html>

JavaScript基础语法

变量声明

在JavaScript中，任何变量都可以使用var关键字来声明，var是variable的缩写

var是声明关键字 跟着后面 变量名 ，语句以分号结尾

var  a ;
var  b = 1;

声明变量的时候不能使用JavaScript中关键字【脚本语言所以，编写错误不是很敏感，需要在浏览器中才会体现】

JavaScript中部分关键字

abstract、else、instanceof、super、boolean、enum、int、switch、break、export、interface、synchronized、byte、extends、let、this、case、false、long、throw、catch、final、native、throws、char、finally、new、transient、class、float、null、true、const、for、package、try、continue、function、private、typeof、debugger、goto、protected、var、default、if、public、void、delete、implements、return、volatile、do、import、short、while、double、in、static、with。

基本类型

变量的基本类型有五种：

【Number(数值型)、String(字符串)、boolean(布尔类型)、Null(空值)、Undefined(未定义)】

ps：undefined未定义，所有JS变量为赋予初始值的时候，默认都是undefined

​ 在中java中duoble和float在给0.0打印结果会出现 NaN --》 Not a Number 非数值

 <script type="text/javascript">
        var a = 12;// 就是一个Number
        //typeof 可以检测变量的数据类型，JS的内置函数
       // alert(typeof(a))
        var b ;
        //alert(b);
        var b = "abc";
        alert(a * b); //JS语法是允许的，但是结果是NaN
    </script>

引用类型【Object】

在Java中是可以定类和对象

public class Student{
	public int id;
	public String name;
	public int age;
}
public class Test{
    public static void main(String[] args){
     	Student  s = new Student();
        s.id = 1;
    }
}

在JavaScript中对象可以直接写出

Object形式的自定义对象

   <script type="text/javascript">
        /*
         对象的定义
         var 变量 = new Object() //定义了一个对象
         变量.属性名 = 值;  // 定义了一个属性
         变量.函数名 = function(){} //定义一个函数
         */
        var obj = new Object();
        obj.name = "大宝";
        obj.age = 18;
        obj.fun = function () {
            alert("姓名："+this.name+"年龄："+this.age);
        }
        // 访问属性
        //alert(obj.age);
        alert(obj.fun())
    </script>

{}形式自定义对象

Ps：这个操作就是JSON的前身

var 变量 = { //创建了一个空对象

​ 属性名 : 值,

​ …

​ 函数名： function(){}

}

访问数据

变量名.属性名 或 函数名

<title>{}形式创建对象</title>
 <script type="text/javascript">
    var student = {
        name:"大宝",
        age:18,
        fun : function () {
            alert("姓名："+this.name+"年龄："+this.age);
        }
    }

     // 访问属性
     //alert(obj.age);
     alert(student.fun())
 </script>

ps：事实上Student被赋值为了一个JSON，全称JavaScript Object Notation，叫做JavaScript对象标记，也就是说在JavaScript中JSON是用于标记一个对象

数组类型

JavaScript中数组的概念和Java中数据概念大体上都是相同，而JS中成为类型Array

var 数组名 = []; ----> 空数组

var 数据名 = [1,“abc”,true]; ----->定义数组并赋值

 <script type="text/javascript">
      var arr = []; //空数组
        //alert(arr.length)
      //在JS中创建数组可以不付给任何值（即空数数组），可以通过下标动态赋值
      //   arr[0] = 12;
      //   alert(arr[0]);
      //   alert(arr.length)
      //JS数组给人以一个值赋值前面自动填充
      arr[2] = 14;
      //alert(arr.length);
       //没有值的位置是以undefined填充
      // alert(arr[1]);

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

    </script>

上述代码中 arr是一个数组， 在数组中下标是0到当前长度-1结束

运算符

和Java中一样的运算符有逻辑也是一样的

  <   <=   >  >=  !=  ++ --   + - * / %  =   +=  -=  *=  /=  %=

特殊运算符

 == 【简单的字面值比较】  === 【除了做字面值比较值，还比较两个变量类型是否相等】
ps： == 建议比较值类型   ===  建议比较引用  
      == 不会考虑变量类型所以： alert(1 == "1"); 结果是true
      
&&  ||  ！      
    <script type="text/javascript">
        /**
         * 在JavaScript语言中所有的变量都可以是一个Boolean类型去使用
         * 0、null、undefined、""(空串)都是false ，明确false
         * && 运算在JavaScript中有两种情况
         * 第一种：只有所有表达式都为真，返回结果为真 第二个记过值
         * 第二种：当表达式中 有一个结果为false，返回第一个为假的表达式的"值"
         */
        var a = "abc";
        var b = true;
        var c = false;
        var d = null;
        //alert( a && b); // true;
        //alert( b && a);//"abc"
        //alert(a && d);//null
        //alert(a && c); //false
        //alert(b && c);//false
        //alert(c && b);//false
        /*
        || 或运算
        第一种情况，当表达式全为假时，返回最后一个表达式值
        第二种情况, 只要有一个表达为真，就会把第一个为真的表达式的“值”返回
         */
        //alert(c || d); // null
        //alert(d || c); //false
        //alert(a || c); //abc
        //alert(b || c); //true
        
        //！和Java中是完全一样

    </script>

JavaScript分支和循环

JavaScript中 支持if-else 分支、支持switch分支

JavaScript中 do-while循环 、while循环 、for循环

ps：支持是var作为变量声明 支持++ 和-- 同时还是支持break和continue

JavaScript中支持增强for循环，循环中声明变量不是对象【元素】，而是下标

  var arr = [10,20,30,40];
        for(var i in arr){
            alert(arr[i])
        }

ps：JavaScript中有一个特殊的关键**【void】**，和Java中含义不一样，在void中是以方法中没有返回值来决定【在方法声明时使用】，在JavaScript中void是以关键字并且表达式不返回值【不做任何操作】

JavaScript:void(0) 这样做可以代表一个死链接，所以多用于在不做任何跳转的a标签中
<a href = "javaScript:void(0)">点击后不会有任何反应</a>

JavaScript函数

函数在JavaScript中有非常众总要的意义，需要使用function关键字来定义后面是函数名，参数列表中是写var，这个方法不写返回值类型

第一种定义方式：可以使用function来定义函数

使用格式：

function 函数名（形参列表）{

​ 函数体

}

 <title>函数的一种定义</title>
    <script type="text/javascript">
        //定义一个无参参数
        function fun() {
           alert("无参函数被调用")
        }
        //调用函数
        fun();
        //定义形参不需要写var
        function fun(a,b) {
           var result =  a+b;
           //在JS中定义函数式不写返回类型的,如果在函数中需要返回值，添加return
            return result;
        }
    </script>

函数第二种定义方式【这种使用方式居多】

使用格式如下：

var 函数名 = function（形参列表）{

​ 函数体

}

   var fun1 = function () {
            alert("无参")
        }
        fun1()
ps：代参和代返回值的同理都是这样做定义的时候可以参考第一种方式

注：在JS中是允许函数存在**“重载效果”**的，但是不是重载，而是最后一个方法会覆盖之前的方法

<script type="text/javascript">
         function fun() {
            alert("无参方法")
         }
         function fun(a,b) {
             alert("有参方法fun（a,b）")
         }
         fun();
    </script>

注:函数中都存在一个隐藏参数【无参方法】，arguments，这个采纳数不需要定义可以直接获取到值，类似于java中可变参数，操作的时候就是一个数组

   function sum() {
                var result = 0;
                for(var i = 0 ;i<arguments.length;i++){
                    if(typeof(arguments[i]) == "number"){
                        result+= arguments[i];
                    }
                }
                return result;
        }

ps：隐藏参数可以在无参中使用，可以在有参汇总使用，会自动匹配

常见的弹窗函数

alert弹框:这是一个只能点击确定按钮的弹窗

alert函数没有返回值，也就是说如果一个变量接收这个返回值，将会得到undefined，无论点击“确定"还是"x"

alert("你好")

confirm弹框：这是一个可以点击确定和去取消的弹窗

confirm和alert的不同在于，它的返回值是boolean，当单击为“确定”返回值是true 无论点击是“取消”还是“x”都返回false

var res = confirm("你好")

prompt弹窗：这是一个可以输入文本的弹窗

第一个参是提示信息，第二个参是用输入的默认值

当点击“确定”时，返回输入的内容，当你点击“取消”或者关闭的时候，返回null

var res = prompt("睡觉了吗？","睡了")

JavaScript事件

什么是事件？事件是电脑输入设备与页面进行交换的影响，我们称为事件

事件名称描述
onchangeHTML元素内容改变
onclick用户点击HTML元素
onmouseover用户将鼠标移入一个HTML元素中
onmousemove用户在一个HTML元素上移动鼠标【捕捉敏感】
onmouseout用户从一个HTML元素上移开鼠标
onload浏览器已经完成页面加载
onsubmit表单提交
onblur输入框失去焦点【表单输入框居多】
onkeyup键盘
onkeydown按下键盘

常用的事件

onload加载完成事件：页面加载完成后，常用作业面JS代码初始操作

onclick点击事件：常用于单击事件，绑定在一个普通按钮上 button标签

onblur失去焦点事件：常用于输入框失去焦点之后内容验证

onchange内容发生改变事件：常用于下拉表或输入框内容发生改变之后

onsubmit:表单提交事件：常用于表单提交之前，验证所有表单合法

事件注册

JavaScript中事件注册分为两种**【静态注册和动态注册】**

什么是事件注册（绑定）？

其实就是告诉浏览器，当事件响应后需要执行操作那些代码，这个叫做时间注册或时间绑定

什么是静态注册？

静态注册时间：通过HTML标签的事件属性直接赋予时间相应后的代码，这种方式叫做静态注册

什么是动态注册？

是之先通过JS代码得到标签的dom对象，然后通过dom对象.事件名=function（）{}，这种形式赋予事件的响应代码，叫做动态注册

事件操作演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS事件操作</title>
    <script type="text/javascript">
        //onload事件实现【就是函数的定义】
        //函数的定义第一种 function 函数名(){函数体实现}
        //onload
        // function onloadFun() {
        //     alert("注册onload事件")
        // }
        // //onload动态注册固定写法
        // window.onload = function () {
        //     alert("动态注册onload事件")
        // }

        //onclick事件
        // function  onclickFun() {
        //     alert("按钮的单击事件");
        // }
        //
        // //动态绑定事件
        //  window.onload = function () {
        //         //1.获取标签对象
        //  //    JavaScript中提供了一个对象 document【文档对象（DOM）】
        //      //通过当前对象获取id值，寻找哪个标签
        //      var btnObj = document.getElementById("btn01");
        //      //通过标签对象.事件名 = function(){}
        //      btnObj.onclick = function () {
        //             alert("按钮2触发事件")
        //      }
        //  }

        //onblur
        // function onblurFun() {
        //   //可以将信息打印到浏览中，浏览器控制台,看到结果可以使用F12查看
        //     console.log("失去焦点")
        // }
        // window.onload = function () {
        //         var elementById = document.getElementById("password");
        //         elementById.onblur = function () {
        //             console.log("失去焦点")
        //         }
        // }

        //onchange
        // window.onload = function () {
        //     var elementById = document.getElementById("sel01");
        //     elementById.onchange = function () {
        //             alert("你心中的女神改变了")
        //     }
        // }

         //onsubmit
        // window.onload = function () {
        //     var elementById = document.getElementById("form01");
        //     elementById.onsubmit = function () {
        //             alert("注册表单提交事件---》判断是否合法")
        //        //如果检测不合法可以使用return false 阻止提交
        //         // return false;
        //     }
        // }



    </script>
</head>
<!--注册一个静态事件 onload事件是浏览器解析完毕之后就会自动触发
     不太推荐这样写时间，如果代码量少可以【一行】-->
<!--<body οnlοad="alert('静态注册事件');">-->

<!--动态注册事件 在标签中流一个事件函数名，具体在script标签中实现【推荐】-->
<!--<body οnlοad="onloadFun();">-->
<body>
<!--  <button οnclick="onclickFun();">按钮1</button>-->
<!--     &lt;!&ndash;  如果要区分按钮 可以给当前标签添加  id 通过id值确认是哪个按钮&ndash;&gt;-->
<!--  <button id = "btn01">按钮2</button>-->


<!--    用户名：<input type="text" οnblur="onblurFun();"/><br/>-->
<!--    密码：<input id = "password" type="text" /><br/>-->

<!--   选择你心中的女神：-->
<!--   <select id="sel01">-->
<!--       <option>&#45;&#45;女神&#45;&#45;</option>-->
<!--       <option>媛媛</option>-->
<!--       <option>朱丽叶</option>-->
<!--       <option>大宝</option>-->
<!--   </select>-->


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





</body>
</html>
String和正则表达式
创建 String 对象的语法
var str = new String("s");
var str = String("s");
var str = "s"

参数 s 是要存储在 String 对象中或转换成原始字符串的值。

返回值:

当 String() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 String 对象，存放的是字符串 s 或 s 的字符串表示。

当不用 new 运算符调用 String() 时，它只把 s 转换成原始的字符串，并返回转换后的值。类似于直接赋值

String 对象方法
方法描述
charAt()返回在指定位置的字符。
concat()连接字符串。
indexOf()检索字符串。
lastIndexOf()从后向前搜索字符串。
match()找到一个或多个正则表达式的匹配。
replace()替换与正则表达式匹配的子串。
search()检索与正则表达式相匹配的值。
slice()提取字符串的片断，并在新的字符串中返回被提取的部分。
split()把字符串分割为字符串数组。
substring()提取字符串中两个指定的索引号之间的字符。
toLocaleUpperCase()把字符串转换为大写。
toLowerCase()把字符串转换为小写。
toUpperCase()把字符串转换为大写。
toString()返回字符串。
valueOf()返回某个字符串对象的原始值。

正则表达式

  • 正则表达式是描述字符模式的对象。
  • 正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。
  • 语法：
    • var patt=new RegExp(pattern,modifiers);
    • var patt=/pattern/modifiers;
var re = new RegExp("\\w+");
var re = /\w+/;

RegExp 对象方法

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

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

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

正则表达式的使用

  • test方法：搜索字符串指定的值，根据结果并返回真或假
  • exec() 方法：检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));


var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));

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

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

示例:

// 默认会区分大小写
  var reg = /hello/
  var flag = reg.test("Hello World")
  console.log(flag) // false
  // 添加i修饰符 不区分大小写
  var reg2 = /hello/i
  var flag2 = reg2.test("Hello World")
  console.log(flag2) // true
 
  var str = "I'm in a bad mood, really bad"
  // 默认非全局匹配
  var reg3 = /bad/
  var newStr = str.replace(reg3,"good")
  // 只替换了一个bad
  console.log(newStr) // I'm in a good mood, really bad
  // 全局匹配
  var reg4 = /bad/g
  var newStr2 = str.replace(reg4,"good")
  // 替换了全局的bad为good
  console.log(newStr2) // I'm in a good mood, really good
 
  // 同时使用
  var reg5 = /bad/gi
	var newStr3 = reg5.test("i am a BaD");
	console.log(newStr3);

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

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

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

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

量词：用于表示重复次数的含义

量词描述
n+匹配任何包含至少一个 n 的字符串。例如，/a+/ 匹配 “candy” 中的 “a”，“caaaaaaandy” 中所有的 “a”。
n*匹配任何包含零个或多个 n 的字符串。例如，/bo*/ 匹配 “A ghost booooed” 中的 “boooo”，“A bird warbled” 中的 “b”，但是不匹配 “A goat grunted”。
n?匹配任何包含零个或一个 n 的字符串。例如，/e?le?/ 匹配 “angel” 中的 “el”，“angle” 中的 “le”。
n{X}匹配包含 X 个 n 的序列的字符串。例如，/a{2}/ 不匹配 “candy,” 中的 “a”，但是匹配 “caandy,” 中的两个 “a”，且匹配 “caaandy.” 中的前两个 “a”。
n{X,}X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如，/a{2,}/ 不匹配 “candy” 中的 “a”，但是匹配 “caandy” 和 “caaaaaaandy.” 中所有的 “a”。
n{X,Y}X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。例如，/a{1,3}/ 不匹配 “cndy”，匹配 “candy,” 中的 “a”，“caandy,” 中的两个 “a”，匹配 “caaaaaaandy” 中的前面三个 “a”。注意，当匹配 “caaaaaaandy” 时，即使原始字符串拥有更多的 “a”，匹配项也是 “aaa”。
n{X}前面的模式 n 连续出现X 次时匹配
n$匹配任何结尾为 n 的字符串。
^n匹配任何开头为 n 的字符串。
?=n匹配任何其后紧接指定字符串 n 的字符串。
?!n匹配任何其后没有紧接指定字符串 n 的字符串。
JavaScript常用正则表达式
匹配中文字符的正则表达式： [u4e00-u9fa5]

评注：匹配中文还真是个头疼的事，有了这个表达式就好办了

匹配双字节字符(包括汉字在内)：[^x00-xff]

评注：可以用来计算字符串的长度（一个双字节字符长度计2，ASCII字符计1）

匹配空白行的正则表达式：ns*r

评注：可以用来删除空白行

匹配HTML标记的正则表达式：< (S*?)[^>]*>.*?|< .*? />

评注：网上流传的版本太糟糕，上面这个也仅仅能匹配部分，对于复杂的嵌套标记依旧无能为力

匹配首尾空白字符的正则表达式：^s*|s*$

评注：可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式

匹配Email地址的正则表达式：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*

评注：表单验证时很实用

匹配网址URL的正则表达式：[a-zA-z]+://[^s]*

评注：网上流传的版本功能很有限，上面这个基本可以满足需求

匹配帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$

评注：表单验证时很实用

匹配国内电话号码：d{3}-d{8}|d{4}-d{7}

评注：匹配形式如 0511-4405222 或 021-87888822

匹配腾讯QQ号：[1-9][0-9]{4,}

评注：腾讯QQ号从10000开始

匹配中国邮政编码：[1-9]d{5}(?!d)

评注：中国邮政编码为6位数字

匹配身份证：d{15}|d{18}

评注：中国的身份证为15位或18位

匹配ip地址：d+.d+.d+.d+

评注：提取ip地址时有用

匹配特定数字：

^[1-9]d*$　 　 //匹配正整数
^-[1-9]d*$ 　 //匹配负整数
^-?[1-9]d*$　　 //匹配整数
^[1-9]d*|0$　 //匹配非负整数（正整数 + 0）
^-[1-9]d*|0$　　 //匹配非正整数（负整数 + 0）
^[1-9]d*.d*|0.d*[1-9]d*$　　 //匹配正浮点数
^-([1-9]d*.d*|0.d*[1-9]d*)$　 //匹配负浮点数
^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0+|0)$　 //匹配浮点数
^[1-9]d*.d*|0.d*[1-9]d*|0?.0+|0$　　 //匹配非负浮点数（正浮点数 + 0）
^(-([1-9]d*.d*|0.d*[1-9]d*))|0?.0+|0$　　//匹配非正浮点数（负浮点数 + 0）

评注：处理大量数据时有用，具体应用时注意修正

匹配特定字符串：

^[A-Za-z]+$　　//匹配由26个英文字母组成的字符串
^[A-Z]+$　　//匹配由26个英文字母的大写组成的字符串
^[a-z]+$　　//匹配由26个英文字母的小写组成的字符串
^[A-Za-z0-9]+$　　//匹配由数字和26个英文字母组成的字符串
^w+$　　//匹配由数字、26个英文字母或者下划线组成的字符串

在使用RegularExpressionValidator验证控件时的验证功能及其验证表达式介绍如下:

只能输入数字：“^[0-9]*$”
只能输入n位的数字：“^d{n}$”
只能输入至少n位数字：“^d{n,}$”
只能输入m-n位的数字：“^d{m,n}$”
只能输入零和非零开头的数字：“^(0|[1-9][0-9]*)$”
只能输入有两位小数的正实数：“^[0-9]+(.[0-9]{2})?$”
只能输入有1-3位小数的正实数：“^[0-9]+(.[0-9]{1,3})?$”
只能输入非零的正整数：“^+?[1-9][0-9]*$”
只能输入非零的负整数：“^-[1-9][0-9]*$”
只能输入长度为3的字符：“^.{3}$”
只能输入由26个英文字母组成的字符串：“^[A-Za-z]+$”
只能输入由26个大写英文字母组成的字符串：“^[A-Z]+$”
只能输入由26个小写英文字母组成的字符串：“^[a-z]+$”
只能输入由数字和26个英文字母组成的字符串：“^[A-Za-z0-9]+$”
只能输入由数字、26个英文字母或者下划线组成的字符串：“^w+$”

验证用户密码:“^[a-zA-Z]w{5,17}$”正确格式为：以字母开头，长度在6-18之间，
只能包含字符、数字和下划线。

验证是否含有^%&',;=?$”等字符：“[^%&',;=?$x22]+”
只能输入汉字：“^[u4e00-u9fa5],{0,}$”

验证Email地址：“^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$”

验证InternetURL：“^http://([w-]+.)+[w-]+(/[w-./?%&=]*)?$”

验证电话号码：“^((d{3,4})|d{3,4}-)?d{7,8}$”

正确格式为：“XXXX-XXXXXXX”，“XXXX-XXXXXXXX”，“XXX-XXXXXXX”，
“XXX-XXXXXXXX”，“XXXXXXX”，“XXXXXXXX”。

验证身份证号（15位或18位数字）：“^d{15}|d{}18$”

验证一年的12个月：“^(0?[1-9]|1[0-2])$”正确格式为：“01”-“09”和“1”“12”

验证一个月的31天：“^((0?[1-9])|((1|2)[0-9])|30|31)$”

正确格式为：“01”“09”和“1”“31”。

匹配中文字符的正则表达式： [u4e00-u9fa5]

匹配双字节字符(包括汉字在内)：[^x00-xff]

匹配空行的正则表达式：n[s| ]*r

匹配HTML标记的正则表达式：/< (.*)>.*|< (.*) />/

匹配首尾空格的正则表达式：(^s*)|(s*$)

匹配Email地址的正则表达式：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*

匹配网址URL的正则表达式：http://([w-]+.)+[w-]+(/[w- ./?%&=]*)?

JavaScript的DOM【重点】

DOM的概述

通过HTML DOM Document Object Model 文档对象模型，可以访问JavaScript HTML文档所有的元素

当网页被加载的时候，浏览器会创建页面的文档对象模型（DOM）

大白话：就是把文档中标签、属性、文本、转换成对象来管理，那么是如何把这个标签、属性、文本转换成对象的呢？

HTML DOM模型被构造成的数

请添加图片描述

Document对象的理解

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

第二点: Document它是一种树结构的文档，有层级关系

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

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

什么是对象化？

举例子：有一个人年龄：18 性别：女 名字：大宝

我们要你把这个人的信息对象化怎么办？

class Person{
	int age；
	String gender；
	String name；
}

那么html标签要怎么样对象化？

<body>
    <div id = "div01">
        div01
       
    </div>
</body>

模拟对象化相当于

class  DOM{
    String id // 属性id
    String tagName // b、标签的名字    
    DOM parentNode //父亲
    List<DOM> children //孩子
    String innerHTML； //标签中间的内容    
    
}

有了这个动态模型之后JavaScript可以动态的修改和创建HTML

通过JavaScript中DOM对象可以对HTML页面进行改变【元素，属性，css样式和做出事件反映】

查找HTML元素

ps：元素就是标签

通过JavaScript可以操作HTML元素，如果获取到这个元素？【三种方式】

  1. 通过id查找HTML【在DOM中查找HTML元素最简单的方法，是通过使用元素id】

方法： document.getElementById(“id属性的值”)

​ 如果查找到了则返回元素的对象，如果没找到返回null

  1. 通过元素的名字，查找HTML元素

方法：document.getElementsByTagName（“合法的元素名”）

  1. 通过类名找到HTML元素【class属性值】

方法：document.getElemnetsByClassName（“class属性的值”）

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

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

​ 如果实在没有id和name属性则是用getElementsByTagName查询标签名

JS改变HTML、CSS样式和DOM事件

需求：当用户离开输入框，要获取输入框中内容，然后验证其是否合法

​ 验证规则：必须由字母、数字、下划线组成，并且长度 要5~12位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>输入数据验证</title>
    <script type="text/javascript">
        function onblurFun() {
            //1先获取要操作的一个标签对象
            var elementObj = document.getElementById("username");
            //2  alert(elementObj)   [object HTMLInputElement] 就是dom对象
            //取出存在dom对象中值
            var  usernameText = elementObj.value;
            //获取span标签对象
            var elementSpan = document.getElementById("usernameSpan");
            //正则表达式
            var patt = /^\w{5,12}$/;
            if(patt.test(usernameText)){
                //alert("用户名和法");
                //通过JS中DOM对象设置CSS属性
                //elementSpan.style.color = "green";
                //通过JS中DOM对象向标签填充内容
                //innerHTML不仅可以添加内容，还可以添加标签
                //elementSpan.innerHTML="用户名合法"
                elementSpan.innerHTML = "<img src='img/right.png' width='18' height='18'>"

            }else{
               // alert("用户名不和法")
                //通过JS中DOM对象设置CSS属性
                // elementSpan.style.color = "red";
                // //通过JS中DOM对象向标签填充内容
                // elementSpan.innerHTML="用户不名合法"
                elementSpan.innerHTML = "<img src='img/wrong.png' width='18' height='18'>"
            }


        }
    </script>
</head>
<body>
    用户名：<input type="text" id="username" value="zhangsan" onblur="onblurFun()"/>
     <span id="usernameSpan"></span>

</body>
</html>

JS处理选项框【全选，全不选，反选】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项框</title>
    <script type="text/javascript">
        //全选
        function  checkAll() {
            //返回的就是一个数组【集合】，这个数组【集合】的元素顺序是他们在HTML页面中从上至下书写的顺序
            var elementsByName = document.getElementsByName("hobby");
            for(var i = 0; i<elementsByName.length;i++){
                //操作的元素是复选框，复选框的选中需使用的状态是checked
                //选中状态 赋值为true 没有选中赋值false
                elementsByName[i].checked = true;
            }
        }
        //全选
        function  checkNo() {
            //返回的就是一个数组【集合】，这个数组【集合】的元素顺序是他们在HTML页面中从上至下书写的顺序
            var elementsByName = document.getElementsByName("hobby");
            for(var i = 0; i<elementsByName.length;i++){
                //操作的元素是复选框，复选框的选中需使用的状态是checked
                //选中状态 赋值为true 没有选中赋值false
                elementsByName[i].checked = false;
            }
        }
        //反选
        function  checkReverse() {
            //返回的就是一个数组【集合】，这个数组【集合】的元素顺序是他们在HTML页面中从上至下书写的顺序
            var elementsByName = document.getElementsByName("hobby");
            for(var i = 0; i<elementsByName.length;i++){
               // if(elementsByName[i].checked){
               //     elementsByName[i].checked = false;
               // }else{
               //     elementsByName[i].checked = true;
               // }
                elementsByName[i].checked = !elementsByName[i].checked
            }
        }
    </script>

</head>
<body>
    兴趣爱好:
    <input type="checkbox" name="hobby" value="吃饭" checked>吃饭
    <input type="checkbox" name="hobby" value="睡觉" >睡觉
    <input type="checkbox" name="hobby" value="打豆豆" >打豆豆
    <br/>
    <button onclick="checkAll()">全选</button>
    <button onclick="checkNo()">全不选</button>
    <button onclick="checkReverse()">反选</button>

</body>
</html>

EventListener（事件监听）

JS中提供了一个方法addEventListener在用户触发监听事件时候，可以进行对事件的操作【反应】，无需给标签添加任何事件，只需要给添加ID或name即可，通过对这个方法的设置及可以达到对时间的处理操作

element对象.addEventListener(event,function,useCapture);
参数名说明
event事件类型（如果“click” 或 “mouseover”）【这里的事件名称都都要去掉on】
function事件具体实现函数
useCapture参数是可选参数，用于描述时间是“冒泡”还是“捕获”
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #d1{ width: 200px; height: 100px;background-color: red}
        #d2{ width: 200px; height: 100px;background-color: green}
    </style>

</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<script type="text/javascript">
    //添加监听事件
    var d1 = document.getElementById("d1");
    //同一个元素绑定多个相同事件，还可绑定不同事件
    d1.addEventListener("mouseover",function () {
        alert("------事件监听机制(#^.^#)")
    })
    d1.addEventListener("mouseover",function () {
        alert("事件监听机制-----O(∩_∩)O哈哈~")
    })
    d1.addEventListener("mouseout",function () {
        alert("(*^▽^*)事件监听机制(*^▽^*)")
    })

</script>

</body>
</html>

事件传递有两种方式【useCapture参数】：冒泡与捕获。

  • 事件传递定义了元素事件触发的顺序。 如果你将 p 元素插入到 div元素中，用户点击p 元素, 哪个元素的 “click” 事件先被触发呢？
  • 在 *冒泡 *中，内部元素的事件会先被触发，然后再触发外部元素，即：p 元素的点击事件先触发，然后会触发 div 元素的点击事件。
  • 在 *捕获 *中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即：div 元素的点击事件先触发 ，然后再触发 p元素的点击事件。
  • addEventListener() 方法可以指定 “useCapture” 参数来设置传递类型：默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>冒泡和捕获</title>
    <style type="text/css">
        #d1{ width: 200px; height: 100px;background-color: red}
        #p{ width: 50px; height: 50px;background-color: green}
    </style>

</head>
<body>
<div id="d1">
      <p id="p"></p>
</div>

<script type="text/javascript">
    var div = document.getElementById("d1");
    var p = document.getElementById("p");
    //默认值是false即冒泡传递
    div.addEventListener("mouseover",function () {
            alert("div event listener");
    })
    p.addEventListener("mouseover",function () {
        alert("p event listener");
    })

</script>

</body>
</html>

true的触发顺序总是在false之前

如果多个均为true，则外层的触发优先于内层

如果多个均为false，则内层的触发优先于外层

ps：删除事件 元素对象.removeEventListener(被删除事件的名称，被删除事件的实现函数)

操作元素

如果需要向HTML DOM添加新元素，你首先必须创建该元素（元素节点），然后向一个已存在的元素追加该元素

创建元素： createElement（） 追加元素 appendChild 删除元素 removeChild（）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作元素</title>
    <script type="text/javascript">
        window.onload = function () {
            //通过JS创建HTML标签添加到页面页面
            var divObj = document.createElement("div"); //标签
            var textNodeObj = document.createTextNode("大宝来了！！！");//添加文本对象
            //将内容追加到标签中
            divObj.appendChild(textNodeObj); //<div>大宝来了！！！</div>

            //不用上面文本的操作还可以这样写
            //divObj.innerHTML =""
            //添加标签到body中
            document.body.appendChild(divObj)


        }
    </script>
</head>
<body>
    <div id="div1">
        <p id="p1">大宝走了。。。。。o(╥﹏╥)o</p>
        <p id = "p2">大宝又来了....... 还是o(╥﹏╥)o</p>
    </div>
<script type="text/javascript">
    var elementById = document.getElementById("div1");//父标签
    var elementById1 = document.getElementById("p2");//子标签
    elementById.removeChild(elementById1)
</script>


</body>
</html>
Doub1eOne
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网页前端设计-作业三(JavaScript)
qq_61727355的博客
08-20 3118
1 .普通（2分）如何使用JavaScript对浮点数进行四舍五入获取最接近的整数值？使用Math.round()方法。2 .普通（2分）如何创建与调用自定义名称的JavaScript函数？使用关键词function来创建自定义函数，例如： function welcome(){ alert("Welcome to JavaScript World"); } 函数可以通过使用函数名称的方法进行调用，例如welcome()。3 .普通（2分）请分别说出下列内容中变量x运算结果。
C41-javascript-Review
04-23
在“C41-javascript-Review”这个主题中，我们可以预期包含以下JavaScript相关的重要知识点： 1. **基础语法**：包括变量声明（var、let、const）、数据类型（number、string、boolean、null、undefined、object、...
JavaScript面试题41-50
Ashy- 在这里成长
02-06 1518
JavaScript基础面试题21-30 每日坚持学10道题 41. 数据类型 [单选题] 以下 Js 程序的输出是什么（ ） <SCRIPT LANGUAGE="" JavaScript> var a = "undefined"; var b = "false"; var c = ""; function assert(aVar) { if (aVar) alert(tr
JavaScript-41：if else if 多分支语句
臧小川的博客
09-21 2013
// 1.多分支语句 就是利用多个条件来选择不同的语句执行 得到不同的结果 多选1的过程 // 2.if else if 语句是多分支语句 // 3.语法规范 if (条件表达式1) { // 语句1 } else if (条件表达式2) { // 语句2 } else if (条件表达式3) { // 语句3 } else { // 最后的语句 } // 4.执行思路 // 如果条件表达式1 满足就实行语句1 执行完毕后 退出整个if 分支语句 // 如果条件表达式1不满足 判断条件表达式
深入浅出JavaScript-老杜JavaScript基础教程全套完整版+老杨JS应用篇
不要回答的博客
04-16 2161
p1/53 javascript概述 p2/53 HTML中嵌入javascript的第一种方式 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML中嵌入javascript的第一种方式</title> </head> <body> <!-- 1、实现功能：点击按钮，弹出消息框 2、JS
JavaScript
热门推荐
余杯冷饮的博客
04-05 7万+
定义方式一return x;} }一旦执行到return代表函数结束，返回结果！如果没有执行return，函数执行完也会返回结果，结果就是undefined定义方式二return x;} }function(x){…}这是一个匿名函数，但是可以把结果赋值给abs，通过abs就可以调用函数！调用函数参数问题：JavaScript可以传任意个参数，也可以不传参数假如不存在参数，如何避免？
2021-最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)---JavaScript篇
m0_59529616的博客
08-03 6981
★★ 介绍一下JS的内置类型有哪些？ ★★★★ 介绍一下 typeof 区分类型的原理 ★★★ 介绍一下类型转换 ★★★★ 说说你对 JavaScript 的作用域的理解。什么是作用域链？ ★★ 解释下 let 和 const 的块级作用域 ★★★★ 说说你对执行上下文的理解 ★★★ 对闭包的看法，为什么要用闭包？说一下闭包的原理以及应用场景？闭包的 this 指向问题？ ★★★ 简述闭包的问题以及优化 ★★★ 如何确定 this 指向？改变 this 指向的方式有哪些？ ★★★ 介绍箭头
面试题-JavaScript
互联网小队
05-05 6861
文章目录1-get 请求传参长度的误区2-get 和 post 请求在缓存方面的区别3-说一下闭包4-说一下类的创建和继承5-如何解决异步回调地狱6-说说前端中的事件流7-如何让事件先冒泡后捕获8-说一下事件委托9-说一下图片的懒加载和预加载10-mouseover 和 mouseenter 的区别11-JS 的 new 操作符做了哪些事情12-改变函数内部 this 指针的指向函数（bind，apply，call 的区别）13-JS 的各种位置，比如 clientHeight,scrollHeight,o
javascript面试题--持续更新
jyl919221lc的博客
05-13 3546
事件代理（），又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能可以大量节省内存占用，减少事件注册，比如在table上代理所有td的click事件就非常棒可以实现当新增子对象时无需再次对其绑定。
JavaScript基础题41~50
qq_59125846的博客
12-13 6674
JavaScript过关测试41~50题稀缺版
JavaScript基础题31-40
qq_59125846的博客
11-16 2100
31.声明一个构造函数A，创建的对象包含方法a，其返回值等于构造函数的第一个参数。 例如：console.log(new A(3).a==3?1:0);输出:“3”。 注意不要在控制台输出任何内容。 function A(a) { this.a = a; } 32.声明一个构造函数A，继承构造函数B，覆盖基类的方法a，返回值为基类方法a的返回值的2倍。 例如： function B(){this.a=()=>3;} let a=new A; console.log(a.a()); 输出:“
项目--- 41
02-20
"项目--- 41"可能是一个具体的项目，利用JavaScript来实现特定的功能或应用。由于没有提供详细的项目描述，我们将探讨一些JavaScript的基础知识和常见应用，以便于理解其核心概念。 JavaScript的基础始于它的语法...
project-41
03-16
2. **语法结构**：JavaScript的语法与C++和Java相似，包括变量声明（var, let, const），条件语句（if...else，switch），循环（for, while），函数定义和调用等。 3. **DOM操作**："project-41-main"可能涉及到DOM...
ra-41
02-16
"ra-41"似乎指的是一个特定的过滤器或组件，可能在JavaScript环境中使用。由于提供的信息有限，我将基于“ra-41过滤器”这个主题，结合JavaScript的上下文，来阐述一些可能相关的JavaScript过滤和处理数据的知识点。...
sea-d41-angular
05-16
Angular是Google维护的一个开源JavaScript框架，用于构建单页应用程序（SPA）。该项目的名称"SEA-D41"可能是项目代号或者特定版本的标识，而"所有角度"可能指的是该项目在设计和实现时考虑了全方位的功能和用户体验...
牛客JS题（三十四）监听对象
最新发布
不起眼小菜菜的博客
08-10 337
注释很详细，直接上代码……
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
水w的博客
08-07 282
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
Ant-Design-Vue快速上手 指南+排坑（下）
Dingdangr的博客
08-10 407
确保你正确定义了校验规则。Ant Design Vue 3.x 及以上版本推荐使用Form.Item的rules属性来定义校验规则，这是一个数组，可以包含多个校验项。html复制代码label="用户名":rules="[{ required: true, message: '请输入用户名!' }, { min: 3, message: '用户名至少为3个字符!' }]"如果 Ant Design Vue 提供的校验规则不满足你的需求，你可以自定义校验规则。
【Vue3】图片未加载成功前占位
菜就多练
08-08 307
原生img标签可以通过自定义指令解决< template > < img class = " image_item-img " v-preload = " ' loading' " src = " https://xx " alt = " 加载失败 " /> < script setup > import {reactive } from 'vue' // 自定义图片占位 const vPreload = {
AngularJS2全方位中文教程：ng-book2解析
在Angular 2的开发过程中，首先你需要了解的是`TypeScript`，它是一种静态类型的编程语言，是JavaScript的超集，提供了诸如接口、类型注解和泛型等特性，增强了代码的可维护性和可预测性。在本教程中，`angular-cli`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值