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 相关文章推荐
jQuery 解析xml文件
Aug 09 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
jQuery取得设置清空select选择的文本与值
Jul 08 Javascript
Javascript基础教程之关键字和保留字汇总
Jan 18 Javascript
AngularJs 国际化(I18n/L10n)详解
Sep 01 Javascript
jQuery仿IOS弹出框插件
Feb 18 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
浅析node应用的timing-attack安全漏洞
Feb 28 Javascript
详解VUE里子组件如何获取父组件动态变化的值
Dec 26 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 Javascript
如何实现小程序与小程序之间的跳转
Nov 04 Javascript
vue穿梭框实现上下移动
Jan 29 Vue.js
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的基本常识小结
2013/07/05 PHP
php根据操作系统转换文件名大小写的方法
2014/02/24 PHP
关于PHP的curl开启问题探讨
2014/04/08 PHP
PHP实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
Symfony2创建页面实例详解
2016/03/18 PHP
php版微信小店API二次开发及使用示例
2016/11/12 PHP
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
在JavaScript中使用timer示例
2014/05/08 Javascript
IE中鼠标经过option触发mouseout的解决方法
2015/01/29 Javascript
跟我学习javascript的全局变量
2015/11/16 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
javascript先序遍历DOM树的方法
2016/02/27 Javascript
AngularJS全局警告框实现方法示例
2017/05/18 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
关于在LayUI中使用AJAX提交巨坑记录
2019/10/25 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
Vue+Java+Base64实现条码解析的示例
2020/09/23 Javascript
[01:37]DOTA2超级联赛专访ChuaN 传奇般的电竞之路
2013/06/19 DOTA
[05:31]DOTA2英雄梦之声_第08期_莉娜
2014/06/23 DOTA
python爬取网站数据保存使用的方法
2013/11/20 Python
使用C语言扩展Python程序的简单入门指引
2015/04/14 Python
Python实现模拟分割大文件及多线程处理的方法
2017/10/10 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
Python使用numpy模块实现矩阵和列表的连接操作方法
2019/06/26 Python
Pytorch之finetune使用详解
2020/01/18 Python
党的群众路线学习材料
2014/05/16 职场文书
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
求职自我推荐信
2015/03/24 职场文书
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android