jQuery基础知识梳理（四）

最新推荐文章于 2022-08-26 20:12:20 发布

「已注销」

最新推荐文章于 2022-08-26 20:12:20 发布

阅读量130

点赞数 1

文章标签： jquery

本文链接：https://blog.csdn.net/qq_38482933/article/details/107564331

版权

13.jquery事件
常用的事件函数列表：
blur() 元素失去焦点

$('[type=text]').focus(function() {
	alert('获得焦点');
});

focus() 元素获得焦点

$('[type=text]').blur(function() {
	alert('失去焦点');
});

click() 鼠标单击

$('[type=button]').click(function() {
	alert('点击事件');
});

dblclick双击事件

$('button').dblclick(function() {
	alert('双击事件');
 });

mouseover() 鼠标进入（进入子元素也触发）

$('.father').mouseover(function() {
  	console.log('鼠标进入');
 });

mouseout() 鼠标离开（离开子元素也触发）

$('.father').mouseout(function() {
	console.log('鼠标离开');
 });

mouseenter() 鼠标进入（进入子元素不触发）

$('.big').mouseenter(function() {
	console.log('鼠标进入');
});

mouseleave() 鼠标离开（离开子元素不触发）

$('.big').mouseleave(function() {
	console.log('鼠标离开');
 });

mousedown() 鼠标按下

$('.du').mousedown(function() {
	console.log('鼠标按下');
});

keypress() 当键盘或按钮被按下时，发生 keypress 事件，每插入一个字符就会触发事件

 $('.du').keypress(function() {
	console.log('鼠标按下');
 });

mouseup() 鼠标松开

$('.du').mouseup(function() {
	console.log('鼠标松开');
});

hover() 同时为mouseenter和mouseleave事件指定处理函数

$('p').hover(function() {
		console.log('进入段');
	},
	function() {
		console.log('离开段');
});

resize() 浏览器窗口的大小发生改变

$(window).resize(function() {
	console.log('浏览器窗口的大小发生改变');
});

scroll() 滚动条的位置发生变化

$(window).scroll(function(){  
	console.log('滚动条的位置发生变化');
});

submit() 用户递交表单

$('form').submit(function() {
	alert('用户递交表单');
});

实例
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		.father {
			width: 200px;
			height: 200px;
			border: 2px solid;
		}
		#son {
			width: 50px;
			height: 50px;
			border: 2px solid;
		}
		.big {
			width: 200px;
			height: 200px;
			border: 2px solid;
		}
		#sam {
			width: 50px;
			height: 50px;
			border: 2px solid;
		}
	</style>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function() {
		   //blur() 元素失去焦点;focus() 元素获得焦点
			$('[type=text]').focus(function() {
				alert('获得焦点');
			});
			$('[type=text]').blur(function() {
				alert('失去焦点');
			});
		   //click单击事件
		   $('[type=button]').click(function() {
				alert('点击事件');
		   });
		   //dblclick双击事件
		   $('button').dblclick(function() {
		   		alert('双击事件');
		   });
		   //submit() 用户递交表单 
		   $('form').submit(function() {
				alert('用户递交表单');
		   });
		   //mouseover() 鼠标进入（进入子元素也触发）
		   $('.father').mouseover(function() {
		   		console.log('鼠标进入');
		   });
		   //mouseout() 鼠标离开（离开子元素也触发）
		   $('.father').mouseout(function() {
		   		console.log('鼠标离开');
		   });
		   //mouseenter() 鼠标进入（进入子元素不触发）
		   $('.big').mouseenter(function() {
		   		console.log('鼠标进入');
		   });
		   //mouseleave() 鼠标离开（离开子元素不触发）
		   $('.big').mouseleave(function() {
		   		console.log('鼠标离开');
		   });
		   //mousedown() 鼠标按下
		   $('.du').mousedown(function() {
		   		console.log('鼠标按下');
		   });
		   //keypress() 当键盘或按钮被按下时，发生 keypress 事件，每插入一个字符就会触发事件
		   $('.du').keypress(function() {
		   		console.log('鼠标按下');
		   });
		   //mouseup() 鼠标松开
		   $('.du').mouseup(function() {
		   		console.log('鼠标松开');
		   });
		   //resize() 浏览器窗口的大小发生改变
		   $(window).resize(function() {
				console.log('浏览器窗口的大小发生改变');
		   });
		   //scroll() 滚动条的位置发生变化
		   $(window).scroll(function(){  
				console.log('滚动条的位置发生变化');
			});
			//hover() 同时为mouseenter和mouseleave事件指定处理函数
			$('p').hover(function() {
				console.log('进入段');
			},
			function() {
				console.log('离开段');
			});
			
		});
		
	</script>
</head>
<body>
	<form action="">
		<label for="">元素失去焦点
			<input type="text" name="" id="" value=""/>
		</label><br>
		<input type="button" name="" id="" value="鼠标单击"/><br>
		<input type="submit" name="" id="" value="提交 "/>
	</form>
	<button>鼠标双击</button><br>
	<button class="du">鼠标</button><br>
	<div class="father">
		<div id="son">
			
		</div>
	</div>
	<div class="big">
		<div id="sam">
		</div>
	</div>
	<p>ssssssssssss</p>
</body>
</html>

14.事件冒泡
什么是事件冒泡 ?
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
事件冒泡的作用
事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。

