JavaScript初级入门练习

  JavaScript为简称js,是现如今十分流行的脚本语言,可插入HTML页面编程代码,对页面改进设计,实现动态操作,此处进行两个简单的js练习,熟悉js操作.

一.全选操作
在我们日常上网中,经常会接触到全选操作.本文中通过HTML,CSS,JavaScrpit进行一个简单的实现
1.HTML搭建网页结构
此处通过使用表格标签.创建一个表格,使用input属性,插入可选框,通过tr,td对表格行列项的内容进行设置.代码如下图:

图片.png

其中第一行,为标题栏所以设置其name属性不同于其他行.
2.CSS设置表格样式
把表格设置为居中,将设置表格边框宽度、高度、样式及行列项之间的表格样式,代码如下图：

图片.png

3.JS实现全选操作
通过全选项可选框的checked状态,对其他行进行全选操作和取消全选,由于设置其余行的name="choice",所以可以通过使用DOM对象中getElementsByName();方法获取并存放在数组中,再通过遍历数组,进行其他可选框状态选择.代码如下图:

图片.png

实现效果如图:

图片.png

二.省市联动
在日常上网中我们常常会遇到,地区选择,当我们选择某个省,后面市一栏会相应的给出这个省所包含的市,这里进行一个简单的实现.
1.HTML搭建网页结构
这里使用两个select标签,作为选项列表,设置option标签中的value属性,便于js操作,代码如下图:

图片.png

2.JS实现省市联动
由于页面简单不需要css样式设置,直接进行js操作.使用二维数组方法,存放对应省中的市,在通过for循环遍历,向相应的的选项中插入二维数组的文本内容,实现联动,代码如下图:

图片.png

最终效果如下:

图片.png

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。