DOM javascript学习 一

最新推荐文章于 2024-06-24 21:17:51 发布
最新推荐文章于 2024-06-24 21:17:51 发布
阅读量65 收藏
点赞数
文章标签： JavaScript 浏览器 XHTML HTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/morefree_/article/details/83924171
版权 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" />
	<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<title>Image Gallery</title>
	<script type="text/javascript" src="c.js"></script>	
		<link  rel="stylesheet" href="styles/layout.css"
	type="text/css" media="screen"	/>
	</head>
	<body>
		<h1>Snapshots</h1>
		<ul id="imagegallery">
			<li><a href="images/a.jpg"  title="a firework display" class="gallerypic">a</a></li>
			<li><a href="images/b.jpg"  title="a cup of coffee" class="gallerypic">b</a></li>
			<li><a href="images/c.jpg" title="a red red rose" class="gallerypic">c</a></li>
			<li><a href="images/d.jpg" title="" class="gallerypic">d</a></li>
		</ul>
		<p id="description">Choose a image.</p>
		<img id="placeholder" src="images/placeholder.gif" />
		<a href="http://www.baidu.com" class="popUp">popUp</a>
	</body>

</html>
</DOCTYPE>


addLoadEvent(prepareLinks);


function prepareLinks(){
	//alert("prepareLinks");
	if(!document.getElementById) {
		return false;
	}
	if(!document.getElementsByName) {
		return false;
	}
	if(!document.getElementById("imagegallery")){
		return false;
	}


	var gallery = document.getElementById("imagegallery");

	var links = gallery.getElementsByTagName("a");
	for (var i=0;i<links.length ;i++ ){
		if (links[i].getAttribute("class")=="gallerypic"){
			//alert("gallerypic"+i);
			links[i].onclick = function(){
				//为了让showPic()函数所返回的布尔值发挥作用，要加上return ,传递给浏览器
				return showPic(this);
				//return false;     //是否反回false应该由showPic决定而不是由prepareLinks决定
			}
			//links[i].onkeypress = links[i].onclick;  //键盘事件  配合TAB键使用 一般无需添加，onclick可以识别TAB+ENTER
		}
	} 

/*
	for (var i=0;i<links.length ;i++ ){
		if (links[i].getAttribute("class")=="popUp"){
			//alert("to popUp");
			links[i].onclick = function(){
				popUp(this.getAttribute("href"));return false
			}
		}	
	}
*/
	//alert("prepareLinks over");
}

function showPic(whichPic){
	//salert("showPic");
	//检查是否有placeholder 这个ID的元素,如果没有则让html的href跳转
	if(!document.getElementById("placeholder")){
		alert("there is no element named placeholder");
		return true;
	}
	var source = whichPic.getAttribute("href");
	var placeholder = document.getElementById("placeholder");
	if(placeholder.nodeName!="IMG"){
		return true;
	}

	placeholder.setAttribute("src",source);

	//检查是否有description这个id的元素
	if(!document.getElementById("description")){
		return false;
	}

	if(whichPic.getAttribute("title")){
		var text = whichPic.getAttribute("title");
	} else {
		var text = "";
	}
	var description =  document.getElementById("description");

	if(description.firstChild.nodeType == 3){
		description.firstChild.nodeValue = text;
	}

	return false;
}

function popUp(winURL){
	alert("popUp");
	return true;
	window.open(winURL,"popup","width=320,height=480");
}


//addLoadEvent!  onload函数添加
function addLoadEvent(func){
	var oldonload = window.onload;
	if(typeof winonload != 'function'){
		window.onload = func;
	}
	else {
		window.onload = function(){
			oldload();
			func();
		}
	}
}



body{
	font-family:"Helvetica","Arial",sans-serif;
	color:#333;
	background-color:#ccc;
	margin:1em 10%;
}

h1{
	color:#333;
	background-color:transparent;
}

a{
	color:#c60;
	background-color:transparent;
	font-weight:bold;
	text-decoration:none;
}

ul{
	padding:0;
}

li{
	float:left;
	padding:1em;
	list-style:none;

}


