1、事件

jquery添加鼠标绑定事件 jquery绑定mouseover事件_css

1.1 鼠标事件

jquery添加鼠标绑定事件 jquery绑定mouseover事件_css_02

<html>

	<head>
		<meta charset="UTF-8" />
		<title>mouseover和mouseenter的区别</title>
		<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
	</head>

	<body>
		<!--
			需求： 1.给类名为over的div，绑定鼠标移过事件，在其<span>标签内添加文本计数
				  2.给类名为enter的div，绑定鼠标进入事件，在其<span>标签内添加文本计数
		-->
		<p>不论鼠标指针穿过被选元素或其后代span元素，都会触发 mouseover 事件。</p>
		<p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
		<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
			<h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2>
		</div>
		<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
			<h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2>
		</div>
		
		<script type="text/javascript">
			
			$(function(){
				var x = 0;
				$(".over").mouseover(function(){
					$(this).find("span").html(++x);
				});
				
				var y = 0;
				$(".enter").mouseenter(function(){
					$(this).find("span").html(++y);
				});
				
			});
			
		</script>
	</body>

</html>

jquery添加鼠标绑定事件 jquery绑定mouseover事件_css_03

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>当当图书导航</title>
		<link href="css/style.css" rel="stylesheet" />
	</head>

	<body>
		<div class="top">
			<div class="wrap">
				<div class="top-l left">欢迎光临当当，请
					<a href="" class="top-login">登录</a>
					<a href="">免费注册</a>
				</div>
				<ul class="top-m right">
					<li>
						<a href=""><i class="top-car left"></i>购物车</a>
					</li>
					<li class="line"></li>
					<li>
						<a href="">我的订单</a>
					</li>
					<li class="line"></li>
					<li>
						<a href="">当当自出版</a>
					</li>
					<li class="line"></li>
					<li>
						<a href=""><i class="top-tel left"></i>手机当当</a>
					</li>
					<li class="line"></li>
					<li>
						<a href="" class="menu-btn">我的当当</a>
					</li>
					<li class="line"></li>
					<li>
						<a href="" class="menu-btn">企业采购</a>
					</li>
					<li class="line"></li>
					<li>
						<a href="" class="menu-btn">客户服务</a>
					</li>
					<li class="line"></li>
				</ul>
				<div class="clearfix"></div>
			</div>
		</div>
		<div class="wrap">
			<a href=""><img src="images/logo.jpg" /></a>
		</div>
		<div class="nav-box">
			<div class="wrap">
				<ul class="nav-ul">
					<li class="all">
						<a href="">全部商品详细分类</a>
					</li>
					<li>
						<a href="">尾品会</a>
					</li>
					<li>
						<a href="">图书</a>
					</li>
					<li>
						<a href="">电子书</a>
					</li>
					<li>
						<a href="">服装</a>
					</li>
					<li>
						<a href="">运动户外</a>
					</li>
					<li>
						<a href="">婴孕童</a>
					</li>
					<li>
						<a href="">家具</a>
					</li>
					<li>
						<a href="">当当优品</a>
					</li>
					<li>
						<a href="">电器城</a>
					</li>
					<li>
						<a href="">当当超市</a>
					</li>
					<li>
						<a href="">海外购</a>
					</li>
					<div class="clearfix"></div>
				</ul>
			</div>
		</div>
		<script src="js/jquery-1.12.4.js"></script>
		<script type="text/javascript">
			/*
			 * 需求： 1.当鼠标移入"全部商品详细分类" 当前菜单<a>标签背景颜色变为：#f01e28  移出时背景颜色变为：#ff2832
			 */
			$(function(){
				$(".nav-ul li:not(.all)").mouseover(function(){
					//这样写不行 还是有区别的 虽然本质上是一样的
					//$(".nav-ul li:not(.all)").css("background-color","#f01e28");
					$(this).css("background-color","#f01e28");
				});
				
				$(".nav-ul li:not(.all)").mouseout(function(){
					$(this).css("background-color","#ff2832");
				});
			});
		</script>
	</body>

