css、jquery之淘宝搜索框制作

最新推荐文章于 2020-11-08 02:47:36 发布

风势暗伤

最新推荐文章于 2020-11-08 02:47:36 发布

阅读量2.1k

点赞数 1

分类专栏：前端文章标签： jquery html 搜索 css

本文链接：https://blog.csdn.net/weixin_33547926/article/details/52248671

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

今天联系制作了一个淘宝搜索框，制成效果如下：

记录一些在其中遇到的一些问题。

1.jquery中text()、html()、val()的区别：

text()是改变某个元素的文本内容；

html()可以改变元素和文本；（比如一个div的html()可以增加或修改div中其他元素）

val()获取或者改变某个元素的value值（前提是这个元素有value属性）

2.js中==与===的区别：

==值判断值是否相等，因为js是弱类型语言，所以"1"与1也能判断相等；

===判断完全相等，所谓完全相等，即值和类型都要完全相等；

<script type="text/javascript">
    var a="1";
	var b=1;
	if(a===b){
	 alert("true");
	}
	else{
	  alert("false");
	}
</script>

弹出false;

<script type="text/javascript">
    var a="1";
	var b=1;
	if(a==b){
	 alert("true");
	}
	else{
	  alert("false");
	}
</script>

弹出true;

3.js中使用this.text(); 而jquery使用$(this).text();

4.思想：淘宝左侧的选择店铺和宝贝下拉菜单，实际上可以用一个div中装ul li来实现，然后设置一个li的高度和div高度差不多，再使用overflow:hidden;其他的li就看不见了，然后再使用一些鼠标事件的控制，实现动态选择；具体淘宝搜索框代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<style type="text/css">
*{margin:0;padding:0}
body{font:12px/1.5 tahoma,arial,sans-serif;}
.left{float:left;border:3px solid #FF5C0F}
.buttonDiv{float:left;}
.right{float:left;margin-left:5px;}
.right a{text-decoration:none;color:#6c6c6c;}
.search-submit{background:url(search.png);width:117px;height:36px;border:0;cursor:pointer;}
.search-input{height:30px;outline:0;line-height:30px;width:550px;border:0 none;background-color:#fff;}
.search-container{margin-left:300px;margin-top:100px;position:relative;}
.search-list{float:left;background-color:#fff;border-right:2px solid #e5e5e5;width:60px;height:30px;overflow:hidden;}
.search-list ul{list-style:none;}
.search-list ul li{height:30px;line-height:30px;overflow:hidden;text-align:center;}
.search-list ul li a{text-decoration:none;color:#6c6c6c;}
.selected{background:#f6f6f6;}
</style>
</head>

<body>
   <div class="search-container">
         
		 
		 <div class="search-inputDiv">
		       <form>
			      <div class="left">
				  <div class="search-list">
		           <ul>
				      <li class="selected" id="selected1"><a href="#">宝贝</a></li>
					  <li id="selected2"><a href="#">店铺</a></li>
				   </ul>
		          </div>
				  <i class="iCon"></i>
				  <input type="text" class="search-input" x-webkit-speech=""/>
				  </div>
				  <div class="buttonDiv">
			      <button type="submit" class="search-submit"></button>
				  </div>
				  <div class="right">
			      <a href="#">高级<br>搜索</a>
				  </div>
			   </form>
		 </div>
   </div>
   <script type="text/javascript">
      $(function(){
	      $(".search-list").bind("mouseover",function(){
		      $(this).css("overflow","visible");
		  })
		  $(".search-list").bind("mouseout",function(){
		      $(this).css("overflow","hidden");
		  })
		  $("#selected2").bind("click",function(){
		      if($("#selected1 a").text()=="店铺"){
			     $("#selected1 a").text("宝贝");
				 $("#selected2 a").text("店铺");
			  }
			  else{
			     $("#selected1 a").text("店铺");
				 $("#selected2 a").text("宝贝");
			  }			  
		  })
	  }) 
   </script>
</body>
</html>