版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
JavaScript对象演讲人：XXXXXXJavaScript+Vue.jsWeb开发实战教程04学习目标掌握JavaScript对象的概念掌握JavaScript的Number对象掌握JavaScript的字符串对象掌握JavaScript的日期对象掌握JavaScript的数组对象能够独立创建Number对象能够独立创建字符串对象能够独立创建日期对象能够独立创建数组对象思维导图4.1对象简介JavaScript对象是一种可以带有属性和方法的复合数据类型，以键值对的形式组织和存储数据；也是一种非常灵活的数据结构，可以用来表示和操作复杂的数据和逻辑关系。JavaScript对象由一组属性和方法组成。属性是对象的特征或数据，可以是基本数据类型值（如字符串、数字、布尔值）、函数等。每个属性都有一个唯一的键，通过键可以访问和操作属性的值。方法是对象的行为，是一种特殊类型的属性，它的值是一个函数。JavaScript提供了多个内建对象，如字符串对象、日期对象、数组对象等。用户可以自定义对象，并且给对象添加属性和方法。4.1.1访问对象的属性访问对象的属性即通过属性名获取对应的值。JavaScript提供了两种常用的方式来访问对象的属性，即点表示法和方括号表示法。1．点表示法点表示法指通过在对象名称后添加一个点，再加上属性名（键名）来访问对象属性的值（键值）。例如，使用可以访问对象person的name属性的值。2．方括号表示法方括号表示法指通过在对象名称后添加方括号，并在方括号内指定属性名来访问对象属性的值。例如，使用person["name"]也可以访问对象person的name属性的值。4.1.2访问对象的方法访问对象的方法即通过对象的键获取对应的函数，并执行该函数。访问对象的方法时，也可以使用点表示法或方括号表示法。通过在对象名称后添加一个点，再加上方法的键来访问对象的方法并执行它。例如，person.sayHello()可以调用对象person的sayHello()方法。通过在对象名称后添加方括号，并在方括号内指定方法的键来访问对象的方法并执行它。例如，person["sayHello"]()也可以调用对象person的sayHello()方法。1．点表示法2．方括号表示法4.1.3创建JavaScript对象创建JavaScript对象的方式有多种，包括使用对象字面量、Object.create()方法和工厂函数等。使用对象字面量的方式可以直接创建对象，具体操作是使用一对花括号“{}”，在其中定义对象的属性和方法。例如，创建一个对象，其包括姓名和年龄属性，代码如下所示。constperson={name:"John",age:30};对象字面量01所有的对象都是Object的实例，每一个对象都从Ototype中继承属性和方法。create()是Object自带的方法。开发者可以使用Object.create()方法创建一个新对象，以指定将现有对象作为新对象的原型。例如，基于一个现有对象创建一个包含姓名和年龄属性的新对象，代码如下所示。constpersonPrototype={name:"John",age:30};constperson=Object.create(personPrototype);Object.create()方法024.1.3创建JavaScript对象工厂函数是可以返回对象的函数，因此可以使用工厂函数创建对象。示例如下。functioncreatePerson(name,age){
return{name:name,age:age};}constperson=createPerson("John",30);工厂函数034.1.4创建对象实例并添加属性和方法
对象实例是基于构造函数或类定义的对象模板的具体实体，其拥有该模板中定义的属性和方法。创建对象实例是指通过调用构造函数来创建一个新的对象。开发者可以使用new关键字实例化一个对象。例如，有一个构造函数Person()，开发者可以通过newPerson()创建一个Person的实例，该实例将继承构造函数中定义的属性和方法，并拥有自己的独立数据，代码如下所示。functionPerson(firstName,lastName,age,eyeColor){
this.firstName=firstName;
this.lastName=lastName;
this.age=age;
this.eyeColor=eyeColor;}
varmyFather=newPerson("John","Doe",50,"blue");
varmyMother=newPerson("Sally","Rally",48,"green");4.1.4创建对象实例并添加属性和方法
在创建了对象实例后，即可为对象添加新的属性。例如，给myFather添加sex属性，代码如下所示。myFather.sex=“male”x=myFather.sex;把属性添加到对象01在构造函数内部不仅可以添加属性，也可以添加方法，因为方法只是附加在对象上的函数。把方法添加到对象的途径是在构造函数内部用function关键字来定义方法。例如，在Person对象实例中定义一个名为changeName的方法，代码如下所示。把方法添加到对象02functionPerson(firstName,lastName,age,eyeColor){
this.firstName=firstName;
this.lastName=lastName;
this.age=age;
this.eyeColor=eyeColor;
functionchangeName(name){
this.lastName=name;
}}varmyFather=newPerson("John","Doe",50,"blue");varmyMother=newPerson("Sally","Rally",48,"green");4.1.5JavaScript类
JavaScript类是一种用于创建对象的蓝图或模板。类本质上是一种特殊的函数，其可以包含属性和方法的定义，用于描述对象的特征和行为。在JavaScript中，类是使用class关键字定义的，在类中通过constructor()方法接收初始化类的参数。类可以具有构造函数，该构造函数在创建类的实例时自动调用，并用于初始化实例的属性。通过类，开发者可以创建多个对象实例，并且每个实例都具有相同的属性和方法。类提供了一种结构化和面向对象的方式来组织和操作代码，使代码更易于理解、扩展和维护。类可以用于创建复杂的数据结构、模块化的功能组件和面向对象的程序。4.1.5JavaScript类
<!DOCTYPEhtml>
<html>
<body>
<script>
classPerson{
constructor(firstName,lastName,age,eyeColor){
this.firstName=firstName;
this.lastName=lastName;
this.age=age;
this.eyeColor=eyeColor;
}
changeName(name){
this.lastName=name;}
}
varmyFather=newPerson('John','Doe',50,'blue');
varmyMother=newPerson('Sally','Rally',48,'green');
myMother.changeName('Doe');
alert(myMother.lastName);
</script>
</body>
</html>例如，将构造函数Person改写成类并调用类中的方法，代码如下所示（位置：单元4/4-1.html）。4.2Number对象Number对象是JavaScript中的内置对象之一，用于处理数字和与数字相关的操作。Number对象提供了一些有用的属性和方法，用于对数字进行各种操作。Number对象可以使用字面量创建，如“constnum=42;”；也可以通过Number()构造函数创建，如“constnum=newNumber(42);”。但是，通常情况下建议直接使用字面量创建Number对象。4.2.1数字在JavaScript中，Number是一种基本数据类型，用于表示数值。数字包括整数或浮点数，可以使用字面量直接表示，如42是整数、3.14是浮点数。JavaScript中的数字支持各种数学运算，如加法、减法、乘法和除法。可以使用算术运算符（+、-、*、/）对数字进行基本运算，并使用括号控制运算的优先级。JavaScript提供了一些内置对象来处理数字，如Math对象和Number对象。其中，Math对象用于进行数学计算，提供了Math.round()、Math.floor()、Math.random()等常用方法；Number对象则主要用于处理数字的类型、格式和判断等方面的操作。Math对象常用方法的使用示例如下。varx=0.2+0.1; //结果为0.30000000000000004 vara=12.74;Math.round(a); //四舍五入变成13Math.floor(a); //舍弃小数位变成12Math.random(); //生成0～1的随机数4.2.2八进制和十六进制在JavaScript中，八进制和十六进制是两种特殊的数值字面量格式，用于表示不同进制的数值。八进制使用0～7这8个数字来表示数值。在JavaScript中，八进制值可以通过在数字前面加上0o或0O前缀来表示。例如，0o10表示八进制值10，对应的十进制值是8。十六进制使用0～9和A～F（或a～f）这16个字符来表示数值。在JavaScript中，十六进制值可以通过在字符前面加上0x或0X前缀来表示。例如，0x10表示十六进制值10，对应的十进制值是16。01024.2.2八进制和十六进制使用八进制和十六进制可以方便地表示一些特定的数值，尤其是与位运算和字节操作相关的情况。八进制值和十六进制值在JavaScript中会被自动转换为十进制值，在进行数值计算时与十进制值没有区别。开发者也可以使用toString()方法转换十六进制值、八进制值、二进制值。例如，将十进制值128分别转换成十六进制值、八进制值和二进制值，代码如下所示。varmyNumber=128;myNumber.toString(16); //返回：80myNumber.toString(8); //返回：200myNumber.toString(2); //返回：100000004.2.3无穷大的值当数字运算结果（正）超过了JavaScript所能表示的数字上限（出现溢出现象）时，该结果就会变成一个特殊的正无穷大的值。在JavaScript中，正无穷大的值以关键字Infinity表示。同样地，当负数的值超过了JavaScript所能表示的负数范围时，结果为负无穷大的值，在JavaScript中，负无穷大的值以关键字-Infinity表示。无穷大的值是一个特殊的数值，不能被改变。同时，无穷大的值是JavaScript中的一个内置常量，可以直接通过引用Infinity来使用。4.2.4非数值在JavaScript中，NaN代表非数值。NaN是一个特殊的数值，用于表示一个无效的或不可表示的数字结果。NaN通常出现在执行无效的数学操作时，如将非数字字符串转换为数字、进行0除以0的计算或进行无法得到数值结果的数学运算。当这些操作无法生成有效的数值时，JavaScript会返回NaN作为结果。为了判断一个值是否为NaN，可以使用全局函数isNaN()。该函数接收一个参数，并返回一个布尔值，表示参数是否为NaN。例如，使用isNaN()全局函数判断一个值是否是NaN，代码如下所示。varx=1000/"Apple";isNaN(x);//返回：truevary=100/"1000";isNaN(y);//返回：falsevarx=1000/0;isNaN(x);//返回：false某数除以0的结果是无穷大的值，而非NaN，代码如下所示。4.3字符串对象在JavaScript中，字符串对象是一种内置对象，用于处理和操作字符串。字符串对象提供了一系列属性和方法，用于对字符串进行各种操作。字符串对象可以使用字符串字面量表示，如“conststr="Hello,World!";”；也可以通过String()构造函数来创建，如“conststr=newString("Hello,World!");”。一个字符串可以使用单引号或双引号进行标识，代码如下所示。varcarname="VolvoXC60";varcarname='VolvoXC60';开发者可以使用位置（索引）来访问字符串中任何的字符（一个空格也占一个字符）。字符串的索引从0开始，所以字符串中的第1个字符的索引为0，第2个字符的索引为1，以此类推。示例如下。varcharacter=carname[7];//表示字符串中的第8个字符4.3字符串对象字符串中也可以使用引号，但字符串内的引号需要和字符串外的引号区分，即当外部使用双引号时内部使用单引号，当外部使用单引号时内部使用双引号。示例如下。varanswer="It'salright";varanswer="Heiscalled'Johnny'";varanswer='Heiscalled"Johnny"';如果不进行引号区分，则字符串的引号会被当作字符串结束符。如果字符串内的引号和字符串外的引号一样，可以在字符串中使用转义字符“\”对引号进行转义，这样就不会把字符串内的引号当作字符串结束符。示例如下。varanswer='It\'salright';varanswer="Heiscalled\"Johnny\"";4.3.1字符串长度在JavaScript中，字符串长度指的是字符串中包含的字符的数量。字符串长度可以通过字符串对象的length属性获取。JavaScript中的字符串长度以字符为单位，而不是以字节或位为单位。对于大多数字符，每个字符占用一个字符位置；但对于一些特殊的Unicode字符，每个字符可能会占用多个字符位置。例如，输出只包含英文字符的字符串长度和包含特殊字符的字符串长度，代码如下所示。vartxt='HelloWorld!';console.log(txt.length); //长度为12vartxt2='中国，你好';console.log(txt2.length); //长度为74.3.2查找字符串在JavaScript中，开发者可以使用不同的方法查找字符串中的子字符串或特定的字符。使用字符串对象的indexOf()方法该方法接收一个表示要查找的子字符串的参数，并返回该子字符串在原字符串中首次出现的位置。如果子字符串不存在，则返回“-1”。例如，在一个字符串中查找一段字符首次出现的位置，代码如下所示。varstr="Helloworld,welcometotheuniverse.";varn=str.indexOf("welcome");console.log(n);//输出13，表示welcome在字符串中的第13个字符位置出现使用字符串对象的includes()方法该方法接收一个表示要查找的子字符串的参数，并返回一个布尔值，表示原字符串中是否包含该子字符串。例如，在一个字符串中查找一段字符是否出现，代码如下所示。varstr="Helloworld,welcometotheuniverse.";varn=str.includes("welcome");console.log(n);//输出true，表示welcome在字符串中出现4.3.2查找字符串除了以上方法外，JavaScript还提供了一些其他方法进行字符串的查找和匹配，如正则表达式的match()方法、replace()方法等。这些方法可以根据具体的需求进行选择和使用。match()方法用来查找字符串中特定的字符，如果找到则返回该字符。示例如下。varstr="Helloworld!";console.log(str.match("world")+"<br>");//输出：worldconsole.log(str.match("World")+"<br>");//输出：nullreplace()方法用来在字符串中用某些字符替换另一些字符，其第一个参数代表要替换的字符，第二个参数代表用来替换的字符。示例如下。str="PleasevisitMicrosoft!"varn=str.replace("Microsoft","baidu");console.log(n);//输出：'Pleasevisitbaidu'4.3.3大小写转换
在JavaScript中，可以使用字符串对象的toLowerCase()和toUpperCase()方法进行字符串的大小写转换。toLowerCase()方法用于将字符串中的所有字符转换为小写形式，并返回转换后的新字符串。例如，对于字符串"Hello,World!"，使用toLowerCase()方法后，将得到"hello,world!"。toUpperCase()方法用于将字符串中的所有字符转换为大写形式，并返回转换后的新字符串。例如，对于字符串"Hello,World!"，使用toUpperCase()方法后，将得到"HELLO,WORLD!"。4.3.4将字符串转换为数组
在JavaScript中，可以使用split()方法将字符串转换为数组。split()方法是字符串对象的一个方法，其接收一个用于指定拆分字符串的分隔符的参数，将字符串分割成多个子字符串，并返回一个新的数组。例如，对于字符串"Hello,World!"，可以使用split()方法将其用逗号分割为两个子字符串，代码如下所示。conststr="Hello,World!";constarr=str.split(",");console.log(arr);//输出：["Hello","World!"]4.3.5特殊字符在JavaScript中，特殊字符是指一些具有特殊功能或表示特定含义的字符。特殊字符在JavaScript代码中具有特殊的用途和含义。JavaScript中可以使用反斜线（\）插入特殊字符。JavaScript中常见的插入特殊字符的代码如表所示。代码输出\'单引号\"双引号\\斜线\n换行\r回车\b空格\f换页表JavaScript中常见的插入特殊字符的代码4.4.1创建日期对象Date()构造函数用来创建日期对象，可以通过new关键字来定义日期对象。Data()构造函数支持多种参数传入方式：如果不传入参数，则创建表示当前时间的日期对象（精确到毫秒数）；如果传入一个数值型毫秒数，则表示从1970年1月1日0时开始的毫秒数，会创建一个对应时间的日期对象；如果传入一个时间格式的字符串，则创建该时间对应的日期；也可以分别传入年、月、日、时、分、秒，创建该年、月、日对应的日期对象。例如，使用时间格式的字符串创建2025年8月30日的日期对象，代码如下所示。newDate(1703143800000)//返回从1970年1月1日0时开始的毫秒数对应的日期
newDate('2025-08-30')4.4.2获取日期对象在JavaScript中，使用日期对象的get方法可以获取日期的不同部分，如年份、月份、月的天数、小时数、分钟数和秒数。获取日期对象常用的get方法如表所示。方法描述getFullYear()获取日期对象中的年份getMonth()获取日期对象中的月份（0～11，其中0表示1月）getDate()获取日期对象中月的天数（1～31）getDay()获取日期对象中周中的天数（0～6，其中0表示星期日）getHours()获取日期对象中的小时数（0～23）getMinutes()获取日期对象中的分钟数（0～59）getSeconds()获取日期对象中的秒数（0～59）表
获取日期对象常用的get方法通过这些get方法，开发者可以获取日期对象的不同部分。例如，要获取当前日期对象中的年份和月份，可以使用getFullYear()和getMonth()方法，代码如下所示。constnow=newDate();constyear=now.getFullYear();constmonth=now.getMonth();console.log("Year:",year);//获取当前日期对象中的年份console.log("Month:",month);//获取当前日期对象中的月份。注意，Date()函数返回的month是从0开始的，若当前为12月，则此处的值为114.4.2获取日期对象4.4.3设置日期对象在JavaScript中，使用日期对象的set方法设置日期的不同部分，如年份、月份、月的天数、小时数、分钟数和秒数。设置日期对象常用的set方法如表所示。表
获取日期对象常用的get方法方法描述setFullYear()设置日期对象中的年份。接收一个参数，表示要设置的年份setMonth()设置日期对象中的月份。接收一个参数，表示要设置的月份（0～11，其中0表示1月）setDate()设置日期对象中月的天数。接收一个参数，表示要设置的天数（1～31）setHours()设置日期对象中的小时数。接收一个参数，表示要设置的小时数（0～23）setMinutes()设置日期对象中的分钟数。接收一个参数，表示要设置的分钟数（0～59）这些set方法可以单独使用，也可以组合使用，以设置日期对象的不同部分。例如，要设置日期对象中的年份和月份，可以使用setFullYear()和setMonth()方法。例如，获取当前日期和时间并修改日期和时间为2025年8月30日12点30分，代码如下所示。constnow=newDate();now.setFullYear(2025);now.setMonth(7);now.setDate(30);now.setHours(12);now.setMinutes(30);now.setSeconds(0);console.log(now);//输出：SatAug30202512:30:00GMT+0800(中国标准时间)4.4.3设置日期对象4.4.4日期比较在JavaScript中，可以使用日期对象的关系运算符（如<、>、<=、>=、==、!=）或使用日期对象的方法进行日期的比较。constdate1=newDate("2021-01-01");constdate2=newDate("2022-01-01");if(date1<date2){console.log("date1isbeforedate2");}elseif(date1>date2){console.log("date1isafterdate2");}else{console.log("date1isequaltodate2");}//输出：date1isbeforedate2在使用关系运算符进行日期比较时，JavaScript会先将日期对象转换为其对应的时间戳，然后进行比较。时间戳是一个表示从1970年1月1日0时到指定日期（包含时间）的毫秒数。因此，关系运算符将通过比较日期对象的时间戳大小来判断日期（包含时间）的先后顺序。例如，分别创建两个日期，并使用比较运算符判断其先后顺序，代码如下所示。constdate1=newDate("2021-01-01");constdate2=newDate("2022-01-01");if(date1.getTime()<date2.getTime()){console.log("date1isbeforedate2");}elseif(date1.getTime()>date2.getTime()){console.log("date1isafterdate2");}else{console.log("date1isequaltodate2");}//输出：date1isbeforedate2除了使用关系运算符外，JavaScript还提供了一些日期对象的方法进行日期的比较。其中，最常用的是getTime()方法，其返回日期对象的时间戳。可以通过比较两个日期对象的时间戳大小来判断它们的先后顺序。例如，分别创建两个日期，并将它们转换成时间戳来比较大小，从而判断日期的先后顺序，代码如下所示。4.5数组对象在JavaScript中，数组对象（简称数组）是一种用于存储和操作多个值的有序集合。可以将数组视为一个容器，其中可以存储任意类型的数据，包括数字、字符串、对象、函数等。数组是非常灵活和强大的数据结构，可以在各种场景中使用，包括存储数据、数据处理、算法和数据结构设计等。4.5.1创建数组
字面量表示法是指通过使用方括号（[]）将多个值包含在数组内，每个值之间以逗号分隔。例如，创建一个包含数字、字符串和布尔值的数组，代码如下所示。constarr=[1,2,3,"four",true];字面量表示法01构造函数法是指通过使用Array()构造函数创建数组。例如，使用构造函数法创建一个数组，使该数组与使用字面量表示法创建的数组相同，代码如下所示。constarr=newArray(1,2,3,"four",true);构造函数法024.5.2访问数组数组中的元素可以通过索引（从0开始）访问，即可以使用方括号和索引值获取和修改数组的元素。例如，arr[0]表示获取数组的第1个元素，arr[2]=5表示将数组的第3个元素设置为5。例如，有一个汽车数组，分别访问和修改该数组中的第1个元素，代码如下所示。varmyCars=['Benz','Audi','Buick'];console.log(myCars[0]);//输出：BenzmyCars[0]='奔驰';console.log(myCars[0]);//输出：奔驰4.5.3数组属性和方法
JavaScript提供了许多有用的属性和方法，用于操作和处理数组。数组常用的属性如表所示。属性描述constructor通常指向创建该数组的构造函数，可用于识别对象的来源length返回数组中元素的数目prototype向对象添加属性和方法表
数组常用的属性方法描述push()向数组末尾添加一个或多个元素pop()删除并返回数组的最后一个元素shift()删除并返回数组的第一个元素unshift()向数组开头添加一个或多个元素concat()将两个或多个数组合并为一个新数组slice()返回数组中的一个片段splice()向/从数组中添加/删除元素forEach()对数组中的每个元素执行指定的函数map()对数组中的每个元素执行指定的函数，并返回新的数组表
数组常用的方法【商业案例】
学生信息管理系统——新增和修改学生信息任务1开发“新增学生信息”弹窗当单击学生信息列表上方的“新增”按钮时，需要弹出一个“新增学生信息”弹窗，如图所示。该弹窗顶部中间有标题，右边有关闭按钮（叉号）；中间部分是需要填写的学生信息，包括序号、学号、姓名、学院、专业、年级、班级和年龄等；右下角有“确定”按钮和“取消”按钮，单击“确定”按钮将在学生信息列表中添加一条学生信息并关闭弹窗，单击“取消”按钮或关闭按钮会关闭弹窗。可以用<div>标签作为弹窗的容器。分别用<div>标签将弹窗内容分为3个部分，标题部分使用<h4>标签进行标识；内容部分使用<p>标签分割每一个字段，并使用<input>输入框作为内容输入区域；底部部分使用<button>标签定义两个按钮，并添加class属性。结构分析01图“新增学生信息”弹窗【商业案例】
学生信息管理系统——新增和修改学生信息使用HTML的标签实现页面的大致布局并搭建网页结构，同时给标签加上不同的类名和id属性，方便添加样式代码和绑定不同事件。代码如下所示（位置：学生信息管理系统-JavaScript版/index.html）。页面布局与结构搭建02<divid="addmodal">
<divclass="modal-dialog">
<divclass="modal-content">
<divclass="modal-header">
<iid="close">X</i>
<h4>新增学生信息</h4>
</div>
<divclass="modal-body">
<p>序号：<inputtype="text"/></p>
<p>学号：<inputtype="text"/></p>
<p>姓名：<inputtype="text"/></p>
<p>学院：<inputtype="text"/></p>
<p>专业：<inputtype="text"/></p>
<p>年级：<inputtype="text"/></p>
<p>班级：<inputtype="text"/></p>
<p>年龄：<inputtype="text"/></p>
</div>
<divclass="modal-footer">
<divclass="pageInfoBox"></div>
<buttonclass="addButton_ok">确定</button>
<buttonclass="addButton_no">取消</button>
</div>
</div>
</div></div>【商业案例】
学生信息管理系统——新增和修改学生信息#addmodal{
position:fixed;
left:0px;
top:0px;
right:0px;
bottom:0px;
background:rgba(0,0,0,0.5);
display:none;}.modal-dialog{
position:absolute;
width:500px;
margin:0pxauto;
background:white;
border-radius:5px;
left:50%;
top:50%;
transform:translate(-50%,-50%);}有了页面结构后，需要定义页面元素的DOM结构[作用是处理和操作HTML、可扩展标记语言（ExtensibleMarkupLanguage，XML）和可扩展超文本标记语言（ExtensibleHyperTextMarkupLanguage，XHTML）等文档，将在单元5进行详细讲解]的样式，以使弹窗更美观，样式代码如下所示（位置：学生信息管理系统-JavaScript版/index.css）。.modal-header{
border-bottom:1pxsolid#e5e5e5;
color:#fff;
background-color:#555;
height:40px;
line-height:40px;
padding:020px;}.modal-header>i{
font-weight:bold;
color:#adadad;
float:right;
cursor:pointer;}.modal-body{
position:relative;
text-align:center;}【商业案例】
学生信息管理系统——新增和修改学生信息.modal-bodyinput{
width:202px;
border:1pxsolid#a9a9a9;
outline:none;
margin:10px;}.modal-footer{
padding:15px;
text-align:right;
border-top:1pxsolid#e5e5e5;}.addButton_ok{
width:93px;
height:38px;
border-radius:4px;
background:#5cb85c;
color:#fff;
outline:none;
cursor:pointer;
border:1pxsolid#aeaeae;}.addButton_no{
width:93px;
height:38px;
border-radius:4px;
background:#fff;
color:#808080;
outline:none;
cursor:pointer;
border:1pxsolid#aeaeae;}任务2开发“新增学生信息”弹窗的click事件【商业案例】
学生信息管理系统——新增和修改学生信息1．结构分析在index.js中需要添加几个事件：单击页面中的“新增”按钮时需要打开弹窗，所以需要给“新增”按钮绑定click事件；打开弹窗后单击关闭按钮或“取消”按钮时会关闭弹窗，所以需要给这两个按钮绑定click事件；单击弹窗的“确定”按钮时需要将弹窗中输入的数据插入学生信息列表中，同时关闭弹窗，所以需要给“确定”按钮绑定click事件。2．添加函数定义addStudent()函数，实现新增学生信息的功能，并在页面初始化时调用该函数。首先获取“新增”按钮的元素，并绑定click事件，当单击“新增”按钮时打开弹窗。接着获取关闭按钮和“取消”按钮的元素，并绑定click事件，当单击任一按钮时关闭弹窗。最后获取弹窗中“确定”按钮的元素，并绑定click事件，当单击“确定”按钮时获取弹窗中所有的<input>输入框中的内容，并将这些内容组装成表格中一行数据的HTML结构，添加到学生信息列表中的最后一行。添加学生信息之后，需要调用init()函数查询最新数据。【商业案例】
学生信息管理系统——新增和修改学生信息constaddStudent=()=>{
constaddStudentButton=document.querySelector('.addButton');
addStudentButton.onclick=function(){
constaddModal=document.querySelector('#addmodal');
addModal.style.display='block';
};
constconfirmAdd=document.querySelector('.addButton_ok');
constcancelAdd=document.querySelector('.addButton_no');
constcloseModal=document.querySelector('#close');
cancelAdd.onclick=()=>{
constaddModal=document.querySelector('#addmodal');
addModal.style.display='none';
};
closeModal.onclick=function(){
constaddModal=document.querySelector('#addmodal');
addModal.style.display='none';
}; 代码如下所示（位置：学生信息管理系统-JavaScript版/index.js）。【商业案例】
学生信息管理系统——新增和修改学生信息confirmAdd.onclick=()=>{
constaddModal=document.querySelector('#addmodal');
addModal.style.display='none';
constlist=[];
constinputList=document.querySelectorAll('#addmodalinput');
inputList.forEach((input)=>list.push(input.value)); //获取输入框的值
constlistHtml=document.createElement('tr'); //创建一个div元素
listHtml.style.display='none';
listHtml.className='trHover';
listHtml.innerHTML=
'<td><inputtype="checkbox"></td>'+'<td>'+list[0]+'</td>'+'<td>'+list[1]+'</td>'+
'<td>'+list[2]+'</td>'+'<td>'+list[3]+'</td>'+'<td>'+list[4]+'</td>'+
'<td>'+list[5]+'</td>'+'<td>'+list[6]+'</td>'+'<td>'+list[7]+
'</td>'+'<td>'+'<aclass="viewInf">查看</a><aclass="updateInf">修改</a></td>';
consttableDom=document.querySelector('#tdata');
tableDom.appendChild(listHtml);
//重新查询
init();
};};【商业案例】
学生信息管理系统——新增和修改学生信息任务3开发“修改学生信息”弹窗当单击学生信息列表中的“修改”按钮时，需要弹出一个“修改学生信息”弹窗，如图所示，该弹窗需要将选择的学生信息的内容展示出来。该弹出右下角有“保存”按钮和“取消”按钮，当单击“保存”按钮时将更新该学生的信息并关闭弹窗，当单击“取消”按钮或关闭按钮时会关闭弹窗。“修改学生信息”弹窗的布局与“新增学生信息”弹窗的布局类似，但其标题和“保存”按钮有些区别，并且需要添加不同的class属性以便获取页面元素。结构分析01图“修改学生信息”弹窗【商业案例】
学生信息管理系统——新增和修改学生信息使用HTML的标签实现页面的大致布局并搭建网页结构，同时给标签加上不同的类名和id属性，方便添加样式代码和绑定不同事件，代码如下所示（位置：学生信息管理系统-JavaScript版/index.html）。页面布局与结构搭建02<!--“修改学生信息”的模态框-->
<divclass="modalmovefademovemodal"id="movemodal">
<divclass="modal-dialog">
<divclass="modal-content">
<divclass="modal-header">
<iid="closeEditModal">X</i>
<h4>修改学生信息</h4>
</div>
<divclass="modal-body">
<p>序号：<inputtype="text"/></p>
<p>学号：<inputtype="text"/></p>
<p>姓名：<inputtype="text"/></p>
<p>学院：<inputtype="text"/></p>
<p>专业：<inputtype="text"/></p>
<p>年级：<inputtype="text"/></p>
<p>班级：<inputtype="text"/></p>
<p>年龄：<inputtype="text"/></p>
</div>
<divclass="modal-footer">
<buttonclass="updatabtn_ok">保存</button>
<buttonclass="updatabtn_no">取消</button>
</div>
</div>
</div>
</div>【商业案例】
学生信息管理系统——新增和修改学生信息“修改学生信息”弹窗的样式与“新增学生信息”弹窗的样式类似，样式代码如下所示（位置：学生信息管理系统-JavaScript版/index.css）。#movemodal{
position:fixed;
left:0px;
top:0px;
right:0px;
bottom:0px;
background:rgba(0,0,0,0.5);
display:none;}.modal-dialog{
position:absolute;
width:500px;
margin:0pxauto;
background:white;
border-radius:5px;
left:50%;
top:50%;
transform:translate(-50%,-50%);}.modal-header{
border-bottom:1pxsolid#e5e5e5;
color:#fff;
background-color:#555;
height:40px;
line-height:40px;
padding:020px;}.modal-header>i{
font-weight:bold;
color:#adadad;
float:right;
cursor:pointer;}.modal-body{
position:relative;
text-align:center;}【商业案例】
学生信息管理系统——新增和修改学生信息.modal-bodyinput{
width:202px;
border:1pxsolid#a9a9a9;
outline:none;
margin:10px;}.modal-footer{
padding:15px;
text-align:right;
border-top:1pxsolid#e5e5e5;}.updatabtn_ok{
width:93px;
height:38px;
border-radius:4px;
background:#5cb85c;
color:#fff;
outline:none;
cursor:pointer;
border:1pxsolid#aeaeae;}.updatabtn_no{
width:93px;
height:38px;
border-radius:4px;
background:#fff;
color:#808080;
outline:none;
cursor:pointer;
border:1pxsolid#aeaeae;}任务4开发“修改学生信息”弹窗的click事件【商业案例】
学生信息管理系统——新增和修改学生信息在index.js中需要添加几个事件：单击页面中的“修改”按钮时需要打开弹窗，所以需要给“修改”按钮绑定click事件；打开弹窗后单击关闭按钮或“取消”按钮时会关闭弹窗，所以需要给这两个按钮绑定click事件；单击弹窗的“保存”按钮时需要将弹窗中输入的数据更新到学生信息列表中，同时关闭弹窗，所以需要给“保存”按钮绑定click事件。结构分析01定义editStudent()函数，实现修改学生信息的功能，并在页面初始化时调用该函数。首先，需要获取学生信息列表中所有的“修改”按钮，并添加click事件。当单击“修改”按钮时，需要存储当前选择的学生信息列表中的某一条数据，方便后面准确更新对应的数据。需要将学生信息列表中那条数据的内容回填到弹窗的<input>输入框中，让弹窗可以正确显示该学生的信息。接着获取关闭按钮和“取消”按钮的元素，并绑定click事件，当单击任一按钮时关闭弹窗。添加函数02【商业案例】
学生信息管理系统——新增和修改学生信息最后获取弹窗中“保存”按钮的元素，并绑定click事件。当单击“保存”按钮时，获取弹窗中所有的<input>标签输入框中的内容，将这些内容组装成表格中一行数据的元素结构，并更新到学生信息列表中对应的那一行。更新学生信息之后，需要调用init()函数查询页面数据。代码如下所示（位置：学生信息管理系统-JavaScript版/index.js）。consteditStudent=()=>{
leteditBtnIndex=0;
consteditBtn=document.querySelectorAll('.updateInf');
editBtn.forEach((btn,index)=>{
btn.onclick=()=>{
editBtnIndex=index;
consteditModal=document.querySelector('#movemodal');
editModal.style.display='block';
consttr=btn.parentNode.parentNode;
consttdNodes=Array.from(tr.children).slice(1,9);
constmodalInputs=document.querySelectorAll(
'#movemodal.modal-bodyinput'
);
modalInputs.forEach((input,index)=>{
input.value=tdNodes[index].innerHTML;
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 瑞金社区工作者招考真题及答案2025
- 泰安市教师招聘笔试题及答案
- 遂宁市专职消防员招聘考试题及答案
- 绥化市专职消防员招聘笔试题及答案
- 剧本写作题库及答案
- 项目2 管理目录和文件
- 医学26年：糖尿病研究进展解读 查房课件
- 26年霍奇金淋巴瘤NGS检测落地细则
- 商丘市专职消防员招聘考试题及答案
- 踝部开放性损伤伴脱位护理查房
- 2026春统编版语文 24 大禹治水 教学课件
- 2026年高考英语作文高分全景备考体系：模板 + 万能句型 + 实战指南
- 拍卖公司绩效考核制度
- 2026及未来5年中国漆器工艺品制造行业市场行情动态及投资前景分析报告
- 2025年广东省职业病诊断医师考试(职业性化学中毒)在线题库及答案
- 2026年及未来5年市场数据中国福州市养老机构行业市场发展现状及投资规划建议报告
- 2026年中国化工经济技术发展中心招聘备考题库及1套完整答案详解
- 2026年中职3D打印技术基础试题含答案
- 2025年注册验船师资格考试(B级船舶检验专业基础安全)测试题及答案
- TCCIIA0004-2024精细化工产品分类
- 学生间的冲突与调解策略研究
评论
0/150
提交评论