当前位置： 首页 > news >正文

【Web前端|第二篇】JavaScript对象和事件

news 2025/9/25 14:09:10

目录

（四）JavaScript对象：

1、Array对象：

2、String对象：

3、自定义对象：

4、JSON对象：

5、BOM对象：

（1）Window对象：

（2）Location对象：

6、DOM对象：

（四）JavaScript对象：

1、Array对象：

1）语法

Array对象用来定义数组。常用语法格式有2种：

方式1：

var 变量名 = new Array(元素列表);

例如： var arr = new Array(1,2,3,4); //1,2,3,4 是存储在数组中的数据（元素）

方式2：

var 变量名 = [元素列表];

例如：var arr = [1,2,3,4]; //1,2,3,4 是存储在数组中的数据（元素）

案例展示：

<script>

        // 第一种数组定义格式

        var arr = new Array(1,2,3,4,5);

        console.log("arr[1]: " + arr[1]);

        // 第二种数组定义格式

        var arr2 = [10,9,8,7];

        console.log("arr2[1]: " + arr2[1]);

</script>

2）特点

与Java中不一样的是，JavaScript中数组相当于Java中的集合：

  • 数组长度是可以变化的
  • 数组中可以存储任意数据类型值（JavaScript是弱类型语言）

案例展示：

// 注意事项1：JS数组长度可变

arr[9] = 10;

console.log("arr[9]: " + arr[9]);

// 注意事项2：JS数组可以存放任意类型

arr[5] = "hello";

arr[6] = 3.14;

arr[7] = null;

console.log("----------------");

//遍历数组

for(let i = 0; i < arr.length; i++) {

        console.log("arr[" + i + "]: " + arr[i]);

}

3）属性方法

Array作为一个对象，那么对象是有属性和方法的，所以接下来我们介绍一下Array对象的属性和方法。

官方文档中提供了Array的很多属性和方法，但是我们只学习常用的属性和方法，如下图所示：

①索引取值与赋值：

arr[索引] = 值;

注意：如果该索引处未赋值，则返回undefined

②属性：

③方法：

  • push()函数

用于向数组的末尾添加元素，其中函数的参数就是需要添加的元素

示例如下代码：向数组的末尾添加3个元素 

//push: 添加元素到数组末尾arr.push('a','b');
  • splice()函数

用来删除数组中的元素，需要2个参数：

        参数1：表示从哪个索引位置开始删除

        参数2：表示删除元素的个数

如下代码表示：从索引2的位置开始删，删除2个元素 

//删除元素 从下标2开始删，删除3个元素arr.splice(2,3);console.log("----------------");for(let i = 0; i < arr.length; i++) {console.log("arr[" + i + "]: " + arr[i]);}
  • forEach()函数

这个函数的参数，需要传递一个函数，该函数接受一个参数，即遍历数组的元素值。、、

案例展示：

// 数组forEach方法案例// 1.常规形式// function会执行arry.length次// 每次执行arr[i]传递给参数aarr.forEach(function(a) {console.log(a);});//也可以写成下面形式// 2.形式2 参数传递函数名var outArrayElement = function(a) {console.log(a);}arr.forEach(outArrayElement);

完整案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initialscale=1.0"><title>08-Array对象</title>
</head>
<body>
</body>
<script>// 第一种数组定义格式var arr = new Array(1,2,3,4,5);console.log("arr[1]: " + arr[1]);// 第二种数组定义格式var arr2 = [10,9,8,7];console.log("arr2[1]: " + arr2[1]);// 注意事项1：JS数组长度可变arr[9] = 10;console.log("arr[9]: " + arr[9]);// 注意事项2：JS数组可以存放任意类型arr[5] = "hello";arr[6] = 3.14;arr[7] = null;// 遍历数组// console.log("----------------");// for(let i = 0; i < arr.length; i++) {// console.log("arr[" + i + "]: " + arr[i]);// }//往数组尾部添加元素arr.push('a','b');//删除元素 从下标2开始删，删除3个元素arr.splice(2,3);// console.log("----------------");// for(let i = 0; i < arr.length; i++) {// console.log("arr[" + i + "]: " + arr[i]);// }// 数组forEach方法案例// 1.常规形式// arr.forEach(function(a) {// console.log(a);// });// 2.形式2 参数传递函数名// var outArrayElement = function(a) {// console.log(a);// }// arr.forEach(outArrayElement);//3.简化形式arr.forEach(a => console.log(a));
</script>
</html>

