jQuery常用方法总结

jquery常用方法总结

文章目录

jquery常用方法总结
- 1、jquery 事件方法
- - （1）bind()方法
  - （2）click()方法
  - （3）dblclick() 方法
  - （4）blur()方法、focus()方法
  - （5）change()方法
  - （6）keydown()方法、keypress()方法、keyup()方法
  - （7）mousedown()方法、mouseup()方法
  - （8）mouseenter()方法、mouseleave()方法、mouseover()方法、mouseout()方法
  - （9）mousemove()方法
  - （10）hover()方法
  - （11）toggle()方法
  - （12）submit()方法
  - （12）on()方法
  - （13）one()方法
  - （14）event.preventDefault() 方法
- 2、jquery动画效果方法
- - （1）show()方法、hide()方法
  - （2）fadeIn()方法、fadeOut()方法
  - （3）fadeTo()方法、fadeToggle() 方法
  - （4）slideUp() 方法、slideDown() 方法
  - （5）slideToggle() 方法
  - （6）animate() 方法
- 3、HTML / CSS 方法
- - （1）addClass() 方法、removeClass()方法
  - （2）toggleClass() 方法
  - （3）attr()方法
  - （4）css()方法
  - （5）prop()方法
  - （6）html()方法
  - （7）text()方法
  - （8）val()方法
  - （9）append()方法、appendTo() 方法
  - （10）prepend() 方法、prependTo() 方法
  - （11）after() 方法、insertAfter() 方法
  - （12）before()方法、insertBefore()方法
  - （13）height()方法、width()方法
  - （14）position() 方法
  - （15）wrap() 方法
  - （16）wrapAll()方法
  - （17）wrapInner()方法

1、jquery 事件方法

（1）bind()方法

bind() 方法向被选元素添加一个或多个事件处理程序，以及当事件发生时运行的函数。

语法：

$(selector).bind(event,data,``function``,map)

参数	描述
event	必需。规定添加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
data	可选。规定传递到函数的额外数据。
function	必需。规定当事件发生时运行的函数。
map	规定事件映射 ({event:function, event:function, …})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

例如;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			p{font-size: 28px;}
		</style>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#p1").bind("click",function(){
					$(this).text("我被单击了。");//
				});
				//绑定多个事件，多个事件处理程序都可以触发
				$("#p2").bind("click",function(){
					$(this).text("这是click事件。");//
				}).bind("mouseover",function(){
					$(this).text("这是mouseover事件。");
				}).bind("mouseout",function(){
					$(this).text("这是mouseout事件。");
				});
			})
		</script>
	</head>
	<body>
		<div>
			<p id="p1">这是测试段落1</p>
			<p id="p2">这是测试段落2</p>
		</div>
	</body>
</html>

（2）click()方法

当单击元素时，发生 click 事件。click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。

语法：

$("selector").click(function)

例如：

$("#p1").click(function(){
	$(this).text("这是click事件。");
});

（3）dblclick() 方法

dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数。

提示：dblclick 事件也会产生 click 事件。如果这两个事件都被应用于同一个元素，当双击元素时，会执行两次单击事件。所以应尽量避免在同一个元素上同时使用click()方法和dblclick()方法。

例如：

$("#p1").dblclick(function(){
	$(this).text("这是dblclick事件。");
});

（4）blur()方法、focus()方法

当元素失去焦点时发生 blur 事件。blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数。

当元素获得焦点时发生 focus 事件。focus () 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数。

提示：该方法常与 focus() 方法一起使用。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#txt1").blur(function(){
					$("span").text("失去焦点");
				}).focus(function(){
					$("span").text("获得焦点");
				})
			})
		</script>
	</head>
	<body>
		<form>
			输入框一：<input type="text" id="txt1" /><span></span>
		</form>
	</body>
</html>

（5）change()方法

当元素的值改变时发生 change 事件（仅适用于表单字段）。change() 方法触发 change 事件，或规定当发生 change 事件时运行的函数。

注意：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，change 事件会在元素失去焦点时发生。

例如：

$("#txt1").change(function(){
		$("span").text("内容改变");
})

