jquery库使用(二)尺寸位置-元素属性-循环-事件冒泡-事件委托

最新推荐文章于 2021-09-07 21:13:12 发布
最新推荐文章于 2021-09-07 21:13:12 发布
阅读量293 收藏
点赞数
分类专栏： 前端 文章标签： html js css javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43844838/article/details/107447443
版权

jquery库使用二

一、尺寸和位置

1. 获取元素的尺寸

  1. 盒子内容的尺寸
    1. width()
    2. height()
  2. 盒子内容 + padding 的尺寸
    1. innerWidth()
    2. innerHeight()
  3. 盒子内容 + padding + border 的尺寸
    1. outerWidth()
    2. outerHeight()
  4. 盒子内容 + padding + border + margin 的尺寸
    outerWidth(true)
    outerHeight(true)
  5. 实例演示：
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>获取元素尺寸</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var $div = $('.box');

			// 盒子内容的尺寸
			console.log($div.width());
			console.log($div.height());

			// 盒子内容 + padding 的尺寸
			console.log($div.innerWidth());
			console.log($div.innerHeight());

			// 盒子的真实尺寸  ： 内容 + padding + border
			console.log($div.outerWidth());
			console.log($div.outerHeight());

			// 盒子的真实尺寸 + margin
			console.log($div.outerWidth(true));
			console.log($div.outerHeight(true));
		});
	</script>
	<style type="text/css">
		.box{
			width:300px;
			height:200px;
			border:10px solid #000;
			margin:20px;
			padding: 20px;
			background-color: gold;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	
</body>
</html>
    效果：
    在这里插入图片描述

2. 获取位置信息

  1. 获取元素相对页面的绝对位置

    1. offset()
      获取后又两个参数 一个是

      1. top:距离上方

      2. ledft:距离左方

      3. 实例

        <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>获取元素绝对位置</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var $div = $('.box');

			// 获取元素在页面的绝对位置 .offset()
			// var oPos = $div.offset();  //返回一个对象

			

			$div.click(function(){
				var oPos = $div.offset();
				// left :左边的值  top : 上面的值
				alert(oPos.left)
				console.log(oPos);
				document.title = oPos.left + '|' + oPos.top;
			});
		});
	</script>
	<style type="text/css">
		.box{
			width:200px;
			height:200px;
			background-color:gold;
			margin:50px auto 0;
		}
	</style>
</head>
<body>
	<div class="box"></div>
	
</body>
</html>
      效果：
      在这里插入图片描述

  2. 获取可视区信息

    1. 获取可可视区高度
      $(window).height();
    2. 获取可视区的宽度
      $(window).width();

  3. 获取滚动信息

    1. 滚动距离，距离最上方的高度 – 纵向滚动条
      $(document).scrollTop()
    2. 滚动距离，距离最左方的距离 – 横向滚动条
      $(document).scrollLeft()

  4. 页面滚动事件

    $(window).scoll(function(){
    …
    })

  5. 实例：

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>尺寸计算</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){

			// 可视区宽度 / 高度
			console.log("可视区宽度："+$(window).width());
			console.log("可视区高度："+$(window).height());


			// 文档的宽度 / 高度
			console.log("文档宽度："+$(document).width());
			console.log("文档高度："+$(document).height());

			// 获得页面的滚动距离
			console.log("页面往上滚动的距离:"+ $(document).scrollTop());


			console.log("页面往左滚动的距离:"+ $(document).scrollLeft());
		});
	</script>
</head>
<body>
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	
</body>
</html>

3.置顶菜单

  1. 代码
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>置顶菜单</title>
	<style type="text/css">
		body{
			margin:0;
		}
		.banner{
			width:960px;
			height:200px;
			background-color: cyan;
			margin:0 auto ;
		}
		.menu{
			width:960px;
			height: 100px;
			background-color: gold;
			margin:0 auto ;
			text-align:center;
			line-height: 100px;

		}
		.menu_back{
			width: 960px;
			height:100px;
			margin:0 auto;
			display: none;
		}

		p{
			text-align:center;
			color:red;
		}

		.totop{
			width:60px;
			height:60px;
			background-color: #000;
			color:#fff;
			position: fixed;
			right:20px;
			bottom:50px;
			font-size: 40px;
			text-align:center;
			line-height:60px;
			border-radius: 60px;
			cursor: pointer;  /*变成手*/
			display: none;
		}
	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var $menu = $('.menu');
			var $menu_back = $('.menu_back');
			var $totop = $('.totop');
			// 滚动事件
			$(window).scroll(function(){
				// 滚动距离上面的距离
				var iNum = $(document).scrollTop();
				// document.title = iNum;  // 显示在标题栏

				if(iNum>200){
					$menu.css({
						// 固定定位
						"position":"fixed",
						"left":"50%",
						"top":0,
						"marginLeft":-480

					});
					// 解决出现固定定位时候文档流跳动 
					$menu_back.show();  // 显示
				}
				else{
				$menu.css({	
						// 设置成默认
						"position":"static",
						"marginLeft":"auto"
					})
					$menu_back.hide();  // 隐藏
				}
				if (iNum>400){
					$totop.fadeIn();  // 淡入

				}else{
					$totop.fadeOut();  // 淡出
				}

			});

			// 兼容的写法  回到顶部
			$totop.click(function(){
				$('html,body').animate({'scrollTop':0});
			});
			
		});
	</script>