2、String对象：

1）语法

String对象创建方式有2种：

方式1：

var 变量名 = new String("…");

例如：

var str = new String("Hello String");

方式2：

var 变量名 = "…";

例如：

var str = 'Hello String';

案例展示：

<script>//创建字符串对象var s1 = new String("hello");var s2 = "world";console.log(s1);console.log(s2);
</script
2）属性方法

String对象也提供了一些常用的属性和方法，如下表格所示：

属性：

用法：console.log(str.length);

方法：

  • charAt()函数

用于返回在指定索引位置的字符，函数参数为索引（从0开始）

eg：console.log(str.charAt(4));

  • indexOf()函数

用于检索指定内容在字符串中的索引位置的，返回值是索引，参数是指定的内容

eg：console.log(str.indexOf("lo"));

  • trim()函数

用于去除字符串两边的空格

eg：var s = str.trim();

        console.log(s.length);

  • substring()函数

用于截取字符串，有2个参数：

参数1：表示从那个索引位置开始截取。包含

参数2：表示到那个索引位置结束。不包含

eg：console.log(s.substring(0,5));// [0,5)

完整案例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initialscale=1.0"><title>09-String对象</title>
</head>
<body>
</body>
<script>var s1 = new String("hello");var s2 = "world";console.log(s1);console.log(s2);//对象.属性console.log("s2.length: " + s2.length);console.log("charAt(4): " + s2.charAt(4));console.log("rl位置: " + s2.indexOf("rl"));var s = " hello world ";console.log("最初: " + s.length);s = s.trim();console.log("after trim: " + s.length);//hello world [0,5)console.log(s.substring(0,5)); //hello
</script>
</html>

3、自定义对象：

格式：

var 对象名 = {
        属性名1: 属性值1,
        属性名2: 属性值2,
         ...
        函数名称: function(形参列表){
                函数体实现
        }
        ...
};

调用属性：

对象名.属性名

调用方法：

对象名.函数名()

案例展示：

<script>//自定义对象var user = {name: "Tom",age: 10,gender: "male",eat: function(){console.log("用膳~");}}console.log(user.name);user.eat();
<script>

4、JSON对象：

JSON：JavaScript Object Notation，JavaScript对象标记法。

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。它以简洁和易于阅读的方式表示结构化数据，并且易于解析和生成。JSON最初是为JavaScript语言而设计的，但现在已经成为一种通用的数据格式，被广泛应用于各种编程语言和平台。

1）JSON特点

1. 简洁性：语法简洁明了，易于理解和编写

2. 可读性：结构清晰，易于阅读和调试

3. 可扩展性：支持嵌套和复杂的数据结构，可以表示各种类型的数据

4. 平台无关性：JSON是一种通用的数据格式，可以在不同的编程语言和平台之间进行数据交换

2）JSON基本语法

JSON是通过JavaScript标记法书写的文本。其格式如下：

{

        "key":value,

        "key":value,

        "key":value

}

其中，key必须使用引号并且是双引号标记，value可以是任意(JS)数据类型。

数据类型：'string'，'number'，null，true，false， '{'，'['。

注意事项：

  • 数据在名称/值对中
  • 数据由逗号 , 分隔
  • 使用斜杆 \ 来转义字符
  • 大括号 {} 保存对象
  • 中括号 [] 保存数组，数组可以包含多个对象

注意：JSON字符串中key必须使用双引号修饰，value如果是字符串类似，也必须使用双引号修饰