（6）keydown()方法、keypress()方法、keyup()方法

keydown - 键被按下
keypress - 完成一次按键
keyup - 键被松开

当键盘键被按下时发生 keydown 事件。keydown() 方法触发 keydown 事件，或规定当发生 keydown 事件时运行的函数。

提示：可以使用 event.which属性来返回哪个键盘键被按下。

例如：

				$("#txt1").keydown(function(e){
					$("span").text("按键被按下。");
                    alert(e.which);
				});
				$("#txt1").keydown(function(){
					$("span").text("完成一次按键。");
				});
				$("#txt1").keydown(function(){
					$("span").text("按键被松开。");
				});

（7）mousedown()方法、mouseup()方法

当鼠标指针移动到元素上方，并按下鼠标左键时，会发生 mousedown 事件。mousedown() 方法触发 mousedown 事件，或添加当发生 mousedown 事件时运行的函数。

当鼠标指针移动到元素上方，并松开鼠标左键时，会发生 mouseup 事件。mouseup() 方法触发 mouseup 事件，或添加当发生 mouseup 事件时运行的函数。

提示：mousedown() 方法通常与mouseup()方法一起使用。

（8）mouseenter()方法、mouseleave()方法、mouseover()方法、mouseout()方法

当鼠标指针穿过（进入\离开）被选元素时，会发生 mouseenter\mouseleave 事件。mouseenter() 方法触发 mouseenter 事件，或添加当发生 mouseenter 事件时运行的函数。mouseleave() 方法触发 mouseleave 事件，或添加当发生 mouseleave 事件时运行的函数。

注意：mouseenter 事件和mouseleave 事件只有在鼠标指针进入\离开被选元素时被触发，而mouseover 事件和mouseout 事件在鼠标指针进入\离开任意子元素时也会被触发。

提示：该事件通常与 mouseleave事件一起使用。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 400px;
				height: 400px;
				background-color: lightblue;
				position: relative;
			}
			#div1_1{
				width: 200px;
				height: 200px;
				background-color: lightcoral;
				position: absolute;
				top: 200px;
			}
		</style>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
//				$("#div1").mouseout(function(){
//					$(this).css("background-color","blue");
//				}).mouseover(function(){
//					$(this).css("background-color","green");
//				});
				$("#div1").mouseleave(function(){
					$(this).css("background-color","red");
				}).mouseenter(function(){
					$(this).css("background-color","grey");
				});
			})
		</script>
	</head>
	<body>
		<div id="div1">
			<p>这是父级div</p>
            <span></span>
			<div id="div1_1">
				<p>这是后代div</p>
			</div>
		</div>
	</body>
</html>

（9）mousemove()方法

当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。mousemove() 方法触发 mousemove 事件，或添加当发生 mousemove 事件时运行的函数。

注意：用户把鼠标移动一个像素，就会发生一次 mousemove 事件。处理所有 mousemove 事件会耗费系统资源。请谨慎使用该事件。

例如：

$(document).mousemove(function(event){
	$("span").text("鼠标坐标："+event.pageX + ", " + event.pageY);
});

（10）hover()方法

hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。方法触发 mouseenter和mouseleave事件。

注意：如果只指定一个函数，则 mouseenter 和 mouseleave 都执行它。

例如：

$("#div1").hover(function(){
	$(this).css("background-color","lightgray");
},function(){
	$(this).css("background-color","darkcyan");
});

（11）toggle()方法

toggle()方法相当于show()方法和hide()方法的结合，执行toggle()方法时，会在隐藏和显示两种状态间进行切换。

例如：

$("div").click(function(){
		$(this).children().toggle();
})

（12）submit()方法

当提交表单时，会发生 submit 事件。该事件只适用于元素。submit() 方法触发 submit 事件，或规定当发生 submit 事件时运行的函数。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.6.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
                //点击两个提交按钮都会执行相同的事件，提交表单，效果相同。
				$("#btn").click(function(){
					$(this).submit();
				});
			})
		</script>
	</head>
	<body>
		<form action="https://www.baidu.com">
			<input type="submit" value="sub提交"/>
			<button id="btn">btn提交</button>
		</form>
	</body>
