jQuery选项卡的优化以及对index()方法的一些思考

最新推荐文章于 2022-12-26 11:47:38 发布

智者_若愚

最新推荐文章于 2022-12-26 11:47:38 发布

阅读量211

点赞数

分类专栏：大前端

本文链接：https://blog.csdn.net/qq_35392733/article/details/101380776

版权

大前端专栏收录该内容

68 篇文章 3 订阅

订阅专栏

昨晚用jQuery粗糙地写了一个简单的选项卡发现代码太过冗长，不符合现代社会主义核心价值观。
于是今晚我要代表月亮皎洁的月光来修正这一段代码了。
废话不多说，上代码！

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jq09 选项卡</title>
	<script type="text/javascript" src="jq/jquery.min.js"></script>
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	ul{overflow: auto;}
		li{
			list-style: none;
			border: 1px solid green;
			width: 120px;
			height: 40px;
			float: left;
			text-align: center;
			line-height: 40px;
			background: rgba(0,255,0,0.5);
			cursor: pointer;
		}
		ul>li:first-child{
			background: white;
			border-bottom: none;
		}
		#content{
			/*clear: both;*/
			border: 1px solid green;
			border-top: none;
			width: 364px;
			height: 200px;
			overflow: hidden;
		}
		#content div{
			width: 364px;
			height: 200px;
			display: none;
		}
		#content>div:first-child{
			display: block;
		}

	</style>
</head>
<body>
<ul>
	<li>第一部分</li>
	<li>第二部分</li>
	<li>第三部分</li>
</ul>
<div id="content">
	<div>H5实践教程</div>
	<div>javascript基础</div>
	<div>js,jquery进阶教程</div>
</div>

基本的文档结构就不多说了，来看jq代码！

$(function(){
			$('li').each(function(index){
				this.index=index;
			})
			$('#content>div').each(function(index){
				this.index=index;
			})
			$('li').click(function(){
				var i=this.index;
				$('li').each(function(index){
					if(this.index==i){
						$(this).css('background','white').css('border-bottom','none');
					}else{
						$(this).css('background','rgba(0,255,0,0.5)').css('border-bottom','1px solid green');
					}
				})
				$('#content>div').each(function(index){
					if(this.index==i){
						$(this).css('display','block');
					}else{
						$(this).css('display','none');
					}
				})
			})
		})

妈呀吓死宝宝了，这他*也太复杂来吧
我们简单的看一下优化方案
//jquery优化代码
//优化思路
//1.不需要each方法直接用siblings()方法选择被选择的其他元素
//2.不需要每个添加index属性，直接使用jq的index()方法获取index值
//3.样式分离直接用jquery类添加删除方法来切换样式
优化后的代码就简洁多了

$(function(){
			var $li=$('ul>li');
			$li.click(function(){
				$(this).css('background','white').css('border-bottom','none').siblings().css('background','rgba(0,255,0,0.5)').css('border-bottom','1px solid green');
				$('#content>div').eq($li.index(this)/* 这里的$li大有文章*/).css('display','block').siblings().css('display','none');
			})
		})

当然了我们也可以吧样式分里出去这里为了方便就没有那么做
我们着重来分析一下那个index()方法
我一开始直接用$(this).index(this)发现弹出来的index值都是0,那肯定是不对的，因为 $(this)就是某个元素本身，它本身调用index参数却还是本身所以返回的值永远是它本身也就是0了。
为啥我们要用 $li.index(this)呢？
首先这个 $li是一个jQuery对象里面封装了一个li元素对象的数组，这句话的意思也可像遍历数组一样那么理解。
假如arr_li[len]是一组li对象的集合那么伪代码可以这么写
for(var i=0;i<arr_li.lengthl;i++){
if(arr_li[i]==this)
return i
}
OK今天就到这里结束吧！