jquery实现搜索框常见效果的方法
更新时间:2015年01月22日 10:52:38 投稿:shichen2014
这篇文章主要介绍了jquery实现搜索框常见效果的方法,可实现搜索框文字显示效果,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了jquery实现搜索框常见效果的方法。分享给大家供大家参考。具体实现方法如下:
复制代码 代码如下:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>jquery搜索框效果</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
var searchBox = $("#search");
searchBox.focus(function(){
if(searchBox.val() == this.title){
searchBox.val("").css({'font-style':'normal','color':'#000'});
}
});
//光标离开搜索框时
searchBox.blur(function(){
if(searchBox.val() == ""){
searchBox.val(this.title).css({'font-style':'italic','color':'#ccc'});
}
});
searchBox.blur();
});
</script>
</head>
<body>
<input id="search" type="text" title="search" value="" /><input type="submit" value="搜索" />
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。
相关文章
jquery tablesorter.js 支持中文表格排序改进
之前研究过一下表格排序。上网找了一些代码研究了一下。勉强做了一个用着。后面发现当动态给单元格加超链接,或者列中存在一些空白,就排序不了了。2009-12-12详解JavaScript中jQuery和Ajax以及JSONP的联合使用
这篇文章主要介绍了详解JavaScript中jQuery和Ajax以及JSONP的联合使用,jQuery库和Ajax异步结构以及JSON数据传输也是JS日常编程中最常用到的东西,需要的朋友可以参考下2015-08-08jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
想实现一个模态的框框,找了很多的jquery插件,都没有碰到自己满意的于是自己摸索了一个,接下来为大家介绍下实现的思路及代码,希望对你有所帮助2013-04-04jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
这篇文章主要介绍了jQuery 1.9.1源码分析系列(十四)之常用jQuery工具的相关资料,需要的朋友可以参考下2015-12-12
最新评论