morefree_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript学习 — 初识DOM
weixin_67614925的博客
05-20 149
文章目录定义文档对象模型DOMDOM树扩展 定义        文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTMl和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在
JavaScript—DOM学习
weixin_50735831的博客
08-08 424
dom基础学习
JavaScript学习之DOM模型概念
林林一928的博客
04-21 756
DOM是浏览器提供一套专门用来操作网页内容的功能。JavaScript分为: 1. ECMAScripts(javaScripts语言基础)2.Web APIs: 2.1 DOM(页面文档对象类型)2.2 BOM(浏览器对象模型)。节点（node）：DOM 的最小组成单位。 一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是 DOM 树。Node.nodeType属性
JavaScript之DOM
qq_43751200的博客
06-05 1754
DOM
Javascript学习之DOM学习
m0_53450739的博客
04-01 74
DOM的核心对象是document对象，document对象是浏览器内置的一个对象，里面存储着专门用来操作元素的各种方法。页面中的标签，我们通过JS获取到之后，就把这个标签叫做DOM对象。
JavaScript的学习之DOM简介
人生苦短
06-24 574
DOM全称Document Object Model文档对象模型文档：表示整个HTML网页文档对象：表示网页中的每一个部分转换为一个对象模型：表示对象之间的关系，为了方便我们获取对象。
一起学习javascript-DOM
m0_74762754的博客
06-11 347
修改属性和内容：可以直接修改节点的属性值，如element.setAttribute('attributeName', 'value')，或者修改文本内容，如textContent或innerText属性。// document.getElementById('div1').innerHTML = '这是div1块，更新了内容';// 删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。// 更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
23 JavaScript学习：验证API
热门推荐
百锦再的博客
04-30 8万+
结合上述的属性和相关的事件，如 input 事件、submit 事件，您可以实现强大的前端验证逻辑。JavaScript中的保留关键字是一些被语言规范保留用于特定目的的单词，不能被用作标识符（比如变量名、函数名等）。这些是一些基本的约束验证方法，可以帮助您在前端验证用户输入。在 JavaScript 中，约束验证的 DOM 属性是指那些用于描述和控制表单元素验证行为的属性。所有的现代浏览器完全支持 ECMAScript 3（ES3，JavaScript 的第三版，从 1999 年开始）。
04 JavaScript学习：输出
百锦再的博客
04-19 6万+
JavaScript 没有任何打印或者输出的函数。
qt练习控件label控件-lineEdit控件样例代码
07-30
qt练习控件label控件-lineEdit控件样例代码
【JCR一区级】麻雀搜索算法SSA-CNN-LSTM-Attention故障诊断分类预测【含源码 5689期】.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-LSTM-Attention分类系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Attention分类 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Attention分类 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Attention分类 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Attention分类 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Attention分类
详解MATLAB Simulink通信系统建模与仿真
07-30
第1 章 MATLAB 基础与通信系统仿真 1.1 MATLAB 简介 1.2 MATLAB 程序设计 1.3 通信系统仿真 第2 章 Simulink 仿真基础 2.1 Simulink 简介 2.2 Simulink 工作环境 2.3 Simulink 仿真的基本方法 2.4 创建自己的模块库 2.5 S-函数的编写 第3 章 通信信号与系统分析 3.1 离散信号和系统 3.2 Fourier 分析 3.3 带通信号的低通等效 3.4 随机信号分析 第4 章 信道 4.1 加性高斯白噪声信道 4.2 多径衰落信道 第5 章 模拟调制 5.1 幅度调制 5.2 角度调制 第6 章 数字基带传输 6.1 概述 6.2 二进制基带信号传输 6.3 基带PAM 信号传输 6.4 带限信道的信号传输 第7 章 数字信号载波传输 7.1 概述 7.2 载波幅度调制（PAM） 7.3 载波相位调制（PSK） 7.4 正交幅度调制（QAM） 7.5 载波频率调制（FSK） 第8 章 信道编码和交织 8.1 概述 8.2 线性分组码
SCI一区】淘金算法GRO-CNN-BiLSTM-Mutilhead-Attention多变量时序预测含源码 5642.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-BiLSTM-Mutilhead-Attention回归预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-BiLSTM-Mutilhead-Attention回归预测 4.4.5 萤火虫算法FA/差分算法DE-CNN-BiLSTM-Mutilhead-Attention回归预测
2020年首届“洪泽湖杯”中国人工智能掼蛋算法大赛第8名我就是掼蛋.zip
07-30
毕业设计是高等教育阶段学生完成学业的一个重要环节，通常在学士或硕士学业即将结束时进行。这是学生将在整个学业中所学知识和技能应用到实际问题上的机会，旨在检验学生是否能够独立思考、解决问题，并展示其专业能力的一项综合性任务。 毕业设计的主要特点包括： 独立性： 毕业设计要求学生具备独立思考和解决问题的能力。学生需要选择一个合适的课题，研究相关文献，进行实地调查或实验，并提出独立见解。 实践性： 毕业设计是将理论知识应用到实际问题中的一次实践。通过完成毕业设计，学生能够将所学的专业知识转化为实际的解决方案，加深对专业领域的理解。 综合性： 毕业设计往往要求学生运用多个学科的知识，综合各种技能。这有助于培养学生的综合素养，提高他们的综合能力。 导师指导： 学生在毕业设计过程中通常由一名指导老师或导师团队提供指导和支持。导师负责引导学生确定研究方向、制定计划、提供建议，并在整个过程中监督进展。 学术规范： 毕业设计要求学生按照学术规范完成研究，包括文献综述、研究设计、数据采集与分析、结论和讨论等环节。学生需要撰写一篇完整的毕业论文，并进行答辩。
网络音乐搜索引擎，音乐搜索器 - 多站合一音乐搜索,音乐在线试听
最新发布
07-30
网络音乐搜索引擎，音乐搜索器 - 多站合一音乐搜索,音乐在线试听 效果截图https://www.diyiyuanma.cn/3444.html 多站合一音乐搜索解决方案，数据调用的是各网站的API接口， 有的接口并不是开放的，随时可能失效，本项目相关代码仅供参考。 网络音乐搜索引擎，音乐搜索器 - 多站合一音乐搜索,音乐在线试听
这是一个旨在简化合约部署、验证、交互等操作用于生成区块链智能合约Foundry框架指令的 Web3.0开发者工具
07-30
这是一个旨在简化合约部署、验证、交互等操作用于生成区块链智能合约Foundry框架指令的 Web3.0开发者工具。
三种esprit算法实现doa估计 _rezip.zip
07-30
在信号处理领域，DOA（Direction of Arrival）估计是一项关键技术，主要用于确定多个信号源到达接收阵列的方向。本文将详细探讨三种ESPRIT（Estimation of Signal Parameters via Rotational Invariance Techniques）算法在DOA估计中的实现，以及它们在MATLAB环境中的具体应用。 ESPRIT算法是由Paul Kailath等人于1986年提出的，其核心思想是利用阵列数据的旋转不变性来估计信号源的角度。这种算法相比传统的 MUSIC（Multiple Signal Classification）算法具有较低的计算复杂度，且无需进行特征值分解，因此在实际应用中颇具优势。 1. 普通ESPRIT算法 普通ESPRIT算法分为两个主要步骤：构造等效旋转不变系统和估计角度。通过空间平移（如延时）构建两个子阵列，使得它们之间的关系具有旋转不变性。然后，通过对子阵列数据进行最小二乘拟合，可以得到信号源的角频率估计，进一步转换为DOA估计。 2. 常规ESPRIT算法实现 在描述中提到的`common_esprit_method1.m`和`common_esprit_method2.m`是两种不同的普通ESPRIT算法实现。它们可能在实现细节上略有差异，比如选择子阵列的方式、参数估计的策略等。MATLAB代码通常会包含预处理步骤（如数据归一化）、子阵列构造、旋转不变性矩阵的建立、最小二乘估计等部分。通过运行这两个文件，可以比较它们在估计精度和计算效率上的异同。 3. TLS_ESPRIT算法 TLS（Total Least Squares）ESPRIT是对普通ESPRIT的优化，它考虑了数据噪声的影响，提高了估计的稳健性。在TLS_ESPRIT算法中，不假设数据噪声是高斯白噪声，而是采用总最小二乘准则来拟合数据。这使得算法在噪声环境下表现更优。`TLS_esprit.m`文件应该包含了TLS_ESPRIT算法的完整实现，包括TLS估计的步骤和旋转不变性矩阵的改进处理。 在实际应用中，选择合适的ESPRIT变体取决于系统条件，例如噪声水平、信号质量以及计算资源。通过MATLAB实现，研究者和工程师可以方便地比较不同算法的效果，并根据需要进行调整和优化。同时，这些代码也为教学和学习DOA估计提供了一个直观的平台，有助于深入理解ESPRIT算法的工作原理。
细胞分割计数matlab程序 附GUI 1.zip
07-30
细胞分割计数matlab程序 附GUI 1
【SCI顶级】多元宇宙算法MVO-CNN-LSTM-Multihead-Attention温度预测【含源码 5726期】.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-LSTM-Mutilhead-Attention回归预测系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Mutilhead-Attention回归预测 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Mutilhead-Attention回归预测 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Mutilhead-Attention回归预测
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值