编程 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插件开发对话框插件开发

Apr 26 Javascript

让jQuery与其他JavaScript库并存避免冲突的方法

Dec 23 Javascript

js左右弹性滚动对联广告代码分享

Feb 19 Javascript

javascript每日必学之条件分支

Feb 17 Javascript

深入理解setTimeout函数和setInterval函数

May 20 Javascript

vue中实现methods一个方法调用另外一个方法

Feb 08 Javascript

node内置调试方法总结

Feb 22 Javascript

浅谈Koa2框架利用CORS完成跨域ajax请求

Mar 06 Javascript

详解vuex的简单使用

Mar 12 Javascript

JS中DOM元素的attribute与property属性示例详解

Sep 04 Javascript

checkbox在vue中的用法小结

Nov 13 Javascript

vue项目中实现的微信分享功能示例

Jan 21 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