实例
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		
		.father {
			width: 500px;
			height: 500px;
			background-color: #044;
		}
		.son {
			width: 200px;
			height: 200px;
			background-color: #00ffff;
		}
		.con {
			width: 100px;
			height: 100px;
			background-color: #ffff7f;
		}
	</style>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function() {
			$('.con').on('click',function() {
				console.log('con');
				return false;   //阻止事件冒泡与阻止默认事件行为合并写法
			});
			$('.son').on('click',function(e) {
				console.log('son');
				e.stopPropagation(); //阻止事件冒泡
			});
			$('.father').on('click',function() {
				console.log('father');
			});
			//e.preventDefault() 阻止默认事件行为的触发。
			$('a').on('click',function(e) {
				e.preventDefault();
			});
			
		});
	</script>
</head>
<body>
	<div class="father">
		<div class="son">
			<div class="con"></div>
		</div>
	</div>
	<a href="https://jquery.lttttt.com/Details/ef8edf92-ca33-44b0-49fb-08d707a4e284.html">jQueryAPI</a>
</body>
</html>

15.事件委托
事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

实例
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function() {
			//事件委托
			$('.list').delegate('li','click',function() {
				alert('单击');
			});
		});
	</script>
</head>
<body>
	<ul class="list">
		<li>01</li>
		<li>02</li>
		<li>03</li>
		<li>04</li>
		<a href="">链接</a><br>
		<span>数目</span>
		<p>段落</p>
	</ul>
</body>
</html>

16.jquery元素节点操作
创建元素$()

var apli = $('<li>333</li>');
var preli = $('<li>111</li>');

添加元素
（1）内部添加，并且放到后面

$('ul').append(apli);
apli.appendTo('ul');

（2）外部添加

var bdiv = $('<div>4</div>'); 
var div = $('<div>6</div>'); 
$('#div').after(div);//添加到指定元素的后面
$('#div').insertAfter(div);
$('#div').before(bdiv);//添加到指定元素的前面
$('#div').insertBefore(bdiv);

注意：内部添加元素是父子关系，外部添加是兄弟关系
删除元素

//element.remove() 删除匹配元素本身
$('ul').remove();
//element.empty() 删除匹配元素集合中的子节点
$('ul').empty();
//element.html() 清空匹配的元素内容
$('ul').html();

element.clone().appendTo() 将一个元素克隆并添加到另一个元素中

$('span').clone().appendTo('ul');

wrap() 元素外部加套一个元素

$('span').wrap('<p></p>');

unwrap() 移除父元素

$('span').unwrap();

replaceWith() 将所有匹配的元素替换成指定的HTML或DOM元素。

$('span').replaceWith('<li></li>');

replaceAll() 用匹配的元素替换掉所有 selector匹配到的元素。

$("<b>替换</b>").replaceAll("p");

wrapInner() 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

$("p").wrapInner("<div></div>");

实例
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function() {
			//元素的操作
			//主要是遍历，创建，添加，删除元素的操作
			//1.遍历元素
			var sum = 0;
			var color = ['rad','blue','green','pink'];
			/* $('div').each(function(index,domEle) {
				//回调函数的第一个参数一定是索引（可以自己指定名称），第二个参数是DOM对象
				//DOM对象没有css()方法,需要转换成jQuery对象 $(domEle)
				$(domEle).css('color',color[index]);
				// console.log($(domEle).text());
				sum += parseInt($(domEle).text()) ;
			}); */
			// console.log(sum);
			//2.$.each() 方法遍历元素，主要用于遍历数据，处理数据
			/* $.each($('div'), function(i,ele) {
				console.log(i);
				console.log(ele);
				
			}); */
			//遍历数组
			$.each(color,function(i,ele) {
				console.log(i);
				console.log(ele);
			})
			
			//遍历对象
			$.each({name:'ander',
			color:'red',
			age:10,
			},function(i,ele) {
				console.log(i);
				console.log(ele);
			})
			
			//创建元素$();
			var apli = $('<li>333</li>');
			var preli = $('<li>111</li>');
			//添加元素
			/* 注意：内部添加元素是父子关系，外部添加是兄弟关系 */
			//1.内部添加，并且放到后面
			// $('ul').append(apli);
			apli.appendTo('ul');
			//2.内部添加，并且放到前面
			$('ul').prepend(preli);
			preli.prepend('ul');
			//3.外部添加
			var bdiv = $('<div>4</div>'); 
			var div = $('<div>6</div>'); 
			$('#div').after(div);//添加到指定元素的后面
			$('#div').insertAfter(div);
			$('#div').before(bdiv);//添加到指定元素的前面
			$('#div').insertBefore(bdiv);
			
			 //删除元素
			//element.remove() 删除匹配元素本身
			$('ul').remove();
			//element.empty() 删除匹配元素集合中的子节点
			$('ul').empty();
			//element.html() 清空匹配的元素内容
			$('ul').html(); 
			//element.clone().appendTo()将一个元素克隆并添加到另一个元素中
			$('span').clone().appendTo('ul');
			//wrap()元素外部加套一个元素
			$('span').wrap('<p></p>');
			//unwrap()移除父元素
			$('span').unwrap();
			//replaceWith()将所有匹配的元素替换成指定的HTML或DOM元素。
			$('span').replaceWith('<li></li>');
			//replaceAll()用匹配的元素替换掉所有 selector匹配到的元素。
			$("<b>替换</b>").replaceAll("p");
			//wrapInner()//将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
			 $("p").wrapInner("<div></div>");  
		});
		
	</script>
</head>
<body>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div id="div">5</div>
	<ul>
		<li>222</li>
	</ul>
	<span id="">一个</span>
	<p>第二个</p>
</body>
</html>

「已注销」

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础知识梳理（四）

13.jquery事件常用的事件函数列表：blur() 元素失去焦点$('[type=text]').focus(function() { alert('获得焦点');});focus() 元素获得焦点$('[type=text]').blur(function() { alert('失去焦点');});click() 鼠标单击$('[type=button]').click(function() { alert('点击事件');});dblclick双击事件$('but
复制链接

扫一扫