</html>

（12）on()方法

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，推荐使用该方法，它简化了 jQuery 代码库。

注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。

提示：如需移除事件处理程序，请使用 off()方法。如需添加只运行一次的事件然后移除，请使用 one()方法。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.6.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				//添加一个事件
				$("#txt1").on("click",function(){
					$(this).css("border","2px solid blue");
				});
				//添加多个事件
				$("#txt1").on("mouseover",function(){
					$(this).css("border","3px dashed red");
				}).on("focus",function(){
					$(this).css("border","4px double pink");
				});
			})
		</script>
	</head>
	<body>
		<form action="https://www.baidu.com">
			输入框：<input type="text" id="txt1"/><br />
			<input type="submit" value="sub提交"/>
			<button id="btn">btn提交</button>
		</form>
	</body>
</html>

（13）one()方法

one() 方法为被选元素添加一个或多个事件处理程序，并规定当事件发生时运行的函数。

当使用 one() 方法时，每个元素只能运行一次事件处理程序函数。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.6.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
                //当第一次点击段落时，字体会放大，但之后再点击效果就失效
				$("p").one("click",function(){
					$(this).animate({fontSize:"+=10px"});
				});
			})
		</script>
	</head>
	<body>
		<p>测试段落</p>
	</body>
</html>

（14）event.preventDefault() 方法

event.preventDefault() 方法会阻止元素发生默认的行为，例如表单提交，超链接跳转等。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
        <!-- 未添加event.preventDefault()方法时点击超链接和提交按钮，都会执行默认动作 -->
		<a href="https://www.baidu.com">超链接</a>
		<hr />
		<form action="https://www.baidu.com">
			<input type="submit" />
		</form>
	</body>
</html>

添加event.preventDefault() 方法阻止默认动作：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.6.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
                //再次点击超链接和提交按钮，页面不会发生跳转
				$("a,input[type=submit]").click(function(e){
					e.preventDefault();
				})
			})
		</script>
	</head>
	<body>
		<a href="https://www.baidu.com">超链接</a>
		<hr />
		<form action="https://www.baidu.com">
			<input type="submit" />
		</form>
	</body>
</html>

2、jquery动画效果方法

（1）show()方法、hide()方法

show() 方法用于显示隐藏的被选元素。

注意：show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素（不适用于通过 visibility:hidden 隐藏的元素）。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			p{
				display: none;
				font-size: 25px;
			}
			span{
				border: 2px solid grey;
				font-size: 22px;
				padding: 4px 6px;
				cursor: pointer;
			}
		</style>
		<script src="js/jquery-3.6.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("span").click(function(){
					$("p").show();
				})
			})
		</script>
	</head>
	<body>
		<p>隐藏的段落</p>
		<span>显示</span>
	</body>
</html>

hide() 方法隐藏被选元素，和show()方法相对应。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			p{
				display: none;
				font-size: 25px;
			}
			span{
				border: 2px solid grey;
				font-size: 22px;
				padding: 4px 6px;
				cursor: pointer;
			}
		</style>
		<script src="js/jquery-3.6.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#show").click(function(){
					$("p").show();
				});
				$("#hide").click(function(){
					$("div").hide();
				});
			})
		</script>
	</head>
	<body>
		<p>隐藏的段落</p>
		<div>显示的div</div>
		<hr />
		<span id="show">显示</span>
		<span id="hide">隐藏</span>
	</body>
</html>

还可以控制显示和隐藏的速度，控制速度时，可以直接使用"slow"、”normal“、“fast”或毫秒数，例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			p{
				display: none;
				font-size: 25px;
			}
			span{
				border: 2px solid grey;
				font-size: 22px;
				padding: 4px 6px;
				cursor: pointer;
			}
			div{
				width: 200px;
				height: 100px;
				background-color: lightblue;
				padding: 10px 15px;
			}
		</style>
		<script src="js/jquery-3.6.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#show").click(function(){
					$("div").show(2000);
				});
				$("#hide").click(function(){
					$("div").hide("slow");
				});
			})
		</script>
	</head>
	<body>
		<p>隐藏的段落</p>
		<div>显示的div</div>
		<hr />
		<span id="show">显示</span>
		<span id="hide">隐藏</span>
	</body>
