jQuery笔记$("3")——jQuery中DOM操作

最新推荐文章于 2023-06-30 17:27:04 发布

wzl454823

最新推荐文章于 2023-06-30 17:27:04 发布

阅读量77

点赞数

分类专栏： jQuery 文章标签： jQuery CSS XHTML HTML ViewUI

本文链接：https://blog.csdn.net/wzl454823/article/details/83739590

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>

[size=x-large][b]jquery中$(function(){})是$(document).ready()的简写。[/b][/size]

[b]文字提示[/b]
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>

[b]文字提示[/b]
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>

wzl454823

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery笔记$("3")——jQuery中DOM操作

val()，鼠标得到焦点文字消失，鼠标焦点消失文字显示。html代码[code="html"]3-10-2-1 [/code]js代码[code="js"] // [/code]用defaultValues[code="js"] // [/cod...
复制链接

扫一扫