一年多没碰jquery了，前两天听说项目组要兼容ie8，，，，需要用到jquery， 临时回忆一下jq的感觉，哈哈。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
</style>
</head>
<body>
<div class="demo">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
<script>
// $('.demo')表示获取到div标签。 直接使用链式写法，因为jq每次都会return出一个调用对象。
/* 下面这段代码表示， 获取到class为demo的标签元素，给元素添加内容‘哈哈哈我是你爸爸’，
设置这个标签元素的背景色为绿色，字体为白色，边框为红色，宽高为100，点击时，让这个元素变为黄色*/
/*
$('.demo') == document.getElementsByClassName('.demo')[0]
html() == innerHTML()
*/
$('.demo').html('哈哈哈我是你爸爸')
.css({
background: 'green',
color: '#fff',
border: '1px solid red',
'100',
height: '100',
})
.click(() => {
$('.demo').css({ background: 'yellow' })//获取到类名为demo的标签元素，背景色设置为黄色
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.mean {
display: flex;
text-align: center;
}
.mean li {
list-style: none;
margin: 10px 20px;
}
.active{
background:yellow;
font-size: 20px;
font-weight: 900;
}
.content li{
display: none;
}
</style>
</head>
<body>
<div>
<ul class="mean">
<li>北京</li>
<li>北京</li>
<li>北京</li>
<li>北京</li>
</ul>
<ul class="content">
<li>海淀1</li>
<li>海淀2</li>
<li>海淀3</li>
<li>海淀4</li>
</ul>
</div>
<script src="./jquery-1.12.4.js"></script>
<script>
// 获取类名为mean下的li，绑定鼠标事件mouseenter
$('.mean li').mouseenter(function(){
// 获取当前鼠标所在的元素，添加类名active，选择除了自己之外的所有元素，移除所有类名active
$(this).addClass('active').siblings().removeClass('active')
// 查找类名为active的下标
let index = $('.active').index()
// 查找类名为content 下的li元素，获取li元素中下标是index的元素，
// 让选中的元素show（显示，相当于调用了display:block）
// 利用siblings获取除自己之外的所欲元素，hide（隐藏，相当于 display:none）
$('.content li').eq(index).show().siblings().hide()
// .eq: 表示获取同级元素中下标为index 的元素
})
</script>
</body>
</html>