JavaScript0420笔记

最新推荐文章于 2024-03-16 13:21:00 发布

Sect Arms灬逍

最新推荐文章于 2024-03-16 13:21:00 发布

阅读量141

点赞数

<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获取元素的宽高

补充：

滑动窗口-Slide windows
slideToggle=SlideUp+SlideDown的效果

animate：V 方法用于创建自定义的动画，
animation：N
jquery动画效果终结
show、hide,toggle,slideup,slideDown,slidetoggle,animate().
w

Sect Arms灬逍

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript0420笔记

<html><head><script src="jquery/jquery-1.7.1.min.js"></src><script type="text/javascript">$ function(){ $(".navmenu").mouseover(function(){ $(this).children("ul")....
复制链接

扫一扫