jQuery学习
课堂练习总体代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.9.1.min.js"></script>
<style>
#slide,#panel,#button1,#button2 {
padding: 5px;
text-align: center;
background-color: #fff1d9;
border: 2px solid darkred;
}
#panel{
display: none;
padding: 40px;
}
</style>
<script>
$(document).ready(function(){
$("#slide").click(function (){
$("#panel").slideDown(1000)
})
$("#button1").click(function (){
$("#panel").slideUp(1000)
})
$("#button2").click(function (){
$("#panel").slideToggle(1000)
})
})
</script>
</head>
<body>
<div id="slide">出现</div>
<div id="button1" type="button">隐藏</div>
<div id="button2" type="button">toggle</div>
<div id="panel">hello world ！</div>
</body>
<html>代码总结//show()展示，hide()隐藏，toggle()开关，slideup()上滑，slideDown()下滑，slidetoggle()滑动开关，animate()动画，slidewindow()滑动窗口。
jQuery尺寸图解
用jQuery实现二级菜单代码
<script type="text/javascript">
$(function(){
$(".navmenu").mouseover(function(){
$(this).children("ul").show();
//$(this).children("ul").css({display:'block'})
})
$(".navmenu").mouseout(function(){
$(this).children("ul").hide();
//$(this).children("ul").css({display:'none'})
})
})
</script>
286
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