</html>

1.2 键盘事件

keydown()按下键盘触发 只要按键盘都会触发 无论你按什么 键盘上的空格键、所有的键都能触发 一直按住就会一直触发
keyup() 释放键盘触发 一直按着不触发
keypress() 产生可打印的字符时触发 空格 回车 删除键等会触发会触发 ；shift ctrl alt 大写的键

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>键盘事件</title>
	</head>

	<body>
		输入你的名字: <input type="text">
		<p>按键的次数: <span>0</span></p>
		<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script>
			/*
			 * 需求： 1.测试keyup、keydown、keypress的区别 触发次数展示在span中
			 */
			$(function(){
				var x = 0;
//				$("input").keypress(function(){
//					$("span").html(++x);
//				});
				/*$("input").keyup(function(){
					$("span").html(++x);
				});*/
				$("input").keydown(function(){
					$("span").html(++x);
				});
			});
		</script>
	</body>

</html>

</html>

1.3 浏览器事件$(window).resize()

浏览器窗口调整的时候 就会触发
$(window).resize()

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>浏览器事件</title>
	</head>

	<body>
		<span id="">
			0
		</span>
		<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				var x = 0;
				$(window).resize(function(){
					$("span").html(++x);
				});
			});
		</script>
	</body>

</html>

1.4绑定和移除事件bind()+unbind()

单个

<script type="text/javascript">
	$(function(){
		$("选择器").bind("事件",function(){
		});
	})
</script>

多个

<script type="text/javascript">
			$(function(){
				$("选择器").bind({
					"事件":function(){
						
					}
				})
			})
		</script>
<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>当当图书导航</title>
		<link href="css/style.css" rel="stylesheet" />
	</head>

	<body>
		<div class="top">
			<div class="wrap">
				<div class="top-l left">欢迎光临当当，请
					<a href="" class="top-login">登录</a>
					<a href="">免费注册</a>
				</div>
				<ul class="top-m right">
					<li>
						<a href=""><i class="top-car left"></i>购物车</a>
					</li>
					<li class="line"></li>
					<li>
						<a href="">我的订单</a>
					</li>
					<li class="line"></li>
					<li>
						<a href="">当当自出版</a>
					</li>
					<li class="line"></li>
					<li>
						<a href=""><i class="top-tel left"></i>手机当当</a>
					</li>
					<li class="line"></li>
					<li class="on">
						<a href="" class="menu-btn">我的当当</a>
						<ul class="topDown">
							<li>
								<a href="">我的积分</a>
							</li>
							<li>
								<a href="">我的收藏</a>
							</li>
							<li>
								<a href="">我的余额</a>
							</li>
							<li>
								<a href="">我的评论</a>
							</li>
							<li>
								<a href="">电子书架</a>
							</li>
						</ul>
					</li>
					<li class="line"></li>
					<li>
						<a href="" class="menu-btn">企业采购</a>
					</li>
					<li class="line"></li>
					<li>
						<a href="" class="menu-btn">客户服务</a>
					</li>
					<li class="line"></li>
				</ul>
				<div class="clearfix"></div>
			</div>
		</div>
		<div class="wrap">
			<a href=""><img src="images/logo.jpg" /></a>
		</div>
		<div class="nav-box">
			<div class="wrap">
				<ul class="nav-ul">
					<li class="all">
						<a href="">全部商品详细分类</a>
					</li>
					<li>
						<a href="">尾品会</a>
					</li>
					<li>
						<a href="">图书</a>
					</li>
					<li>
						<a href="">电子书</a>
					</li>
					<li>
						<a href="">服装</a>
					</li>
					<li>
						<a href="">运动户外</a>
					</li>
					<li>
						<a href="">婴孕童</a>
					</li>
					<li>
						<a href="">家具</a>
					</li>
					<li>
						<a href="">当当优品</a>
					</li>
					<li>
						<a href="">电器城</a>
					</li>
					<li>
						<a href="">当当超市</a>
					</li>
					<li>
						<a href="">海外购</a>
					</li>
					<div class="clearfix"></div>
				</ul>
			</div>
		</div>
		<script src="js/jquery-1.12.4.js"></script>
		<script type="text/javascript">
			$(function() {
				/*
				 * 需求： 1.利用bind()方法给类名为on的<li>绑定鼠标移入事件 当鼠标移入之后展示类名为topDown的元素
				 *       2.利用bind()方法给类名为on的<li>绑定两个事件，一个鼠标移入一个移出，并进行topDown的显示和隐藏
				 */
				
				/*$(".on").bind("mouseover",function(){
					$(this).find(".topDown").show();
				});
				
				$(".on").bind("mouseout",function(){
					$(this).find(".topDown").hide();
				});*/
				
				// 同时绑定多个事件
				$(".on").bind({
					"mouseover":function(){
						$(this).find(".topDown").show();
					},
					"mouseout":function(){
						$(this).find(".topDown").hide();
					}
				});
				
				/**主菜单鼠标移上时背景颜色加深**/
				$(".nav-ul a").mouseover(function() {
					$(this).css("background-color", "#f01e28");
				});
				$(".nav-ul a").mouseout(function() {
					$(this).css("background-color", "#ff2832");
				});

			});
		</script>
	</body>

