编程 Javascript

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程序设计有所帮助。

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

- Author -

shichen2014

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Javascript调用XML制作连动下拉列表框

Jun 25 Javascript

JavaScript DOM 学习第九章选取范围的介绍

Feb 19 Javascript

CSS图片响应式垂直水平居中

Aug 14 Javascript

js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果

Aug 31 Javascript

基于Phantomjs生成PDF的实现方法

Nov 07 Javascript

Angularjs自定义指令Directive详解

May 27 Javascript

深入浅析javascript继承体系

Oct 23 Javascript

Vue实现点击后文字变色切换方法

Feb 11 Javascript

JS实现二维数组元素的排列组合运算简单示例

Jan 28 Javascript

JS中数据结构与算法---排序算法(Sort Algorithm)实例详解

Jun 17 Javascript

Node.js 实现抢票小工具 & 短信通知提醒功能

Oct 22 Javascript

vue使用axios实现excel文件下载的功能

Jul 16 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数组操作

2011/12/30 PHP

选择PHP作为网站开发语言的原因分享

2012/01/03 PHP

php简单实现多字节字符串翻转的方法

2015/03/31 PHP

php如何控制用户对图片的访问 PHP禁止图片盗链

2016/03/25 PHP

thinkphp5修改view到根目录实例方法

2019/07/02 PHP

TopList标签和JavaScript结合两例

2007/08/12 Javascript

javascript下对于事件、事件流、事件触发的顺序随便说说

2010/07/17 Javascript

写JQuery插件的基本知识

2013/11/25 Javascript

JavaScript字符串对象replace方法实例（用于字符串替换或正则替换）

2014/10/16 Javascript

JavaScript中的console.assert()函数介绍

2014/12/29 Javascript

javascript创建函数的20种方式汇总

2015/06/23 Javascript

JavaScript实现99乘法表及隔行变色实例代码

2016/02/24 Javascript

JavaScript原生编写《飞机大战坦克》游戏完整实例

2017/01/04 Javascript

Angular2里获取（input file）上传文件的内容的方法

2017/09/05 Javascript

解决layer 关闭当前弹窗关闭遮罩层 input值获取不到的问题

2019/09/25 Javascript

使用 Element UI Table 的 slot-scope方法

2019/10/10 Javascript

jQuery实现可编辑的表格

2019/12/11 jQuery

快速解决Vue、element-ui的resetFields()方法重置表单无效的问题

2020/08/12 Javascript

[01:02]2014 DOTA2国际邀请赛中国区预选赛现场抢先看

2014/05/22 DOTA

Python的for和break循环结构中使用else语句的技巧

2016/05/24 Python

Python的shutil模块中文件的复制操作函数详解

2016/07/05 Python

Python编程之gui程序实现简单文件浏览器代码

2017/12/08 Python

Python求解任意闭区间的所有素数

2018/06/10 Python

python3文件复制、延迟文件复制任务的实现方法

2019/09/02 Python

python socket 聊天室实例代码详解

2019/11/14 Python

使用pandas 将DataFrame转化成dict

2019/12/10 Python

python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法

2020/02/26 Python

Pymysql实现往表中插入数据过程解析

2020/06/02 Python

python打开音乐文件的实例方法

2020/07/21 Python

css3+jq创作含苞待放的荷花

2014/02/20 HTML / CSS

HTML5实现简单图片上传所遇到的问题及解决办法

2016/01/20 HTML / CSS

英国男士时尚购物网站：Stuarts London

2017/10/22 全球购物

写出一个方法实现冒泡排序

2016/07/08 面试题

汽车运用工程系毕业生自荐信

2013/12/27 职场文书

退休教师欢送会主持词

2014/03/31 职场文书

python的html标准库

2022/04/29 Python