搜索框文字效果

开始编写jQuery代码之前，先确定应该完成哪些功能。在网站首页(index.html)上将完成如下功能。

• 搜索框文字效果。
• 网页换肤。
• 导航效果。
• 左侧商品分类热销效果。
• 中间大屏广告效果。
• 右侧最新动态模块内容添加超链接提示。
• 右侧下部品牌活动横向滚动效果。
• 右侧下部鼠标滑过产品列表效果。

下面针对上述效果分别进行详细说明。

搜索框默认会有提示文字，如“请输入商品名称”，当光标定位在搜索框内时，需要将提示文字去掉，当光标移开时，如果用户未填写任何内容，需要把提示文字恢复，同时添加回车提交的效果。 新建JavaScript文件，保存为input.js。然后输入下面代码：

/* 搜索文本框效果 */
$(function(){
	$("#inputSearch").focus(function(){
		  $(this).addClass("focus");
		  if($(this).val() ==this.defaultValue){  
			  $(this).val("");           
		  } 
	}).blur(function(){
		 $(this).removeClass("focus");
		 if ($(this).val() == '') {
			$(this).val(this.defaultValue);
		 }
	}).keyup(function(e){
		if(e.which == 13){
			alert('回车提交表单!');
		}
	})
})