JavaScript 第二章 使用window对象
JavaScript 第四章 DOM编程提升
JavaScript 第三章 DOM编程基础 使用document对象
注意：各案例素材已提供下载
1、技术目标
- 使用getElementById()方法访问DOM元素
- 使用getElementsByName()方法访问DOM元素
- 使用getElementsByTagName()方法访问DOM元素
- 使用display样式属性控制元素的隐藏和显示
2、document对象
document对象是window对象的一部分，代表了整个HTML文档，可
用于访问页面中的所有元素，在使用时要注意浏览器差异以及符合
W3C的标准
3、document对象的常用属性
属性：
referrer 返回链接到当前文档的前一个页面的URL
URL 返回当前文档的URL
document.referrer属性可以判断当前页面是不是通过超链接访问的 ，
，如果不是则返回null，如果是则返回包含这个超链接的上一个页面
的URL，该属性可以限制进入页面的链接，如果不是由指定页面进入
的可以提醒或者跳转到其他页面
注意：使用document.referrer的时候，必须将页面发布到Web服务器
上运行才有效果
pageA.html通过超链接可打开pageB.html，示例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>pageA.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>
<a href="pageB.html">跳转到pageB.html</a>
</h1>
</body>
</html>
pageB.html显示document.referrer属性值，示例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>pageB.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
//显示document.referrer属性值
alert(document.referrer);
</script>
</head>
<body>
<h1>
这是pageB.html
</h1>
</body>
</html>
4、document对象访问页面元素的三种方法
- getElementById()按元素的ID名称来访问，返回对拥有指定id的第一个对象
- getElementsByName()按元素的name名称来访问，返回带有指定名称的对象的集合
- getElementsByTagName() 按标签来访问，返回带有指定标签名的对象的集合
5、访问页面元素
案例功能描述：
- 动态改变层、标签中的内容
- 访问相同name的元素
- 访问相同标签的元素
实现代码(试着运行以下代码，体会3种访问元素方法的使用)：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使用Document方法</title>
<style type="text/css">
body{
font-size:14px;
line-height:30px;
}
input{
margin:1px;
width:90px;
font-size:12px;
padding:0;
}
#node{
width:100px;
font-size:24px;
font-weight:bold;
float: left;
}
</style>
<script type="text/javascript">
function changeLink(){
//获取DIV对象
var divObj = document.getElementById("node");
//改变DIV对象的HTML内容
divObj.innerHTML = "<em>搜狐</em>";
}
function all_input(){
//获取所有input标签对象
var aInput = document.getElementsByTagName("input");
var sStr = "";
for(var i = 0; i < aInput.length; i++){
sStr += aInput[i].value + "<br />";
}
document.getElementById("s").innerHTML=sStr;
}
function s_input(){
var aInput = document.getElementsByName("season");
var sStr="";
for(var i=0;i<aInput.length;i++){
sStr+=aInput[i].value+"<br />";
}
document.getElementById("s").innerHTML=sStr;
}
</script>
</head>
<body>
<div id="node">新浪</div>
<input name="b1" type="button" value="改变层内容"
onclick="changeLink();" /><br />
<br />
<input name="season" type="text" value="春" />
<input name="season" type="text" value="夏" />
<input name="season" type="text" value="秋" />
<input name="season" type="text" value="冬" />
<br />
<input name="b2" type="button" value="显示input内容"
onclick="all_input()" />
<input name="b3" type="button" value="显示season内容" onclick="s_input()" />
<p id="s"></p>
</body>
</html>
6、元素的显示和隐藏
实现元素的隐藏、显示可使用visibility 属性与display 属性，
使用visibility的语法如下：
元素对象.style.visibility="值";
值有两种：
visible 表示元素是可见的
hidden 表示元素是不可见的
使用display的语法如下：
元素对象.style.display="值";
值有两种：
none 表示此元素不会被显示
block 表示此元素将显示为块级元素，
此元素前后会带有换行符
7、元素的隐藏于显示案例
请运行如下案例，体会visibility与display的区别
案例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>显示和隐藏图片</title>
<script type="text/javascript">
function hidden_b2(){
document.getElementById("b2").style.visibility="hidden";
}
function none_b2(){
document.getElementById("b2").style.display="none";
}
</script>
</head>
<body>
<img src="images/book1.jpg" alt="book1" id="b1" />
<img src="images/book2.jpg" alt="book2" id="b2" />
<img src="images/book3.jpg" alt="book3" id="b3" /><br />
<input name="btn1" type="button" value="visibility隐藏图b2" onclick="hidden_b2()" />
<input name="btn2" type="button" value="display隐藏图b2" onclick="none_b2()" />
</body>
</html>
8、使用元素的隐藏、显示制作简单的树形菜单
案例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>制作简单的树形菜单</title>
<style type="text/css">
body{
font-size:13px;
line-height:20px;
}
a{
font-size: 13px;
color: #000000;
text-decoration: none;
}
a:hover{
font-size:13px;
color: #ff0000;
}
img {
vertical-align: middle;
border:0;
}
.no_circle{
list-style-type:none; /*设置列表项标志的类型为无*/
display:none;
}
</style>
<script type="text/javascript">
function show(){
if(document.getElementById("art").style.display=='block'){
//触动的ul如果处于显示状态，即隐藏
document.getElementById("art").style.display='none';
}else{
//触动的ul如果处于隐藏状态，即显示
document.getElementById("art").style.display='block';
}
}
</script>
</head>
<body>
<b><img src="images/fold.gif">树形菜单：</b>
<ul>
<a href="javascript:show();">
<img src="images/fclose.gif">文学艺术
</a></ul>
<ul id="art" class="no_circle">
<li><img src="images/doc.gif" >先锋写作</li>
<li> <img src="images/doc.gif" >小说散文</li>
<li><img src="images/doc.gif" >诗风词韵</li>
</ul>
</body>
</html>
9、实现复选框的全选效果
效果描述：
当你点击全选时，所有复选框被选中，再次点击全选，
所有复选框取消选中
效果分析：
通过对复选框的checked属性值进行设置，其值如下：
- 选中：true
- 未选中：false
效果图：
示例代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>全选效果</title>
<style type="text/css">
.bg{
background-image: url(images/list_bg.gif);
background-repeat: no-repeat;
width: 730px;
}
td{
text-align:center;
font-size:13px;
line-height:25px;
}
body{margin:0}
</style>
<script type="text/javascript">
function check(){
var oInput = document.getElementsByName("product");
var isChecked = document.getElementById("all").checked;
for (var i=0; i < oInput.length; i++){
oInput[i].checked = isChecked;
}
}
</script>
</head>
<body onload="init();">
<table border="0" cellspacing="0" cellpadding="0" class="bg">
<tr>
<td style="height:40px;"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr style="font-weight:bold;">
<td>
<input id="all" type="checkbox" value="全选" onclick="check();" />
全选
</td>
<td>商品图片</td>
<td>商品名称/出售者/联系方式</td>
<td>价格</td>
</tr>
<tr>
<td colspan="4"><hr style="border:1px #CCCCCC dashed" /></td>
</tr>
<tr>
<td><input name="product" type="checkbox" value="1" /></td>
<td><img src="images/list0.jpg" alt="alt" /></td>
<td>杜比环绕，家庭影院必备，超真实享受<br />
出售者：ling112233<br />
<img src="images/online_pic.gif" alt="alt" />
<img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td>
<td>一口价<br />
2833.0 </td>
</tr>
<tr>
<td colspan="4"><hr style="border:1px #CCCCCC dashed" /></td>
</tr>
<tr>
<td><input name="product" type="checkbox" value="2" /></td>
<td><img src="images/list1.jpg" alt="alt" /></td>
<td>NVDIA 9999GT 512MB 256bit极品显卡，不容错过<br />
出售者：aipiaopiao110 <br />
<img src="images/online_pic.gif" alt="alt" />
<img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td>
<td>一口价<br />
6464.0 </td>
</tr>
<tr>
<td colspan="4"><hr style="border:1px #CCCCCC dashed" /></td>
</tr>
<tr>
<td><input name="product" type="checkbox" value="3" /></td>
<td><img src="images/list2.jpg" alt="alt" /></td>
<td>精品热卖：高清晰，30寸等离子电视<br />
出售者：阳光的挣扎 <br />
<img src="images/online_pic.gif" alt="alt" />
<img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td>
<td>一口价<br />
18888.0 </td>
</tr>
<tr>
<td colspan="4"><hr style="border:1px #CCCCCC dashed" /></td>
</tr>
<tr>
<td><input name="product" type="checkbox" value="4" /></td>
<td><img src="images/list3.jpg" alt="alt" /></td>
<td>Sony索尼家用最新款笔记本 <br />
出售者：疯狂的镜无<br />
<img src="images/online_pic.gif" alt="alt" />
<img src="images/list_tool_fav1.gif" alt="alt" /> 收藏</td>
<td>一口价<br />
5889.0 </td>
</tr>
<tr>
<td colspan="4"><hr style="border:1px #CCCCCC dashed" /></td>
</tr>
</table>
</body>
</html>
相关推荐
重点：所有项目均附赠详尽的SQL文件，这一细节的处理，让我们的项目相比其他博主的作品，严谨性提升了不止一个量级！更重要的是，所有项目源码均经过我亲自的严格测试与验证，确保能够无障碍地正常运行。 1.项目适用场景：本项目特别适用于计算机领域的毕业设计课题、课程作业等场合。对于计算机科学与技术等相关专业的学生而言，这些项目无疑是一个绝佳的选择，既能满足学术要求，又能锻炼实际操作能力。 2.超值福利：所有定价为9.9元的项目，均包含完整的SQL文件。如需远程部署可随时联系我，我将竭诚为您提供满意的服务。在此，也想对一直以来支持我的朋友们表示由衷的感谢，你们的支持是我不断前行的动力！ 3.求关注：如果觉得我的项目对你有帮助，请别忘了点个关注哦！你的支持对我意义重大，也是我持续分享优质资源的动力源泉。再次感谢大家的支持与厚爱！ 4.资源详情：https://blog.csdn.net/2301_78888169/article/details/144929660 更多关于项目的详细信息与精彩内容，请访问我的CSDN博客！
2024年AI代码平台及产品发展简报-V11
蓝桥杯算法学习冲刺（主要以题目为主）
QPSK调制解调技术研究与FPGA实现：详细实验文档的探索与实践,基于FPGA实现的QPSK调制解调技术：实验文档详细解读与验证,QPSK调制解调 FPGA设计，有详细实验文档 ,QPSK调制解调; FPGA设计; 详细实验文档,基于QPSK调制的FPGA设计与实验文档
PID、ADRC和MPC轨迹跟踪控制器在Matlab 2018与Carsim 8中的Simulink仿真研究,PID、ADRC与MPC轨迹跟踪控制器在Matlab 2018与Carsim 8中的仿真研究,PID, ADRC和MPC轨迹跟踪控制器Simulink仿真模型。 MPC用于跟踪轨迹 ADRC用于跟踪理想横摆角 PID用于跟踪轨迹 轨迹工况有双移线，避障轨迹，正弦轨迹多种 matlab版本为2018，carsim版本为8 ,PID; ADRC; MPC; 轨迹跟踪控制器; Simulink仿真模型; 双移线; 避障轨迹; 正弦轨迹; MATLAB 2018; CarSim 8,基于Simulink的PID、ADRC与MPC轨迹跟踪控制器仿真模型研究
重点：所有项目均附赠详尽的SQL文件，这一细节的处理，让我们的项目相比其他博主的作品，严谨性提升了不止一个量级！更重要的是，所有项目源码均经过我亲自的严格测试与验证，确保能够无障碍地正常运行。 1.项目适用场景：本项目特别适用于计算机领域的毕业设计课题、课程作业等场合。对于计算机科学与技术等相关专业的学生而言，这些项目无疑是一个绝佳的选择，既能满足学术要求，又能锻炼实际操作能力。 2.超值福利：所有定价为9.9元的项目，均包含完整的SQL文件。如需远程部署可随时联系我，我将竭诚为您提供满意的服务。在此，也想对一直以来支持我的朋友们表示由衷的感谢，你们的支持是我不断前行的动力！ 3.求关注：如果觉得我的项目对你有帮助，请别忘了点个关注哦！你的支持对我意义重大，也是我持续分享优质资源的动力源泉。再次感谢大家的支持与厚爱！ 4.资源详情：https://blog.csdn.net/2301_78888169/article/details/144486173 更多关于项目的详细信息与精彩内容，请访问我的CSDN博客！
内容概要：本文档详细介绍了一个利用Matlab实现Transformer-Adaboost结合的时间序列预测项目实例。项目涵盖Transformer架构的时间序列特征提取与建模，Adaboost集成方法用于增强预测性能，以及详细的模型设计思路、训练、评估过程和最终的GUI可视化。整个项目强调数据预处理、窗口化操作、模型训练及其优化（包括正则化、早停等手段）、模型融合策略和技术部署，如GPU加速等，并展示了通过多个评估指标衡量预测效果。此外，还提出了未来的改进建议和发展方向，涵盖了多层次集成学习、智能决策支持、自动化超参数调整等多个方面。最后部分阐述了在金融预测、销售数据预测等领域中的广泛应用可能性。 适合人群：具有一定编程经验的研发人员，尤其对时间序列预测感兴趣的研究者和技术从业者。 使用场景及目标：该项目适用于需要进行高质量时间序列预测的企业或机构，比如金融机构、能源供应商和服务商、电子商务公司。目标包括但不限于金融市场的波动性预测、电力负荷预估和库存管理。该系统可以部署到各类平台，如Linux服务器集群或云计算环境，为用户提供实时准确的预测服务，并支持扩展以满足更高频率的数据吞吐量需求。 其他说明：此文档不仅包含了丰富的理论分析，还有大量实用的操作指南，从项目构思到具体的代码片段都有详细记录，使用户能够轻松复制并改进这一时间序列预测方案。文中提供的完整代码和详细的注释有助于加速学习进程，并激发更多创新想法。
液滴穿越障碍：从文献到案例的复现研究,液滴破裂与障碍物穿越：文献复现案例研究,液滴生成并通过障碍物破裂。 该案例是文献复现，文献与案例一起。 ,液滴生成; 障碍物破裂; 文献复现; 案例研究,液滴破裂：障碍挑战的文献复现案例
蓝桥杯算法学习冲刺（主要以题目为主）
蓝桥杯算法学习冲刺（主要以题目为主）
基于最小递归二乘法的MPC自适应轨迹跟踪控制优化 针对轮胎刚度时变特性提升模型精度与鲁棒性，仿真验证满足车辆低速高精度跟踪与高速稳定性提升。,基于变预测时域MPC自适应轨迹跟踪控制与轮胎侧偏刚度优化提升模型精度和鲁棒性,基于变预测时域的MPC自适应轨迹跟踪控制，针对轮胎刚度时变的特点造成控制模型精度降低，基于最小递归二乘法（RLS）估算的轮胎侧偏刚度，提升了模型的控制精度和鲁棒性，通过carsim与simulink联合仿真结果发现，改进后的轨迹跟踪控制器既满足了车辆低速行驶下的轨 迹跟踪精度，也一定程度上克服了高速下车辆容易失去稳定性的问题。 有详细的lunwen分析说明和资料，以及本人的，仿真包运行。 ,基于变预测时域的MPC; 自适应轨迹跟踪控制; 轮胎刚度时变; 控制模型精度降低; 最小递归二乘法(RLS)估算; 模型控制精度和鲁棒性提升; carsim与simulink联合仿真; 轨迹跟踪控制器; 车辆稳定性。,基于变预测时域MPC的轮胎刚度自适应轨迹跟踪控制策略研究
GMSK调制解调技术研究：基于FPGA设计与实验详解,GMSK调制解调技术详解：基于FPGA设计的实验文档与实践应用,GMSK调制解调 FPGA设计，有详细实验文档 ,GMSK调制解调; FPGA设计; 详细实验文档; 实验结果分析,GMSK调制解调技术：FPGA设计与实验详解
# 基于Arduino和Python的Cansat卫星系统 ## 项目简介 本项目是一个Cansat卫星系统，旨在设计和实现一个小型卫星模型，通过火箭发射至1公里高空，并使用地面站接收其传输的数据。项目涉及Arduino编程、Python数据处理和可视化。 ## 主要特性和功能 1. 硬件组件 使用Arduino Nano作为Cansat的微控制器。 搭载BMP 280温度和压力传感器、ATGM336H GPS模块、LoRa通信模块等。 地面站使用Arduino Uno和LoRa通信模块接收数据。 2. 数据处理 使用Python进行数据处理和可视化，包括数据清洗、计算风速、绘制温度、压力、风速和海拔随时间变化的图表等。 3. 通信与控制 通过LoRa模块实现Cansat与地面站之间的数据传输。 提供实时监视和记录数据的脚本。 ## 安装和使用步骤 ### 1. 硬件准备
U9300C 龙尚4G模块安装后模块才能正常使用，win7 win10驱动程序，支持USB转接板。
# 基于Arduino平台的物联网温湿度监控系统 ## 项目简介 这是一个基于Arduino平台的物联网温湿度监控项目，旨在通过简单的硬件设备实现环境数据的实时监测与远程管理。该项目适用于智能家居、农业种植等领域。 ## 项目的主要特性和功能 1. 温湿度数据采集通过Arduino板连接温湿度传感器，实时采集环境数据。 2. 数据传输将采集到的数据通过无线网络模块发送到服务器或远程终端。 3. 数据可视化可在电脑或移动设备端展示实时的温湿度数据。 4. 报警功能当温湿度数据超过预设阈值时，自动触发报警通知。 ## 安装使用步骤 前提假设用户已经下载了本项目的源码文件。以下是简单明了的安装使用步骤 1. 环境准备安装Arduino开发环境，配置必要的硬件接口。 2. 硬件连接将Arduino板与温湿度传感器、无线网络模块连接。 3. 代码上传将本项目提供的Arduino代码上传至Arduino板。
基于需求响应与清洁能源接入的配电网重构优化：综合成本与混合整数凸规划模型分析（matlab实现）,基于需求响应与清洁能源接入的配电网重构算法研究：网损与成本优化的仿真分析,高比例清洁能源接入下计及需求响应的配电网重构（matlab代码） 该程序复现《高比例清洁能源接入下计及需求响应的配电网重构》，以考虑网损成本、弃风弃光成本和开关操作惩罚成本的综合成本最小为目标，针对配电网重构模型的非凸性，引入中间变量并对其进行二阶锥松弛，构建混合整数凸规划模型，采用改进的 IEEE33 节点配电网进行算例仿真，分析了需求响应措施和清洁能源渗透率对配电网重构结果的影响。 该程序复现效果和出图较好（详见程序结果部分），注释清楚，方便学习 ,高比例清洁能源; 需求响应; 配电网重构; 二阶锥松弛; 综合成本最小化; MATLAB代码; IEEE33节点配电网; 复现效果; 出图; 注释清楚。,Matlab代码复现：高比例清洁能源接入下的配电网重构模型与需求响应分析
# 基于C++的RapidJSON库测试项目 ## 项目简介 本项目是一个基于C++的RapidJSON库测试项目，主要用于测试RapidJSON库的功能正确性、性能以及稳定性。RapidJSON是一个高效的C++ JSON解析生成库，广泛应用于各种场景。本项目通过编写一系列的单元测试，覆盖了RapidJSON库的主要功能点，包括JSON解析、生成、内存管理、编码转换等，以确保RapidJSON库在各种情况下都能正确、稳定地工作。 ## 项目的主要特性和功能 1. 单元测试框架使用Google Test测试框架进行单元测试，确保测试的可靠性和可扩展性。 2. 全面测试覆盖覆盖了RapidJSON库的主要功能点，包括JSON解析、生成、内存管理、编码转换等，以及针对各种输入数据的测试。 3. 性能测试通过性能基准测试，评估RapidJSON库在处理不同规模和类型的JSON数据时的性能表现。
蓝桥杯算法学习冲刺（主要以题目为主）
内容概要：本文详细介绍如何安装和初步使用 VMware 虚拟机，从下载安装 VMware 到创建和配置新的虚拟机。主要内容包括：软件选择和安装步骤、虚拟机的新建配置、操作系统安装及初始化设置、安装 VMware Tools 提升性能以及一些常用的 VMWare 功能，如虚拟网络的不同连接方式及其应用场景。同时介绍了 VMware 软件在网络连接管理和服务配置方面的一些要点，确保虚拟机正常运行。 适用人群：计算机操作较为熟练、有意搭建不同操作系统测试环境的技术人员，以及想要了解虚拟机基本概念及应用的学生。 使用场景及目标：适合于个人用户进行系统兼容性和安全性的验证；适用于企业或开发者做软件测试、模拟复杂环境下作业，确保不影响宿主机正常工作的前提下完成多种任务；适用于教学培训环境中部署实验平台。此外，还可以用来隔离特定业务流程（比如银行工具）、探索不同类型操作系统的特点。 其他说明：需要注意的是，为了避免安装过程中出现问题，建议暂时关闭杀毒软件和防火墙。安装 VMware 需要接受许可协议，同时可以选择安装路径和安装类型（典型/自定义）。最后，对于网络设置，默认提供的三种模式——桥接模式、仅主机模式和 NAT 模式，可以帮助用户根据不同需求灵活调整网络连接方式。
java毕业设计源码