</head>
<body>
	<div class="banner"></div>
	<div class="menu">菜单</div>
	<div class="menu_back"></div>
	<div class="totop">↑</div>


	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
</body>
</html>

二、元素属性操作

  1. 读取属性
    .pop(属性)

  2. 设置属性
    pop({属性:值})

  3. 实例：

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>元素的属性操作</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var $a = $('.link');
			var $img = $('#img01');
			var $div = $('#div1');

			// 读取 class 属性值  .prop()
			console.log($a.prop("class"));

			// 没有设置的就为空的
			console.log($a.prop("title"));

			// 获取的是图片的绝对地址
			console.log($img.prop("src"));

			// 设置属性
			$a.prop({
				"href":"https://www.baidu.com",
				// "title":"去到百度网链接"
			});


			// 读取标签内包含的内容  .html()
			console.log($a.html());  


			// 往标签中写东西   .html("xxxxx")
			$div.html("这是一个div")  
		});
	</script>

</head>
<body>
	<a href="#" class="link" >这是一个链接</a>
	<img src="images/goods001.jpg" id="img01" alt="水果">

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

	
</body>
</html>

三、jquery循环

  1. 使用each() 第一个参数是索引值
  2. 使用方法：
	$li.each(function(index){
		.......
	});

  1. 实例：

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery循环</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

	<script type="text/javascript">
		$(function(){
			var $li = $('.list li');
			// jquery循环
			// 里面有几个就执行几次  
			// index : 第一个参数 索引值 (index 名称可以改) 
			$li.each(function(index){

				// 获取索引值
				// alert(index);
				// alert($(this).html());
				// alert($(this).index());

				if ($(this).index()%2 == 0){
					$(this).css({"backgroundColor":"gold"});
				}
			});




		});
	</script>
</head>
<body>
	<ul class="list">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
	</ul>
	
</body>
</html>

四、 手风琴实例

  1. 效果图：

在这里插入图片描述

  1. 代码：

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>手风琴</title>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		.accordion{
			width:286px;
			height:180px;
			margin:50px auto 0;
			overflow: hidden;
		}

		.accordion ul{
			list-style: none;
			width:1000px;
			position:relative;
		}
		.accordion li{
			width:201px;
			height:180px;
			color:gold;
			float:left;
		}
		.accordion li span,img{
			height:180px;
			display:inline-block;
			float:left;
		}
		.accordion li span{
			width:20px;
			line-height: 20px;
			text-align:center;
			font-size: 16px;
			color:#000;
			cursor: pointer;  /*变成手*/
			border-right:1px solid #666;

		}
		.bar01,.bar02,.bar03,.bar04,.bar05{
			position: absolute;
			left:0px;
			top:0px;
		}
		.bar01 span{
			background-color: red;

		}
		.bar02{
			background-color: cyan;
			left:202px;
		}
		.bar03{
			background-color: yellowgreen;
			left:223px;
		}
		.bar04{
			background-color: yellow;
			left:244px;
		}
		.bar05{
			background-color: green;
			left:265px;

	</style>

	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var $li = $('.accordion li');
			$li.click(function(){
				// alert($(this).html());
				$(this).animate({
					"left":21*$(this).index()
				});
				// 上面的所有
				$(this).prevAll().each(function(){
					// $(this)  为每一个循环的li
					$(this).animate({'left':21*$(this).index()});
				});


				// 5：286-21
				// 4: 286-21*2 
				// 3: 286-21*3
				// 2: 286-21*4
				// 1: 286-21*5  
				$(this).nextAll().each(function(){
					$(this).animate({'left':286 - 21*(5-$(this).index())});
				});

			});
		});
	</script>
