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 相关文章推荐
Javascript 原型和继承(Prototypes and Inheritance)
Apr 01 Javascript
基于jquery的图片幻灯展示源码
Jul 15 Javascript
JavaScript打印iframe内容示例代码
Aug 20 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
js实现字符串的16进制编码不加密
Apr 25 Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 Javascript
js中style.display=&quot;&quot;无效的解决方法
Oct 30 Javascript
学习AngularJs:Directive指令用法(完整版)
Apr 26 Javascript
再次谈论Javascript中的this
Jun 23 Javascript
vue构建动态表单的方法示例
Sep 22 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
Apr 22 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
PHP strncasecmp字符串比较的小技巧
2011/01/04 PHP
php+jQuery实现的三级导航栏下拉菜单显示效果
2017/08/10 PHP
PHP日期和时间函数的使用示例详解
2020/08/06 PHP
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
jquery高效反选具体实现
2013/05/05 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
详解vue中组件参数
2018/07/09 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
开源一个微信小程序仪表盘组件过程解析
2019/07/30 Javascript
Vue实现简单的拖拽效果
2020/08/25 Javascript
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
Python中__init__.py文件的作用详解
2016/09/18 Python
python3中set(集合)的语法总结分享
2017/03/24 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
泰国最新活动和优惠:Megatix
2020/05/07 全球购物
附答案的Java面试题
2012/11/19 面试题
描述内存分配方式以及它们的区别
2016/10/15 面试题
VLAN和VPN有什么区别?分别实现在OSI的第几层?
2014/12/23 面试题
创联软件面试题笔试题
2012/10/07 面试题
Delphi笔试题
2016/11/14 面试题
高中生校园生活自我评价
2013/09/19 职场文书
遗体告别仪式主持词
2014/03/20 职场文书
安全标语大全
2014/06/10 职场文书
化学工程专业求职信
2014/08/10 职场文书
校运动会广播稿300字
2014/10/07 职场文书
2016年精神文明建设先进个人事迹材料
2016/02/29 职场文书
Python如何导出导入所有依赖包详解
2021/06/08 Python
CSS实现章节添加自增序号的方法
2021/06/23 HTML / CSS
使用pipenv管理python虚拟环境的全过程
2021/09/25 Python
4种方法python批量修改替换列表中元素
2022/04/07 Python
MySQL存储过程及语法详解
2022/08/05 MySQL