3）JSON 取值

  • 数字（整数或浮点数） { "age":30 }
  • 字符串（在双引号中） { "name":"Bill" }
  • 逻辑值（true 或 false） { "isVip":true }
  • 数组（在中括号中）
    • 注意：数据由逗号分隔，多个键值对由逗号分隔{ "employees":[ "Bill", "Steve", "David" ] }
  • 对象（在大括号中）

{

        "employee":{

        "name":"Bill Gates",

        "age":62,

        "city":"Seattle"

        }

}

  • null { "middlename":null }

4）JSON应用场景

用来作为前后台交互的数据载体！

5）JSON转换

将JSON字符串转换成JSON对象

//json字符串 --> json对象

var obj = JSON.parse(jsonstr);

alert(obj.name);

JSON对象转换成JSON字符串

//json对象 --> json字符串

var jsonStr2 = JSON.stringify(obj);

alert(jsonStr2);

案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initialscale=1.0"><title>10-自定义对象</title>
</head>
<body>
</body>
<script>//自定义对象var user = {name: "Tom",age: 10,gender: "male",eat: function(){console.log("用膳~");}}console.log(user.name);user.eat();console.log("---------------------");// 定义json 对象var jsonObj = {"name": "tom","age": 21,"address": {"province": "shanxi","city": "taiyuan","street": "坞城中路"}};console.log(jsonObj.name);console.log(jsonObj.age);console.log(jsonObj.address);//定义JSON字符串var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';alert(jsonstr.name);//json字符串 --> json对象var obj = JSON.parse(jsonstr);alert(obj.name);//json对象 --> json字符串var jsonStr2 = JSON.stringify(obj);alert(jsonStr2);var jsonStr3 = JSON.stringify(jsonObj);console.log("jsonObj 字符串形式: " + jsonStr3)
</script>
</html>

5、BOM对象：

BOM的全称是Browser Object Model，翻译过来是浏览器对象模型。

JavaScript将浏览器的各个组成部分封装成了对象。我们要操作浏览器的某一部分，就可以通过指定的BOM对象去操作，借助其相关属性或者函数来完成。

例如：我们想要将浏览器的url地址改为 http://www.baidu.com ，就可以通过BOM中提供的 location对象 的 href属性 来完成。

代码： location.href = 'http://www.baidu.com';

BOM中提供了5个对象：

接下来只描述window对象和Location对象这两个

（1）Window对象：
window概述

        window对象指的是浏览器窗口对象，是JavaScript的全部对象，所以对于window对象，我们可以直接使用，并且对于window对象的方法和属性，我们可以省略window。例如：我们之前学习的 alert()函数 其实是属于window对象的，其完整的代码如下：

window.alert('hello');

window. 可以省略，简写为：

alert('hello');

所以对于window对象的属性和方法，我们都是采用简写的方式。

window属性和方法

window常用属性：

比如我们要使用location对象，可通过代码 window.location 或简写 location 即可使用！

window常用函数：

  • alert()函数：弹出警告框，函数的内容就是警告框的内容

<script>

        //window对象是全局对象，调用window对象属性和方法时可省略window.

        window.alert("Hello BOM");

        alert("Hello BOM Window");

</script>

  • confirm()函数：弹出对话框，其中包含消息以及确定和取消按钮

confirm("您确认删除该记录吗?");

但是我们怎么知道用户点击了确认还是取消呢？

该函数返回值为true时，表示用户点击确认按钮；返回false表示用户点击取消按钮

  • setInterval(function，milliseconds)：定时器，用于周期性的执行某个功能，并且是循环执行。

该函数需要传递2个参数： function函数，需要周期性执行的功能代码 ；milliseconds毫秒值：间隔时间

//定时器 - setInterval -- 周期性的执行某一个函数

var i = 0;

setInterval(function(){

        i++;

        console.log("定时器执行了"+i+"次");

},2000);

  • setTimeout(function，milliseconds) ：定时器，只会在一段时间后执行一次。

//setTimeout定时器: 过3s执行1次(有且只有1次)，输出i值

