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对这两种状态进行灵活转换就行了

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>
posted @   lucky_light  阅读(138)  评论(0编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥
点击右上角即可分享
微信分享提示