</html>

（2）fadeIn()方法、fadeOut()方法

fadeIn() 方法逐渐改变被选元素的不透明度，从隐藏到可见（褪色效果）。

fadeOut() 方法逐渐改变被选元素的不透明度，从可见到隐藏（褪色效果）。

同样，这两个方法也可以控制动画速度，与show()和hide()同理。

例如：

$("#show").click(function(){
		$("div").fadeIn(2000);
});
$("#hide").click(function(){
		$("div").fadeOut("normal");
});

（3）fadeTo()方法、fadeToggle() 方法

fadeTo() 方法逐渐改变被选元素的不透明度为指定的值（褪色效果）。

例如：

$("#fade").click(function(){
    //逐渐将透明度降低到0.5，但不会完全隐藏
	$("div").fadeTo(1500,0.5);
});

fadeToggle() 方法在 fadeIn() 和 fadeOut()方法之间切换。

如果元素是淡出显示的，fadeToggle() 会使用淡入效果显示它们。如果元素是淡入显示的，fadeToggle() 会使用淡出效果显示它们。

例如：

$("#toggle").click(function(){
		$("div").fadeToggle(2000);
})

（4）slideUp() 方法、slideDown() 方法

slideUp() 方法以滑动(改变高度)方式隐藏被选元素。

slideDown() 方法以滑动(改变高度)方式显示被选元素。

例如：

				$("#show").click(function(){
					$("div").slideDown(2000);
				});
				$("#hide").click(function(){
					$("div").slideUp("normal");
				});

（5）slideToggle() 方法

slideToggle() 方法在被选元素上进行 slideUp()和 slideDown()之间的切换。

该方法检查被选元素的可见状态。如果一个元素是隐藏的，则运行 slideDown()，如果一个元素是可见的，则运行 slideUp() - 这会造成一种切换的效果。

例如：

				$("#toggle").click(function(){
					$("div").slideToggle(2000);
				});

（6）animate() 方法

animate() 方法执行 CSS 属性集的自定义动画。

该方法通过 CSS 样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画（比如 “margin:30px”）。字符串值无法创建动画（比如 “background-color:red”）。

提示：使用 “+=” 或 “-=” 来创建相对动画。

语法：(selector).animate({styles},speed,easing,callback)

styles为规定产生动画效果的一个或多个 CSS 属性/值。

注意：当与 animate() 方法一起使用时，styles的属性名称必须是驼峰写法，比如：必须使用 paddingLeft 代替 padding-left，marginRight 代替 margin-right，依此类推。

可以应用动画的css属性：

backgroundPositionX、backgroundPositionY、borderWidth、borderBottomWidth、borderLeftWidth、borderRightWidth、borderTopWidth、borderSpacing、margin、padding、height、width、fontSize、bottom、left、right、top、letterSpacing、lineHeight、textIndent等，color属性不能使用。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
				background-color: lightblue;
				position: relative;
			}
		</style>
		<script src="js/jquery-3.6.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("div").click(function(){
					$(this).animate({"left":"+=100","top":"+=100","height":"+=100","width":"+=100"},2000);
				})
			})
		</script>
	</head>
	<body bgcolor="lavender">
		<div></div>
	</body>
</html>

3、HTML / CSS 方法

（1）addClass() 方法、removeClass()方法

addClass() 方法向被选元素添加一个或多个类名。该方法不会移除已存在的 class 属性，仅仅添加一个或多个类名到 class 属性。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.div1{
				width: 200px;
				height: 200px;
				background-color: lightblue;
			}
			.new{
				border: 4px dashed orange;
			}
		</style>
	</head>
	<body bgcolor="lavender">
		<div class="div1">
			<input type="button" id="btn1" value="添加"/>
			<input type="button" id="btn2" value="移除"/>
		</div>
	</body>
</html>

以上代码中，new这个类并未使用到，使用如下代码将其添加到div的class属性中：

			$(function(){
				$("#btn1").click(function(){
					$("div").addClass("new");
				});
			})