</head>
<body>
	<div class="accordion">
		<ul>
			<li class="bar01"><span>图片01</span><img src="images/goods001.jpg" alt="水果"></li>
			<li class="bar02"><span>图片02</span><img src="images/goods002.jpg" alt="水果"></li>
			<li class="bar03"><span>图片03</span><img src="images/goods003.jpg" alt="水果"></li>
			<li class="bar04"><span>图片04</span><img src="images/goods004.jpg" alt="水果"></li>
			<li class="bar05"><span>图片05</span><img src="images/goods005.jpg" alt="水果"></li>
		</ul>
	</div>

	
</body>
</html>

五、jQuery事件

1. 事件操作

  1. 获得焦点和失去焦点
    1. blur() 元素失去焦点
    2. focus() 元素获得焦点
  2. 表单元素的值发生变化
    change()
  3. 鼠标事件
    1. click() 鼠标单击
    2. dblclick() 鼠标双击
    3. mouseover() 鼠标进入（进入子元素也触发）
    4. mouseout() 鼠标离开（离开子元素也触发）
    5. mouseenter() 鼠标进入（进入子元素不触发）
    6. mouseleave() 鼠标离开（离开子元素不触发）
    7. hover() 同时为mouseenter和mouseleave事件指定处理函数
    8. mouseup() 松开鼠标
    9. mousedown() 按下鼠标
    10. mousemove() 鼠标在元素内部移动
    11. toggle() 根据鼠标点击的次数，依次运行多个函数
  4. 键盘事件
    1. keydown() 按下键盘
    2. keypress() 按下键盘
    3. keyup() 松开键盘
  5. 元素加载完毕
    load()
  6. DOM加载完成
    ready()
  7. 浏览器窗口发生变化
    resize()
  8. 滚动条位置发生变化
    scroll()
  9. 用户选中文本框中的内容
    select()
  10. 用户递交表单
    submit()
  11. 用户离开页面
    unload()

2. 事件使用

  1. 获得焦点和失去焦点

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery事件</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">

		$(function(){
			// focus()  : 获得焦点的时候
			// 鼠标点了输入框
			/* 
				获得焦点的时候做什么事情
				$('#input01').focus(function(){
					alert("获得焦点");
				});
			*/
			
			// 一般这个都这样使用  当用户刚进入的时候输入框多的焦点
			// 和 autofocus 样式属性一样
			$('#input01').focus();

			// 当元素失去焦点的时候做什么事情
			$('#input01').blur(function(){
				// 获取失去焦点后value的值  用val()
				var $sVal = $(this).val();
				alert("失去焦点");
				alert($sVal);

			});

			$('#from1').submit(function(){
				alert("提交");

				// 阻止默认的提交行为 一般用ajax提交
				return false;  // 阻止表单提交
			});
		
		});
	</script>
</head>
<body>
	<!-- 
		focus()  一般用来让 input 元素在开始就获得焦点(不能两个同时获得焦点)

		blur() 元素失去焦点  后做什么事情 在输入两次密码后失去焦点后判断两次输入的是否正确

		submit()  提交   表单事件


	-->
	<!-- 
		action:提交地址
		提交数据一定要加name属性
		seach获取提交属性
		return false 可以阻止默认提交行为
	-->
	<form id="from1" action="">
		<input type="text" name="" id="input01">
		<input type="text" name="" id="input02">
		<input type="submit" name="" value="提交">
	</form>
	
	
</body>
</html>

  2. 鼠标移入移出事件

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>鼠标移入移出事件</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){

			// 移入里面的子元素也会触发  -- 事件冒泡的原因
			$('.con').mouseover(function(){
				alert("移入");
			});

			// 移出里面的子元素也会触发  -- 事件冒泡的原因
			$('.con').mouseout(function(){
				alert("移出");
			});


			// 移入/移出 子元素不出触发
			// $('.con2').mouseenter(function(){
			// 	alert("移入");
			// });

			// $('.con2').mouseleave(function(){
			// 	alert("移出");
			// });

			// 上面两个合并
			$(".con2").hover(function(){
				alert("移入");
			},function(){
				alert("移出");
			})




		});
	</script>
	<style type="text/css">
		.con,.con2{
			width:200px;
			height:200px;
			background-color: gold;
		}
		.box,.box2{
			width:100px;
			height:100px;
			background-color: green;
		}
	</style>
