jQuery基础—4、常用DIV操作兼论jQuery语法

最新推荐文章于 2023-09-14 18:51:30 发布

cross over

最新推荐文章于 2023-09-14 18:51:30 发布

阅读量329

点赞数

分类专栏： Java 文章标签： jQuery

本文链接：https://blog.csdn.net/qq_42308454/article/details/82970003

版权

Java 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

4、常用DIV操作兼论jQuery语法

网页上对于DIV的操作是很多的，所以我们多以div来举例子

4.1.获取或设置div的高度和宽度

现在body中添加宽度和高度两个框

添加“获取”和“设置”按钮

Css样式

为按钮注册事件

方法一：height和width函数（得到的是整数），可以用于获取或设置元素的高度和宽度。

val()获取或设置元素的值

方法二：css函数可以用于获取或设置元素的高度和宽度

获取css("width")（得到的是以px结尾的字符串）,设置css("width",20px)或css({width:20px,height:20px})

其他功能同样的道理

全部代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1
{
	width:200px;
	height:200px;
	background-color:red;
}
</style>
<script type="text/javascript" src="jslib/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
	//为获取按钮注册事件
	$("#get").click(function(){
		//方法一
		//$("#ht").val($("#div1").height());
		//$("#wd").val($("#div1").width());
		
		//方法二
		$("#ht").val($("#div1").css("height"));
		$("#wd").val($("#div1").css("width"));
	});
	$("#set").click(function(){
		//方法一
		//$("#div1").height($("#ht").val());
		//$("#div1").width($("#wd").val());
		
		//$("#div1").height($("#ht").val()).width($("#wd").val());
		
		//方法二
		//$("#div1").css("height",$("#ht").val());
		//$("#div1").css("width",$("#wd").val());
		
		//$("#div1").css({height:$("#ht").val(),width:$("#wd").val()});
		$("#div1").css("height",$("#ht").val()).css("width",$("#wd").val());
	});
});
</script>
</head>

<body>
高度：<input type="text" id="ht" />
宽度:<input type="text" id="wd" />

<input type="button" value="设置" id="set" />
<input type="button" value="获取" id="get" />

<div id="div1"></div>
</body>
</html>

4.2动画

使用Animate事件

先添加一个测试按钮，和div

Css样式

为按钮绑定事件

Div会在4秒里变为指定的大小

全部代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#div1
{
	width:10px;
	height:10px;
	background-color:red;
}
</style>
<script type="text/javascript" src="jslib/jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
		$("#div1").animate({width:500,height:500},4000);//设置时间为4000毫秒
	});
})
</script>
</head>

<body>
<input type="button" value="测试" id="btn"/>
<div id="div1"></div>
</body>
</html>

4.3实现DIV的显示和隐藏

实现一个通过一个按钮控制div显示和隐藏的功能

添加一个切换的按钮

添加两个div，其中一个div是用来显示信息的

添加css样式，将按钮clear设为both，表示按钮左边上边没有浮动元素，但是这样会使得margin-top重置为0（firefox中），

如果想改变div位置，可以设置旁边元素的margin-bottom

当前显示效果

为按钮注册事件

全部代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jslib/jquery-1.11.1.js"></script>
<style type="text/css">
#div1
{
	width:300px;
	height:300px;
	background-color:red;
	clear:both
}
#btn,#info
{
	float:left;
	margin-bottom:20px;
}
#info
{
	margin-left:20px;
}
</style>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
		if($("#div1").css("display")=="none")
		{
			$("#info").html("正在显示...");
			$("#div1").show(8000,function(){
				$("#info").html("显示完毕！");				
			});
		}
		else
		{
			$("#info").html("正在隐藏...");
			$("#div1").hide(8000,function(){
				$("#info").html("隐藏完毕！");				
			});
		}
	});
});
</script>
</head>

<body>
<input type="button" value="切换" id="btn" />

<div id="info">正在显示...</div>
<div id="div1"></div>
</body>
</html>

欢迎进群交流258897306或关注公众号“IT群英汇”