篩選選擇器（方法）
既然是方法 那就應該對象調用 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>