<!DOCTYPE html>
<html lang="en" class="loading">
<head>
<meta charset="UTF-8">
<title>demo1</title>
<script src="js/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function () {
$("#address").focus(function () {
var text_val = $(this).val();
if (text_val == "请输入邮箱地址") {
$(this).val("");
}
});
$("#address").blur(function () {
var text_val = $(this).val();
if (text_val == "") {
$(this).val("请输入邮箱地址");
}
});
"css的“height”属性：" + $("div").css("height");//结果：100px;
"height()方法求高度:" + $("div").height();//结果：100
$("div").width();//获取宽度结果：100
$("div").css("width")//结果：100px
$("div").width("100");
$("div").width() //设置宽度
/*
浏览器己经自带了超链接提示，只需在超链接中加入title属性就可以了。
然而这个提示效果的响应速度是非常缓慢的，考虑到良好的人机交互，需要的是当鼠标
移动到超链接的那一瞬间就出现提示。这时就需要移除<a>标签中的title提示效果，自己动
手做一个类似功能的提示。*/
/* 实现这个效果的具体思路如下。
(1)当鼠标滑入超链接。
①创建一个<div>元素，<div>元素的内容为title属性的值。
②将创建的元素追加到文档中。
③为它设置x坐标和y坐标，使它显示在鼠标位置的旁边。
(2)当鼠标滑出超链接时，移除<div>元素。*/
var x = 10;
var y = 20;
$("a.tooltip").onmouseover(function (e) {
//提示信息
this.myTitle=this.title;
this.title="";
var tooltip = "<div id='tooltip'>" + this.title + "</div>";//创建div元素，内容是title的属性值
$("body").append(tooltip);//追加到文档中
$("#tooltip").css({
"top": e.pageX + "px",
"left": e.pageY + "px"
}).show("fast");
}).onmouseout(function () {
/* 为什么当鼠标滑出时，要把属性值又赋给属性title呢?
因为当鼠标滑出时，需要考虑再次滑入时的属性title值，如果不将myTitle的值重新
赋给title属性，当再次滑入时，title的值就为空了.*/
this.title = this.myTitle;
$("#tooltip").remove();
});
});
</script>
</head>
<body>
<input type="text" id="address" value="请输入邮箱地址"/><br>
<div style="width: 50px;height: 100px; border: 1px solid #f00;">盒子</div>
<br><br><br><br>
<a href="#" class="tooltip" title="超链接提示">这是一个超链接提示框</a><br>
<a href="#" class="tooltip" title="超链接提示">这是一个超链接提示框</a>
</body>
</html>
