jQuery第二弹

<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>
	<script type="text/javascript" src="js/html" title=jquery>jquery-1.12.4.js"></script>
	<script>
		$(function() {
			//获取搜索框，绑定获取焦点事件
			$("#searchtxt").focus(function() { //获取焦点事件
				//1.获取搜索框的值
				var txt_value = $(this).val();
				//2.如果搜索的值等于电风扇，清空value属性值
				if(txt_value == "电风扇") {
					$(this).val("");
				}
			});
			//获取搜索框，绑定失去焦点事件
			$("#searchtxt").blur(function() {
				//1.获取搜索框的值
				var txt_value = $(this).val();
				//2.如果搜索框的值为空，显示电风扇
				if(txt_value == "") {
					$(this).val("电风扇");
				}
			})
		})
	</script>
</head>
<body>
	<input name="" type="text" class="search_txt" value="电风扇" id="searchtxt" />
	<input type="button" class="search_btn" />
</body>

jQuery第二弹

相关文章

jQuery第三弹节点操作属性操作元素遍历

Jquery第四弹 Ajax HTTP

Java 第一弹类与对象对象存储参数传递封装构造方法

java第二弹方法重载方法重写继承 this super 访问修饰符

java第三弹 String参数传递变量存放机制

java第四弹多态 final static 代码块抽象类匿名类接口 Java8新特性：接口增强

Vue 学习17——轮播图-实现机制

java第五弹装箱和拆箱常用类：Object类、String类、日期类