jQuery常用方法总结

已于 2022-12-09 10:56:08 修改
阅读量771 收藏 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常用方法总结
12-12
这个是本人总结整理的 jquery常用方法总结，里面有jQuery对象与dom对象的转换 的一些方法
jquery常用方法总结（select方法、阻止事件冒泡等）
Flowering_Vivian的博客
09-23 598
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 242
这里面由我自己总结的一些jQuery常用语法笔记总结。
常用jquery方法 总结
wang_lianglove的专栏
12-05 994
非常全的jQuery常用技巧总结 1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的
对常用jQuery选择器总结
qq_64182180的博客
11-21 455
由于原生JavaScript获取元素的方式很多，而且兼容性情况也不一致，jQuery为我们提供了更强大的选择器，我们在学习jQuery的时候对一些常见的选择器需要进行记忆以及熟悉的使用
Jquery 常用方法经典总结
10-29
Jquery 常用方法，学习jquery的朋友可以参考下。
Jquery常用方法总结
05-26
它可以极大地提高web应用程序的响应速度。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。
jQuery常用操作方法及常用函数总结
10-25
主要总结了jQuery 常用操作方法及常用函数,需要的朋友可以参考下
jQuery自带的一些常用方法总结
10-25
主要介绍了jQuery自带的一些常用方法总结,包括$.trim、$.contains、$.each、$.map、$.inArray、$.extend等,需要的朋友可以参考下
Jquery常用的方法汇总
10-23
本篇文章是对jQuery中常用的元素查找方法进行了详细的总结和介绍，,同时附送示例,是篇非常不错的文章,需要的朋友参考下
JQuery常用方法
09-10
整理了一套JQuery的常用方法，常用的选择器，各个选择器的区别，实际开发中遇到的问题，与解决问题的常用方法。
jQuery常用数据处理方法小结
10-24
主要介绍了jQuery常用数据处理方法,实例总结了trim、param、isArray、isFunction、each等jQuery常用的数据处理方法,具有一定参考借鉴价值,需要的朋友可以参考下
常用jquery ajax方法总结
12-04
常用的jqueryajax 方法，内容全面并有实例
15个jquery常用方法、小技巧分享
10-24
主要介绍了15个jquery常用方法、小技巧分享,本文总结了一些开发中常用的方法,例如获取td的行标和列标、判断是否是回车按下、全选和反选等,需要的朋友可以参考下
常用jQuery选择器总结
10-25
主要介绍了常用jQuery选择器总结,总结的很简洁,很容易看明白和学会它,需要的朋友可以参考下
JQuery常用简单动画操作方法回顾与总结
01-19
本文实例讲述了JQuery常用简单动画操作方法。分享给大家供大家参考，具体如下： jQuery基础动画回顾 .hide() 隐藏动画 .show() 出现动画 .toggle() 切换显示状态 .slideUp()/Down() 下拉/卷...
jQuery选择器总结之常用元素查找方法
11-28
jQuery 的选择器可谓之强大无比，这里简单地总结一下常用的元素查找方法 $(“#myELement”) 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $(“div”) 选择...
jQuery 常见操作实现方式和常用函数方法总结
12-08
jQuery 常见操作实现方式 $(“标签名”) //取html元素 document.getElementsByTagName(“”) $(“#ID”) //取单个控件document.getElementById(“”) $(“div #ID”) //取某个控件中 控件 $(“#ID #ID”) // 通过...
jquery 下载加密
最新发布
09-13
### 回答1： jQuery 是一个非常流行的 JavaScript 库，它提供了许多常用的函数和方法，用来简化 JavaScript 编程的复杂性。但是，由于其代码开源，任何人都可以随意下载和查看其源代码，因此 jQuery 下载加密成为了一种重要的保护措施。 jQuery 下载加密的目的是为了防止非法复制和盗版。具体的实现方式是将 jQuery 源代码压缩成一行，并进行一定的加密算法，使其变得难以理解和修改。这样做的好处是可以让你的代码不被轻易窃取，同时也能使你在维护上更加容易，因为你不必担心其他人窃取你的代码并修改它所导致的代码冲突。 然而，也有一些人对 jQuery 下载加密持有质疑态度，他们认为这种做法并不能真正保护代码的安全性，因为如果有心人会使用程序进行代码反编译，解码算法，还原代码的初始状态，从而窃取代码并进行修改，这种做法仅能一定程度上保护代码的安全。 总之，jQuery 下载加密虽然能够一定程度上保障代码的安全性，但最好的方法还是对代码进行加强的保护，例如开发者可以对代码进行混淆、代码签名等操作，以确保代码的安全性。同时，开源的思想也应该得到思考，鼓励和支持开发者的合法使用而非进行非法窃取和盗版。 ### 回答2： jQuery 是一种流行的 JavaScript 库，主要用于简化客户端脚本编写。它提供了许多功能强大的工具和插件，可以帮助开发者更加高效地进行 Web 开发。由于其广泛的应用，jQuery 的源代码被许多人所关注和使用。 然而，对于 jQuery 的下载加密，实际上并不存在这样的概念。jQuery 的源代码是开源的，这意味着任何人都可以获得并查看、修改甚至重新发布该代码。 在开发过程中，我们可能会将 jQuery 的源代码下载到本地，并根据自己的需求进行调整和定制。这可以通过访问 jQuery 官方网站或者其他可靠的资源来获取。大多数情况下，下载 jQuery 的源代码是免费的，并且已经针对大小和兼容性进行了优化。 一旦我们获得了 jQuery 的源代码，我们可以将其嵌入到自己的项目中，并通过 script 标签引入。这样，我们就可以使用 jQuery 提供的各种方法和功能来轻松地操作 HTML 元素、处理事件、发送 AJAX 请求等等。 总结起来，jQuery 的下载并不存在加密这一概念。它是一个开源库，任何人都可以自由获取和使用它的源代码。只需要访问官方网站或其他可信的资源，即可下载并使用 jQuery。 ### 回答3： jQuery是一个广泛应用于Web开发的JavaScript库。由于其功能强大且易于使用的特点，jQuery被广泛使用于各种Web项目中。然而，由于jQuery是一个开源项目，它并没有提供官方的加密下载选项。因此，在使用jQuery时，我们不能直接从官方网站下载加密版本的jQuery。 然而，即使没有官方的加密版本，我们仍然可以对jQuery进行加密来保护其源代码的安全性。有一些第三方工具可用于将JavaScript代码进行加密或混淆，使其难以被反编译或阅读。 这些工具可以根据代码的特性和结构，对代码进行各种处理，改变代码中的变量名、函数名等，以及添加额外的控制流和转义字符。这样，即使有人获取到了加密的jQuery代码，也很难理解和修改其中的功能和逻辑。 使用这些工具进行加密或混淆时，我们需要先将jQuery源码下载下来，然后使用工具进行加密处理。常见的工具包括UglifyJS、YUI Compressor、Closure Compiler等。这些工具通常提供命令行接口和可视化界面，使得加密jQuery变得更加便捷。 值得注意的是，对于加密的jQuery代码，我们需要保管好加密密钥或密码，以确保只有授权的人可以解密和使用代码。此外，加密会增加代码的复杂度和运行时的性能开销，因此需要在安全性和性能之间进行权衡。 总之，jQuery本身并没有提供官方的加密下载选项，但我们仍然可以使用第三方工具对其源代码进行加密或混淆，以保护其安全性。但在使用加密代码时，需要注意密钥的保管和性能的考虑。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

toMontain

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

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

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

打赏作者

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

抵扣说明：

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

余额充值