提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

jQuery搜索方法 实现 效果 常见
2023-06-13 09:15:41 时间

本文实例讲述了jquery实现搜索框常见效果的方法。分享给大家供大家参考。具体实现方法如下：

复制代码代码如下:


<html>
<head>
<metahttp-equiv="content-type"content="text/html;charset=utf-8"/>
<title>jquery搜索框效果</title>
<scripttype="text/javascript"src="jquery-1.8.2.min.js"></script>
<scripttype="text/javascript">
 $(function(){
 varsearchBox=$("#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>
<inputid="search"type="text"title="search"value=""/><inputtype="submit"value="搜索"/>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

相关文章