</html>

解绑事件

$("#nav li:last").unbind("事件");
<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>任务列表</title>
		<link rel="stylesheet" href="css/taskStyle.css">
	</head>

	<body>
		<section id="taskList">
			<ul id="nav">
				<li>日常任务</li>
				<li>成长任务</li>
			</ul>
			<div class="taskContent">
				<!--日常任务-->
				<ul id="dayTask">
					<li>
						<div>
							<h1>交口称赞</h1>
							<p>为喜欢的回答送出一个赞</p>
							<p>奖励：<span>财富值×10</span><span>经验之石（小）×1</span></p>
						</div>
						<div><input type="button" value="前往"></div>
					</li>
					<li>
						<div>
							<h1>每日答题</h1>
							<p>前往回答一个问题</p>
							<p>奖励：<span>铜宝箱×1</span><span>财富值×10</span><span>经验之石（小）×1</span></p>
						</div>
						<div><input type="button" value="前往"></div>
					</li>
					<li>
						<div>
							<h1>助人为乐</h1>
							<p>当日获得1个采纳</p>
							<p>奖励：<span>铜宝箱×1</span><span>财富值×10</span></p>
						</div>
						<div><input type="button" value="前往"></div>
					</li>
				</ul>
				<!--成长任务-->
				<ul id="growTask">
					<li>
						<div>
							<h1>成长之路</h1>
							<p>知道等级达到2级</p>
							<p>奖励：<span>财富值×20</span><span>铜宝箱×1</span><span>准备入学微章×1</span></p>
						</div>
						<div><input type="button" value="前往"></div>
					</li>
					<li>
						<div>
							<h1>知识之路</h1>
							<p>在知道获得1个采纳</p>
							<p>奖励：<span>铜宝箱×1</span><span>财富值×20</span><span>经验之石（小）×1</span></p>
						</div>
						<div><input type="button" value="前往"></div>
					</li>
					<li>
						<div>
						</div>
						<div><input type="button" id="del" style="cursor: pointer;" value="解除绑定"></div>
					</li>
				</ul>
			</div>
		</section>
		<script src="js/jquery-1.12.4.js"></script>
		<script type="text/javascript">
			/*
			 * 需求： 1.利用bind()给id为nav下的第一个和第二个<li>分别绑定点击事件。
			 *        点击第一个<li>时，整个任务模块背景颜色变为#26a6e3 ，显示日常任务模块内容  隐藏成长任务模块内容
			 *        点击第二个<li>时，正好相反。
			 *       
			 *        2.测试解决绑定第2个<li>的点击事件
			 */
			$(function(){
				
				$("#nav li:first").bind("click",function(){
					$(".taskContent").css("background-color","#26a6e3").find("#dayTask").show().end().find("#growTask").hide();
				});
				$("#nav li:last").bind("click",function(){
					$(".taskContent").css("background-color","#ff9400").find("#growTask").show().end().find("#dayTask").hide();
				});
				
				$("#del").bind("click",function(){
					$("#nav li:last").unbind("click");
				});
				
			});
		</script>
	</body>

