`
slccie
  • 浏览: 18774 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

04_DOM操作

 
阅读更多

案例研究1：替换超链接的title（显示过慢）

 

<!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=utf-8" />
<title>文字提示</title>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<style type="text/css">
body{
	margin:0;
	padding:40px;
	background:#fff;
	font:80% Arial, Helvetica, sans-serif;
	color:#555;
	line-height:180%;
}
p{
	clear:both;
	margin:0;
	padding:.5em 0;
}
/* tooltip */
#tooltip{
	position:absolute;
	border:1px solid #333;
	background:#f7f5d1;
	padding:1px;
	color:#333;
	display:none;
}
</style>
<script type="text/javascript">
$(function(){
    var x = 10;  
	var y = 20;
	$("a.tooltip").mouseover(function(e){
       	this.myTitle = this.title;
		this.title = "";	
	    var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>"; //创建 div 元素
		$("body").append(tooltip);	//把它追加到文档中
		$("#tooltip")
			.css({
				"top": (e.pageY+y) + "px",
				"left": (e.pageX+x)  + "px"
			}).show("fast");	  //设置x坐标和y坐标，并且显示
    }).mouseout(function(){		
		this.title = this.myTitle;
		$("#tooltip").remove();   //移除 
    }).mousemove(function(e){
		$("#tooltip")
			.css({
				"top": (e.pageY+y) + "px",
				"left": (e.pageX+x)  + "px"
			});
	});
})
</script>
</head>
<body>
<p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p>
<p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p>
<p><a href="#" title="这是自带提示1.">自带提示1.</a></p>
<p><a href="#" title="这是自带提示2.">自带提示2.</a> </p>
</body>
</html>

案例研究2：图片提示

 

<!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=utf-8" />
<title>图片提示</title>
 <!--   引入jQuery -->
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
<style type="text/css">
body{
	margin:0;
	padding:40px;
	background:#fff;
	font:80% Arial, Helvetica, sans-serif;
	color:#555;
	line-height:180%;
}
img{border:none;}
ul,li{
	margin:0;
	padding:0;
}
li{
	list-style:none;
	float:left;
	display:inline;
	margin-right:10px;
	border:1px solid #AAAAAA;
}

/* tooltip */
#tooltip{
	position:absolute;
	border:1px solid #ccc;
	background:#333;
	padding:2px;
	display:none;
	color:#fff;
}
</style>
<script type="text/javascript">
$(function(){
	var x = 10;
	var y = 20;
	$("a.tooltip").mouseover(function(e){
		this.myTitle = this.title;
		this.title = "";	
		var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";
		var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"<\/div>"; //创建 div 元素
		$("body").append(tooltip);	//把它追加到文档中						 
		$("#tooltip")
			.css({
				"top": (e.pageY+y) + "px",
				"left":  (e.pageX+x)  + "px"
			}).show("fast");	  //设置x坐标和y坐标，并且显示
    }).mouseout(function(){
		this.title = this.myTitle;	
		$("#tooltip").remove();	 //移除 
    }).mousemove(function(e){
		$("#tooltip")
			.css({
				"top": (e.pageY+y) + "px",
				"left":  (e.pageX+x)  + "px"
			});
	});
})
</script>

</head>
<body>
<h3>有效果：</h3>
	<ul>
		<li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
		<li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
		<li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
		<li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
	</ul>


<br/><br/><br/><br/>
<br/><br/><br/><br/>


<h3>无效果：</h3>
<ul>
		<li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
		<li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
		<li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
		<li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
	</ul>
</body>
</html>

 

 

分享到：
| 在Eclipse中安装Ext插件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    python 13、JAVASCRIPT基础4-1_DOM操作、事件处理_Day04_AM.mp4

    python 13、JAVASCRIPT基础4-1_DOM操作、事件处理_Day04_AM.mp4

    04JavaScript操作DOM.zip

    在这个"04JavaScript操作DOM"的资料包中，我们很可能会深入学习如何使用JavaScript来对网页的结构进行动态更新和交互。 在JavaScript中，DOM被视为一个树形结构，其中每个节点代表了HTML或XML文档的一部分。通过DOM...

    vue-component_day04_04_交互添加.zip

    在"vue-component_day04_04_交互添加.zip"这个资源中，我们可以推测这是关于Vue组件交互性增强的一个教程，特别是针对第四天课程的第四个主题。在这个阶段，你可能将学习如何在Vue应用中添加用户交互功能，如事件...

    04_vue源码解析21

    这样做的目的是为了避免频繁的DOM操作，因为DOM操作是昂贵的，会消耗大量的系统资源。在下一个事件循环的"tick"中，Vue会刷新这个队列，执行实际的工作。这涉及到JavaScript的事件循环机制，包括宏任务和微任务。宏...

    vue-component_day04_03.zip

    在`mounted`钩子中，你可以确保组件已经渲染到DOM，并可以进行DOM操作，如获取元素的引用或者执行需要DOM存在的动画。 如果静态组件包含数据，我们需要确保这些数据在组件实例化时已经被正确地初始化。Vue提供数据...

    04_尚硅谷_jQuery_王振国 - 课堂笔记1

    在本节课程“04_尚硅谷_jQuery_王振国 - 课堂笔记1”中，主要讲解了jQuery中的一些核心操作，包括属性操作、练习、CSS样式操作、动画操作和事件操作。以下是对这些知识点的详细说明： 1. jQuery 的属性操作： - `...

    DOM04 编程.pdf_前端学习资料

    【前端学习资料】中的"DOM04 编程.pdf"主要涵盖了前端开发中关于DOM（Document Object Model）和BOM（Browser Object Model）的核心概念、API以及相关实践。DOM是HTML和XML文档的编程接口，它允许我们通过JavaScript...

    parse html node content

    这个库允许开发者通过类方法来操作HTML，而无需直接处理DOMDocument或DOMElement等复杂对象。 下面我们将深入探讨如何使用“simple_html_dom.php”库来解析HTML节点内容： 1. **引入库**： 在PHP代码中，首先需要...

    04.任务四：Virtual DOM 的实现原理

    总的来说，Virtual DOM通过提供一种抽象层，使得前端框架可以高效地处理复杂的UI更新，降低了DOM操作的性能开销，提高了用户体验。通过理解和掌握Virtual DOM的原理，开发者能够更好地优化Web应用的性能。

    JavaWeb 04 BOM&amp;DOM

    通过DOM，JavaScript可以操作页面内容，而BOM则提供对浏览器功能的访问。例如，当用户点击按钮时，可以通过BOM获取用户输入，然后通过DOM更新页面显示。 **JavaWeb中的应用** 在JavaWeb开发中，JavaScript代码通常...

    使用dom4j读取xml四种方法

    Dom4j作为一款简洁高效的Java库，被广泛应用于解析、操作XML文档。本文将详细介绍使用dom4j读取XML文件的四种常见方法，并通过示例代码帮助读者更好地理解和掌握这些技术。 #### 方法一：使用`SAXReader`与`...

    04_深入浅出JavaScript.

    然后构建了JavaScript工具包，包括动态操作标记、使用CSS和DOM修改页面风格、验证表单、处理图像等；接着通过一个完整的案例研究阐明了如何使用多种JavaScript 技术协同工作；最后单独设计一章来讲述第三方示例，...

    Winwebmail_17mail_std_u2010_04_29_full_with_ajax_3.8.1.1

    不仅如此，改进后的转发邮件界面同样得到了优化，使得邮件的转发操作更加简便，减少了用户的操作步骤。 递送界面的改进则进一步体现了Winwebmail对用户体验的关注。利用Ajax的实时更新特性，用户可以在不离开当前...

    AirtestIDE_2019-04-16_py3_win64.zip

    Poco（Python库）是一个强大的UI自动化工具，它可以解析出应用的控件结构，使得开发者可以像操作DOM一样操作移动应用的界面元素。Poco支持多种平台，包括Android、iOS和Windows，它提供了丰富的API，让编写自动化...

    hw04_tests:测验

    在"hw04_tests"中，我们可能会看到一系列的测试用例，涵盖了变量声明、数据类型、控制流（条件语句和循环）、函数、对象、数组、事件处理、DOM操作等基本概念。 1. 变量与数据类型：JavaScript支持var、let和const...

    04_Code_Quiz

    这可能包括基础语法、变量、数据类型、控制流（如条件语句和循环）、函数、对象、数组、DOM操作、事件处理以及可能的高级概念，如闭包、原型链、异步编程（回调、Promise、async/await）等。 【标签】"JavaScript" ...

    JavaScript学习笔记之DOM基础操作实例小结

    在给定的文件内容中，我们看到了对JavaScript基础操作的介绍，特别是在DOM操作方面的实例小结。 ### 一、子节点 在DOM中，每个节点可以有零个或多个子节点。子节点包括元素节点、文本节点等。通过`childNodes`属性...

    04_Coding_Quiz

    这些挑战可能涵盖基础语法、函数、对象、数组、控制流程、错误处理、DOM操作、事件处理、以及可能涉及到更高级的主题，如异步编程（Promise、async/await）、模块系统（CommonJS、ES6模块）和框架（如React或Vue）的...

Magicbox
Global site tag (gtag.js) - Google Analytics