JavaScript之DOM/事件/面向对象/内置对象/BOM

最新推荐文章于 2024-03-30 14:31:19 发布
最新推荐文章于 2024-03-30 14:31:19 发布
阅读量587 收藏
点赞数 2
文章标签： javascript js dom bom 脚本语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42795277/article/details/108560454
版权

JavaScript

  • JavaScript时一种客户端脚本语言，运行在客户端浏览器中，每一个浏览器都具备解析JavaScript的引擎
  • 脚本语言：不需要编译就可以被浏览器直接解析执行了
  • 核心功能就是增强用户和HTML页面的交互过程，让页面有一些动态效果，以此来增强用户的体验

JavaScript开发环境

Node.js:JavaScript运行环境
VSCode:编写前端技术的开发工具
下载地址：https://download.csdn.net/download/qq_42795277/12839420

组成部分

  • ECMAScript:客户端脚本语言标准统一了所有客户端脚本语言的编码方式
  • DOM
  • BOM

和HTML结合方式

  • 内部引入：<script></script>
  • 外部引入方式:<script src=“文件路径”></script>

js文件

document.getElementById("but").onclick = function(){
    alert("你点击了我.....")
}

html中引入外部js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button id="but">点我</button>
</body>

<!--JavaScript内部引入方式-->
<!--<script>
    document.getElementById("but").onclick = function (){
        alert("你点击了我")
    }
</script>-->

<!--外部引入方式-->
<script src="../js/demo1.js"></script>
</html>

JavaScript基本语法

输入和输出语句
方法说明
prompt(“提示内容”)输入框
alert(“提示内容”)弹出警告框
console.log(“显示内容”)控制台输出
document.write(“显示内容”)页面内容输入出
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>输入输出语句</title>
</head>
<body>
    <script>
        //prompt("请输入数据！！！");//提示输入框

        //alert("我是警告信息");//弹出警告框

        //console.log("控制台显示的信息");//控制台输出

        document.write("你好 <br/>");

        document.write("JavaScript");  //页面内容显示
    </script>
</body>
</html>
变量和常量

JavaScript属于弱类型语言，定义变量时不区分具体的数据类型

定义说明
let 变量名=值定义局部变量
变量名 = 值定义全局变量
const 常量名定义常量
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>常量和变量</title>
</head>
<body>
    <script>
    
    //局部变量
    let name = "小明";
    let age = 12;

    document.write(name + " " +age + "<br/>")


    //成员变量
    {
        let i1 = 100;
         i2 = 200;
    }
    //document.write(i1);//浏览器不会显示，控制提查看因为i1是局部变量，所有会报错
    document.write(i2 + "<br/>");


    //常量
    const PI = 3.14159;
    document.write(PI);

    //PI = 3.14;//因为PI是常量，所以会报错
    //document.write(PI);
    </script>
</body>
</html>
原始数据类型
数据类型说明
boolean布尔类型，true或false
null声明null值的特殊关键字
undefined代表变量未定义
number整数或浮点数
string字符串
bigint大整数，例如：let num = 10n
  • typeof()方法：用于判断变量的数据类型
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>typeOf方法</title>
</head>
<body>
    <script>
        let l1 = true ;
        document.write(typeof(l1) + "<br/>")//boolean

        let l2 = null;
        document.write(typeof(l2)+ "<br/>");//object  js原始的一个错误

        let l3;
        document.write(typeof(l3)+ "<br/>");//undefined

        let l4 = 12;
        document.write(typeof(l4)+ "<br/>");//number

        let l5 = "你好";
        document.write(typeof(l5)+ "<br/>");//string

        let l = 100n;
        document.write(typeof(l));//bigint 


    </script>
</body>
</html>
算数元素符
运算符说明
+加法运算
-减法运算
*乘法运算
/除法运算
%取余数
++自增
- -自减
赋值运算符
运算符说明
=将等号右边的值赋值给等号左边的变量
+=相加后赋值
-=相减后赋值
*=相乘后赋值
/=相除后赋值
%=取余后赋值
比较运算符
运算符说明
==判断值是否相等
===判断数据类型和值是否相等
>大于
>=大于等于
<小于
<=小于等于
!=不等于
逻辑运算符
运算符说明
&&逻辑与，并且的功能
| |逻辑或，或者的功能
!取反
三元运算符
  • 格式：(比较表达式)?表达式1:表达式2；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        let i1 = 20;
        let i2 = "20";

        document.write((i2 * 10) + "<br/>");//数字字符串类型在参与运算时会自动类型转换为数字类型

        document.write((i1 == i2 )+ "<br/>");// == 只会比较值是否相等
        document.write((i1 === i2 )+ "<br/>");// === 会先比较数据类型是否相等，如果相等再比较值是否相等

        document.write((i1 === i2) ? true : false);//三元运算符
    </script>
