赵玫林软工2115班前端课程:21道课题专业选择题
在本篇前端代码示例中,我们主要探讨了HTML、CSS以及JavaScript在选择器和事件处理方面的基础应用。首先,我们看到一个简单的HTML结构,包含了文档类型声明(<!DOCTYPE html>),设置语言为英文(lang="en"),以及UTF-8字符集声明。页面标题为"课题专业选择",适用于软工2115班赵玫林的项目。 在<head>部分,CSS样式被用来布局页面。通过浮动(float:left)属性,将内容分为三个部分:左侧选择框区域(divL)、中间按钮区(divC)和右侧已选专业显示区域(divR)。`.divC`类设置了内边距和外边距,同时定义了两个按钮,id分别为"btn1"和"btn2",分别用于向`<select>`元素添加和删除选项。 两个`<select>`元素都使用了相同的`name`属性("se1"),其中`#sel1`是初始的专业选择列表,`size`属性设为10,选项包括软件工程、软件工程(专升本)、自动化、电子信息、光学电子和物联网。而`#sel2`是用于显示已选专业的下拉列表,初始时`size`属性为空。 JavaScript部分,当点击"添加-->>"按钮(id="btn1")时,会将`#sel1`中选中的选项添加到`#sel2`中;同样,点击"删除<<--"按钮(id="btn2")则会从`#sel2`中移除选中的选项。这里使用了jQuery库来简化DOM操作,`$("#btn1").click()`和`$("#btn2").click()`绑定了事件处理器,监听按钮的点击事件。 这个例子展示了前端开发中常用的选择器(如ID选择器、类选择器和属性选择器)以及基础的DOM操作和事件处理。这对于理解前端交互设计和动态更新用户界面非常重要,尤其是在构建表单或者需要用户互动的应用场景中。通过这个练习,学生可以掌握如何利用HTML、CSS和JavaScript实现功能性的网页元素管理。
![](https://csdnimg.cn/release/download_crawler_static/87774293/bg8.jpg)
![](https://csdnimg.cn/release/download_crawler_static/87774293/bg9.jpg)
剩余44页未读,继续阅读
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/90d54d0db20048e49373bc0d32addedb_qq_62859802.jpg!1)
- 粉丝: 5
- 资源: 8
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
最新资源
- Hadoop生态系统与MapReduce详解
- MDS系列三相整流桥模块技术规格与特性
- MFC编程:指针与句柄获取全面解析
- LM06:多模4G高速数据模块,支持GSM至TD-LTE
- 使用Gradle与Nexus构建私有仓库
- JAVA编程规范指南:命名规则与文件样式
- EMC VNX5500 存储系统日常维护指南
- 大数据驱动的互联网用户体验深度管理策略
- 改进型Booth算法:32位浮点阵列乘法器的高速设计与算法比较
- H3CNE网络认证重点知识整理
- Linux环境下MongoDB的详细安装教程
- 压缩文法的等价变换与多余规则删除
- BRMS入门指南:JBOSS安装与基础操作详解
- Win7环境下Android开发环境配置全攻略
- SHT10 C语言程序与LCD1602显示实例及精度校准
- 反垃圾邮件技术:现状与前景
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)