jQuery|day02--类操作|动画|节点操作

最新推荐文章于 2024-09-17 21:49:02 发布

CI_FAN

最新推荐文章于 2024-09-17 21:49:02 发布

阅读量126

点赞数 1

分类专栏： jQuery 文章标签： jquery javascript html css 前端

本文链接：https://blog.csdn.net/qq_45826452/article/details/109010638

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML与css部分

<!DOCTYPE html>
<html>
<head>
	<title>day02</title>
	<script type="text/javascript" src="jquery-3.5.1.js"></script>
	<style type="text/css">
		.fontSize30{
			font-size: 30px;
		}
		.bgred{
			background:red;
		}
		#test02,
		#test03,
		#test04,
		#test05,
		#test06{
			width: 200px;
			height: 200px;
			background:red;
			display: none;
		}
		#test05{
			position: relative;
			display: block;
		}
	</style>
</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="test01">test01</div>
	<br>

	<input type="button" value="显示" id="show">
	<input type="button" value="隐藏" id="hide">
	<input type="button" value="切换" id="toggle">
	<div id="test02"></div>
	<br>

	<input type="button" value="滑入" id="slideDown">
	<input type="button" value="滑出" id="slideUp">
	<input type="button" value="切换" id="slideToggle">
	<div id="test03"></div>
	<br>

	<input type="button" value="淡入" id="fadeIn">
	<input type="button" value="淡出" id="fadeOut">
	<input type="button" value="切换" id="fadeToggle">
	<input type="button" value="淡to" id="fadeTo">
	<div id="test04"></div>
	<br>

	<input type="button" value="动画演示" id="anim">
	<div id="test05"></div>
	<br>

	<input type="button" value="开始动画" id="start">
	<input type="button" value="停止动画" id="stop">
	<div id="test06"></div>
	<br>

	<input type="button" value="html" id="btnhtml">
	<input type="button" value="$" id="btnd">
	<div id="test07"><p>testhtml</p></div>
	<br>

	<input type="button" value="append" id="btnAppend">
	<input type="button" value="prepend" id="btnPrepend">
	<input type="button" value="after" id="btnAfter">
	<input type="button" value="before" id="btnBefore">
	<input type="button" value="appendTo" id="btnAppendTo">
	<input type="button" value="remove" id="btnRemove">
	<input type="button" value="empty" id="btnEmpty">
	<ul id="ul1">
		<li>我是第1个li标签</li>
		<li>我是第2个li标签</li>
		<li id="li3">我是第3个li标签</li>
		<li>我是第4个li标签</li>
		<li>我是第5个li标签</li>
	</ul>
	<ul id="ul2">
		<li>我是第1个li标签2</li>
		<li>我是第2个li标签2</li>
		<li id="li32">我是第3个li标签2</li>
		<li>我是第4个li标签2</li>
		<li>我是第5个li标签2</li>
	</ul>
	<br>
	<input type="button" value="克隆" id="clone">
	<div id="test08">
		<span>span1</span>
		<p>
			p1
			<b>b1</b>
		</p>
	</div>
	<br>

	<input type="button" value="按钮" id="getValue">
	<input type="text" id="txt" value="请输入账号">
</body>
</html>
<script type="text/javascript">
	$(function(){
		//代码见下方...
	})
</script>

添加类

//1. 添加类 addClass(类名)
		$('#addClass').click(function(){
			//1.1 给id为test01的元素添加类
			//添加单个类
			// $('#test01').addClass('fontSize30');
			//添加多个类
			$('#test01').addClass('fontSize30 bgred');	//会覆盖之前的内容
		});

移除类

		//2. 移除类
		$('#removeClass').click(function(){
			//给id为test01的元素
			//移除单个类
			// $('#test01').removeClass('fontSize30');
			//移除多个类
			$('#test01').removeClass('fontSize30 bgred')
			//移除所有类
			// $('#test01').removeClass();
		});

判断类

//3. 判断类
		$('#hasClass').click(function(){
			//判断此元素是否含有指定类，返回true或false
			alert($('#test01').hasClass('bgred'));
		});

切换类

//4. 切换类
		$('#toggleClass').click(function(){
			//如果有这个类，那么移除它，如果没有，那么添加它
			$('#test01').toggleClass('bgred');
		});

显示与隐藏

		//show() 大小
		$('#show').click(function(){
			// $('#test02').show('fast');	//200ms
			// $('#test02').show('normal');	//400ms
			// $('#test02').show('slow');	//600ms
			$('#test02').show(500,function(){
				alert('动画显示完毕');
			});			//500ms
			//如果没写参数，则没有动画效果，若参数错误，则为normal参数
			//第二个参数为回调函数，即动画显示完成后执行的函数
		});
		//hide() 参数同show()
		$('#hide').click(function(){
			$('#test02').hide(500,function(){
				alert('动画隐藏完毕');
			})
		});
		//toggle()
		$('#toggle').click(function(){
			$('#test02').toggle(500,function(){
				alert('切换完成');
			});
			//如果元素为显示，则动画隐藏，若果元素为隐藏，则动画显示
		});

