编程 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 相关文章推荐

让您的菜单不离网站

Oct 03 Javascript

javascript实现的平方米、亩、公顷单位换算小程序

Aug 11 Javascript

JavaScript判断变量是否为空的自定义函数分享

Jan 31 Javascript

js实现从中间开始往上下展开网页窗口的方法

Mar 02 Javascript

Node.js如何响应Ajax的POST请求并且保存为JSON文件详解

Mar 10 Javascript

JS实现简易的图片拖拽排序实例代码

Jun 09 Javascript

JavaScript比较同一天的时间大小实例代码

Feb 09 Javascript

Vue自定义指令封装节流函数的方法示例

Jul 09 Javascript

小程序云开发获取不到数据库记录的解决方法

May 18 Javascript

MockJs结合json-server模拟后台数据

Aug 26 Javascript

基于脚手架创建Vue项目实现步骤详解

Aug 03 Javascript

5种方法告诉你如何使JavaScript 代码库更干净

Sep 15 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列出MySQL中所有数据库的方法

2015/03/12 PHP

PHP实现登录搜狐广告获取广告联盟数据的方法【附demo源码】

2016/10/14 PHP

php5.3后静态绑定用法详解

2016/11/11 PHP

深入浅析PHP的session反序列化漏洞问题

2017/06/15 PHP

用javascript getComputedStyle获取和设置style的原理

2008/10/10 Javascript

JavaScript 类似flash效果的立体图片浏览器

2010/02/08 Javascript

javascript实现的DES加密示例

2013/10/30 Javascript

快速解决jQuery与其他库冲突的方法介绍

2014/01/02 Javascript

JavaScript数值转换的三种方式总结

2014/07/31 Javascript

node.js中的http.createServer方法使用说明

2014/12/14 Javascript

jQuery插件Timelinr 实现时间轴特效

2015/10/04 Javascript

js实现滚动条滚动到页面底部继续加载

2015/12/19 Javascript

Ajax使用原生态JS验证用户名是否存在

2020/05/26 Javascript

JavaScript每天必学之基础知识

2016/09/17 Javascript

用 Vue.js 递归组件实现可折叠的树形菜单(demo)

2017/12/25 Javascript

jQuery实现页码跳转式动态数据分页

2017/12/31 jQuery

Vue 使用 Mint UI 实现左滑删除效果CellSwipe

2018/04/27 Javascript

vue 不使用select实现下拉框功能(推荐)

2018/05/17 Javascript

JavaScript中set与get方法用法示例

2018/08/15 Javascript

vue2配置scss的方法步骤

2019/06/06 Javascript

javascript实现前端成语点击验证优化

2020/06/24 Javascript

jQuery实现移动端下拉展现新的内容回弹动画

2020/06/24 jQuery

[01:54]TI珍贵瞬间系列（五）：压力

2020/08/29 DOTA

Python 多线程的实例详解

2017/09/07 Python

Python DataFrame设置/更改列表字段/元素类型的方法

2018/06/09 Python

Python OpenCV处理图像之图像像素点操作

2018/07/10 Python

Pyinstaller打包.py生成.exe的方法和报错总结

2019/04/02 Python

Python Websocket服务端通信的使用示例

2020/02/25 Python

什么是Python中的匿名函数

2020/06/02 Python

python爬虫判断招聘信息是否存在的实例代码

2020/11/20 Python

中科创达面试题

2016/12/28 面试题

国际语言毕业生求职信

2014/07/08 职场文书

药店促销活动策划方案

2014/08/24 职场文书

钱塘江大潮导游词

2015/02/03 职场文书

生产车间主任岗位职责

2015/04/08 职场文书

大学文艺委员竞选稿

2015/11/19 职场文书