</html>

1.5 复合事件hover()+toggle()

jquery添加鼠标绑定事件 jquery绑定mouseover事件_html_04

jquery添加鼠标绑定事件 jquery绑定mouseover事件_jquery添加鼠标绑定事件_05

toggle()模拟鼠标连续点击事件 只能在这个1.8版本中使用

toggle案例1

$(function(){
				$("input").toggle(function(){
					$("body").css("background-color","red");
				},function(){
					$("body").css("background-color","yellow");
				},function(){
					$("body").css("background-color","blue");
				},function(){
					$("body").css("background-color","green");
				})
			})

toggle案例2

<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>背景颜色变化</title>
		<style type="text/css">
			.changeRed {
				font-size: 28px;
				color: red;
			}
		</style>
	</head>

	<body>
		<input type="button" value="点我吧">
		<p>我一会显示一会隐藏</p>
		<script src="js/jquery-1.12.4.js"></script>
		<!--<script src="js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>-->
		<script type="text/javascript">
			/*需求：1.当第一次点击按钮时，将整个页面的背景颜色更改为红色 
			 *       第二次点击按钮时，将整个页面的背景颜色更改为黄色
			 *       第三次点击按钮时，将整个页面的背景颜色更改为蓝色
			 *       第四次点击按钮时，将整个页面的背景颜色更改为绿色
			 *      2.将<p>元素显示和隐藏
			 *      3.将<p>元素添加changeRed类样式
			 */
			$(function(){
				
//				$("input").click(function(){
//					$("p").toggle(); // 自动判定当前是否显示 如果显示就隐藏 如果隐藏就显示
//				});
				
				
				//显示的时候一会显示样式  一会不显示样式
				$("input").click(function(){
					$("p").toggleClass("changeRed"); // 如果有该类样式 自动加上 没有自动去除
				});
			});
		</script>

	</body>

</html>

hover案例1
获取列表对象

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>当当图书导航</title>
		<link href="css/style.css" rel="stylesheet" />
	</head>

	<body>
		<div class="top">
			<div class="wrap">
				<div class="top-l left">欢迎光临当当，请
					<a href="" class="top-login">登录</a>
					<a href="">免费注册</a>
				</div>
				<ul class="top-m right">
					<li>
						<a href=""><i class="top-car left"></i>购物车</a>
					</li>
					<li class="line"></li>
					<li>
						<a href="">我的订单</a>
					</li>
					<li class="line"></li>
					<li>
						<a href="">当当自出版</a>
					</li>
					<li class="line"></li>
					<li>
						<a href=""><i class="top-tel left"></i>手机当当</a>
					</li>
					<li class="line"></li>
					<li class="on">
						<a href="" class="menu-btn">我的当当</a>
						<ul class="topDown">
							<li>
								<a href="">我的积分</a>
							</li>
							<li>
								<a href="">我的收藏</a>
							</li>
							<li>
								<a href="">我的余额</a>
							</li>
							<li>
								<a href="">我的评论</a>
							</li>
							<li>
								<a href="">电子书架</a>
							</li>
						</ul>
					</li>
					<li class="line"></li>
					<li>
						<a href="" class="menu-btn">企业采购</a>
					</li>
					<li class="line"></li>
					<li>
						<a href="" class="menu-btn">客户服务</a>
					</li>
					<li class="line"></li>
				</ul>
				<div class="clearfix"></div>
			</div>
		</div>
		<div class="wrap">
			<a href=""><img src="images/logo.jpg" /></a>
		</div>
		<div class="nav-box">
			<div class="wrap">
				<ul class="nav-ul">
					<li class="all">
						<a href="">全部商品详细分类</a>
					</li>
					<li>
						<a href="">尾品会</a>
					</li>
					<li>
						<a href="">图书</a>
					</li>
					<li>
						<a href="">电子书</a>
					</li>
					<li>
						<a href="">服装</a>
					</li>
					<li>
						<a href="">运动户外</a>
					</li>
					<li>
						<a href="">婴孕童</a>
					</li>
					<li>
						<a href="">家具</a>
					</li>
					<li>
						<a href="">当当优品</a>
					</li>
					<li>
						<a href="">电器城</a>
					</li>
					<li>
						<a href="">当当超市</a>
					</li>
					<li>
						<a href="">海外购</a>
					</li>
					<div class="clearfix"></div>
				</ul>
			</div>
		</div>
		<script src="js/jquery-1.12.4.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				
				/*需求： 1.使用hover()方法来重构示例04*/
				//li .on之间没有空格
				$("li.on").hover(function(){
					$(this).find(".topDown").show();
				},function(){
					$(this).find(".topDown").hide();
				});
				
				/**主菜单鼠标移上时背景颜色加深**/
				$(".nav-ul a").mouseover(function() {
					$(this).css("background-color", "#f01e28");
				});
				$(".nav-ul a").mouseout(function() {
					$(this).css("background-color", "#ff2832");
				});

			});
		</script>
	</body>

