黑马JQuery教程1

1.JQuery入口函数

<script type="text/javascript">
      //方法一
	$(document).ready(function(){
		alert("这是jQuery");
	});
      //方法二
	$(function(){
		$('div').html("world");
	});
	window.onload = function(){
		alert("这是javascript");
	};
</script>

jQuery入口函数和window.onload入口函数的区别：

  • 1.window.onload入口函数不能写多个，但是jQuery的入口函数可以有多个
  • 2.执行时机不同。jQuery的入口函数要快于window.onload.
    jQuery入口函数：要等待页面dom树还在完后执行
    window.onload要等待页面上所有资源（dom树/外部CSS/js链接/图片）都加载完毕后执行

2. $是什么

$和jQuery是等价的，是一个对象。可以调用它进行jQuery的操作。

/*1.如果报：$ is not defined，就说明没有引入jQuery文件*/

/*2.jQuery文件其实是一个自执行函数。*/
window.jQuery = window.$ = jQuery;

/*3.引入一个js文件，是会执行这js文件中的代码的。
jQuery文件是一个自执行函数，执行这个jQuery文件中的代码，其实就是执行这个自执行函数。
从2得知，这个自执行文件就是给window对象添加一个jQuery属性和$属性
$其实和jQuery是等价的，是一个函数*/
console.log(window.jQuery === window.$); //true
console.log(Object.prototype.toString.call($)); //'[object Function]'

/*4.$是一个函数
参数传递不同，效果也不一样
4.1如果参数传递的是一个匿名函数-入口函数*/
$(function(){});
//4.2 如果参数传递的是一个字符串-选择器/没有，就创建一个标签
$('#one');
$('<div>hello</div>');
//4.3 如果参数是一个dom对象，那他就会把dom对象转换成jQuery对象。

3. dom对象和jQuery对象

特点说明
dom对象只能调用dom方法或者属性，不能调用jQuery的方法或属性
jQuery对象只能调用jQuery的方法或属性，不能调用dom方法或者属性jQuery对象是一个伪数组，是dom对象的一个包装集
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script type="text/javascript" src="jquery-3.4.1.js"></script>
</head>
<body>
<div id="one">hello</div>
<div id="two">world</div>
<script type="text/javascript">
	$(function(){
		var div1 = document.getElementById("one");
		console.log(div1);
		//使用dom方法
		div1.style.backgroundColor = "red";
		// div1.css("backgroundColor","green");//div1.css is not a function

		var $div1 = $("#two");
		console.log($div1);
		$div1.css("backgroundColor","green");
		// $div1.style.backgroundColor = "red"; //Uncaught TypeError: Cannot set property 'backgroundColor' of undefined
	});

</script>
</body>
</html>

4.dom对象和jQuery对象的转换

dom->jQueryjQuery->dom
$(dom对象)jQuery对象.get(index)
jQuery对象[index]
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script type="text/javascript" src="jquery-3.4.1.js"></script>
</head>
<body>
<div id="one">hello</div>
<div id="two">world</div>
<script type="text/javascript">
	$(function(){
		//dom->jQuery 使用$包起来即可
		var div1 = document.getElementById("one");
		var $div1 = $(div1);
		console.log($div1);

		//jQuery->dom
		var $divs = $("div");
		//方法一：使用下标获取
		var div2 = $divs[0];
		console.log(div2);
		//方法二：使用jQuery的get方法
		var div3 = $divs.get(1);
		console.log(div3);
	});

</script>
</body>
</html>

5.案例：开关灯

开关灯，只要修改背景色即可。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		img{
			display: block;
			margin: 0 auto;
		}
	</style>
	<script type="text/javascript" src="jquery-3.4.1.js"></script>
</head>
<body>
<input type="button" value="开灯">
<input type="button" value="关灯">
<img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1594641077&di=85eebf31a4d5e03262048b57bea9a70d&src=http://img.08087.cc/uploads/20190712/19/1562931842-fsIueLynKB.jpg">
<script type="text/javascript">
	$(function(){
		//使用dom获取元素
		var btns = document.getElementsByTagName("input");
		console.log(btns);
		btns[1].onclick = function(){
			$('body').css("backgroundColor","black");
		}
		//使用jQuery获取元素
		$(btns[0]).click(function(){
			$('body')[0].style.backgroundColor = "white";
		});
	});