var i = 1;

window.setTimeout(function(){

        console.log("setTimeout定时器执行: " + i);

        i++;

},3000);

（2）Location对象：

        location是指代浏览器的地址栏对象，对于这个对象，我们常用的是href属性，用于获取或者设置浏览器的地址信息

//获取浏览器地址栏信息

alert(location.href);

//设置浏览器地址栏信息

location.href = "http://www.briup.com";

完整案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initialscale=1.0"><title>11-window属性及方法</title>
</head>
<body>
</body>
<script>window.alert("警告窗");//window.confirm("信息提示框：提示信息 确定|取消按钮");var flag = window.confirm("您确认要删除吗?");window.console.log("flag: " + flag);//setInterval定时器: 每隔2s执行1次，输出i值// var i = 1;// window.setInterval(function() {// console.log("setInterval定时器执行: " + i);// i++;// },2000);//setTimeout定时器: 过3s执行1次(有且只有1次)，输出i值var i = 1;window.setTimeout(function(){console.log("setTimeout定时器执行: " + i);i++;},3000);//location属性案例var url = window.location.href;console.log("地址栏url: " + url);//修改url 注意：修改完以后浏览器会自动跳转location.href = "http://www.briup.com";
</script>
</html>

6、DOM对象：

DOM概述

DOM：Document Object Model 文档对象模型，即JavaScript 将 HTML 文档的各个组成部分封装为对象。

DOM 其实我们并不陌生，之前在学习 XML 解析时就接触过。Java语言中需要写代码解析 XML 文档，而 HTML 文档则是由浏览器解析。

DOM对象类别：

Document：整个文档对象

Element：元素对象

Attribute：属性对象

Text：文本对象

Comment：注释对象

DOM主要作用：

改变 HTML 元素的内容

改变 HTML 元素的样式（CSS）

对 HTML DOM 事件作出反应

添加和删除 HTML 元素

案例展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initialscale=1.0"><title>12-DOM演示</title>
</head>
<body><div style="font-size: 30px; text-align: center;" id="tb1">课程表</div><table width="800px" border="1" cellspacing="0" align="center"><tr><th>学号</th><th>姓名</th><th>分数</th><th>评语</th></tr><tr align="center" class="data"><td>001</td><td>张三</td><td>90</td><td>很优秀</td></tr><tr align="center" class="data"><td>002</td><td>李四</td><td>92</td><td>优秀</td></tr><tr align="center" class="data"><td>003</td><td>王五</td><td>83</td><td>很努力,不错</td></tr><tr align="center" class="data"><td>004</td><td>赵六</td><td>98</td><td>666</td></tr></table><br><div style="text-align: center;"><input id="b1" type="button" value="改变标题内容" onclick="fn1()"><input id="b2" type="button" value="改变标题颜色" onclick="fn2()"><input id="b3" type="button" value="删除最后一个" onclick="fn3()"></div>
</body>
<script>function fn1(){document.getElementById('tb1').innerHTML="学员成绩表";}function fn2(){document.getElementById('tb1').style="font-size: 30px; text-align: center; color: red;"}function fn3(){var trs = document.getElementsByClassName('data');trs[trs.length-1].remove();}
</script>
</html>

对象获取

DOM的作用是通过修改HTML标签的内容和样式来实现页面的各种动态效果。

学习DOM，核心有2点：

        如何获取DOM中的元素对象（Element对象 ，也就是标签）

        如何操作Element对象的属性,也就是标签的属性

1）获取DOM中的元素对象

HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。

document对象获取Element元素对象的API如下表：

  • document.getElementById()： 根据标签的id属性获取标签对象，id是唯一的，所以获取到是单个标签对象。

<script>
        //1. 获取Element元素
        //1.1 获取元素-根据ID获取
        var img = document.getElementById('h1');
        alert(img);
</script>
  • document.getElementsByTagName() : 根据标签的名字获取标签对象，同名的标签有很多，所以返回值是数组。

//1.2 获取元素-根据标签获取 - div