</html>

2、 设置(多个)和获取css样式

jquery添加鼠标绑定事件 jquery绑定mouseover事件_css_06

html中也是同样适用的

jquery添加鼠标绑定事件 jquery绑定mouseover事件_jquery添加鼠标绑定事件_07

设置多个样式

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>获取和设置css样式值</title>
		<style type="text/css">
			div {
				width: 100px;
				/*height: 100px;*/
				border: 1px dashed red;
				overflow: hidden;
			}
			
			
		</style>
	</head>

	<body>
		<div class="test1 test2">
			人生若只如初见，何事秋风悲画扇，等闲变却故人心，却道故人心易变，骊山语罢清宵半，泪雨零铃终不怨，何如薄倖锦衣郎，比翼连枝当日愿。
		</div>
		<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/*
			 * 需求： 1.鼠标悬浮<div>其上，将<div>背景颜色设置为红色
			 *       2.鼠标移出时弹出当前<div>的背景颜色样式值
			 */
			$(function(){
				$("div").hover(function(){
					// $(this).css("background-color","red");					
					$(this).css({
						"background-color":"red",
						"color":"#fff"
						});
				},function(){
					alert($(this).css("background-color"));
				});
			});
		</script>
	</body>

</html>

3、移除和追加样式

hasClass(“样式名”)是否有样式
removeClass(“样式名”)移除样式
addClass(“样式名”)追加样式

<!doctype html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>追加和移除样式</title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
				font-size: 14px;
				font-family: "微软雅黑";
				line-height: 28px;
				;
			}
			
			.title {
				font-size: 14px;
				color: #03F;
				text-align: center;
			}
			
			.text {
				padding: 10px;
			}
			
			.content {
				background-color: #FFFF00;
			}
			
			.border {
				border: 1px dashed #333;
			}
		</style>

	</head>

	<body>

		<h2 id="hh" class="title">jQuery操作CSS</h2>
		<p class="text">
			css()设置或返回样式属性<br> addClass()增加一个或多个类
			<br> removeClass()移除一个或多个类
		</p>
		<script src="js/jquery-1.12.4.js"></script>
		<script>
			/*
			 * 需求： 1.当鼠标划过在<h2>上时, <p>元素添加类样式content和border
			 *       2.当鼠标移除<h2>时，<p>元素移除类样式text和content
			 */
			$(function(){
				
				$("h2").hover(function(){
					if(!$("p").hasClass("content border")){
						$("p").addClass("content border");
					}
				},function(){
					if($("p").hasClass("text content")){
						$("p").removeClass("text content");
					}
				});
			});
		</script>
	</body>