当点击添加按钮时会将new这个类的样式添加到div中。

同时，如果要移除某个类的样式时，可以使用removeClass()方法。

例如：

				$("#btn2").click(function(){
					$("div").removeClass("new");
				});

注意：当removeClass()方法没有参数时，表示移除元素的所有类。

（2）toggleClass() 方法

toggleClass() 方法对添加和移除被选元素的一个或多个类进行切换。该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.div1{
				width: 200px;
				height: 200px;
				background-color: lightblue;
			}
			.new{
				border: 4px dashed orange;
			}
		</style>
		<script src="js/jquery-3.6.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#btn1").click(function(){
					$("div").addClass("new");
				});
				$("#btn2").click(function(){
					$("div").removeClass("new");
				});
				$("#btn3").click(function(){
					$("div").toggleClass("new");
				});
			})
		</script>
	</head>
	<body bgcolor="lavender">
		<div class="div1">
			<input type="button" id="btn1" value="添加"/>
			<input type="button" id="btn2" value="移除"/>
			<input type="button" id="btn3" value="切换"/>
		</div>
	</body>
</html>

（3）attr()方法

attr() 方法用于设置或返回被选元素的属性和值。

当该方法用于返回属性值，则返回第一个匹配元素的值。当该方法用于设置属性值，则为匹配元素设置一个或多个属性/值对。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.div1{
				width: 200px;
				height: 200px;
				background-color: lightblue;
			}
			.add1{
				border: 2px solid red;
			}
			.add2{
				border: 5px dotted green;
			}
			#top{
				background-color: lightcoral;
			}
		</style>
		<script src="js/jquery-3.6.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				
				$("#btn1").click(function(){
					//设置一个属性的值
					//div原本的class属性的值为div1，设置后更改为add1，原本div1类的样式将被移除，不会同时存在
					$("div").attr("class","add1");
					//设置多个属性的值时，使用键值对的写法
					$("div").attr({"id":"top","class":"add2"})
				});
				//获取属性的值
				$("#btn2").click(function(){
					alert($("div").attr("class"));
				});
			})
		</script>
	</head>
	<body bgcolor="lavender">
		<div class="div1" title="测试">
			<input type="button" id="btn1" value="设置属性"/>
			<input type="button" id="btn2" value="获取属性"/>
		</div>
	</body>
</html>

（4）css()方法

css() 方法为被选元素设置或返回一个或多个样式属性。

当用于返回属性：该方法返回第一个匹配元素的指定 CSS 属性值。然而，简写的 CSS 属性（比如 “background” 和 “border”）不被完全支持，且当用于返回属性值时，在不同的浏览器中有不同的结果。

当用于设置属性：该方法为所有匹配元素设置指定 CSS 属性。

例如:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.div1{
				width: 200px;
				height: 200px;
				background-color: lightblue;
			}
		</style>
		<script src="js/jquery-3.6.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#btn1").click(function(){
					//设置一个样式
					$("div").css("background-color","hotpink");
					//同时设置多个样式
					$("div").css({"width":"250px","border":"1px solid blue"});
				});
				//获取属性的值
				$("#btn2").click(function(){
					console.log($("div").css("background-color"));
				});
			})
		</script>
	</head>
	<body bgcolor="lavender">
		<div class="div1">
			<input type="button" id="btn1" value="设置属性"/>
			<input type="button" id="btn2" value="获取属性"/>
		</div>
	</body>
</html>

（5）prop()方法

prop() 方法用于设置或返回被选元素的属性和值。

当该方法用于返回属性值时，则返回第一个匹配元素的值。

当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。

注意：prop() 方法应该用于检索属性值，例如 DOM 属性（如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected）。