var divs = document.getElementsByTagName('div');

for (let i = 0; i < divs.length; i++) {

        alert(divs[i]);

}

  • document.getElementsByName() ：根据标签的name的属性值获取标签对象，name属性值可以重复，所以返回值是一个数组。

//1.3 获取元素-根据name属性获取

var ins = document.getElementsByName('hobby');

for (let i = 0; i < ins.length; i++) {

        alert(ins[i]);

}

  • document.getElementsByClassName() : 根据标签的class属性值获取标签对象，class属性值也可以重复，返回值是数组

//1.4 获取元素-根据class属性获取

var divs = document.getElementsByClassName('cls');

for (let i = 0; i < divs.length; i++) {

        alert(divs[i]);

}

完整案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initialscale=1.0"><title>13-DOM获取元素</title>
</head>
<body><img id="h1" src="img/off.gif"> <br><br><div class="cls">xx软件</div> <br><div class="cls">Java程序员</div> <br><input type="checkbox" name="hobby"> 电影<input type="checkbox" name="hobby"> 旅游<input type="checkbox" name="hobby"> 游戏
</body>
<script>//1. 获取Element元素//1.1 获取元素-根据ID获取// var img = document.getElementById('h1');// alert(img);//1.2 获取元素-根据标签获取 - div// var divs = document.getElementsByTagName('div');// for (let i = 0; i < divs.length; i++) {// alert(divs[i]);// }//1.3 获取元素-根据name属性获取// var ins = document.getElementsByName('hobby');// for (let i = 0; i < ins.length; i++) {// alert(ins[i]);// }//1.4 获取元素-根据class属性获取// var divs = document.getElementsByClassName('cls');// for (let i = 0; i < divs.length; i++) {// alert(divs[i]);// }// 2.修改标签内容var divs = document.getElementsByClassName('cls');var div1 = divs[1];div1.innerHTML = "九九六狂人";
</script>
</html>

http://www.dtcms.com/a/403266.html

相关文章：

  • Linux配置网络————设置虚拟机为静态ip的网络配置详细教程
  • EPGF 架构为什么能保持长效和稳定？
  • reader should realize that all properties of real numbers that are to句子分析
  • ubuntu安装失败：Sorry, there was a problem completing the installation.原因分析及解决办法
  • 深圳商城网站设计价格网站轮播广告
  • AR技术：轨道交通运维与安全保障的革新力量
  • 友元类和友元函数bug
  • Zabbix7.4.8（二）：通过http监控Nginx相关指标
  • 厦门 外贸网站访问数据库的网站开发语言
  • Gerkin+Pytest（python）实现自动化（BDD）
  • 动态住宅IP vs. 静态数据中心IP：未来趋势与当前选择
  • 子域名做微信开放平台网站应用芜湖企业100强
  • 很那网站建设做网站哪个公司好
  • Kafka的核心概念
  • Zookeeper 与 Kafka
  • 巴斯勒相机：30 年技术沉淀，重新定义机器视觉效率​
  • 【Kotlin进阶】泛型的高级特性
  • h.265格式的视频在浏览器无法正常播放，使用ffprobe转为h.264
  • sysbench mysql 单表 insert 压测 ， 自定义lua测试脚本
  • 石家庄制作网站的公司电商流量平台
  • 二手车网站html模板西宁网站设计
  • 零成本上线动态博客：用 Rin + Cloudflare 部署个人博客的完整指南
  • 家用净水器DIY，75G经典5级Ro净水器
  • 七、OpenCV中的视频的读写
  • ClipboardApp —— Mac 专属轻量级剪切板助手（开源）
  • 【开题答辩全过程】以 LoveEditing视频编辑社团网站为例，包含答辩的问题和答案
  • ARM芯片架构之CoreSight ROM Table 的SoC设计思路
  • 门户网站建设的平台搭建hello md5 wordpress
  • LeetCode 485.最大连续1的个数
  • 【综述】Processes at the intracellular scale 细胞内尺度的过程