47-jQuery操作BOM和DOM对象_jquery设置dom的背景-CSDN博客

本文链接：https://blog.csdn.net/weixin_44614066/article/details/89375558

本文介绍了使用jQuery进行DOM操作和处理各种事件的方法，包括鼠标、键盘、window事件的绑定和解绑，以及DOM的样式、内容、属性操作。同时，讲解了jQuery中的节点遍历和链式操作的应用。

摘要由CSDN通过智能技术生成

一、今天用jQuery来操作DOM和jQ的事件
代码中的js和jQuery文件自己去网上查找
1.鼠标事件


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			div{
				width: 100px;
				height: 100px;
				border: 1px solid red;
			}
			
		</style>
	</head>
	<body>
		
		<div id="">
			
		</div>
		<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			/*$("div").mouseover(function(){
				$(this).css("background","darkorchid");
			});
			
			$("div").mouseout(function(){
				$(this).css("background","white");
			});*/
			$("div").mouseenter(function(){
				$(this).css("background","darkorchid");
			});
			
			$("div").mouseleave(function(){
				$(this).css("background","white");
			});
		</script>
	</body>
</html>
--------------------------------------------------------------------------

<html>

	<head>
		<meta charset="UTF-8" />
		<title>mouseover和mouseenter的区别</title>
		<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
	</head>

	<body>
		<!--
			需求： 1.给类名为over的div，绑定鼠标移过事件，在其<span>标签内添加文本计数
				  2.给类名为enter的div，绑定鼠标进入事件，在其<span>标签内添加文本计数
		-->
		<p>不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。</p>
		<p>只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。</p>
		
		<div class="over" style="background-color:lightgray;padding:20px;width:40%;float:left">
			<h2 style="background-color:white;">被触发的 Mouseover 事件：<span></span></h2>
		</div>
		
		<div class="enter" style="background-color:lightgray;padding:20px;width:40%;float:right">
			<h2 style="background-color:white;">被触发的 Mouseenter 事件：<span></span></h2>
		</div>
		
		<script type="text/javascript">
			
			var count1 = 0;
			var count2 = 0;
			// 无论鼠标指针穿过被选元素还是其后代元素都会触发[推荐]
			$(".over").mouseover(function(){
				// childern(选择器)可以在子元素中查询某个元素
				// find(选择器)可以在后代元素中查找
				var spanObj = $(this).find("span");
				// alert(spanObj.text());
				spanObj.text(++count1);
			});
			
			// 只有在鼠标指针穿过被选元素时才会触发
			$(".enter").mouseenter(function(){
				// childern(选择器)可以在子元素中查询某个元素
				// find(选择器)可以在后代元素中查找
				var spanObj = $(this).find("span");
				// alert(spanObj.text());
				spanObj.text(++count2);
			});
			
			
		</script>
	</body>

</html>

2.键盘事件


<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>键盘事件</title>
	</head>

	<body>
		输入你的名字: <input type="text">
		<p>按键的次数: <span>0</span></p>
		<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script>
			/*
			 * 需求： 1.测试keyup、keydown、keypress的区别 触发次数展示在span中
			 */
			
			var count = 0;
			// 当键盘松开某个按键时 会 触发 长按不会触发
			/*$("input").keyup(function(){
				$("span").text(++count);
			});*/
			
			// 当键盘按下某个按键时 会触发  长按会一直触发
			/*$("input").keydown(function(){
				$("span").text(++count);
			});*/
			
			// 当键盘输入可打印字符时  会触发   例如不会触发的有：上下左右键   大写锁定键  shift键  ctrl键等
			$("input").keypress(function(){
				$("span").text(++count);
			});
		</script>
	</body>

</html>

</html>

3.window事件


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body{
				height:1400px;
			}
			span{
				position: fixed;
			}
		</style>
	</head>
	<body>
		
		<span>0</span>
		<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			var count = 0;
			/*$(window).resize(function(){
				$("span").text(++count);
			});*/
			
			$(window).scroll(function(){
				$("span").text(++count);
			});
			
		</script>
	</body>
</html>

4.绑定和解绑事件


<!DOCTYPE html>
<html>
	<head>
		<meta charset="