jquery实现搜索框常见效果的方法


Posted in Javascript onJanuary 22, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
May 22 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
Nov 18 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
May 19 Javascript
Angular的模块化(代码分享)
Dec 26 Javascript
Node.js连接mongodb实例代码
Jun 06 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
Feb 08 Javascript
Vue的路由动态重定向和导航守卫实例
Mar 17 Javascript
深入了解query和params的使用区别
Jun 24 Javascript
countUp.js实现数字动态变化效果
Oct 17 Javascript
如何使用CocosCreator对象池
Apr 14 Javascript
JavaScript学习笔记之定时器
Jan 22 #Javascript
JavaScript学习笔记之JS对象
Jan 22 #Javascript
JavaScript学习笔记之JS函数
Jan 22 #Javascript
JavaScript学习笔记之基础语法
Jan 22 #Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
Jan 22 #Javascript
Angularjs基础知识及示例汇总
Jan 22 #Javascript
jquery使用正则表达式验证email地址的方法
Jan 22 #Javascript
You might like
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
php基础知识:类与对象(5) static
2006/12/13 PHP
基于php上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
thinkphp的URL路由规则与配置实例
2014/11/26 PHP
php读取csc文件并输出
2015/05/21 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
js GridView 实现自动计算操作代码
2009/03/25 Javascript
javascript绘制漂亮的心型线效果完整实例
2016/02/02 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
AngularJS入门教程之迭代器过滤详解
2016/08/18 Javascript
Angular页面间切换及传值的4种方法
2016/11/04 Javascript
jQuery回调方法使用示例
2017/06/26 jQuery
浅谈angular4生命周期钩子
2017/09/05 Javascript
旺旺在线客服代码 旺旺客服代码生成器
2018/01/09 Javascript
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
详解用vue2.x版本+adminLTE开源框架搭建后台应用模版
2019/03/15 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
Python简单实现enum功能的方法
2016/04/25 Python
python利用正则表达式提取字符串
2016/12/08 Python
你应该知道的python列表去重方法
2017/01/17 Python
你真的了解Python的random模块吗?
2017/12/12 Python
浅谈python中get pass用法
2019/03/19 Python
Python 日期的转换及计算的具体使用详解
2020/01/16 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
CSS3 真的会替代 SCSS 吗
2021/03/09 HTML / CSS
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
创建文明学校实施方案
2014/03/11 职场文书
英语系毕业生求职信
2014/07/13 职场文书
小学运动会宣传稿
2015/07/23 职场文书
小学体育组工作总结
2015/08/13 职场文书
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript