jquery 操作DOM案例代码分享

更新时间：2012年04月05日 23:41:44 作者：

jquery 操作DOM案例，实现图片的显示，需要的朋友可以参考下

实例如下：

 
<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 language="javascript"> 
/*$(document).ready(function(){ 
var x=10; 
var y=20; 
$("a .tooltip").mouseover(function(e){ 
this.myTitle=this.title; 
this.title=""; 
var tooltip="<div id='tooltip'>"+this.title+"</div>"; 
$("body").append(tooltip); 
$("#tooltip").css({ 
"top" : (e.pageY+y) + "px", 
"left" : (e.pageX+x) + "px" 
}).show("fast"); 
}).mouseout(function(){ 
this.title=this.myTitle; 
$("#tooltip").remove(); 
}); 
}); 
*/ 
$(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> 
<div style="display:none"> 
<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> 
</div> 
<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> 

结果：

您可能感兴趣的文章:

DOM
案例

JQuery省市联动效果实现过程详解
这篇文章主要介绍了JQuery省市联动效果实现过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-05-05
jquery获取节点名称
这篇文章主要介绍了jquery获取节点名称的相关资料,需要的朋友可以参考下
2015-04-04
jQuery数据显示插件整合实现代码
由于我们公司的产品涉及到很多的表格数据显示，而且每张表的字段数都很多，在工作过程中(几任同仁的努力)，整合出一套自认为较为轻巧的方案
2011-10-10
jquery 多个radio的click事件实例
下面小编就为大家带来一篇jquery 多个radio的click事件实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
2016-12-12
jquery.ajax的url中传递中文乱码问题的解决方法
本篇文章主要是对jquery.ajax的url中传递中文乱码问题的解决方法进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-02-02
jQuery实现加入收藏夹功能(主流浏览器兼职)
jQuery实现加入收藏夹功能，代码比较简单，兼容主流浏览器，下面给大家分享下
2016-12-12
jQuery实现鼠标滑过遮罩并高亮显示效果
本文为大家详细介绍下使用jQuery实现鼠标滑过遮罩高亮显示效果，想必这种效果在网上大家都有见到过，下面是具体的示例，感兴趣的各位可以参考下哈，希望对大家有所帮助
2013-07-07
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
本篇文章主要是对jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-02-02
jQuery实现表格的增、删、改操作示例
这篇文章主要介绍了jQuery实现表格的增、删、改操作,涉及基于jQuery的事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下
2019-01-01
jquery删除数组中重复元素
本文主要讲解jquery删除数组中重复元素的具体思路与示例代码，有助于理解与学习，希望对大家有所帮助
2016-12-12