滑入滑出

		//滑入滑出 高度
		//slideDown(参数1,参数2)参数含义同show()
		$('#slideDown').click(function(){
			//让id为test03的元素滑入
			$('#test03').slideDown(500,function(){
				alert('滑入成功');
			});
		});
		$('#slideUp').click(function(){
			$('#test03').slideUp(500,function(){
				alert('滑出成功');
			});
		});
		$('#slideToggle').click(function(){
			$('#test03').slideToggle(500,function(){
				alert('切换完成');
			});
		});

淡入淡出

		//淡入淡出（透明度）
		$('#fadeIn').click(function(){
			$('#test04').fadeIn(500,function(){
				alert('淡入完成');
			});
		});
		$('#fadeOut').click(function(){
			$('#test04').fadeOut(500,function(){
				alert('淡出完成');
			});
		});
		$('#fadeToggle').click(function(){
			$('#test04').fadeToggle(500,function(){
				alert('切换完成');
			});
		});
		$('#fadeTo').click(function(){
			//第二个参数淡到何处（opacity）
			$('#test04').fadeTo(500,0.5,function(){
				alert('to');
			});
		});

动画

		//动画 	animate(prop,speed,easing,callback)--(属性，速度，缓动还是匀速(swing linear)(默认缓动swing)，回调函数)
		$('#anim').click(function(){
			$('#test05').animate({
				left:800,
				opacity:0.2,
				background:'green',	//关于颜色的动画，需要下载插件
			},500,'linear');
		});


		//动画队列，停止动画
		$('#start').click(function(){
			$('#test06').slideDown(2000).slideUp(2000);
			//模拟动画队列
		});
		$('#stop').click(function(){
			$('#test06').stop(true,true);
			//两个参数分别为：是否清除动画队列，是否跳转到最终效果,默认都是false
		});

节点添加

		//节点操作
		//html()
		//设置或获取内容
		$('#btnhtml').click(function(){
			//html()不加参数，即为获取内容
			console.log($('#test07').html());	//获取元素的所有内容，包括标签
			//给参数，即为设置参数
			$('#test07').html('设置<h1>h1</h1>');	//设置内容会覆盖之前的内容（包含标签）,设置的内容可包含标签
		});
		$('#btnd').click(function(){
			var $link = $('<a href="http://www.baidu.com/">一个链接</a>');//创建节点
			//追加节点
			$('#test07').append($link);
		});


		//节点添加的方式
		//append()-子级添加
		$('#btnAppend').click(function(){
			//将新建的li标签append
			var $liNew = $('<li>New append li</li>');//作为指定父元素的最后一个子元素添加
			$('#ul1').append($liNew);
			//将已有的li标签append
			var $li3 = $('#li3');
			$('#ul1').append($li3);	//将原有的元素剪切后，作为指定父元素的最后一个子元素添加
		});
		//prepend()-子级添加
		$('#btnPrepend').click(function(){
			//将新建的li标签prepend
			var $liNew = $('<li>New prepend li</li>');//作为指定父元素的第一个子元素添加
			$('#ul2').prepend($liNew);
			//将已有的li标签prepend
			// var $li32 = $('#li32');
			// $('#ul2').prepend($li32);	//将原有的元素剪切后，作为指定父元素的第一个子元素添加
		});
		//before()-同级添加
		$('#btnBefore').click(function(){
			var $divNew = $('<div>这是插入ul1之前的div</div>');
			$('#ul1').before($divNew);
		});
		//after()-同级添加
		$('#btnAfter').click(function(){
			var $divNew = $('<div>这是插入ul1之后的div</div>');
			$('#ul1').after($divNew);
		});
		//appendTo()
		$('#btnAppendTo').click(function(){
			var $liNew = $('<li>我是appendTo的li</li>');
			$liNew.appendTo($('#ul1'));
			//将子元素添加到父元素的最后一个
		});

移除节点

		//移除节点
		$('#btnEmpty').click(function(){
			//1. 清空
			// $('#ul2').html('');	//直接设置内容为空，不推荐使用，此方法并不能清除元素所绑定的事件，可能造成内存泄漏
			//2. empty()-清空某一元素
			$('#ul2').empty();
		});
		$('#btnRemove').click(function(){
			//3. remove()-移除某一个元素
			$('#li32').remove();
		});

克隆节点

		//克隆节点
		$('#clone').click(function(){
			var $clonediv = $('#test08').clone(true);//如果参数为true，则绑定事件也会克隆；为false则不会克隆事件，默认为false
			$('body').append($clonediv);
		})

获取表单内容

		//获取表单内容
		$('#getValue').click(function(){
			$('#txt').val();	//val()方法不给参数即为获取内容
			$('#txt').val('这是一个设置的值');	//给参数即为设置值，第二个参数为回调函数
		})

CI_FAN

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录