当前位置：首页 > 编程笔记 >

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

嵇财

2023-03-14

本文向大家介绍jquery实现搜索框常见效果的方法，包括了jquery实现搜索框常见效果的方法的使用技巧和注意事项，需要的朋友参考一下

本文实例讲述了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程序设计有所帮助。

类似资料：

javascript搜索框效果实现方法

本文向大家介绍javascript搜索框效果实现方法，包括了javascript搜索框效果实现方法的使用技巧和注意事项，需要的朋友参考一下本文实例讲述了javascript搜索框效果实现方法。分享给大家供大家参考。具体实现方法如下：希望本文所述对大家的javascript程序设计有所帮助。
js实现YouKu的漂亮搜索框效果

本文向大家介绍js实现YouKu的漂亮搜索框效果，包括了js实现YouKu的漂亮搜索框效果的使用技巧和注意事项，需要的朋友参考一下本文实例讲述了js实现YouKu的漂亮搜索框效果。分享给大家供大家参考。具体如下：运行效果如下图所示：在线演示地址如下： http://demo.jb51.net/js/2015/js-youku-search-style-codes/ 具体代码如下：希望本文所
js实现搜索栏效果

本文向大家介绍js实现搜索栏效果，包括了js实现搜索栏效果的使用技巧和注意事项，需要的朋友参考一下小编这边主要是介绍一个js中搜索栏的实现（没有提交数据那些），重点在于对焦点问题的理解。那么这边小编就是要实现这样的一个搜索框对焦点的理解：通俗来讲当我们鼠标单击一个盒子时光标停留在该盒子事件上实现用户与栏之间的交互，这样就表明该盒子获取了焦点，以案例来说我们平常搜索栏点击可以输入文字，这个时
基于Vue.js 2.0实现百度搜索框效果

本文向大家介绍基于Vue.js 2.0实现百度搜索框效果，包括了基于Vue.js 2.0实现百度搜索框效果的使用技巧和注意事项，需要的朋友参考一下使用Vue.js 2.0 模仿百度搜索框效果，供大家参考，具体内容如下以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
javascript实现类似于新浪微博搜索框弹出效果的方法

本文向大家介绍javascript实现类似于新浪微博搜索框弹出效果的方法，包括了javascript实现类似于新浪微博搜索框弹出效果的方法的使用技巧和注意事项，需要的朋友参考一下本文实例讲述了javascript实现类似于新浪微博搜索框弹出效果的方法。分享给大家供大家参考。具体实现方法如下：运行效果如下：希望本文所述对大家的javascript程序设计有所帮助。
js实现常见的工具条效果

本文向大家介绍js实现常见的工具条效果，包括了js实现常见的工具条效果的使用技巧和注意事项，需要的朋友参考一下实现功能如下： 1. 二维码展示功能； 2. “回到顶部”功能。(选择“全屏预览”，滑动滚动条，查看回到顶部功能) 效果图：图(1) 初始效果图(2) 鼠标悬浮效果实例代码：以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持呐喊教程！
jquery中用jsonp实现搜索框功能

本文向大家介绍jquery中用jsonp实现搜索框功能，包括了jquery中用jsonp实现搜索框功能的使用技巧和注意事项，需要的朋友参考一下前面的话：在上周本来想发一篇模仿必应搜索的界面。但是在准备写文章之前突然想到前面学习了ajax技术，在这里我也让我的页面有一种不需要手动刷新就能获取到数据。但是发现用前面的方法并不能获取到我想要的效果。无奈前几天电脑换系统，把之前的源码丢了（前面
实现语音搜索的最有效方法

问题内容：在C ++和/或Java中实现语音搜索的最有效方法是什么？通过语音搜索，我的意思是替换听起来相似的元音或辅音。这对于名字特别有用，因为有时人们的名字会有一些奇怪的拼写。我认为替换元音和一些辅音可能是有效的。最好包含一些特殊情况，例如末尾的静音E或F和PH。最好在C ++中使用cstrings或字符串吗？将替换的值存储在内存中或在每次寻找内容时调用函数会更好吗？问题答案： Sound

相关阅读

js实现常见的工具条效果 jquery中用jsonp实现搜索框功能实现语音搜索的最有效方法 jQuery实现tab选项卡效果的方法 jQuery实现返回顶部效果的方法

相关文章

360搜索后端C++ 日常实习（一二HR）26日常实习百度搜索架构二面 4.27 字节搜索客户端日常实习一面字节跳动搜索前端日常实习一面结合实例解析宽度优先搜索(BFS)搜索

相关问答

搜索容器中的搜索框实现二进制搜索树的add方法二叉搜索树选择方法的实现搜索框中的Javascript 二进制搜索树-实现“搜索”功能

相关工具

瀑布效果，不同的实现方式读取txt并实现翻页效果团购搜索 NSPredicate模糊搜索 Google AJAX 搜索 API

相关文档

常见 Web 特效实践常用算法实现方法如何实现自己的 jQuery 论 PHP 常见的漏洞各种算法的 Python 实现方案