jquery搜索框效果实现方法
更新时间：2015年01月16日 11:35:13 投稿：shichen2014
这篇文章主要介绍了jquery搜索框效果实现方法,分析了jquery搜索框效果的实现技巧及注意事项,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了jquery搜索框效果实现方法。分享给大家供大家参考。具体实现方法如下：
复制代码 代码如下:
<html>
<head>
<title>jquery：搜索框效果</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#search').val("请输入搜索内容").addClass("c1");
$('#search').focus(function(){//搜索框获得焦点时
$('#search').val("").addClass("c2");
});
$('#search').blur(function(){//搜索框失去焦点时
if($('#search').val()==""){
$('#search').val("请输入搜索内容").attr("class","c1");
}
});
});
</script>
<style type="text/css">
.c1{color:gray;font-style:italic;}
.c2{color:#000;font-style:normal;}
</style>
</head>
<body>
<input type="text" size="38" id="search" /><button>搜索</button>
</body>
</html>
<head>
<title>jquery：搜索框效果</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#search').val("请输入搜索内容").addClass("c1");
$('#search').focus(function(){//搜索框获得焦点时
$('#search').val("").addClass("c2");
});
$('#search').blur(function(){//搜索框失去焦点时
if($('#search').val()==""){
$('#search').val("请输入搜索内容").attr("class","c1");
}
});
});
</script>
<style type="text/css">
.c1{color:gray;font-style:italic;}
.c2{color:#000;font-style:normal;}
</style>
</head>
<body>
<input type="text" size="38" id="search" /><button>搜索</button>
</body>
</html>
补充说明：有些不完美，如果搜索框原来还有其它样式，当失去焦点时，如果采用例子中的代码，那其它样式也会没了，因为attr()为设置样式。如果采用addClass()为追加样式，也不怎么合适，虽然能达到效果，但原来的c2样式还在，显示时被c1样式替换而已（这需要c1样式写在c2后面）。好像没有替换样式的方法？
修改后解决上面的问题，较完美版本（代码还可以优化更简单）
复制代码 代码如下:
<html>
<head>
<title>jquery：搜索框效果</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#search').val("请输入搜索内容").addClass("c1");
$('#search').focus(function(){//搜索框获得焦点时
if($('#search').val()=="请输入搜索内容"){
$('#search').val("").addClass("c2").removeClass("c1");
}
});
$('#search').blur(function(){//搜索框失去焦点时
if($('#search').val()==""){
$('#search').val("请输入搜索内容").addClass("c1").removeClass("c2");
}
});
});
</script>
<style type="text/css">
.c1{color:gray;font-style:italic;}
.c2{color:#000;font-style:normal;}
</style>
</head>
<body>
<input type="text" size="38" id="search" /><button>搜索</button>
</body>
</html>
<head>
<title>jquery：搜索框效果</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
$('#search').val("请输入搜索内容").addClass("c1");
$('#search').focus(function(){//搜索框获得焦点时
if($('#search').val()=="请输入搜索内容"){
$('#search').val("").addClass("c2").removeClass("c1");
}
});
$('#search').blur(function(){//搜索框失去焦点时
if($('#search').val()==""){
$('#search').val("请输入搜索内容").addClass("c1").removeClass("c2");
}
});
});
</script>
<style type="text/css">
.c1{color:gray;font-style:italic;}
.c2{color:#000;font-style:normal;}
</style>
</head>
<body>
<input type="text" size="38" id="search" /><button>搜索</button>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。
相关文章
下面小编就为大家带来一篇jquery ezUI 双击行记录弹窗查看明细的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
Jquery 实现表格颜色交替变化，点击选中行，鼠标移过颜色变化效果附演示代码 ，喜欢的朋友可以参考下2013-08-08
图片的展开和收缩使用jquery实现不可思议吧，感兴趣的朋友可以参考下哈，希望对你学习jquery 有所帮助2013-04-04
这篇文章主要介绍了JQuery实现简单的服务器轮询效果,结合实例形式分析了jQuery的ajax交互结合.net处理实现轮询效果的相关技巧,需要的朋友可以参考下2016-03-03
当我们遇到提交表单时，需要我们重复添加好几个表单，在订单表格中添加多个不同型号的产品信息。这个时候有复制表单表单按钮，也就是新增一项，通过点击复制按钮来实现新增一项，怎么实现的呢？下面小编跟大家分享，需要的朋友的朋友可以参考下2015-09-09
轻松掌握jQuery中wrap()与unwrap()函数的用法
wrap()能够将指定HTML元素包裹DOM结构,与之相反unwrap()函数则是将DOM去掉^^下面让我们来以两个小例子轻松掌握jQuery中wrap()与unwrap()函数的用法:)2016-05-05
这篇文章主要介绍了jQuery实现菜单感应鼠标滑动动画效果的方法,实例分析了jQuery中鼠标事件及animate的使用技巧,非常具有实用价值,需要的朋友可以参考下2015-02-02
本文主要内容是讲解图片走廊-gallery的实现代码，需要的朋友可以参考下2012-08-08
这篇文章主要为大家详细介绍了jQuery实现开关灯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
这篇文章主要为大家详细介绍了jquery实现边框特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-01-01
最新评论