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

让你的博客飘雪花超出屏幕依然看得见

Jan 04 Javascript

详解Bootstrap的aria-label和aria-labelledby应用

Jan 04 Javascript

JavaScript中的跨浏览器事件操作的基本方法整理

May 20 Javascript

Vue实现双向数据绑定

May 03 Javascript

bootstrap是什么_动力节点Java学院整理

Jul 14 Javascript

JS实现验证码倒计时的注册页面

Jan 02 Javascript

js获取html页面代码中图片地址的实现代码

Mar 05 Javascript

详解如何在vscode里面调试js和node.js的方法步骤

Dec 24 Javascript

express + jwt + postMan验证实现持久化登录

Jun 05 Javascript

vue 实现cli3.0中使用proxy进行代理转发

Oct 30 Javascript

vue2路由基本用法实例分析

Mar 06 Javascript

vue实现井字棋游戏

Sep 29 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

星际争霸 Starcraft 游戏介绍

2020/03/14 星际争霸

一个可查询所有表的“通用”查询分页类

2006/10/09 PHP

《PHP边学边教》(02.Apache+PHP环境配置――下篇)

2006/12/13 PHP

PHP采集利器 Snoopy 试用心得

2011/07/03 PHP

深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念

2013/06/06 PHP

解决cPanel无法安装php5.2.17

2014/06/22 PHP

PHP中Fatal error session_start()错误解决步骤

2014/08/05 PHP

php+mysql查询优化简单实例

2015/01/13 PHP

php实现向javascript传递数组的方法

2015/07/27 PHP

PHP实现使用DOM将XML数据存入数组的方法示例

2017/09/27 PHP

PHP迭代器接口Iterator用法分析

2017/12/28 PHP

PHP有序表查找之二分查找（折半查找）算法示例

2018/02/09 PHP

解决laravel中日志权限莫名变成了root的问题

2019/10/17 PHP

js实现收缩菜单效果实例代码

2013/10/30 Javascript

根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)

2015/09/14 Javascript

Javascript点击按钮随机改变数字与其颜色

2016/09/01 Javascript

JavaScript编写一个简易购物车功能

2016/09/17 Javascript

jquery获取下拉框中的循环值

2017/02/08 Javascript

原生js实现旋转木马轮播图效果

2017/02/27 Javascript

JavaScript 实现 Tab 点击切换实例代码

2017/03/25 Javascript

微信小程序实现多宫格抽奖活动

2020/04/15 Javascript

VueRouter导航守卫用法详解

2017/12/25 Javascript

vue实现重置表单信息为空的方法

2018/09/29 Javascript

基于Taro的微信小程序模板消息-获取formId功能模块封装实践

2019/07/15 Javascript

vue 强制组件重新渲染(重置)的两种方案

2019/10/29 Javascript

解决vue cli4升级sass-loader(v8)后报错问题

2020/07/30 Javascript

[02:17]2016完美“圣”典风云人物：Sccc专访

2016/12/03 DOTA

Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器

2014/06/04 Python

python实现连接mongodb的方法

2015/05/08 Python

python实现颜色空间转换程序(Tkinter)

2015/12/31 Python

Python使用Slider组件实现调整曲线参数功能示例

2019/09/06 Python

python安装scipy的步骤解析

2019/09/28 Python

python [:3] 实现提取数组中的数

2019/11/27 Python

EJB需直接实现它的业务接口或Home接口吗，请简述理由

2016/11/23 面试题

小学班长竞选演讲稿

2014/04/24 职场文书

舞出我人生观后感

2015/06/16 职场文书