提示：如需检索 HTML 属性，请使用attr()方法代替。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.div1{
				width: 200px;
				height: 200px;
				background-color: lightblue;
			}
			#main{
				border: 2px solid red;
			}
			.add{
				width: 300px;
				height: 300px;
			}
		</style>
		<script src="js/jquery-3.6.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#btn1").click(function(){
					//设置一个样式
					$("div").prop("id","main");
					//同时设置多个样式
					$("div").prop({"class":"add","align":"center"});
				});
				//获取属性的值
				$("#btn2").click(function(){
					console.log($("div").prop("class"));
				});
			})
		</script>
	</head>
	<body bgcolor="lavender">
		<div class="div1">
			<input type="button" id="btn1" value="设置属性"/>
			<input type="button" id="btn2" value="获取属性"/>
		</div>
	</body>
</html>

（6）html()方法

html() 方法用于设置或返回被选元素的内容（和js中dom对象的innerHTML属性同理）。

当该方法用于返回内容时，则返回第一个匹配元素的内容。

当该方法用于设置内容时，则重写所有匹配元素的内容。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.6.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				var div_html = $("div").html();
				console.log(div_html);
			})
		</script>
	</head>
	<body bgcolor="lavender">
		<div>
			<h1>这是标题</h1>
			<p>这是段落</p>
			这是普通文本
		</div>
	</body>
</html>

结果如下：
在这里插入图片描述

（7）text()方法

text() 方法用于设置或返回被选元素的文本内容（和js中dom对象的innerText属性同理）。

当该方法用于返回内容时，则返回所有匹配元素的文本内容（会删除 HTML 标记）。

当该方法用于设置内容时，则重写所有匹配元素的内容。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.6.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				var div_html = $("div").html();
				var div_text = $("div").text();
				console.log(div_html);
				console.log(div_text);
			})
		</script>
	</head>
	<body bgcolor="lavender">
		<div>
			<h1>这是标题</h1>
			<p>这是段落</p>
			这是普通文本
		</div>
	</body>
</html>

结果如下：
在这里插入图片描述

（8）val()方法

val() 方法用于返回或设置被选元素的 value 属性。

当用于返回值时：该方法返回第一个匹配元素的 value 属性的值。

当用于设置值时：该方法设置所有匹配元素的 value 属性的值。

注意：val() 方法通常与 HTML 表单元素一起使用。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.6.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				var div_html = $("div").html();
				var div_text = $("div").text();
				var input_value = $("input[type=text]").val();
				console.log(div_html);
				console.log(div_text);
				console.log(input_value);
			})
		</script>
	</head>
	<body bgcolor="lavender">
		<div>
			<h1>这是标题</h1>
			<p>这是段落</p>
			这是普通文本
			<input type="text" value="输入框"/>
		</div>
	</body>
</html>

结果如下：
在这里插入图片描述

（9）append()方法、appendTo() 方法

append() 方法用于在被选元素的结尾插入指定内容。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.6.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("div").append("<b>使用append插入的内容</b>");
			})
		</script>
	</head>
	<body bgcolor="lavender">
		<div>
			<span>开头</span>
			<span>结尾</span>
		</div>
	</body>
</html>

appendTo() 方法在被选元素的结尾插入 HTML 元素。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.6.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("div").append("<b>使用append插入的内容</b>");
				$("<i>这是appendTo插入的内容</i>").appendTo("div");
			})
		</script>
	</head>
	<body bgcolor="lavender">
		<div>
			<span>开头</span>
			<span>结尾</span>
		</div>
	</body>
</html>

区别：append()方法插入的内容可以为普通文本，也可以为html标签，而appendTo()方法插入的内容必须包含html标签。之后三对方法也是同理。

（10）prepend() 方法、prependTo() 方法

prepend() 方法用于在被选元素的开头插入指定内容。

prependTo() 方法用于在被选元素的开头插入 HTML 元素。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.6.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("div").prepend("<b>这是prepend插入的内容</b>");
				$("<i>这是prependTo插入的内容</i>").prependTo("div");
			})
		</script>
	</head>
	<body bgcolor="lavender">
		<div>
			<span>开头</span>
			<span>结尾</span>
		</div>
	</body>
</html>

（11）after() 方法、insertAfter() 方法

after() 方法用于在被选元素后插入指定的内容。

