首页 > Web开发 > 详细

黑马JQuery教程2

时间:2020-07-15 17:51:48      阅读:41      评论:0      收藏:0      [点我收藏+]

1.Class类操作

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		div{
			width: 100px;height: 100px;margin-top:10px;
		}
		.bgc{background-color: green;}
		.fontSize30{font-size: 30px;}
		.width200{width: 200px;}
	</style>
	<script type="text/javascript" src="jquery-3.4.1.js"></script>
</head>
<body>
<input type="button" value="添加类" id="addClass" />
<input type="button" value="移除类" id="removeClass" />
<input type="button" value="判断类" id="hasClass" />
<input type="button" value="切换类" id="toggleClass" />
<div id="div1" class="bgc">div1</div1>
<script type="text/javascript">
	$(function(){
		//1.添加类
		$(‘#addClass‘).click(function(){
			//1.1添加单个类
			// $(‘#div1‘).addClass(‘fontSize30‘);
			//1.2添加多个类
			$(‘#div1‘).addClass(‘fontSize30 width200‘);
		});
		//2.移除类
		$(‘#removeClass‘).click(function(){
			//2.1删除单个类
			$(‘#div1‘).removeClass(‘fontSize30‘);
			//2.2删除多个类
			// $(‘#div1‘).removeClass(‘fontSize30 width200‘);
			//2.3删除所有的类
			// $(‘#div1‘).removeClass();
		});
		//3.判断类
		$(‘#hasClass‘).click(function(){
			//判断一个元素有没有某个类,如果有,就返回true;没有就返回false;
			console.log($(‘#div1‘).hasClass(‘fontSize30‘));
		});
		//4.切换类
		$(‘#toggleClass‘).click(function(){
			//如果元素有某个类就移除这个类;如果元素没有这个类就添加这个类
			$(‘#div1‘).toggleClass(‘fontSize30‘);
		});
	});
</script>
</body>
</html>

黑马JQuery教程2

原文:https://www.cnblogs.com/csj2018/p/13306200.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!