jQuery常用方法总结

已于 2022-12-09 10:56:08 修改
阅读量782 收藏 1
点赞数 2
分类专栏： JavaScript 文章标签： jquery javascript 前端
于 2022-12-07 17:21:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43884946/article/details/128223790
版权

jquery常用方法总结

文章目录

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()方法

  1. keydown - 键被按下
  2. keypress - 完成一次按键
  3. 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内容用指定的标签进行包裹。

toMontain
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jQuery的常用效果总结
qq_39043762的博客
05-18 585
最近在工作中深刻的体会到了jQuery以及JS的重要性，所以就写博客记录一下，方便自己以后查看，也希望帮助到有需要的童鞋，新手勿喷，欢迎指导（内容摘自w3school,需要查看原文的童鞋可以自行搜索）！ jQuery效果 1.隐藏和显示 hide()隐藏元素 show() 显示元素 toggle() 显示隐藏的元素，隐藏显示的元素 2.淡入淡出 ​ fadeIn()淡入已隐藏的函数 ...
jquery常用方法总结
12-12
这个是本人总结整理的 jquery常用方法总结，里面有jQuery对象与dom对象的转换 的一些方法
jquery常用方法总结（select方法、阻止事件冒泡等）
Flowering_Vivian的博客
09-23 609
1.jquery阻止事件冒泡 $('#btn1').click(function (event) { event.stopPropagation(); }); 2.jquery判断是否显示或隐藏 if($("#test").is(':visible')){...} //是否显示 if($("#test").is(":hidden")){...} //是否隐藏 3.jquery select操作 $(".selector").val("pxx"); //设置value为pxx的项选中 $
jQuery常用语法笔记总结
Faded1573606285的博客
06-04 262
这里面由我自己总结的一些jQuery常用语法笔记总结。
常用jquery方法 总结
wang_lianglove的专栏
12-05 999
非常全的jQuery常用技巧总结 1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的
对常用jQuery选择器总结
qq_64182180的博客
11-21 472
由于原生JavaScript获取元素的方式很多，而且兼容性情况也不一致，jQuery为我们提供了更强大的选择器，我们在学习jQuery的时候对一些常见的选择器需要进行记忆以及熟悉的使用
JQuery常用事件总结
这里是博客标题
09-17 420
JQuery在使用中会有很多事件被使用到，使用监听事件可以大大提高开发的效率和速度，总结一下遇到过的常用事件。 1、鼠标事件 click 点击事件; dblclick 双击事件; mouseenter 鼠标移入事件，子级元素不会触发; mouseleave 鼠标移除事件，子级元素不会触发; mouseover 鼠标移入事件，子级元素也会触发; ...
jQuery 常用API
m0_67392010的博客
03-16 1391
jQuery 常用API 1、jQuery 选择器 1.1 、jQuery 基础选择器 1.2 、jQuery 层级选择器 1.3 、隐式迭代（重要） 1.4 、jQuery 筛选选择器 1.5、 jQuery 筛选方法（重点） 1.6 、jQuery 里面的排他思想 1.7、 链式编程 2、jQuery 样式操作 2.1 、操作 css 方法 2.2 、设置类样式方法 2.3、 类操作与className区别 3、jQuery 效果 3.1 、显示隐藏效果 3.1.1、显示效果
jquery 常用写法总结
baby_it的专栏
01-18 444
jquery除了在帮助我们搜索dom树中的节点外，还可以对dom树进行操作，今天就一些项目开发中常用的操作，进行简单的整理，加快日后前台页面的开发 jquery操作css
jQuery总结
斑驳的岁月
06-20 616
文章目录简介一、jQuery代码风格二、jQuery选择器1.引入库2.读入数据总结 简介 jQuery是一个JavaScript库，它通过封闭原生JavaScript函数得到一整套定义好的方法。jQuery作为JavaScript封装的库，他的目的就是为了简化开发者使用JavaScript。主要功能有以下几点： HTML元素选取 HTML元素操作 CSS操作 HTML事件函数 JavaScript特效和动画 HTML DOM遍历和修改 AJAX Utilities jQuery的使用： jQuery属
Jquery 常用方法经典总结
10-29
Jquery 常用方法，学习jquery的朋友可以参考下。
Jquery常用方法总结
05-26
在本文中，我们将深入探讨 jQuery 的一些常用方法，以帮助开发者更好地理解和应用这些功能。 1. **选择器**： - `$("标签名")`：通过标签名选择元素，如 `$("div")` 会选择所有 div 元素。 - `$("#ID")`：通过 ID...
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 347
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue2 实现原生 WebSocket
weixin_38797742的博客
07-11 378
原生WebSocket： new WebSocket。
vue 自定义滚动条同步拖动（移动端）
u014206461的博客
07-12 178
vue 自定义滚动条同步拖动（移动端）
Webkit简介以及工作流程
读心悦
07-10 332
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
在项目中，如何使用springboot+vue+springsecurity+redis缓存+Axios+MySQL数据库+mybatis
huanghm88的专栏
07-11 692
在Spring Boot中，可以使用Spring Data JPA和MyBatis来配置MySQL数据库。在Vue项目中，可以创建一个config.js文件来配置后端的API地址，然后在需要发送请求的地方使用Axios发送请求。根据业务需求，在Spring Boot中编写相应的接口和服务层代码，包括数据访问、业务逻辑等。在Vue中，可以使用Axios发送HTTP请求，并将响应的数据展示在前端页面上。分别启动后端的Spring Boot应用和前端的Vue应用，访问前端页面，就可以看到与后端进行通信的效果。
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 317
vue2、vue3首屏优化,减少白屏时间

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

toMontain

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值