</html>

4、html()和text()

字符串添加无序列表

<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>常见问题</title>
		<link rel="stylesheet" href="css/problem.css">
	</head>

	<body>
		<section>
			<span>×</span>
			<h1>常见问题</h1>
			<div class="proList"></div>
			<div class="img"><img src="images/boy.png"></div>
		</section>
		<script src="js/jquery-1.12.4.js"></script>
		<script>
			/*
			 * 需求： 1.当点击<h1>的时候，给类名为proList的<div>内添加无序列表：
			 *        *买了商品后，查不到物流信息怎么办？
			 *        *申请退款后，交易退款成功，钱到哪里？
			 *        *卖家拒绝退款，怎么办？
			 *        *投诉发生的时间和条件是什么？
			 *        *如何申请淘宝客服介入？
			 *        2.当点击<span>时将类名为proList的<div>内元素清空
			 * 
			 *        3.将上方的两个案例换为使用text()来进行
			 */
			$(function(){
				
				$("h1").click(function(){
					
					var str = "<ul>"+
									"<li>买了商品后，查不到物流信息怎么办？</li>"+
									"<li>申请退款后，交易退款成功，钱到哪里？</li>"+
									"<li>卖家拒绝退款，怎么办？</li>"+
									"<li>投诉发生的时间和条件是什么？</li>"+
									"<li>如何申请淘宝客服介入？</li>"+
							  "</ul>";
					$(".proList").html(str);  //innerHTML
					// $(".proList").text(str); // innerText
				});
				
				$("span").click(function(){
					// alert($(".proList").html());					
					alert($(".proList").text());					
					// $(".proList").text("");			
				});
			});
		</script>
	</body>

</html>

html()

jquery添加鼠标绑定事件 jquery绑定mouseover事件_jquery添加鼠标绑定事件_08


text()

jquery添加鼠标绑定事件 jquery绑定mouseover事件_html_09

5、失去焦点和获取焦点

失去焦点和获取焦点是一个鼠标行为,例如当点击数个输入框其中的一个使其处于编辑输入状态的时候就是获得可焦点,当点击其他输入框或者其他区域就会使这个输入框失去焦点

blur()失去焦点 focus()是获取焦点

获取input里面的value值 $(this).val("");

设置值 $(this).val(“请输入电风扇”);

<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="UTF-8">
		<title>搜索框特效</title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
				font-size: 12px;
			}
			
			input {
				float: left;
			}
			
			#searchtxt {
				width: 222px;
				height: 38px;
				line-height: 38px;
				padding-left: 30px;
				border: none;
				background: url(images/bg.jpg) no-repeat;
			}
			
			.search_btn {
				width: 90px;
				height: 38px;
				line-height: 38px;
				border: none;
				background: url(images/btn.jpg) no-repeat;
				margin-left: -4px;
				cursor: pointer;
			}
		</style>

	</head>

	<body>
		<input name="" type="text" class="search_txt" value="请输入电风扇" id="searchtxt" />
		<input type="button" class="search_btn" />
		<script src="js/jquery-1.12.4.js"></script>
		<script>
			/*
			 * 需求：  1.当id名为searchtxt的搜索文本框触发获取焦点事件之后，获取其value内容 如果是预先保留内容，将其内容清空！
			 *        2.当其触发失去焦点事件之后，获取其value内容 如果为空即未填写内容 则将内容还原回预留
			 */
			$(function(){
				// blur失去焦点  focus是获取焦点
				$("#searchtxt").focus(function(){
					var $val = $(this).val();
					if($val == "请输入电风扇"){
						$(this).val("");
					}
				});
				
				$("#searchtxt").blur(function(){
					var $val = $(this).val();
					if($val.trim() == ""){
						$(this).val("请输入电风扇");
					}
				});
				
			});
		</script>
	</body>

</html>