昨天写了一篇关于jquery选择器的学习的记录，后边发现关于jquery的学习不能只依靠简单的文档，必须动手写出一些实际的东西，这样会学习的更好，今天呢，就给大家带来利用jquery实现文字和图片提示的效果。
jquery文字提示
先看下效果：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>jquery选择器</title>
<script type="text/javascript" src="../jquery/jquery-2.1.4.js"></script>
<style type="text/css">
body{
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
#tooltip{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:1px;
color:#333;
display:none;
}
</style>
<script type="text/javascript">
$(function(){
$("a.tooltip").mouseover(function(e){
//创建div元素
var tooltip = "<div id=‘tooltip‘>"+this.title+"</div>";
//添加到dom中
$("body").append(tooltip);
//设置div的样式
$("#tooltip")
.css({
"top":e.pageY+"px",
"left":e.pageX+"px"
}).show("fast");
}).mouseout(function(){
$("#tooltip").remove();
})
})
</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>解释一下：
超链接a标签默认为我们提供了一个提示的title属性，看下我们自己定义的提示：
$(“a.tooltip”).mouseover(function(e)）{}
这句的意思是得到a标签中class=”tooltip”的元素，设置鼠标移到上面的事件，e表示该元素。
$("#tooltip")
.css({
"top":e.pageY+"px",
"left":e.pageX+"px"
}).show("fast");为新创建的id=”tooltip”的元素添加一个css样式，规定以像素计的 top 和 left 坐标。show(“fast”)表示快速显示该元素。
图片提示
下面给大家带来一个模仿网上很多的图片提示的效果。即将鼠标滑动到小图上显示对应的大图片。
效果如下：
<html>
<head>
<title>图片显示.html</title>
<meta http-equiv="content-type" content="text/html; charset=GBK">
<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" src="../jquery/jquery-2.1.4.js"></script>
<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:"";
//创建div元素
var tooltip = "<div id=‘tooltip‘><img src=‘"+this.href+ "‘ alt=‘产品预览图‘"+imgTitle+"</div>";
//添加到dom中
$("body").append(tooltip);
//设置div的样式
$("#tooltip")
.css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
}).show("fast");
}).mouseout(function(){
//如果在滑出时不将值重新赋给title属性，下次滑入时title的值就为空了
this.title = this.myTitle;
$("#tooltip").remove();
}).mousemove(function(e){
$("#tooltip")
.css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
});
});
})
</script>
</head>
<body>
<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>
</body>
</html>
说明一下：
代码和上面的文字提示很相似，只不过增加了一个跟随鼠标滑动的事件。比较简单。
全选和全不选
效果：
<html>
<head>
<title>全选、全不选、反选1.html</title>
<meta http-equiv="content-type" content="text/html; charset=gbk">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="../jquery/jquery-2.1.4.js"></script>
<script type="text/javascript">
$(function(){
//全选/全不选
$("#checkedAll").bind("click",function(){//给id=#checkedAll的元素绑定一个click事件
//所有复选框的checked属性的值和控制全选的复选框的checked属性的值一样。所以代码可以这样写
$("[name=items]:checkbox").attr("checked",this.checked);
});
//提交
$("#send").click(function(){
var str="您选中的是: \r\n";
$("[name=items]:checkbox:checked").each(function(){
str += $(this).val() + "\r\n";
});
alert(str);
});
})
</script>
</head>
<body>
<form action="#">
你爱好的运动是?
<input type="checkbox" id="checkedAll"/>全选/全不选<br/>
<input type="checkbox" name="items" value="足球">足球
<input type="checkbox" name="items" value="篮球">篮球
<input type="checkbox" name="items" value="羽毛球">羽毛球
<input type="checkbox" name="items" value="乒乓球">乒乓球<br/>
<input type="button" id="send" value="提交"/>
</form>
</body>
</html>说明一下：
each函数表示以每一个匹配的元素作为上下文来执行一个函数，就是说，每一次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素
相册展示
效果如下：
<html>
<head>
<title> Id选择器和show,hide</title>
</head>
<body>
<h2>标签选择器,id选择器,通过css方法添加样式,show(),hide练习题</h2>
<div id="showImgDiv" style="display:none;position:absolute">
<div id="closeDiv">关闭</div>
<img src="" id="showImg" width="450" height="400">
</div>
<table width="400" height="400" align="center" id="tbl"">
<tr>
<td><img src="../images/apple_1.jpg"/></td>
<td><img src="../images/apple_2.jpg"/></td>
<td><img src="../images/apple_3.jpg"/></td>
</tr>
</table>
<script language="javascript" src="../jquery/jquery-2.1.4.js"></script>
<script language="javascript">
$("img").click(function(){
var setxy = $("#tbl").offset();
$("#showImgDiv").css({"left":setxy.left,"top":setxy.top});
$("#showImg").attr("src",this.src);
$("#showImgDiv").show(1000);
});
$("#closeDiv").click(function(){
$("#showImgDiv").hide(1000);
});
</script>
</body>
</html>
可以看到这里我预先定义了一个id=showImgDiv的div用来隐藏要显示的大图和关闭按钮。
使用(“img”).click(function())为每一个image标签绑定一个点击事件。(“#tbl”).offset();会返回选中的元素的相对偏移，包含两个整型属性：top 和 left
ok，今天就给大家带来这么几个简单的jquery简单案例。
时间： 2024-10-20 18:45:05