jquery 操作DOM案例代码分享


Posted in Javascript onApril 05, 2012

实例如下:

<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>

结果:

jquery 操作DOM案例代码分享

Javascript 相关文章推荐
JavaScript For Beginners(转载)
Jan 05 Javascript
Ext grid 添加右击菜单
Nov 26 Javascript
jQuery中获取Radio元素值的方法
Jul 02 Javascript
javascript匿名函数实例分析
Nov 18 Javascript
jquery使用animate方法实现控制元素移动
Mar 27 Javascript
JS数组去掉重复数据只保留一条的实现代码
Aug 11 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 Javascript
jquery加载单文件vue组件的方法
Jun 20 jQuery
ES6新特性:使用export和import实现模块化详解
Jul 31 Javascript
手写Node静态资源服务器的实现方法
Mar 20 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
vue2.0 解决抽取公用js的问题
Jul 31 Javascript
jquery 操作DOM的基本用法分享
Apr 05 #Javascript
文本框输入时 实现自动提示(像百度、google一样)
Apr 05 #Javascript
Ajax搜索结果页面下方的分页按钮的生成
Apr 05 #Javascript
jQuery之$(document).ready()使用介绍
Apr 05 #Javascript
javascript淡入淡出效果的实现思路
Mar 31 #Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 #Javascript
一个关于javascript匿名函数的问题分析
Mar 30 #Javascript
You might like
ThinkPHP视图查询详解
2014/06/30 PHP
php将textarea数据提交到mysql出现很多空格的解决方法
2014/12/19 PHP
PHP、Java des加密解密实例
2015/04/27 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
javascript 时间比较实现代码
2009/10/28 Javascript
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
2013/10/24 Javascript
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
2013/11/18 NodeJs
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
javascript实现微信分享
2014/12/23 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
jQuery实现类似淘宝网图片放大效果的方法
2015/07/08 Javascript
js评分组件使用详解
2017/06/06 Javascript
vue.js源代码core scedule.js学习笔记
2017/07/03 Javascript
jquery.validate.js 多个相同name的处理方式
2017/07/10 jQuery
浅谈Vue为什么不能检测数组变动
2019/10/14 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
Python Tkinter GUI编程入门介绍
2015/03/10 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
Python list运算操作代码实例解析
2020/01/20 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
Keras 实现加载预训练模型并冻结网络的层
2020/06/15 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
创立科技Java面试题
2015/11/29 面试题
交通安全教育制度
2014/02/02 职场文书
奉献演讲稿范文
2014/05/21 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
2014年环保工作总结
2014/11/26 职场文书
家庭暴力离婚起诉书
2015/05/18 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
安全教育培训心得体会
2016/01/15 职场文书
导游词之镇江焦山
2019/11/21 职场文书
nginx 多个location转发任意请求或访问静态资源文件的实现
2021/03/31 Servers
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python