insertAfter() 方法在被选元素后插入 HTML 元素。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.6.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("div").after("<b>这是after插入的内容</b>");
				$("<i>这是insetAfter插入的内容</i>").insertAfter("div");
			})
		</script>
	</head>
	<body bgcolor="lavender">
		<div>
			<span>开头</span>
			<span>结尾</span>
		</div>
	</body>
</html>

（12）before()方法、insertBefore()方法

before() 方法用于在被选元素之前插入指定的内容。

insertBefore() 方法用于在被选元素前插入 HTML 元素。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.6.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("div").before("<b>这是before插入的内容</b>");
				$("<i>这是insertBefore插入的内容</i>").insertBefore("div");
			})
		</script>
	</head>
	<body bgcolor="lavender">
		<div>
			<span>开头</span>
			<span>结尾</span>
		</div>
	</body>
</html>

区别：append()方法插入的内容的位置为被选元素的内部，而after()方法插入的内容的位置为被选元素的外部。其余两个方法同理。

（13）height()方法、width()方法

height() 方法用于设置或返回被选元素的高度，width() 方法用于设置或返回被选元素的宽度。

当该方法用于返回高度时，则返回第一个匹配元素的高度。当该方法用于设置高度时，则设置所有匹配元素的高度。

该方法返回的高度不包含 padding、border 或 margin的值。width()方法同理。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				margin: 10px;
                padding: 8px;
				border: 5px solid orange;
				height: 200px;
				width: 300px;
			}
		</style>
		<script src="js/jquery-3.6.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				console.log($("div").height());
				console.log($("div").width());
			})
		</script>
	</head>
	<body bgcolor="lavender">
		<div></div>
	</body>
</html>

输出结果：
在这里插入图片描述

（14）position() 方法

position() 方法返回第一个匹配元素的位置（相对于它的父元素）。

该方法返回一个带有两个属性（以像素为单位的 top 和 left 位置）的对象。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			p{
				position: absolute;
				top: 100px;
				left: 150px;
			}
		</style>
		<script src="js/jquery-3.6.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				var pos = $("p").position();
                //输出结果为150 100
				console.log(pos.left+" "+pos.top);
			})
		</script>
	</head>
	<body bgcolor="lavender">
		<div>
			<p>段落</p>
		</div>
	</body>
</html>

（15）wrap() 方法

wrap() 方法使用指定的 HTML 元素来包裹每个被选元素。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			p{
				border: 5px solid lightblue;
				margin: 50px;
				width: 200px;
				height: 150px;
			}
		</style>
		<script src="js/jquery-3.6.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("span").wrap("<p></p>");
			})
		</script>
	</head>
	<body bgcolor="lavender">
		<span>文本1</span>
		<span>文本2</span>
		<span>文本3</span>
	</body>
</html>

结果如下：
在这里插入图片描述

（16）wrapAll()方法

wrapAll() 方法使用指定的 HTML 元素来包裹所有被选元素。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			p{
				border: 5px solid lightblue;
				margin: 50px;
				width: 200px;
				height: 150px;
			}
		</style>
		<script src="js/jquery-3.6.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("span").wrapAll("<p></p>");
			})
		</script>
	</head>
	<body bgcolor="lavender">
		<span>文本1</span>
		<span>文本2</span>
		<span>文本3</span>
	</body>
</html>

结果为：
在这里插入图片描述

（17）wrapInner()方法

wrapInner() 方法使用指定的 HTML 元素来包裹每个被选元素中的所有内容（innerHTML）。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			p{
				border: 5px solid lightblue;
				margin: 50px;
				width: 200px;
				height: 150px;
			}
			span{
				border: 4px dashed lightcoral;
			}
		</style>
		<script src="js/jquery-3.6.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("p").wrapInner("<span></span>");
			})
		</script>
	</head>
	<body bgcolor="lavender">
		<p>文本1</p>
		<p>文本2</p>
		<p>文本3</p>
	</body>
</html>

运行结果：
在这里插入图片描述

三个方法的使用区别：wrap()方法为将每一个被选元素都使用指定的标签进行包裹；warpAll()方法是将所有被选元素用一个指定的标签进行包裹；wrapInner()方法是将指定元素内部的所有html内容用指定的标签进行包裹。