0
点赞
收藏
分享

微信扫一扫

【JavaScript】完善注册表单校验&案例2:表格隔行换色


【JavaScript】完善注册表单校验&案例2:表格隔行换色_前端

🔎这里是【JavaScript】,关注我学习前端不迷路
👍如果对你有帮助,给博主一个免费的点赞以示鼓励
欢迎各位🔎点赞👍评论收藏⭐️

👀专栏介绍

【JavaScript】 目前主要更新JavaScript,一起学习一起进步。

👀本期介绍

本期主要介绍完善注册表单校验&案例2:表格隔行换色

文章目录

​​1. 案例 1:完善注册表单校验​​

​​1.1 需求说明及分析​​

​​1.2 JavaScript 知识讲解(一)​​

​​1.2.1 操作元素内容体-innerHTML​​

​​2. 案例 2:表格隔行换色​​

​​2.1 需求说明及分析​​

​​2.2 JavaScript 知识讲解(二)​​

​​2.2.1 JS 数组​​

​​2.2.2 获取元素对象的四种方式​​

1. 案例 1:完善注册表单校验

1.1 需求说明及分析

【JavaScript】完善注册表单校验&案例2:表格隔行换色_前端_02

 之前注册校验通过警告框来提示信息,这使得信息的提示很不友好。

所以我们对信息的提示进行改进,使错误信息的提示以图示方式进行展示。



【JavaScript】完善注册表单校验&案例2:表格隔行换色_javascript_03


1.2 JavaScript 知识讲解(一)

1.2.1 操作元素内容体-innerHTML

【JavaScript】完善注册表单校验&案例2:表格隔行换色_前端_04


2. 案例 2:表格隔行换色

2.1 需求说明及分析

开发中,需要使用表格陈列数据,数据过多不易查看,通常使用隔行换色进行表示。

【JavaScript】完善注册表单校验&案例2:表格隔行换色_表单校验_05

要达到以上效果,仅需要将第二行、第四行 tr 标签获取到,更改其样式属性即可。

2.2 JavaScript 知识讲解(二)

2.2.1 JS 数组

JavaScript 中也存在数组,相当于 Java 的 List 集合。

可以存放各种类型的值。

数组创建方式:



【JavaScript】完善注册表单校验&案例2:表格隔行换色_数组_06


【JavaScript】完善注册表单校验&案例2:表格隔行换色_前端_07

2.2.2 获取元素对象的四种方式


通常情况下,我们使用 document ,即 DOM 对象,就可以获取并操作页面元素标签,进而改变页

面效果。

准备代码


【JavaScript】完善注册表单校验&案例2:表格隔行换色_前端_08


document 对象方法

【JavaScript】完善注册表单校验&案例2:表格隔行换色_表单校验_09


举报

相关推荐

0 条评论