课后作业-416

最新推荐文章于 2023-06-15 09:42:22 发布

hyl2310447005

最新推荐文章于 2023-06-15 09:42:22 发布

阅读量166

点赞数

本文链接：https://blog.csdn.net/hyl2310447005/article/details/89419020

版权

课堂练习：

用代码实现出现隐藏 toggle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQueryDownload/jquery-1.8.3.min.js"></script>
    <style>
        #slide1,#panel{
            padding: 5px;
            text-align: center;
            background-color: #65ee06;
            border: solid 1px #6ec318;
        }
        #slide2,#panel{
            padding: 5px;
            text-align: center;
            background-color: #9bee28;
            border: solid 1px #52c300;
        }
        #slide3,#panel{
            padding: 5px;
            text-align: center;
            background-color: #7fee1d;
            border: solid 1px #68c31b;
        }
        #panel{
            display: none;
            padding: 40px;
        }
    </style>
    <script>
        $(document).ready(function(){
            $("#slide1").click(function(){
                $("#panel").slideDown()
            })
            $("#slide2").click(function(){
                $("#panel").slideUp()
            })
            $("#slide3").click(function(){
                $("#panel").slideToggle()
            })
        })
    </script>
</head>
<body>
<div id="slide1">出现</div>
<div id="slide2">隐藏</div>
<div id="slide3">toggle</div>
<div id="panel">hello word</div>
</body>
</html>

jquery动画总结：

show()，hide()，toggle()，slideUp()，slideDown()，slideToggle()，animate()，slide Window(滑动窗口)

jquery 的四种fade方法：

jQuery fadeIn()
fadeTo()
fadeToggle()
fadeOut()

jquery的宽高

<html>
<head>
<title>通过JQUERY获取元素的宽高</title>
<script src="jquery/jquery-1.8.1.min.js">
<script>
$(document).ready(function(){
	$("button").click(function(){
	//var w  = $('#div1').width()
	//alert($('#div1').width())
	var txt = ""
	txt +='div的宽度shi:'+$('#div1').width()+'px'+'<br>';//重点
	txt +='div的高度shi:'+$('#div1').height()+'px'+'<br>';//重点
	txt +='div的宽度包括内边距shi'+$('#div1').innerwidth()+'px'+'<br>';
	txt +='div的高度包括内边距shi'+$('#div1').innerheight()+'px'+'<br>';//跟内容重复，padding为0，padding结果为200，200
	txt +='div的宽度包括内边距和边框shi'+$('#div1').outwidth()+'px'+'<br>';
	txt +='div的宽度包括内边距和边框shi'+$('#div1').outheight()+'px'+'<br>';
	txt +='div的宽度包括内边距和边框和外边距shi'+$('#div1').outwidth(true)+'px'+'<br>';
	txt +='div的宽度包括内边距和边框和外边距shi'+$('#div1').outheight(true)+'px'+'<br>';
	$("#div").html(txt)
})

})

</script>
</head>
<body>
<div id="div1" style="height:200px ;width:200px;padding: 10px;border:1px solid red;margin:1px"></div>
<button>显示元素的尺寸</button>
</body>
</html>

内容获取-height()+width()
padding获取-innerheight()+innerwidth()
border获取-outwidth()+outheight()
margin获取-outwidth(true)+outheight(true)

width（）：设置或返回元素的宽度（不包括内边距，边框，外边距）
height（）：设置或返回元素的宽度（不包括内边距，边框，外边距）

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>

hyl2310447005

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
课后作业-416

课堂练习：用代码实现出现隐藏 toggle<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="jQueryDownload/jquery-1.8...
复制链接

扫一扫