</head>
<body>
	<!-- 
		// 事件冒泡的原因
		mouseover() : 鼠标移入的事件  移入到里面的子元素也算
		mouseout() : 鼠标移出的事件  移出子元素也会触发

		// 移入/移出子元素不会触发  解决上面两个事件存在的问题
		mouseenter() : 鼠标移入事件
		mouseleave() : 鼠标移出事件

		// 合并 上边两个
		hover(移入事件,移出事件)

	-->
	<div class="con">
		<div class="box"></div>
	</div>
	<br />
	<br />

	<div class="con2">
		<div class="box2"></div>
	</div>
	
</body>
</html>

  3. resize事件

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>resize事件</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		// resize() ： 当窗口变动的时候执行的操作
		// 要绑定在$(windows)上 
		$(window).resize(function(){
			var $w = $(window).width();
			document.title = $w;
		});
	</script>
</head>
<body>
	
</body>
</html>

3.绑定事件的方法

  1. 绑定一个事件

    $('#btn').click(function(){});

  2. 绑定多个事件

    $('#btn').bind('click  mouseover',function(){
				alert("触发事件绑定的函数");
				// 按钮  解绑的事件名称
				// 第一次移入的时候会触发事件第二次就不会有了
				$(this).unbind('mouseover');
			});

六、事件冒泡和时间委托

1. 事件冒泡

  1. 什么是事件冒泡
    理解：当一个对象上触发事件的时候（点击，移入、移出等），如果这个对象绑定了这个时间则执行，执行之后就会向父级传递，如果父级绑定了这类事件就执行，然后在往父级传递
    简单说就是：子集事件触发 -> 父级(有就执行没有不执行) -> 父级的父级 -> …

  2. 阻止事件冒泡的方法

    1. event.stopPropagation();
    2. return false；

  3. 事件冒泡的作用：
    可以做事件的委托，即所有的子元素都由最外层父级元素控制，减少了代码的冗余，减少事件的绑定，提高性能

  4. 使用验证实例：

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件冒泡</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			//可以阻止事件冒泡
			$(".son").click(function(event){
				alert(1);
				// 使用event 对象的 stopPropagation() 方法阻止冒泡
				// event.stopPropagation();


				// 也可以用这个阻止事件冒泡
				return false;
			});

			$('.father').click(function(){
				alert(2)
			});

			$('.grandfather').click(function(){
				alert(3);
			});

			// 所有标签的顶级  最大的
			// 整个文档  html
			$(document).click(function(){
				alert("这是顶级");
			})
		});
	</script>
	<style type="text/css">
		.grandfather{
			width:300px;
			height:300px;
			background-color: green;
			position: relative;
		}

		.father{
			width:200px;
			height:200px;
			background-color: gold;
		}
		.son{
			width:100px;
			height:100px;
			background-color: red;
			position: absolute;
			left:0;
			top:400px;
		}
	</style>
</head>
<body>
	<!-- 
		事件冒泡原理:  通过标签往上传
			当子集有触发事件的时候，就会往父级传，如果父级绑定函数了就会执行，父级接着往上传

			子集事件触发 ->  父级(有就执行没有不执行) ->  父级的父级 -> ...

		阻止事件冒泡:
			使用event 对象的 stopPropagation()

		可以直接用 return false 
		return false;
			-- 阻止默认行为 阻止事件冒泡 结束函数

	-->
	<div class="grandfather">
		<div class="father">
			<div class="son"></div>
		</div>
	</div>
	
</body>
</html>

  5. 弹窗实例

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>页面弹窗</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#btn').click(function(){
				$('.pop_con').fadeIn();  // 动画弹出 
				// $('.popo_con').show();  // 显示
				return false;  // 阻止事件冒泡
			});


			// 出现事件冒泡  将事件传递到了父级 document
			$(document).click(function(){
				$('.pop_con').fadeOut();

			});

			$('.pop').click(function(){
				// 阻止事件冒泡  防止传递到父级
				return false;
			});

			$('.close').click(function(){
				$('.pop_con').fadeOut();
			});

		});
	</script>
	<style type="text/css">
		.pop{
			/*弹框*/
			position: fixed;
			width:500px;
			height: 300px;
			background-color: #fff;
			border:3px solid #000;
			left:50%;
			top:50%;
			margin-left:-250px;
			margin-top: -150px;
			z-index:9999;

		}

		.mask{
			/*弹框背景*/
			position: fixed;
			width: 100%;
			height:100%;
			background-color: #000;
			opacity: 0.3;
			/*兼容IE*/
			filter:alpha(opacity=30);
			left:0;
			top:0;
			z-index:9998;
		}
		.pop_con{
			/*默认为隐藏*/
			display: none;
		}
		.close{
			float: right;
			font-size: 30px;
			text-decoration: none;
		}
	</style>
