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

jquery异步跨域访问代码

Jun 28 Javascript

JavaScript获取多个数组的交集简单实例

Nov 11 Javascript

JS+CSS实现可以凹陷显示选中单元格的方法

Mar 02 Javascript

java中String类型变量的赋值问题介绍

Mar 23 Javascript

浅析JavaScript中的array数组类型系统

Jul 18 Javascript

jQuery操作cookie

Aug 08 Javascript

jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】

Sep 21 Javascript

AngularJS 监听变量变化的实现方法

Oct 09 Javascript

从零开始在NPM上发布一个Vue组件的方法步骤

Dec 20 Javascript

JS获取本地地址及天气的方法实例小结

May 10 Javascript

vue路由结构可设一层方便动态添加路由操作

Aug 31 Javascript

vue组件冲突之引用另一个组件出现组件不显示的问题

Apr 13 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