</body>
</html>
流程控制和循环语句
  • if语句
  • switch语句
  • for循环
  • while循环
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>判断语句和循环语句</title>
</head>
<body>
    <script>
        let i = 100;
        if(i>=60 && i <= 100){//if判断语句
            document.write("成绩合格")
        }else if(i>=0 && i<60){
            document.write("成绩不合格")
        }else{
            document.write("输入有误")
        }

        document.write("<br/>");

        switch(i){//switch判断语句
            case 100:
            document.write("100分");
            break;

            case 0:
            document.write("零分");
            break;

            default:
            document.write("输入有误");
            break;
        }

        document.write("<br/>");


        for(let i = 0;i <= 10;i++){//for循环
            document.write(i + "<br/>")
        }

        document.write("<br/>");
        document.write("<br/>");

        let i1=1;
        while(i1 < 10){//while循环
            document.write(i1 + "<br/>");
            i1++;
        }
    </script>
</body>
</html>
数组

JavaScript数组的使用和Java中的数组基本一致，但是JavaScript中的数组更加灵活，数据类型和长度都没有限制

  • 格式：let 数组名=[元素1，元素2，…]
  • 数组长度：数组名.length
  • 数组高级运算符：…
    1.数组复制
    2.合并数组
    3.字符串转数组
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数组</title>
</head>
<body>
    <script>
        let arr1 = [1,2,3,4,5];
        arr1[5] = 6; //JavaScript的数组长度和类型是没有限制的

        for(let i=0;i<arr1.length;i++){
            document.write(arr1[i]+"<br/>");
        }

        document.write("<br/>");

        //数组高级运算符
        let arr2 = [...arr1];//将arr1数组的数据复制到arr2数组
        for(let i=0;i<arr2.length;i++){
            document.write(arr2[i]+"<br/>");
        }
        
        document.write("<br/>");document.write("<br/>");

        let arr3 = [1,2,3];
        let arr4 = [4,5,6];
        let arr5 = [...arr3,...arr4];//合并数组，将arr3数组和arr4数组的数据合并到arr5这个数组的数据

        for(let i=0;i<arr5.length;i++){
            document.write(arr5[i]+"<br/>");
        }

        document.write("<br/>");document.write("<br/>");

        let str = "abcdefg";
        let arr6 = [...str];//将字符串转成数组

        for(let i=0;i<arr6.length;i++){
            document.write(arr6 [i]+"<br/>");
        }

    </script>
</body>
</html>
函数

函数类似于Java中的方法，可以将一些代码进行抽取，达到复用的效果

定义格式

function 方法名（参数列表）{
	方法体；
	return 返回值；
}
  • 可变参数
fucntion 方法名（... 参数名）{
	方法体；
	return 返回值；
}
  • 匿名函数
