val()，鼠标得到焦点文字消失，鼠标焦点消失文字显示。
html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3-10-2-1</title>
<!-- 引入jQuery -->
<script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
</head>
<body>
<input type="text" id="address" value="请输入邮箱地址"/> <br/><br/>
<input type="text" id="password" value="请输入邮箱密码"/> <br/><br/>
<input type="button" value="登陆"/>
</body>
</html>
js代码
<script type="text/javascript">
//<![CDATA[
$(function(){
$("#address").focus(function(){ // 地址框获得鼠标焦点
var txt_value = $(this).val(); // 得到当前文本框的值
if(txt_value=="请输入邮箱地址"){
$(this).val(""); // 如果符合条件，则清空文本框内容
}
});
$("#address").blur(function(){ // 地址框失去鼠标焦点
var txt_value = $(this).val(); // 得到当前文本框的值
if(txt_value==""){
$(this).val("请输入邮箱地址");// 如果符合条件，则设置内容
}
})
$("#password").focus(function(){
var txt_value = $(this).val();
if(txt_value=="请输入邮箱密码"){
$(this).val("");
}
});
$("#password").blur(function(){
var txt_value = $(this).val();
if(txt_value==""){
$(this).val("请输入邮箱密码");
}
})
});
//]]>
</script>
用defaultValues
<script type="text/javascript">
//<![CDATA[
$(function(){
$("#address").focus(function(){ // 地址框获得鼠标焦点
var txt_value = $(this).val(); // 得到当前文本框的值
if(txt_value==this.defaultValue){
$(this).val(""); // 如果符合条件，则清空文本框内容
}
});
$("#address").blur(function(){ // 地址框失去鼠标焦点
var txt_value = $(this).val(); // 得到当前文本框的值
if(txt_value==""){
$(this).val(this.defaultValue);// 如果符合条件，则设置内容
}
})
$("#password").focus(function(){
var txt_value = $(this).val();
if(txt_value==this.defaultValue){
$(this).val("");
}
});
$("#password").blur(function(){
var txt_value = $(this).val();
if(txt_value==""){
$(this).val(this.defaultValue);
}
})
});
//]]>
</script>
jquery中$(function(){})是$(document).ready()的简写。
文字提示
html代码
<!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="js/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>
</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>
js代码
<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>";
$("body").append(tooltip);
$("#tooltip")
.css({"top":(e.pageX+"px"),"left":(e.pageY+"px")}).show("fast");
}).mouseout(function(){
this.title = this.mytitle;
$("#tooltip").remove();
}).mousemove(function(e){
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
});
})
})
</script>
文字提示
html代码
<!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="js/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>
</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>
js代码
<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>";
$("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();
}).mousemove(function(e){
$("#tooltip").css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"}).show("fast");
})
})
</script>
分享到：
相关推荐
现在我们专注于《jQuery权威指南》第三章——jQuery操作DOM的内容。DOM，即文档对象模型，是HTML和XML文档的编程接口，它将文档结构转换为一个树形结构，方便程序进行读取和修改。jQuery提供了丰富的API，让开发者...
jQuery 是一个广泛使用的 JavaScript 库，它以简洁的语法和强大的功能著称，极大地简化了网页的DOM操作、事件处理和动画制作。"写的更少，但做的更多"是jQuery的核心理念，它允许开发者用相对较少的代码实现复杂的...
在 `jquery操作dom对象.doc` 和 `jquery.docx` 文件中，你可以找到更多关于 jQuery DOM 操作的具体示例，包括选择器应用、方法调用以及在实际项目中的实践案例。通过这些实例，你可以更深入地理解如何将 jQuery 应用...
jQuery 是一款强大的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。本笔记基于一年的学习经验，涵盖了基础到进阶的知识点，旨在帮助初学者快速掌握jQuery的核心技术。 一、...
在jQuery中，DOM（Document Object Model）操作是其核心功能之一。通过jQuery选择器，你可以轻松地找到页面上的元素，并进行添加、删除或修改。"韩顺平AJAX和jQuery笔记整理.doc"可能详细介绍了$(selector).html(), ...
### jQuery核心知识点详解 ...以上内容涵盖了jQuery的基本概念、选择器使用方法及常见的操作方式，是前端开发中不可或缺的一部分。通过对这些知识点的掌握，开发者可以更加灵活高效地完成网页开发任务。
Ch08-jQuery操作DOM核心笔记.txtCh08-jQuery操作DOM核心笔记.txt Ch08-jQuery操作DOM核心笔记.txtCh08-jQuery操作DOM核心笔记.txt Ch08-jQuery操作DOM核心笔记.txt
3. **DOM 操作（DOM Manipulation）** - `$(selector).html()` 用于获取或设置元素的HTML内容。 - `$(selector).text()` 用于获取或设置元素的文本内容。 - `$(selector).append()` 和 `.prepend()` 分别用于在...
JavaScript是一种轻量级的编程语言，而jQuery则是一个JavaScript库，它简化了许多常见的DOM操作、事件处理和动画效果。 JavaScript基础知识： 1. **变量与数据类型**：JavaScript支持var、let和const关键字声明变量...
例如，可以通过`$("div")[0]`从DOM中选择一个`div`元素，并将其转化为jQuery对象，但要注意此时返回的是DOM元素，而非jQuery对象。若要将DOM元素转化为jQuery对象，应使用如`var domToJQueryObject = $(div);`这样的...
在深入探讨jQuery的知识点之前，首先需要理解jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。jQuery的核心特性是其选择器，它允许开发者通过CSS样式的语法轻松选取HTML...
笔记内容涉及了jQuery库的导入、$符号的控制权释放、元素选择、DOM操作、事件处理、动画效果、选择器的使用和分类以及过滤器选择器的详细使用说明。 首先，笔记中提到，在导入jQuery库后，可能会对$符号有控制权，...
jQuery是一个流行的JavaScript库，简化了DOM操作、事件处理、动画和Ajax交互。CHM文件是一种常见的帮助文档格式，用户可以通过这个文件快速查找并理解jQuery的各种方法、选择器和插件。 `javascript.zip`和`...
《jQuery学习笔记详解》 jQuery，作为JavaScript的一个强大库，其核心价值在于提供了一系列便捷的API，使得开发者能更高效地操作DOM（Document Object Model），处理事件、动画以及实现Ajax交互。本文将深入探讨...
《jQuery入门详解——从入口函数到选择器》 jQuery，作为一款广泛应用于前端开发的JavaScript库，极大地简化了DOM操作，提供了丰富的API和强大的选择器系统。本文将深入讲解jQuery的核心概念，包括入口函数的使用、...
JQuery 是一个广泛使用的 JavaScript 库，它极大地简化了网页中的DOM操作，使得开发者能够更加高效地处理事件、动画和Ajax交互。以下是对JQuery学习笔记的详细解析： 首先，JQuery的出现是为了弥补JavaScript在处理...
jQuery，作为一款广泛应用于Web开发的JavaScript库，以其简洁的API、强大的功能和广泛的社区支持，极大地简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。这篇学习笔记将深入探讨jQuery的核心概念，旨在帮助...
《jQuery笔记详解》 jQuery，作为JavaScript的一个库，极大地简化了DOM操作，提升了开发者的工作效率。它将常用的功能进行了封装，形成了一系列API，使得开发者无需关注底层实现，只需调用相应的方法即可实现复杂...