jQuery的常用函数学习
<!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的常用函数学习</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(); //隐藏子菜单
//当鼠标移上菜单项时通过mouseenter显示子菜单
$('.nav .f1').mouseenter(function () {
$('.sub .menu').slideDown(500);
})
//当鼠标移出菜单项时通过mouseleave再次隐藏子菜单
$('.menu').mouseleave(function () {
$('.menu').slideUp(300);
})
$('.menu2').hide();//隐藏子菜单
//当鼠标移上菜单项时通过mouseenter显示子菜单
$('.nav .f2').mouseenter(function () {
$('.menu2').slideDown(500);
})
//当鼠标移出菜单项时通过mouseleave再次隐藏子菜单
$('.menu2').mouseleave(function () {
$('.sub .menu2').slideUp(300);
})
$('.menu3').hide();//隐藏子菜单
//当通过点击菜单项时通过mousemove显示子菜单
$('.nav .f3').mousemove(function () {
$('.sub .menu3').show(500);
})
//当鼠标移出菜单项时通过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>在本章节主要学习了ready blur change click dblclick focus pageX pageY resize hide show slideDown slideUp toggle mouseenter mouseup mousemove mouseleave mouseout animate stop 等函数的语法及使用方法。