jQuery|day03--属性操作|位置与尺寸操作|事件注册、解绑、触发与事件对象

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

CI_FAN

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

阅读量116

点赞数 1

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

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

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

HTML与css部分

<!DOCTYPE html>
<html>
<head>
	<title>day03</title>
	<script type="text/javascript" src="jquery-3.5.1.js"></script>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		.father{
			width: 400px;
			height: 400px;
			border:10px solid red;
			position: relative;
			top: 10px;
			left: 10px;
		}
		.son{
			width: 100px;
			height: 100px;
			border:10px solid green;
			position: absolute;
			top: 100px;
			left: 100px;
		}
		#btn8+div{
			width: 200px;
			height: 200px;
			overflow: auto;

		}
		#btn8+div img{
			width: 540px;
			height: 360px;
		}
		#on,
		#off{
			width: 100px;
			height: 100px;
			background: red;
		}
	</style>
</head>
<body>
	<input type="button" value="获取属性" id="btn1">
	<input type="button" value="设置属性" id="btn2">
	<input type="button" value="移除属性" id="btn3">
	<img src="../img/pic13.jpg" alt="working" title="todo" id="test01">
	<br>

	<input type="button" id="btn4" value="是否checked">
	<input type="checkbox" id="ckb1">
	<br>
	<input type="button" id="btn5" value="大小设置">
	<br>

	<input type="button" value="offset()" id="btn6">
	<input type="button" value="position()" id="btn7">
	<div id="father" class="father">
		<div id="son" class="son"></div>
	</div>
	<br>

	<input type="button" value="滚动条" id="btn8">
	<div id="scroll">
		<img src="../img/yh.jpg">
	</div>

	<input type="button" value="on简单事件注册" id="btn9">
	<input type="button" value="添加on委托注册示例" id="btn10">
	<div id="on">on委托注册</div>
	<br>

	<input type="button" value="注册" id="btn11">
	<input type="button" value="解绑" id="btn12">
	<div id="off"></div>
	<input type="button" value="触发已有事件" id="btn13">
	<input type="button" value="触发自定义事件" id="btn14">
	<br>

	<input type="button" value="事件对象演示" id="btn15">



</body>
</html>

<script type="text/javascript">
	$(function(){
		//代码见下方...
	})
</script>

设置、获取、移除属性

		//操作属性
		//1. 设置属性
		$('#btn2').click(function(){
			$('#test01').attr("src",'../img/pic14.jpg');//更改原有属性
			$('#test01').attr('aaa','A');				//修改自定义属性
			$('#test01').attr('bbb','B');				//添加没有的属性
			$('#test01').attr({
				'ccc':'C',
				'ddd':'D',
			});										//设置多个属性
		});
		//2. 获取属性
		$('#btn1').click(function(){
			alert($('#test01').attr('src'));
			//获取指定属性名的属性值，如果没有此属性，则值为undefined
		});
		//3. 移除属性
		$('#btn3').click(function(){
			$('#test01').removeAttr('alt');			//移除alt属性
			$('#test01').removeAttr('aaa bbb ccc');	//移除多个属性
		});

布尔类型属性

		//prop()操作布尔类型的属性
		$('#btn4').click(function(){
			//attr()无法获取
			alert($('#ckb1').prop('checked'));
		});

位置、尺寸操作

		//位置，尺寸操作
		$('#btn5').click(function(){
			
			$('#test01').width(300);
			$('#test01').height(300);	//设置
			console.log($('#test01').width(),$('#test01').height());
			//不给参数-获取，不包括padding，border，margin
			console.log($('#test01').innerWidth(),$('#test01').innerHeight());
			//包括padding，不包括border和margin
			console.log($('#test01').outerWidth(),$('#test01').outerHeight());
			//包括padding和border，不包括margin
			console.log($('#test01').outerWidth(true),$('#test01').outerHeight(true));
			//包括padding，border，margin
			console.log($(window).width(),$(window).height());	//获取页面可视区的宽高
		});

		//offset()
		$('#btn6').click(function(){
			console.log($('#father').offset());//获取元素距离document的位置（top，left）
		});
		//position()
		$('#btn7').click(function(){
			console.log($('#son').position());//获取元素
		});
		$('#btn8').click(function(){
			$('#scroll').scrollTop(100);	//设置滚动条滚动距离
			//获取
			console.log($('#scroll').scrollTop()+":"+$('#scroll').scrollLeft());
			console.log($(window).scrollTop());
		});

统一事件注册

		//on统一事件注册
		//简单注册
		$('#btn9').on('click',function(){
			alert("on简单注册");
		});
		//委托注册
		$('#btn10').on('click',function(){
			var $clonediv = $('#on').clone();
			$('#on').after($clonediv);
		});
		$('body').on('click','#on',function(){
			//将事件委托给body，id为on的所有标签都会绑定click事件，包括在此函数执行之后产生的标签
			alert('触发点击事件');
		});

事件解绑

		//解绑
		$('#btn11').on('click',function(){
			$('#off').on('click',function(){
				alert('单击事件触发');
			});
		});
		$('#btn12').on('click',function(){
			$('#off').off('click');	//解绑指定click事件，如果不给参数则解绑所有事件
		});

事件触发

		//触发
		$('#btn13').on('click',function(){
			$('#off').trigger('click');
		});
		//先绑定一个自定义事件
		$('#btn14').on('hello',function(){
			alert('Hello Human!');
		});
		$('#btn14').on('click',function(){
			var res = confirm('Hello?');
			if(res){
				$('#btn14').trigger('hello');
			}
		});

事件对象

		//事件对象
		//注册事件，系统就会生成一个对象记录此事件触发时候的一些信息（如是否按了某个键）
		//通常使用事件参数e来获取
		$('#btn15').on('click',function(e){
			console.log(e);	//如果点击此按钮的同时还按下了alt键，则此事件对象中的altKey属性将为true
			console.log("screen"+e.screenX + ":" + e.screenY);	//屏幕左上角距离事件触发位置点的距离
			console.log("client"+e.clientX + ":" + e.clientY);	//可视区左上角距离事件触发位置点的距离
			console.log("page"+e.pageX + ":" + e.pageY);		//页面左上角距离事件触发位置点的距离

			e.stopPropagation();		//阻止事件冒泡，即加上这个后点击此按钮，body的click事件不会触发
			e.preventDefaut();			//阻止默认行为，即如果此元素是一个a标签，单击后不会执行跳转功能
			return false;				//既能阻止冒泡，也能阻止默认行为
		});
		$(document).on('keydown',function(e){
			console.log(e.keyCode);		//获取此事件触发时的按键信息
		})