</script>
</body>
</html>

6.设置获取文本内容text()

text()：没有参数，获取文本；传入参数，设置文本。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		
	</style>
	<script type="text/javascript" src="jquery-3.4.1.js"></script>
</head>
<body>
<input type="button" value="获取" id="getBtn">
<input type="button" value="设置" id="setBtn">
<div id="div1">我是一个div标签
	<p>我是一个p标签<span>span1</span></p>
</div>
<div>我是一个div2标签
	<p>我是一个p2标签<span>span2</span></p>
</div>
<script type="text/javascript">
	$(function(){
		//1.text()不输入参数，即获取文本
		$('#getBtn').click(function(){
			//会获取到这个标签中所有的文本，包括后代元素的文本
			// console.log($('#div1').text());

			//2.获取标签为div的元素的文本
			console.log($('div').text());
		});
		//2.text(文本)，设置文本
		
		$('#setBtn').click(function(){
			$('#div1').text("大连");
			//会覆盖原来的内容，如果设置的文本中包含标签，是不会把这个标签给解析出来的
			$('#div1').text("大<a>大连</a>连");
			//包含了多个dom元素的jQuery对象，通过text()方法设置文本，会把所有的dom元素都设置上
			$('div1').text("大连");//隐式遍历
		});
	});
</script>
</body>
</html>

