javaScript入门介绍2
正文
2.1 文档对象模型
2.1.1 文档对象模型介绍
- 文档对象模型(Document Object Model,DOM):DOM定义了访问HTML和XML文档的标准。
- DOM是独于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
- DOM将HTML描绘成一个由多层节点构成的结构。节点可以分为多种不同类型,每种类型分别表示文档中不同的信息及标记。每个节点都拥有各自的特点、数据和方法,也与其他节点存在某种关系。
- 节点之间构成了层次,所有页面标记表现为一个以特定节点为根节点的树形结构。
2.1.2 常用对象类型
- Node:基类型,定义了基本方法
- Document:文档对象
- Element:元素节点对象
- Attr(attribute):属性节点对象
- Text:文本节点对象
2.1.3 DOM对象访问
-
文档对象模型为层次结构,所有下层对象都是其上层对象的子对象。
-
子对象其实就是父对象的属性,其引用方式与对象属性的引用相同。
-
当引用较低层次的对象时,要根据对象的包含关系,使用成员引用操作符 . 一层一层地引用对象。
-
引用文档中表单(form1)的文本输入框的name:
document.form1.name
2.1.4 DOM示例
示例 用户在输入组件中输入圆的半径,计算圆的面积
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算圆的面积</title> </head> <script type="text/javascript"> function getArea() { <!--一定要和名字匹配--> var input = document.form.radius; var radius = input.value; radius = Number(radius); var res = 3.14 * radius * radius; alert(res); } </script> <body> <form action="a.jsp" method="post" name="form"> 半径<input type="text" name="radius" /> <br /> <input type="button" name="button" value="Cal" onclick="getArea()" /> </form> </body> </html>
示例 链接 http://www.ysu.edu.cn加上id属性进行唯一标识
document.getElementById("ID内容")
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>链接元素</title> </head> <script type="text/javascript"> function getLink() { alert("函数运行"); <!--有 BUG --> var link = document.getElementById("idlink"); var href = link.attributes[1]; var text = link.childNodes[0]; alert(text.nodeValue); alert(href.nodeValue); } </script> <body> <a id="idlink" href="http://www.ysu.edu.cn">燕山大学</a> <br /> <input type="button" name="btn" value="获取信息" onclick="getLink()" /> </body> </html>
2.2 自定义对象
- JavaScript可以使用的对象包括三种:内置对象,浏览器对象,自定义对象。
- JavaScript中实现自定义对象,使用function关键字。
function 类名() { this.成员变量 = 初始值; this.成员函数 = function() { ... } }
下面示例,
定义圆类(Circle)
一个成员变量:半径(radius)
一个成员函数:计算面积(area)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算圆的面积</title> </head> <script type="text/javascript"> function getArea() { <!--一定要和名字匹配--> var input = document.form.radius; var radius = input.value; radius = Number(radius); var res = 3.14 * radius * radius; alert(res); } <!--定义类 Circle--> function Circle() { this.radius = 0; this.area = function () { // 计算面积的函数 return 3.14 * this.radius * this.radius; } } </script> <body> <form action="a.jsp" method="post" name="form"> 半径<input type="text" name="radius" /> <br /> <input type="button" name="button" value="Cal" onclick="getArea()" /> </form> </body> </html>
2.3 验证表单
-
当用户单击了表单中的提交按钮之后,用户在表单中填写或选择的内容将被传送到服务器端特定的程序(由action属性指定),由该程序进行具体的处理。
-
表单正式提交到服务器之前,需要使onSubmit的值为true,因此可以通过为onSubmit事件指定的处理函数来进行表单数据的验证。
- 因此我们根据 onSubmit 这个东西,验证填写表单内容是否 规范
onSubmit="return Check('id')" ;对应 document.form.get
2.4 DIV
- <div>可定义文档中的分区,可以把文档分割为独立的、不同的部分
- l可以对一个 <div> 元素定义 id 属性,用于标识唯一的 div。
2.5 菜单
-
利用Div和JavaScript可以实现菜单。
-
利用JavaScript控制Div的显示和隐藏。
- div.style.display
- "none"
- "block"
- 利用js对这两种状态进行灵活转换就行了
- div.style.display
2.6 作业
计算圆的面积,使用
onclick, onSubmit, document.form1.radius.value, getElementById(id)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算圆的面积</title> </head> <script type="text/javascript"> function Cal() { var radius = document.form1.radius.value; if (radius == "") { alert("未输入任何数据"); } else { radius = Number(radius); if (radius >= 0) { alert("圆的面积为=" + (3.14 * radius * radius)); } else { alert("半径数值有误"); } } return true; } function Check(id) { alert('id='+id); var radius = document.getElementById(id); alert('radius='+radius); alert('radius.nodeValue='+radius.nodeValue); alert('radius.nodeName='+radius.nodeName); alert('radius.nodeType='+radius.nodeType); alert('radius.value='+radius.value); <!--这个才是真实显示--> return false; } </script> <body> <form action="a.jsp" method="post" name="form1" onsubmit="return Check('123456')"> 半径 <input type="text" name="radius" id="123456"/> <br /> <input type="button" name="btn" value="开始计算" onclick="Cal()"/> <input type="submit" name="submit1" value="submit" /> </form> </body> </html>
尝试DIV和超链接整个小菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用DIV来</title> </head> <script type="text/javascript"> function showDiv(id) { var tar = document.getElementById(id); if (tar.style.display == "none") { tar.style.display = "block"; } else { tar.style.display = "none"; } return false; } </script> <body> <div id="ysu_school"> <a href="" onclick="return showDiv('ysu_college')">燕山大学</a><br /> <!--注意链接的是哪些地方--> <div id="ysu_college"> <a href="" onclick="return showDiv('ysu_department')">-- 信息学院</a><br /> <div id="ysu_department"> <a href="">---- 计算机</a><br /> <a href="">---- 光电子</a><br /> <a href="">---- 软件工程</a><br /> </div> <a href="">-- 机械学院</a><br /> </div> </div> </body> </html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