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->jQuery | jQuery->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>