abstrait：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js&q
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <title>jQuery的常用函數(shù)學(xué)習(xí)</title>
<style>
* {
padding: 0;
margin: 0;
}
ul li {
list-style-type: none;
padding: 10px;
}
a {
color: #fff;
text-decoration: none;
}
.c {
margin: 0 auto;
}
.nav {
max-width: 600px;
height: 40px;
margin-bottom: 20px;
margin: 0 auto;
position: relative;
}
.nav ul {
margin: 0 auto;
}
.nav ul li {
color: #fff;
margin: 2px 18px;
padding: 2px;
width: 60px;
float: left;
background: rgb(207, 97, 97);
border-radius: 3px;
text-align: center;
line-height: 30px;
}
.nav ul li:first-child {
background: rgb(85, 85, 221);
}
.nav ul li:nth-child(2) {
background: rgb(38, 226, 148);
}
.nav ul li:nth-child(3) {
background: rgb(148, 45, 231);
}
.menu {
max-width: 86px;
background: rgb(85, 85, 221);
text-align: center;
position: absolute;
left: 555px;
box-shadow: 1px 1px 12px rgb(105, 100, 100);
}
.menu2 {
color: #fff;
max-width: 80px;
background: rgb(38, 226, 148);
text-align: center;
position: absolute;
left: 650px;
box-shadow: 1px 1px 12px rgb(105, 100, 100);
}
.menu3 {
color: #fff;
max-width: 80px;
background: rgb(148, 45, 231);
text-align: center;
position: relative;
left: 750px;
box-shadow: 1px 1px 12px rgb(105, 100, 100);
}
</style>
</head>
<body>
<script>
$(document).ready(function () {
$('.menu').hide(); //隱藏子菜單
//當(dāng)鼠標(biāo)移上菜單項時通過mouseenter顯示子菜單
$('.nav .f1').mouseenter(function () {
$('.sub .menu').slideDown(500);
})
//當(dāng)鼠標(biāo)移出菜單項時通過mouseleave再次隱藏子菜單
$('.menu').mouseleave(function () {
$('.menu').slideUp(300);
})
$('.menu2').hide();//隱藏子菜單
//當(dāng)鼠標(biāo)移上菜單項時通過mouseenter顯示子菜單
$('.nav .f2').mouseenter(function () {
$('.menu2').slideDown(500);
})
//當(dāng)鼠標(biāo)移出菜單項時通過mouseleave再次隱藏子菜單
$('.menu2').mouseleave(function () {
$('.sub .menu2').slideUp(300);
})
$('.menu3').hide();//隱藏子菜單
//當(dāng)通過點擊菜單項時通過mousemove顯示子菜單
$('.nav .f3').mousemove(function () {
$('.sub .menu3').show(500);
})
//當(dāng)鼠標(biāo)移出菜單項時通過mouseleave再次隱藏子菜單
$('.menu3').mouseleave(function () {
$('.sub .menu3').slideUp(300);
})
})
</script>
<div class="c nav">
<ul>
<li class="f1"><a href="">item1</a></li>
<li class="f2"><a href="">item2</a></li>
<li class="f3"><a href="">item3</a></li>
<li class="f4"><a href="">item4</a></li>
<li class="f5"><a href="">item5</a></li>
<li class="f6"><a href="">item6</a></li>
</ul>
</div>
<div class="sub">
<div class="menu">
<ul>
<li><a href="">option1</a></li>
<li><a href="">option2</a></li>
<li><a href="">option3</a></li>
</ul>
</div>
<div class="menu2 ">
<ul>
<li><a href="">option4</a></li>
<li><a href="">option5</a></li>
<li><a href="">ption6</a></li>
<li><a href="">option7</a></li>
</ul>
</div>
<div class="menu3 ">
<ul>
<li><a href="">option8</a></li>
<li><a href="">option9</a></li>
<li><a href="">ption10</a></li>
</ul>
</div>
</div>
</body>
</html>在本章節(jié)主要學(xué)習(xí)了ready blur change click dblclick focus pageX pageY resize hide show slideDown slideUp toggle mouseenter mouseup mousemove mouseleave mouseout animate stop 等函數(shù)的語法及使用方法。
Professeur correcteur：韋小寶Temps de correction：2019-02-11 17:01:39
Résumé du professeur：寫的很不錯 這些函數(shù)在以后的開發(fā)中多多少少都會遇到 課后一定要多練習(xí)哦！