</head>
<body>
	<input type="button" name="" value="弹出" id="btn">
	<div class="pop_con">
		<div class="pop">
			投资金额:
			<input type="text" name="">
			<a href="#" id="close" class="close">×</a>
		</div>
		<!-- 弹窗后的背景 -->
		<div class="mask"></div>
	</div>
	
</body>
</html>

2. 事件委托

  1. 原理

    1. 针对多个子元素做的操作
    2. 对于节点操作新加入的标签不会给反应 – 要重新绑定一次，这个可以使用事件委托来解决
    3. 父元素做子元素的代理 然后判断操作，然后给子元素响应的设定

  2. 操作演示实例

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件委托</title>

	<style type="text/css">
		.list{
			background-color: gold;
			list-style: none;
			padding: 10px;

		}
		.list li{
			height:30px;
			background-color: green;
			margin:10px;
		}
	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

	<script type="text/javascript">
		$(function(){

			// 自动绑定了8次 eq(0).click  eq(1).click()
			// 损耗性能   --  一般用事件委托的方式
			// 对于节点操作后新加入的标签不会给反应
			/*
				$('.list li').click(function(){
					$(this).css({"backgroundColor":"red"});
				});
			*/
			


			// 事件委托  delegate(x,y,z)  x:代理什么  y: 代理事件  z: function()
			
			$('.list').delegate('li','click',function(){
				// $(this)：  代表的是委托的子元素，即那个li元素
 				$(this).css({"backgroundColor":'red'});
			});
			
		
			// 新建一个li元素 赋值个$li变量
			var $li = $('<li>9</li>');

			// 将新建的元素 放到ul的子集元素的最后面  -- 节点操作
			// 要是不用事件委托的话，要给新加入的li单独绑定样式操作
			$('.list').append($li);

		});
	</script>
</head>
<body>
	<ul class="list">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
	</ul>
	
</body>
</html>

七、总结

  1. return的作用
  2. 要掌握事件委托，即就想如今的菜鸟驿站一样，由上一级代理操作