7.获取和设置样式

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		#div2{ 300px;color: blue;background:#acacac;}
		div:nth-child(4){ 400px;color: red;background: #acacac;}
	</style>
	<script type="text/javascript" src="jquery-3.4.1.js"></script>
</head>
<body>
<input type="button" value="获取" id="getBtn">
<input type="button" value="设置" id="setBtn">
<div id="div1" style=" 200px;">我是一个div标签</div>
<div id="div2">我是一个div2标签</div>
<div id="div3">我是第三个</div>
<script type="text/javascript">
	$(function(){
		//1.获取样式:css(样式名)
		$('#getBtn').click(function(){
			//1.1获取id为div1这个元素的样式
			console.log($('#div1').css('width'));
			//在IE浏览器中，要获取边框这样的取值，一定要记得给一个准确的边框
			console.log($('#div1').css('border-top-width'));
			//1.2 获取标签为div的标签们的样式，只会返回第一个元素对应的样式
			console.log($('div').css('width'));
		});

		//2.设置文本:css(样式名，样式值)，设置的是行内样式
		$('#setBtn').click(function(){
			$('#setBtn').click(function(){
				//2.1 给id为div1设置样式
				$('#div1').css('height','50px');
				//2.2设置多样式
				$('#div1').css({200,'background':'#fdf5e6','border':'5px solid blue'});
				//2.3给标签为div的元素们设置样式，隐式遍历
				$('div').css({300,height:300,'background':'orange','border':'10px solid blue',margin:10,'float':'right'});
			});
		});
	});
</script>
</body>
</html>

8.jQuery基本选择器

jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。语法与css一样
注意：jQuery选择器返回的是jQuery对象。

名称用法描述
Id选择器$('#id')获取指定ID的元素
类选择器$('.class')获取同一class的元素
标签选择器$('div')获取同一类标签的所有元素
并集选择器$('div,p,li')使用逗号分隔，符合任一条件即可
交集选择器$('div.command')获取class为command的div元素

9.层次选择器

名称用法描述
子代选择器$('ul > li');使用>号，获取儿子层的元素。
注意：并不会获取孙子层级的元素
后代选择器$('ul li');使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子元素
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">

	</style>
	<script type="text/javascript" src="jquery-3.4.1.js"></script>
</head>
<body>
<p></p>
<div id="father">
	<div>
		<span>span1</span>
		<span>span2</span>
		<span>span3</span>
	</div>
	<div>
		<b>1</b>
		<div>div1</div>
		<div>div2</div>
		<div>div3</div>
		<p></p>
	</div>
	<div></div>
	<p></p>
	<p></p>
	<p></p>
	<span>sss1</span>
</div>
<script type="text/javascript">
	$(function(){
		//1.获取id为father这个元素的所有子div
		console.log($('#father > div')); //3个
		//2.获取id为father这个元素的所有子div以及所有子p元素
		console.log($('#father > div,#father > p'));//3个div，3个p
		//3.获取id为father这个div的所有后代div
		console.log($('#father div'));//6个div
	});
</script>
</body>
</html>

10. 过滤选择器

这类选择器都带冒号

名称用法说明
:eq(index)$('li:eq(2)')获取到的li元素中，选择索引为2的元素
:odd$('li:odd')获取到的li元素中，选择索引号为基数的元素
:even$('li:even')获取到的li元素中，选择索引号为偶数的元素
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
	</style>
	<script type="text/javascript" src="jquery-3.4.1.js"></script>
</head>
<body>
<ul>
	<li>我是第1个li标签</li>
	<li>我是第2个li标签</li>
	<li>我是第3个li标签</li>
	<li>我是第4个li标签</li>
	<li>我是第5个li标签</li>
	<li>我是第6个li标签</li>
	<li>我是第7个li标签</li>
	<li>我是第8个li标签</li>
	<li>我是第9个li标签</li>
	<li>我是第10个li标签</li>
</ul>
</div>
<script type="text/javascript">
	$(function(){
		$('li:odd').css('color','green');
		$('li:even').css('color','blue');
		$('li:eq(3)').css('color','red');
	});
</script>
</body>
</html>

11.jQuery筛选选择器

名称用法说明
children(selector)$('ul').children('li')相当于$('ul>li'),子类选择器
find(selector)$('ul').find('li')相当于$('ul li')，后代选择器
siblings(selector)$('#first').siblings('li')查找兄弟节点，不包括自己本身。
parent()$('#first').parent()查找父亲
eq(index)$('li').eq(2)相当于$('li:eq(2)').index从0开始
next()$('li').next()找下一个兄弟
prev()$('li').prev()找上一次兄弟
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">

	</style>
	<script type="text/javascript" src="jquery-3.4.1.js"></script>
</head>
<body>
<div class="wrap">
	<ul>
		<li>
			<a href="javascript:void(0);">一级菜单1</a>
			<ul>
				<li><a href="javascript:void(0);">二级菜单1</a></li>
				<li><a href="javascript:void(0);">二级菜单2</a></li>
				<li><a href="javascript:void(0);">二级菜单3</a></li>
			</ul>
		</li>
		<li>
			<a href="javascript:void(0);">一级菜单1</a>
			<ul>
				<li><a href="javascript:void(0);">二级菜单1</a></li>
				<li><a href="javascript:void(0);">二级菜单2</a></li>
				<li><a href="javascript:void(0);">二级菜单3</a></li>
			</ul>
		</li>
		<li>
			<a href="javascript:void(0);">一级菜单1</a>
			<ul>
				<li><a href="javascript:void(0);">二级菜单1</a></li>
				<li><a href="javascript:void(0);">二级菜单2</a></li>
				<li><a href="javascript:void(0);">二级菜单3</a></li>
			</ul>
		</li>
	</ul>

</div>

</div>
<script type="text/javascript">
	$(function(){
		console.log("$('.wrap ul li > ul')",$('.wrap ul li > ul'));//3个
		console.log("查找wrap类下面的所有ul下的所有li下的所有ul：",$('.wrap ul li').children('ul'));//3个
		console.log("$('.wrap ul li')",$('.wrap ul li'));//12
		console.log("查找wrap类下面的所有ul下的所有li：",$('.wrap ul').find('li'))//12
		console.log("查找兄弟：",$('.wrap>ul>li:eq(1)').siblings('li'));//返回第1个和第3个
		console.log("查找父亲：",$('.wrap>ul>li').parent());//ul
		console.log("通过下标查找：",$('.wrap>ul>li').eq(2));//返回ul下的第3个li
		console.log("找下一个兄弟：",$('.wrap>ul>li:eq(1)').next());
		console.log("找上一个兄弟：",$('.wrap>ul>li:eq(1)').prev());
	});
</script>
</body>
</html>

12.案例：下拉菜单

给一级菜单li设置鼠标移入事件，二级菜单显示。
给一级菜单li设置鼠标离开时间，二级菜单隐藏。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		.wrap>ul>li>ul{display: none}
	</style>
	<script type="text/javascript" src="jquery-3.4.1.js"></script>
</head>
<body>
<div class="wrap">
	<ul>
		<li>
			<a href="javascript:void(0);">一级菜单1</a>
			<ul>
				<li><a href="javascript:void(0);">二级菜单1</a></li>
				<li><a href="javascript:void(0);">二级菜单2</a></li>
				<li><a href="javascript:void(0);">二级菜单3</a></li>
			</ul>
		</li>
		<li>
			<a href="javascript:void(0);">一级菜单1</a>
			<ul>
				<li><a href="javascript:void(0);">二级菜单1</a></li>
				<li><a href="javascript:void(0);">二级菜单2</a></li>
				<li><a href="javascript:void(0);">二级菜单3</a></li>
			</ul>
		</li>
		<li>
			<a href="javascript:void(0);">一级菜单1</a>
			<ul>
				<li><a href="javascript:void(0);">二级菜单1</a></li>
				<li><a href="javascript:void(0);">二级菜单2</a></li>
				<li><a href="javascript:void(0);">二级菜单3</a></li>
			</ul>
		</li>
	</ul>
</div>

</div>
<script type="text/javascript">
	$(function(){
		$('.wrap>ul>li').mouseover(function(){
			$(this).children('ul').css("display","block");
			$(this).children('ul').show();//show()方法本质上还是更新block属性为block
		});
		$('.wrap>ul>li').mouseout(function(){
			$(this).children('ul').css("display","none");
			$(this).children('ul').hide();//hide()方法本质上还是更新block属性为none
		});
	});
</script>
</body>
</html>

思考：为什么不给一级菜单a标签设置鼠标移入事件和离开时间？
因为这样的化，选不到二级菜单。a标签和ul是兄弟关系。鼠标移入a标签，ul展示。当移入ul时，鼠标离开a标签，ul将消失，导致二级菜单不能选择。

13. mouseenter事件和mouseleave事件

mouseover事件在鼠标移动到选取的元素及其子元素上时触发。
mouseenter事件只在鼠标移动到选取的元素上时触发。
修改上面的js代码

	$(function(){
		var i=0;
		$('.wrap>ul>li').mouseover(function(){
			i++;
			console.log(i);
			$(this).children('ul').show();//show()方法本质上还是更新block属性为block
		});
	});

以后如果有鼠标移入事件，请使用mouseenter，而不是mouseover。
鼠标离开事件使用mouseleave，就不要使用mouseout。更多参考菜鸟教程

<script type="text/javascript">
	$(function(){
		var i=0;
		$('.wrap>ul>li').mouseenter(function(){
			$(this).children('ul').show();
		});
		$('.wrap>ul>li').mouseleave(function(){
			$(this).children('ul').hide();
		});
	});
</script>

14.案例：突出展示

1.给小人物所在的li标签设置鼠标移入事件，当前li透明度为1，其他的兄弟li标签透明度为0.4.
2.鼠标离开大盒子，所有的li标签的透明度改成1

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		body{background-color: black;padding:0;margin: 0;}
		div.wrap{ 520px;height:500px;margin: 0 auto;}
		img{ 200px;height: 200px;padding:10px;}
		li{float: left;list-style-type: none;}
		li.clear{float: none;display: none;}
	</style>
	<script type="text/javascript" src="jquery-3.4.1.js"></script>
</head>
<body>
<div class="wrap">
	<ul>
		<li>
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594737515687&di=a69180dd56d33839d0d66afa2987fc34&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F-vo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F0e2442a7d933c895ecb90f85da1373f08302000c.jpg">
		</li>
		<li>
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594737563811&di=bf83b16819154ba307a9aecbfc4867bb&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fforum%2Fw%3D580%2Fsign%3Da3a857ad11dfa9ecfd2e561f52d1f754%2F788c8e44ad345982e3ccd0230cf431adcaef848a.jpg">
		</li>
		<li>
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594737646433&di=b21c367b792d2900c6dae9571c45c6d5&imgtype=0&src=http%3A%2F%2Fphotocdn.sohu.com%2F20150704%2Fmp21273048_1436010520493_2_th_fv23.jpeg">
		</li>
		<li>
			<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1594737748593&di=17191dac25e0e23e8e302ee81bea1ad9&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fbaike%2Fs%3D220%2Fsign%3Dd2bd7296a786c9170c03553bf93c70c6%2F0e2442a7d933c89596340e15d11373f082020011.jpg">
		</li>
		<li class="clear"></li>
	</ul>
</div>

<script type="text/javascript">
	$(function(){
		var i=0;
		$('.wrap>ul>li').mouseenter(function(){
			$(this).css("opacity",1);
			$(this).siblings("li").css("opacity",0.4);
		});
		$('.wrap>ul').mouseleave(function(){
			$(this).children('li').css("opacity",1);
		});
	});
</script>
</body>
</html>

黑马老师的答案，更简洁

<script type="text/javascript">
	$(function(){
		var i=0;
		$('.wrap').find('li').mouseenter(function(){
			$(this).css("opacity",1).siblings("li").css("opacity",0.4);
		});
		$('.wrap').mouseleave(function(){
			$(this).find('li').css("opacity",1);
		});
	});
</script>

15. 手风琴案例

点击标题li标签，对应的div显示，其他li下面的div不展示

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		/**{}*/
		ul{list-style-type: none;}
		li{border: 1px solid #acacac; 300px;background-color: lightskyblue;}
		li div{background: white;height: 200px;display: none;}
	</style>
	<script type="text/javascript" src="jquery-3.4.1.js"></script>
</head>
<body>
<ul class="parentMap">
	<li class="menuGroup">
		<span class="groupTitle">标题1</span>
		<div>我是弹出来的div1</div>
	</li>
	<li class="menuGroup">
		<span class="groupTitle">标题2</span>
		<div>我是弹出来的div2</div>
	</li>
	<li class="menuGroup">
		<span class="groupTitle">标题3</span>
		<div>我是弹出来的div3</div>
	</li>
	<li class="menuGroup">
		<span class="groupTitle">标题4</span>
		<div>我是弹出来的div4</div>
	</li>
</ul>
<script type="text/javascript">
	$(function(){
		$('li.menuGroup').click(function(){
			// $(this).children('div').show().parent().siblings('li').children('div').hide();
			//分开操作
			$(this).children('div').show();
			$(this).siblings('li').children('div').hide();
		});
	});
</script>
</body>
</html>

16.案例：淘宝服饰精品

需求1:给左边的li标签们设置鼠标移入事件，让中间索引对应的li显示，其他的li隐藏
需求2:给右边的li标签们设置鼠标移入事件，让中间索引对应的li显示，其他的隐藏

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		*{margin: 0;padding: 0;}
		.wrapper{position:absolute;354px;height:268px;left: 0;right: 0;top: 0;bottom: 0;margin: auto auto;}
		li{border: 1px solid #acacac; 48px;height:28px;background-color: lightskyblue;list-style-type: none;}
		ul#center>li{ 250px;height: 268px;display: none;}
		ul#center>li:nth-child(1){display: block;}
		img{ 250px;height: 275px;}
		ul#left,ul#center{float: left;}
		ul#right{float: right;}
	</style>
	<script type="text/javascript" src="jquery-3.4.1.js"></script>
</head>
<body>
<div class="wrapper">
	<ul id="left">
		<li><a href="#">女靴</a></li>
		<li><a href="#">雪地靴</a></li>
		<li><a href="#">冬裙</a></li>
		<li><a href="#">呢大衣</a></li>
		<li><a href="#">毛衣</a></li>
		<li><a href="#">棉服</a></li>
		<li><a href="#">女裤</a></li>
		<li><a href="#">羽绒服</a></li>
		<li><a href="#">牛仔裤</a></li>
	</ul>
	<ul id="center">
		<li><img src="http://m.360buyimg.com/n12/jfs/t2452/76/1050278501/404320/b74243c0/563c3b83N06fecc10.jpg%21q70.jpg"></li>
		<li><img src="http://b-ssl.duitang.com/uploads/item/201301/12/20130112184128_MzGv4.jpeg"></li>
		<li><img src="http://img3.imgtn.bdimg.com/it/u=3054678224,324656785&fm=26&gp=0.jpg"></li>
		<li><img src="http://img10.360buyimg.com/imgzone/jfs/t625/273/749499601/364166/abbd5cc/54866917Nb78636c9.jpg"></li>
		<li><img src="http://img005.hc360.cn/m7/M06/91/09/wKhQpFWx6piEZE4bAAAAABd6S6M246.jpg"></li>
		<li><img src="http://img2.imgtn.bdimg.com/it/u=2722325051,2626198033&fm=26&gp=0.jpg"></li>
		<li><img src="http://img4.imgtn.bdimg.com/it/u=683961379,68859765&fm=26&gp=0.jpg"></li>
		<li><img src="http://m.360buyimg.com/n12/g15/M02/05/1A/rBEhWVIUJNIIAAAAAANQUWQdhIkAACRRwL8BHQAA1Bp395.jpg%21q70.jpg"></li>
		<li><img src="http://img0.imgtn.bdimg.com/it/u=2136439751,671978533&fm=26&gp=0.jpg"></li>
		<li><img src="http://img1.imgtn.bdimg.com/it/u=1721603981,1237730914&fm=214&gp=0.jpg"></li>
		<li><img src="http://a.vpimg4.com/upload/merchandise/19225/Crocodile-BY9051163-6-1.jpg"></li>
		<li><img src="http://image5.suning.cn/uimg/b2c/newcatentries/0070167766-000000000644592080_3_800x800.jpg"></li>
		<li><img src="http://d6.yihaodianimg.com/N03/M05/D8/31/CgQCtVJg69OAXGeDAAKcmioIHEY47900.jpg"></li>
		<li><img src="http://www.lxwj99.com/UploadFiles/FCK/2016-11/6361576777951562504512009.jpg"></li>
		<li><img src="http://img5.imgtn.bdimg.com/it/u=3027525206,2794770073&fm=26&gp=0.jpg"></li>
		<li><img src="http://img0.imgtn.bdimg.com/it/u=2221395912,1615843032&fm=26&gp=0.jpg"></li>
		<li><img src="http://img3.imgtn.bdimg.com/it/u=2886470975,3424824308&fm=26&gp=0.jpg"></li>
		<li><img src="http://img0.imgtn.bdimg.com/it/u=3753751476,1086684352&fm=26&gp=0.jpg"></li>
	</ul>
	<ul id="right">
		<li><a href="#">女包</a></li>
		<li><a href="#">男包</a></li>
		<li><a href="#">登山鞋</a></li>
		<li><a href="#">皮带</a></li>
		<li><a href="#">围巾</a></li>
		<li><a href="#">皮衣</a></li>
		<li><a href="#">男毛衣</a></li>
		<li><a href="#">男棉服</a></li>
		<li><a href="#">男靴</a></li>
	</ul>
</div>
<script type="text/javascript">
	$(function(){
		$('#left>li').mouseenter(function(){
			var index = $(this).index();
			$('#center>li').hide();
			$('#center>li').eq(index).show();
//			$('#center>li').hide().siblings('li').hide();//黑马老师答案
		})
		$('#right>li').mouseenter(function(){
			var index = $(this).index()+9;
			$('#center>li').hide();
			$('#center>li').eq(index).show();
		})
	});
</script>
</body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/csj2018/p/13295502.html