Jquery 筛选选择器
筛选选择器（方法）
既然是方法 那就应该对象调用 obj.metch();
$(“.dd”).children("ul"),show(); //找到.dd下的带Ul的所有子元素 显示
.eq(index) //匹配index下标的元素
.first() //获取第一元素
.last() //获取最后一个元素
.find() //后代查找
.parent() //查找父标签
.siblings() //兄弟元素
.next() //下一个兄弟元素
.prev() //前一个兄弟元素
.
<!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">
<script src="jquery1.12/jquery-1.12.4.js"></script>
<title>Document</title>
</head>
<body>
<style>
.li>a{
text-decoration: none;
display: block;
width: 140px;
}
ul{
list-style: none;
}
.box>ul>li{
float: left;
margin: 50px;
}
.box{
display: block;
height: 30px;
text-align: center;
}
.ul{
padding-left: 0;
text-align: center;
}
.li>ul{
display: none;
}
</style>
<div class="box">
<ul class="ul">
<li class="li">
<a href="">公司简介</a>
<ul class="ul">
<li>二级菜单选项</li>
<li>二级菜单选项</li>
<li>二级菜单选项</li>
</ul>
</li>
<li class="li">
<a href="">招聘中心</a>
<ul class="ul">
<li>二级菜单选项</li>
<li>二级菜单选项</li>
<li>二级菜单选项</li>
</ul>
</li>
<li class="li">
<a href="">联系方式</a>
<ul class="ul">
<li>二级菜单选项</li>
<li>二级菜单选项</li>
<li>二级菜单选项</li>
</ul>
</li>
</ul>
</div>
<script>
//当我们鼠标移动到.box>ul>li 这个元素的时候 显示它下面的ul 为什么？
//如果我们不把.box>ul>li 元素设置事件 ，放我们把鼠标放在这个元素后 就会隐藏了
$(".box>ul>li").mouseover(function(){
//$(this),因为this是DOM对象，所以需要转换
//children 是获取所有的子元素， a 和ul
//但是我们只需要ul 所以 children("ul"),show()
$(this).children("ul").show();
});
$(".box>ul>li").mouseout(function(){
$(this).children("ul").hide();
});
</script>
</body>
</html>