V-Sugar
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端网页开发
sugar
07-20 1436
移动端网页开发一、视口二、retina屏幕适配三、背景图尺寸设置四、流体式布局五、响应式布局六、单位em七、单位rem 一、视口 解释： 视口是移动设备上用来显示网页的区域,-般会比移动设备 可视区域大,宽度可能是980px或者1024px,目的是为了显示下整个为PC端设计的网页,这样带来的后果是移动端会出现横向滚动条,为了避免这种情况，移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看,可以用meta标签, name="viewport”来设置视口的大小,将视口的大小设置为和移动设备可视区一样
事件循环与冒泡
bian2845972116的博客
01-03 511
事件循环分为三个阶段，一为捕获阶段，二为目标阶段，三为冒泡阶段，要理解事件循环和冒泡，就得理解他们的执行顺序和过程
js 事件循环(event loop) & 事件冒泡
xueer43的博客
05-04 468
事件循环(event loop) ### 执行顺序 执行顺序：同步任务 -> 异步任务(微任务 -> 宏任务) 宏任务(放在callback queue中，由事件触发线程维护: script(整体代码), setTimeout, setInterval, UI 渲染, postMessage, MessageChannel, I/O, setImmediate(Node环境) 微任务(放在微任务队列中，由js引擎线程维护: promise......
事件冒泡的理解
Never stop for the code
12-10 231
我们在学习前端,这是一个javascript的问题,今天搬到微信上理解了。 事件冒泡的本质:当前div块以及父级div块，以及父级的父级，你懂的。都会被触发的事件。前提是，每个块级都有对应的事件触发方法。 请看我的冒泡事件的结果： 其绑定事件是这样写的: 而针对于事件冒泡的问题,那么肯定有人提出问题,那么如果不想事件冒泡怎么解决呢? 接下来就是非事件冒泡。 ...
jQuery-元素操作和事件
花城的博客
09-07 475
系列文章目录 文章目录系列文章目录一、元素操作1. 类属性操作2. 样式操作3. 属性操作4. 文档处理二、事件1. 常用事件2. 绑定事件的方法3. 阻止标签后续事件的执行4. 事件冒泡5. 事件委托6. 页面加载7. 两个重要方法 一、元素操作 jQuery对象调用jQuery方法后，返回值还是原来的jQuery的jQuery对象，因此，可以链式调用，即对同一个对象连续调用多个方法。 如：$(选择器).方法1().方法2().方法3()…… 在下面的方法中，如果一个方法既能获取值也能设置值。那么，
JQ（四）—-JQ-动画-节点-事件-委托
01-08
JQ-动画-节点-事件-委托一、 jquery动画二、尺寸相关、滚动事件三、jquery属性操作四、jquery循环五、jquery事件六、事件冒泡七、事件委托八、jquery元素节点操作 一、 jquery动画 通过animate方法可以设置元素某...
JavaScript之事件委托实例(附原生js和jQuery代码)
10-19
在使用事件委托之前，开发者往往会对每个子元素单独绑定事件监听器，比如通过循环遍历所有的li元素并为它们分别绑定click事件。这种方式虽然直观，但当子元素数量较多时，会显著降低程序性能，尤其是在元素动态添加...
JS/JQuery-第6章上机练习.zip
04-20
- **事件委托**：利用事件冒泡原理，用一个事件处理器处理多个子元素事件。 - **插件开发**：学习如何创建自己的jQuery插件，扩展其功能。 - **jQuery与原生JS的结合**：在适当场景下，选择原生JavaScript方法提高...
quiz-app-in-vanilla-js:一个没有 jquery 的简单测验
07-06
- **事件委托**：利用事件冒泡原理，通过在父元素上设置监听器来处理子元素的事件，提高性能。 - **错误处理**：使用`try...catch`块来捕获和处理运行时错误。 通过这个项目，开发者可以全面了解JavaScript的基础...
js-数组-循环-字符串处理-定时器
sugar
07-22 1081
这里写目录标题一、数组1.定义2. 操作数组3. 多维数组二、循环1. for 循环:2. while循环3.实例一：循环将数据放到页面上3.实例二：数组去重三、字符串的处理方法 四、定时器 五、总结
js中常用的内置对象
sugar
07-23 788
常用的内置对象一、document二、location三、Math对象四、调试程序的方法四、综合实例之弹窗倒计时 一、document doucment.getElementById() 通过元素id来获取元素 document.getElementByTagName() 通过标签来获取元素 document.referrer() 获取上一个跳转页面的地址----需要服务器环境 二、location windows.location.href 跳转的url地址 重定向 window.location
CSS3圆角-透明操作-动画效果
sugar
07-19 728
CSS3一、CSS3圆角二、rgba(新的颜色值表示法)三、transition动画四、transform变换五、animation动画1.解释2.风车旋转的实例3.登录中的loading动画
PC端天天生鲜页面实现
sugar
07-24 625
项目的效果图 项目目录 │ index.html │ server.js │ ├─css │ main.css │ reset.css │ ├─images │ │ adv01.jpg │ │ adv02.jpg │ │ banner01.jpg │ │ banner02.jpg │ │ banner03.jpg │ │ banner04.jpg │ │ banner05.jpg │ │ banner06.jpg │ │ icons.png │
CSS-盒子类型-类型转换-浮动布局
sugar
07-16 501
盒子类型-类型转换-浮动布局一、盒子类型1.块元素2. 内联元素3.内联块元素与类型转换二.浮动布局1. 特点：2. 练习:3.清除浮动三、总结 一、盒子类型 1.块元素 块元素有: div、 p、 ul、 li、 h1-h6、 dl、 dt、 dd 块元素的特点 支持全部的样式 如果没有设置宽度，默认为父级的宽度100% 盒子占据一行、即使设置了宽度 代码实例:<!DOCTYPE html> <html lang="en"> <head> <m
JavaScript-基本操作-操作元素-函数-运算
sugar
07-21 457
原生js一、基本操作1.js的引入的三种方式2. 变量类型3.获取元素的方法二、操作元素属性1. 点操作 “.”2. 中括号操作“[]”3.操作元素包裹的内容三、函数1. 函数的定义与执行2. 提取行间事件 让html与js实现解耦3.匿名函数4. 变量和函数与解析5.函数传参四、运算符和条件语句1.条件语句2. 算术运算符3.赋值运算符4. 条件运算符五、总结
js本地存储-移动端生鲜页面
sugar
07-28 414
jQuery库使用一、存储--服务器环境下1. cookie2.webstorage3. 一段时间弹出一次的弹窗二、移动端幻灯片及整体制作
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值