funciton (参数列表){
	方法体；
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>函数</title>
</head>
<body>
   <script>

       function fun1() {//无参函数
           document .write("fun1方法执行了.....");
       }

       fun1();//调用方法

       document.write("<br/>");

       function fun2(num1,num2){//计算两个数据的和
           return  num1  + num2;
       }

       let sum = fun2(12,10);
       document.write(sum);

       document.write("<br/>");

       function func3(... nums){//可变参数，计算多个参数的和
            let sum = 0;
            for(let i = 0;i<nums.length;i++){
                sum += nums[i];
            }

            return sum;
       }

       let sum1 = func3(10,10,30);
       document.write(sum1);

       document.write("<br/>");

       let num = function(){//匿名函数
           document.write("匿名函数执行了...");
       }

       num();
       
   </script> 
</body>
</html>

DOM

  • DOM(Document Object Model):文档对象模型

  • 将HTML文档个各个组成部分封装为对象，借助这些对象，可以对HTML文档进行增删改查的动态操作

  • Document:文档对象

  • Element:元素对象

  • Attribute:属性对象

  • Text:文本对象

Element元素的操作

获取Element元素对象
方法名说明
getElementById(id属性值)根据id获取一个元素
getElenentsByTagName(标签名称)根据标签名称获取多个元素
getElementsByName(name属性值)根据name属性获取多个元素
getElementsByClassName(class属性值)根据class属性获取多个元素
字元素对象.parentElement属性获取当前元素的父元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>获取元素</title>
</head>
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div class = "div3Class">div3</div>
    <input type="text" name="inp"><br/> 

    <script>
        let element1 = document.getElementById("div1");//根据元素id获取元素对象
        document.write(element1 + "<br/>");


        let element2 = document.getElementsByTagName("div");//根据标签获取元素对象
        document.write(element2.length + "<br/>");


        let element3 = document.getElementsByClassName("div3Class");//根据标签class属性获取元素对象
        document.write(element3.length + "<br/>");

        let element4 = document.getElementsByName("inp");//根据标签那么属性获取元素对象
        document.write(element4.length +  "<br/>")


        let parentElement = document.getElementById("div1").parentElement;//获取当前元素的父元素
        document.write(parentElement);
    </script>
</body>
</html>
Element元素的增删改操作
方法名说明
createElement(标签名)创建一个新元素
appendChild(子元素)将指定的子元素添加到父元素中
removeChile(子元素)用父元素删除指定的子元素
replaceChild(新元素，旧元素)用新的元素替换子元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>元素的增删改</title>
</head>
<body>
    <select id="selectId">
        <option>请选择</option>
        <option>上海</option>
        <option>北京</option>
    </select>

    <script>
        let option = document.createElement("option");//创建元素
        option.innerText = "广州";//添加元素文本内容

        let select = document.getElementById("selectId");//获取父元素对象

        select.appendChild(option);//通过父元素对象添加子元素

        //select.removeChild(option);//通过父元素对象移除子元素

        let option1 = document.createElement("option");//创建新元素
        option1.innerText = "深圳";
        
        select.replaceChild(option1,option);//通过父元素对象将option旧元素替换为option1新元素的数据
    </script>
</body>
</html>

Attribute属性的操作

方法名说明
setAttribute(属性名，属性值)设置属性
getAttribute(属性名)根据属性名获取属性值
removeAttribute(属性名)根据属性名移除指定的属性
style属性为元素添加样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>属性的操作</title>
</head>
<body>
    <style>
        .aColor{
            color: rgb(23, 44, 230);
        }
    </style>

    <a>我是超链接，点我啊..</a>


    <script>
        let a = document.getElementsByTagName("a")[0];//获取到要操作的元素对象

        a.setAttribute("href","https://www.baidu.com");//通过元素对象添加属性

        document.write("<br/>");

        let href = a.getAttribute("href");//获取元素属性
        document.write(href)

       // a.removeAttribute("href");//删除元素属性

       // a.style.color = "red";//style属性添加样式

       a.className = "aColor";//className属性添加指定样式
    </script>
</body>
</html>

Text文本的操作

方法名说明
innerText添加文本内容，不解析标签
innerHTML添加文本内容，解析标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文本操作</title>
</head>
<body>
    <div></div>
    <div></div>
    <script>
        let div = document.getElementsByTagName("div")[0];
        div.innerText = "<a href=#>点我啊</a>";//添加文本内容，不解析标签

        let div1 = document.getElementsByTagName("div")[1];
        div1.innerHTML = "<a href='https://www.baidu.com'>点我啊</a>";//添加文本内容，并解析标签
        
    </script>
</body>
</html>

事件

事件指的是当某些组件执行某些操作后，会触发某些代码的执行

事件名说明
onload某个页面或图像被完成加载
onsubmit当表单提交时触发该事件
onclick鼠标单击事件
ondblclick鼠标双击事件
onblur元素失去焦点
onfocus元素获得焦点
onchange用户改变域的内容
onkeydown某个键盘的键被按下
onkeypress某个键盘的键被按下或被按住
onkeyup某个键盘的键被松开
onmousedown某个鼠标按键被按下
onmouseup某个鼠标按键被松开
onmouseover鼠标被移到某个元素之上
onmouseout鼠标从某个元素移开

绑定事件

  • 通过标签中的事件属性进行绑定：<button id=“but” οnclick=“执行的功能”></button>

  • 通过DOM元素属性绑定：document.getElementById(“but”).onclick = 执行的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件操作1-通过标签中的事件属性进行绑定</title>
</head>
<body>
    <img id="imgId" src="/1.jpg" style="width: 500px ; height:500px"> <br/>

    <button id="up" onclick="up()">上一张</button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button id="down" onclick="down()">下一张</button>
    
    <script>
         img = document.getElementById("imgId");//获取到img元素对象       

        function up(){//点击上一张按钮触发这个方法
            img.setAttribute("src","/1.jpg");
        }

        function down(){//点击下一张是调用这个方法
            img.setAttribute("src","/2.jpg");
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件操作2-通过DOM元素属性绑定</title>
</head>
<body>
    <img id="imgId" src="/1.jpg" style="width: 500px ; height:500px"> <br/>

    <button id="up">上一张</button> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button id="down">下一张</button>

    <script>
        function up(){
            let img = document.getElementById("imgId");
            img.setAttribute("src","/1.jpg");
        }

        function down(){
            let img = document.getElementById("imgId");
            img.setAttribute("src","/2.jpg");
        }

        document.getElementById("up").onclick = up;//点击上一张绑定单击事件
        document.getElementById("down").onclick = down;//点击下一张绑定单击事件
    </script>
</body>
</html>

类的定义和使用

  • 定义格式
class 类名{
	constructor(变量列表){
		变量赋值;
	}
	方法名(参数列表){
		方法体;
		return 返回值;
	}
}
  • 使用格式
let 对象名 = new 类名(实际变量值);
对象名.方法名();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javaScript的类的定义和使用</title>
</head>
<body>
    <script>
        class User{//类

            constructor(name,age){//构造方法
                this.name = name;
                this.age  = age;
            }

            //定义方法
            show(){
                document.write(this.name + " "+ this.age);
            }

            play(){
                document.write(this.name + "在玩游戏")
            }
            
        }

        let user = new User("小明","12");//创建对象
        user.show();//调用方法
        document.write("<br/>");
        user.play();
    </script>
</body>
</html>

字面量定义类和使用

定义格式

let 对象名 = {
	变量名：变量值，
	变量名：变量值，
	...
	方法名 : function(){
		方法体;
		return 返回值;
	},
	.....
}

使用格式

对象名.变量名
对象名.方法名();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>字面量定义类和使用</title>
</head>
<body>
    <script>
        let user = {
            name:"小明",
            age:12,
            hobby:["看书","跑步","打球"],
            

            //定义方法
            show:function(){
                document.write(user.name+","+user.age+","+user.hobby[0]+","+user.hobby[1]+","+user.hobby[2]);
            },

            play(name){
                this.name = name;
                document.write(this.name + "在玩游戏");
            }
        };

        user.show();
        document.write("<br/>");
        user.play("小溪");

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

继承

  • 就是让类与类之间产生子父类关系，子类可以使用父类有权限的成员，关键字：extends，顶级父类：Object
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>继承</title>
</head>
<body>
    <script>
        //定父类
        class Person{
            constructor(name,age){
                this.name = name;
                this.age =age;
            }

            eat(){
                document.write("父类的eat方法执行了");
            }
        }

        //定义子类继承父类
        class User extends Person{
            constructor(name,age,play){
                super(name,age);//name和age属性是父类就有的,调用父类构造方法即可
                this.play = play;//玩才是子类特有
            }
            
            show(){
                document.write(this.name + " " +this.age+ " " +this.play);
            }
        }

        let user = new User("小小",12,"王者农药");
        user.eat();//调用父类的方法
        document.write("<br/>");
        user.show();//调用子类的方法
    </script>
</body>
</html>

内置对象

内置对象是JavaScript提供的带有属性和方法的特殊数据类型

Number

方法名说明
parseFloat()将传入的字符浮点数转换为浮点数
parseInt()将传入额字符整数转换为整数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>内置对象Number</title>
</head>
<body>
    <script>
        let str1="3.14159";
        document.write(Number.parseFloat(str1));//将字符串数字转换为浮点类型

        document.write("<br/>");

        let str2 = "10";
        document.write(Number.parseInt(str2) + 10);//将字符串转换为整数

        document.write("<br/>");

        let str3="3234fdjal3433";
        document.write(Number.parseInt(str3));//从数字开始转换，直到不是数字为止
    </script>
</body>
</html>

Math

方法名说明
ceil(x)向上取整
floor(x)向下取整
roud(x)四舍五入
random()随机数，返回的是0.0到1.0之间的范围（含头不含尾）
pow(x,y)幂运算x的y次方
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>内置对象Math</title>
</head>
<body>
  <script>
      let i1 = 3.14;

      document.write(Math.ceil(i1));//向上取整
      document.write("<br/>");
      document.write(Math.floor(i1));//向下取整

      document.write("<br/>");

      let i2 = 1.5;
      document.write(Math.round(i2));//四舍五入

      document.write("<br/>");

      document.write(Math.random());//随机数，返回的是0.0-1.0之间的范围（含头不含尾）

      document.write("<br/>");

      document.write(Math.pow(2,3));//幂运算，2的3次方
    

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

Date

构造方法说明
Date()根据当前时间创建对象
Date(value)根据指定的毫秒值创建对象
Date(year,month[day,hours,minutes,seconds,milliseconds])根据指定的字段创建对象（月份是0-11）
Date成员方法
方法名说明
getFullYear()获取年份
getMonth()获取月份
getDate()获得天数
getHours()获取小时
getMinutes()获取分钟
getSeconds()获取秒数
getTime()返回据1970年1月1日至今的毫秒数
toLocaleString()返回本地时间格式的字符串
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>内置对象Date</title>
</head>
<body>
    <script>
        let data1 = new Date();//根据当前时间创建对象
        document.write(data1);

        document.write("<br/>");

        let data2 = new Date(10000);//根据指定的毫秒值创建对象
        document.write(data2);

        document.write("<br/>");

        let data3 = new Date(2025,9,1,10,10,10);//月份是从0-11，所以这里我指定为2025年10月1日10点10分10秒
        document.write(data3);

        document.write("<br/>");

        document.write(new Date().getFullYear());//获取年份
        document.write("<br/>");

        document.write(new Date().getMonth()+1);//获取月份，注意：月份是0-11，所以需要加一
        document.write("<br/>");

        document.write(new Date().getDate());//获取天数
        document.write("<br/>");


        document.write(new Date().getHours());//获取小时
        document.write("<br/>");


        document.write(new Date().getMinutes());//获取分钟
        document.write("<br/>");


        document.write(new Date().getSeconds());//获取秒数
        document.write("<br/>");


        document.write(new Date().getTime());//获取从1970年到这个时间的毫秒数
        document.write("<br/>");

        document.write(new Date().toLocaleString());//返回本地日期格式的字符串
        document.write("<br/>");

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

String

构造方法说明
String(value)根据指定字符串创建对象
let s = “字符串”直接赋值
String成员方法
方法名说明
length属性获取字符串长度
charAt(index)获取指定索引处的字符
indexOf(value)获取指定字符串出现的索引位置，找不到为-1
substring(start,end)根据指定索引范围截取字符串（含头不含尾）
split(value)根据指定规则切割字符串，返回数组
replace(old,new)使用新字符串替换老字符串
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>内置对象String</title>
</head>
<body>
    <script>
        let str1 = new String("abcdefg");//根据指定字符串创建对象
        document.write(str1);
        document.write("<br/>");

        let str2 = "hijklmn";//直接赋值
        document.write(str2);
        document.write("<br/>");

        document.write(str1.length);//获取字符串长度
        document.write("<br/>");

        document.write(str1.charAt(1));//获取索引为1的字符
        document.write("<br/>");

        document.write(str1.indexOf('c'));//获取c字符的索引的位置
        document.write("<br/>");

        document.write(str1.substr(0,2));//截取部分字符串
        document.write("<br/>");
        document.write("<br/>");

        let str3 = "小明,12,玩篮球";
        let arr = str3.split(",");//以逗号进行切割把数据保存到数组中
        for(let i=0;i<arr.length;i++){
            document.write(arr[i]+"<br/>");
        }
        

        let str4 = "你真的太TMD厉害了";
        document.write(str4.replace("TMD","***"));//替换
        document.write("<br/>");
    </script>
</body>
</html>

RegExp正则表达式

  • 正则表达式是一种对字符串进行匹配的规则
构造方法说明
RegExp(规则)根据指定规则创建对象
let reg = /^ 规则$/直接赋值
RegExp成员方法
方法名说明
test(匹配的字符串)根据指定规则验证字符串是否符合
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>内置对象RegExp</title>
</head>
<body>
    <script>
        let regExp1 = new RegExp(/^1[3456789]\d{9}$/);//手机号正则表达式规则
        let regExp2 = /^1[3456789]\d{9}$/;
        let phoneNum = 19985348477;

        regExp2.test(phoneNum)
        document.write(regExp2.test(phoneNum))

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

Array

方法名说明
push(元素)添加元素到数组的末尾
pop()删除数组末尾的元素
shift()删除数组最前面的元素
includes(元素)判断数组是否包含给定的值
reverse()反转数组中的元素
sort()对数组元素进行排序
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>内置对象Array</title>
</head>
<body>
    <script>
        let arr1 = [1,2,3,4,5];

        arr1.push(6);//在数组最后添加元素
        document.write(arr1);
        document.write("<br/>");

        arr1.pop();//删除数组最后面的元素
        document.write(arr1)
        document.write("<br/>");

        arr1.shift();//删除数组最前面的元素
        document.write(arr1);
        document.write("<br/>");

        document.write(arr1.includes(3));//判断数组中是否包含指定的元素
        document.write("<br/>");

        document.write(arr1.sort());//对数组中的数据进行排序
        document.write("<br/>");

        document.write(arr1.reverse())//反转数组中的元素
        document.write("<br/>");
    </script>
</body>
</html>

Set

  • JavaScript中的Set集合，元素唯一，存取顺序一致
构造方法说明
set()创建Set集合对象
Set成员方法
方法名说明
add(元素)向集合中添加元素
size属性获取集合长度
keys()获取迭代器对象
delete(元素)删除指定元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>内置对象Set</title>
</head>
<body>
    <script>
        let set = new Set();
        set.add("a");//添加元素
        set.add("b");
        set.add("c");

        document.write(set.size);//查看长度
        document.write("<br/>");document.write("<br/>");

        let keys = set.keys();//获取迭代器对象
        for(let i =0;i<set.size;i++){
            document.write(keys.next().value+"<br/>")
        } 
        document.write("<br/>");
        document.write("<br/>");

        set.delete("c");//删除指定的元素
        
        let keys1 = set.keys();//获取迭代器对象
        for(let i = 0;i<set.size;i++){
            document.write(keys1.next().value + "<br/>")
        }
        document.write("<br/>");
    </script>
</body>
</html>

Map

  • JavaScript中的Map集合，key唯一，存取顺序一致
构造方法说明
Map()创建Map集合对象
Map成员方法
方法名说明
set(key,value)向集合中添加元素
size属性获取集合长度
get(key)根据key获取value
entries()获取迭代器对象
delete(key)根据key删除键值对
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>内置对象Map</title>
</head>
<body>
    <script>
        let map = new Map();
        map.set("key1","小明");//添加元素
        map.set("key2","小小");
        map.set("key3","小李");

        document.write(map.size);//查询长度
        document.write("<br/>");

        document.write(map.get("key2"));//根据键获取值
        document.write("<br/>");document.write("<br/>");

        let entries = map.entries();//获取迭代器对象
        for(let i=0;i<map.size;i++){
            document.write(entries.next().value + "<br/>");
        }
        document.write("<br/>");
        document.write("<br/>");
        
        map.delete("key3");//根据键删除值
        let entries1 = map.entries();
        for(let i=0;i<map.size;i++){
            document.write(entries1.next().value + "<br/>")
        }
        document.write("<br/>");
    </script>
</body>
</html>

JSON

结果化数据

  • JSON(JavaScript Object Notation):是一种轻量级的数据交换格式
  • 它是基于ECMAScript规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据
方法名说明
stringify(对象)将指定的对象转换尾json格式字符串
parse(字符串)将指定json格式字符串解析尾对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>内置对象JSON</title>
</head>
<body>
    <script>
        let user = {
            name:"小明",
            age:12,
            hobby:["打篮球","跑步"]
        }
        
        let json = JSON.stringify(user)//将对象转换为json字符串
        document.write(json);

        document.write("<br/>");
        
        let u = JSON.parse(json);
        document.write(u.name+ " "+u.age+ " "+u.hobby[0]+ " "+u.hobby[1]);
    </script>
</body>
</html>

BOM

  • BOM(Browser Object Model) : 浏览器对象模型

  • 将浏览器的各个组成部分封装成不同的对象，方便我们进行操作

  • Window:窗口对象

  • Location:地址栏对象

  • Navigator:浏览器对象

  • History:当前窗口历史记录对象

  • Screen:显示器屏幕对象

Window窗口对象

方法名说明
唯一标识 setTimeout(功能，毫秒值)设置一次性定时器
clearTimeout(标识)取消一次性定时器
唯一标识 setInterval(功能，毫秒值)设置循环定时器
clearInterval(标识)取消循环定时器
window.onload加载事件，在页面加载完毕后触发此事件功能
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Window窗口对象</title>
</head>
<script>
        function func1(){
            document.write("func1()方法执行了....")
        }
        let l1 = setTimeout("func1()",2000);//设置定时器，两秒后调用fun（）方法
        clearTimeout(l1);//取消定时器


        function func2(){
            document.write("func2()方法执行了.. "+"<br/>")
        }

        let l2 = setInterval("func2()",2000);//设置循环定时器，每隔两秒执行一次
        clearInterval(l2);//取消循环定时器

        /*
        let div = document.getElementsByTagName("div")[0];
        alert(div);//程序一般都是从上到下执行的，因为还没有执行到div标签，所以这里是获取不到div元素对象了，我们可以让文档加载完之后再去获取div元素对象就可以了
        */

        //解决
        window.onload = function (){
            let div = document.getElementsByTagName("div")[0];
            alert(div);
        }
    </script>
<body>
    <div>ddd</div>
</body>
    
</html>

Location地址栏对象

方法名说明
location.href重新设置url，让浏览器读取并显示新的url内容
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>location地址栏对象</title>
</head>
<body>
    请稍等！<span id="spanId">5</span>秒后自动跳转到百度首页...
</body>
    <script>
        let num = 5;

        function func(){
            
            if(num <= 0){//倒计时结束，自动跳转到百度首页

                location.href="https://www.baidu.com";

            }else{

                num --;
                let span = document.getElementById("spanId");
                span.innerText = num;//设置倒计时的秒数

            }
        }

        setInterval("func()",1000);//每个一秒调用一次方法
    </script>
</html>

显示图片

要求：3秒后显示图片，然后显示3面后关闭图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <img src="/1.jpg" id = "imgId" style="display: none"> <!--display属性设置图片默认不显示 -->
</body>

    <script>

        function show(){//设置显示图片的方法
            let img = document.getElementById("imgId");//获取img元素对象
            img.style.display = "block";
        }

        function notShow(){//设置不显示图片的方法
            let img = document.getElementById("imgId");//获取img元素对象
            img.style.display = "none";
        }

        setTimeout("show()",3000);//设置定时器，3秒后调用显示图片的方法进行显示图片
        setTimeout("notShow()",6000);//等待图片显示3秒后，那就是到6秒时调用关闭图片的方法

        
    </script>
</html>

动态生成6位随机数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>生成6位随机数</title>
</head>
<body>
    <span id = "show">000000</span>
    <input id = "but" type="button" value="生成随机数"/>
</body>
    <script>
        

        function show(){//生成随机数方法
            let num1 = Math.random()*900000 + 100000;//获取随机数
            let num2 = Math.floor(num1);//向下取整
            document.getElementById("show").innerText = num2;

             time = setTimeout("show()",6);//每个6毫秒调用自己一次方法
        }

        
        window.onload =  function button(){
            document.getElementById("but").onclick = function(){//给按钮绑定单击事件
                show();//调用生成随机数方法
                setTimeout("clearTimeout(time)",1000);//一秒后停止生成随机数的定时
            }
        }
       
        
    </script>
</html>

封装

  • 封装：将复杂的操作进行封装隐藏，对外提供更加简单的操作

写好封装的js

function getById(id){
    return document.getElementById(id);
}

function getByName(name){
    return document.getElementsByName(name);
}

引入js，然后调用自己封装的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>封装</title>
</head>
<body>
    <div id="div1"></div>
    <div name="divName"></div>
</body>
    <script src="my.js"></script><!-- 引入自己写好的封装js-->
    <script>
        alert(getById("div1"));
        alert(getByName("divName"));
    </script>
</html>
DW-CHEN
关注
JavaScript 高级-面向对象/正则
qq_43198747的博客
01-20 425
本博客目标:- 理解面向对象开发思想 - 掌握 JavaScript 面向对象开发相关模式 - 掌握在 JavaScript 中使用正则表达式 基本概念复习   JavaScript 是什么 解析执行：轻量级解释型的，或是 JIT 编译型的程序设计语言 语言特点：动态，头等函数 (First-class Function) 又称函数是 JavaScript 中...
javascript的本地对象、内置对象、宿主对象
sweetllh的博客
06-29 559
JavaScript对象系统 1. 本地对象 ECMA-262把本地对象（native object）定义为“独立于宿主环境的ECMAScript实现提供的对象”。 何谓宿主环境？ “宿主”，生物学上，一般是指寄生的生物体选择的寄生体，如：火影里的“白”（哈哈哈）。此处的宿主环境，简单来说就是用户的机器环境，包括操作系统和浏览器。 本地对象包括如下内容：O
利用面向对象管理者模式思想结合jquery操作DOM树制作的植物大战僵尸
08-10
利用面向对象 管理者模式思想 结合jquery 操作DOM树制作的植物大战僵尸
DOM对象和内置对象（上）
顾林海
09-04 4412
前言 在第一篇博客《了解JavaScript》中已经介绍了DOM及DOM树里顶端对象window，还有它的一个子对象 document。接下来会接受它们的一些实用的对象和方法，如： 1、alert()、prompt()和confirm()与用户交互。 2、利用getElementById()选择页面元素。 3、使用innerHTML()访问HTML
js事件:面向对象
q7786802的博客
10-27 302
l什么是对象 l电视机工作原理？ l对象是一个整体，对外提供一些操作 l什么是面向对象 l使用对象时，只关注对象提供的功能，不关注其内部细节 l比如JQuery l面向对象是一种通用思想，并非只有编程中能用，任何事情都可以用 2、js中的面向对象 l面向对象编程(OOP)的特点 l抽象：抓住核心问题 l封装：不考虑内部实现，只考虑
JavaScript DOM 中的内置对象
ios0213的专栏
05-17 417
JavaScript中内置三周对象 1.用户自定义对象，如：var person=new Object(); 2.内建对象，如Date() ,Array(). 3.宿主对象，由浏览器提供的对象。 需要注意的地方，浏览器提供的内建对象首字母都是大写，在编写的时候需多加注意。 如：person =new Object();
DOM资料之内置对象
宅羽的博客
10-23 189
◆ 内置对象
深入理解JavaScript：对象、事件与网页交互
JavaScript是一种面向对象的语言，支持原型继承和构造函数。对象可以包含属性和方法，可以通过new关键字创建。内置对象如Array、Date、Math等提供了丰富的功能。系统函数如Math.random()、Array.push()等用于执行...
javascript面向对象编程
08-17
无论是传统的DOM操作，还是现代的框架如React、Vue、Angular，JavaScript的面向对象编程都是其核心部分。通过深入学习JavaScript的OOP，开发者可以编写出更加高效、易于维护的代码，提高开发效率和用户体验。
JavaScript基础：ECMAScript、DOM与BOM解析
ECMAScript包括了类型、运算符、流程控制、面向对象编程以及异常处理等方面的规定。这使得JavaScript代码可以在不同的环境中保持一致的执行。 DOM（Document Object Model）是另一个重要组成部分，它提供了一种结构...
JavaScript DOM
qq_65249767的博客
03-15 746
1.1 DOM概述 DOM： 文档对象模型，当网页文档加载到浏览器内存时，浏览器会为文档生成一个对应的文档对象， 同时会解析这个文档中的所有内容，所有的成分都是一个节点，每个节点都是一个对象。 DOM 是这样规定的： 整个文档是一个文档节点 每个 XML 标签是一个元素节点 包含在 XML 元素中的文本是文本节点 每一个 XML 属性是一个属性节点 注释属于注释节点 补充： XML文档： 可扩展标记语言， 这种文档以标签来描述数据的，而且可以自定
【面向JS--事件】
hfhan的博客
11-15 208
事件：event：浏览器自动触发的或用户手动触发的页面状态的改变 事件处理函数: 当事件发生时自动调用的函数 当希望在事件发生时，自动调用一个函数，都要在事件发生前，将函数绑定到事件属性上 如何绑定: 3种: 1、在html中绑定: <ANY on事件名="js语句" 比如: <button onclick="fun()" 问题: 不符合内容与行为分离的原则，不便于维护！
DOM对象和内置对象
strange_stv的博客
02-05 177
前端三剑客系列笔记 HTML CSS JavaScript 与用户交互与创建简单脚本 DOM对象和内置对象 文章目录前端三剑客系列笔记HTMLCSSJavaScript前言一、与用户交互二、根据id选择元素1.getElementById( )方法2.innerHTML属性总结 前言 这篇笔记会介绍一些对象以及简单的方法。 一、与用户交互 主要有alert（）、confirm（）、prompt（）这三种方法。 alert（） 跳出一个包含一些信息和一个“OK”按钮的模态对话框。 alert（“Thi
JS\_内置对象\_DOM
weixin_48006490的博客
08-24 255
JS\_内置对象\_DOM
JavaScript-DOM对象和内置对象
李美静 廊坊师范学院信息技术提高班十三期
04-25 334
DOM:浏览器每次加载和显示页面时，都在内存里创建页面及其全部元素的一个内部表示体系，也就是DOM，在DOM里，页面的元素具有一个逻辑化、层次化的结构，就像一个由父对象和子对象组成的树形结构。这些对象及其相互关系构成了Web页面及显示页面的浏览器的抽象模型。DOM对象和内置对象1、alert()：没有返回值，向用户弹出一个对话框。      confirm() ：对话框为用户提供了一个选择，可以...
DOM对象和内置对象（中）
热门推荐
顾林海
09-04 2万+
前言 在第一篇博客《了解JavaScript》中已经介绍了DOM及DOM树里顶端对象window，还有它的一个子对象 document。接下来会介绍它们的一些实用的对象和方法，如： 1、alert()、prompt()和confirm()与用户交互。 2、利用getElementById()选择页面元素。 3
【JavaScript】DOM对象和内置对象
玲珑骰子安红豆，入骨相思知不知
01-08 363
变量作用域 在函数里声明变量时，有一条最重要的原则需要了解： 函数内部声明的变量只存在于函数内部。 这种限制被称为变量的“作用域”。函数内部定义的变量称为“局部”变量，也就是属于函数这个“局部”。函数之外声明的变量称为“全局”变量。全局变量和局部变量可以使用相同的名称，但是仍然是不同变量！变量能够使用的范围称为变量的“作用域”，因此可以称一个变量具有“局部作用域”和“全局作用域”。 //...
JAVAScript面向对象和内置对象以及BOM
qq_35417353的博客
06-22 475
JAVAScript的定义类 自定义类 采用java中常用的 class 类名{ 方法（）}定义 <script> //常规定义类 class one{ //构造方法 constructor(number,name){ this.number=number; this.name=name; } //自定义方法1 eat(){ a
有趣且重要的JS知识合集（21）浏览器内置对象讲解之Dom篇
最新发布
qq_39404437的博客
03-30 938
新增或设置DOM的属性值：setAttribute()获取DOM的属性值：getAttibute()移除DOM的属性值（自定义和非自定义都可以移除）：removeAttibute()dateset:自定义属性写法规范：以用data-开头，方便识别哪些是自定义的属性方法：元素.dataset它是一个对象，可以获取所有以data-开头的自定义的属性获取单个属性，用元素.dataset.属性名设置元素属性，元素.dataset.属性名 = 数据。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值