JavaScript0420笔记

最新推荐文章于 2020-07-22 13:14:54 发布

转载最新推荐文章于 2020-07-22 13:14:54 发布 · 189 阅读

本文深入探讨了使用jQuery进行动画操作的方法，如淡入淡出、滑动等，并详细讲解了如何通过jQuery准确获取元素的宽高、内外边距及边框尺寸，适用于网页前端开发人员提升页面交互体验。

<html>
<head>
<script src="jquery/jquery-1.7.1.min.js"></src>
<script type="text/javascript">
$ function(){
	$(".navmenu").mouseover(function(){
	$(this).children("ul").show();
	//$(this).children("ul").css({display:'block'});显示的两种方法 this = navmenu，将this换成navmenu效果一样
	
})
	$(".navmenu").mouseover(function(){
	$(this).children("ul").hide();
	//$(this).children("ul").css({display:'none'});隐藏的两种方法 this = navmenu，将this换成navmenu效果一样
	
})
}
</script>
</head>
<body>
<div class="navmenu">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>

二级菜单淡入淡出
知识点：jquery的动画、SlideUP(jquery实现)

SlideDown(),SlideToggle()。

2.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)。

假如获取一张图片用？-内容获取-height()+width()

width()返回元素的宽度(不包括内边距、边框、或外边距)
height()返回元素的高度(不包括内边距、边框、或外边距)

3通过JQUERY获取元素的宽高