Jquery中获取内容和属性、删除元素、添加元素、jQuery遍历----------(遍历、祖先、后代、同胞、过滤)、jQuery

本文链接：https://blog.csdn.net/qq_44791674/article/details/108926244

本文介绍了Jquery如何获取内容和属性，包括text()、html()、val()和attr()方法。同时讲解了删除元素的remove()和empty()方法，以及添加元素的append()、prepend()、after()和before()方法。还概述了jQuery的遍历功能，包括祖先、后代、同胞元素的遍历和过滤方法。最后，简述了jQuery的AJAX基础和应用场景。

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

Jquery中获取内容和属性

Jquery拥有可操作HTML元素和属性的强大方法。
常用的方法有：

text()/设置或返沪所选元素的文本内容
html()/设置或返回所选元素的内容（相比text（）方法，支持返回btml标记）
val()/返回表单字段的值（理解为value的简写）
attr()/设置或返回所选属性的值
text()/设置或返沪所选元素的文本内容&html()/设置或返回所选元素的内容（相比text（）方法，支持返回btml标记）

<!DOMTYPE>
<html>
<mete charset="utf-8"/>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
   
	$("#btn1").click(function(){
   
		alert($("#test1").text());});
    $("#btn2").click(function(){
   
		alert($("#test1").html());});	
	});					 
</script>
</head>
<body>
<p id="test1">这是个测试的<b>文本</b>.</p>
<button id="btn1">显示文本（text)</button>
<button id="btn2">显示html（html)</button>
</body>
</html>

text()
在这里插入图片描述
html()

val()/返回表单字段的值（理解为value的简写）

<!DOMTYPE>
<html>
<mete charset="utf-8"/>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
   
	$("#btn1").click(function(){
   
		alert($("#test1").val());});
	});					 
</script>
</head>
<body>
<p ><input  id="test1" value="ccc"/></p>
<button id="btn1">显示输入值</button>
</body>
</html>

执行val，显示出输入框的值
在这里插入图片描述
如上所示，改val()方法显示出了输入框的值

attr()/设置或返回所选属性的值

这个方法，相对前面三个方法来说，相对复杂一点，可以根据参数的不同，分为以下三个方法：
（1）attr(属性名）
返回被选元素中属性的值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
   
	$("button").click(function(){
   
		alert($("#t1").attr("class"));
	});
});
</script>
</head>
<body>
	<p id="t1" class="t2">显示p中的class值</p>
	<button>点击</button>
</body>
</html>

在这里插入图片描述
(2)attr(属性名，属性值）
设置被选元素中属性名的属性值
属性值可以为数值，也可以为函数返回值即可

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
   
	$("#btn1").click(function(){
   
		$("#t1").attr("class","modifyClass");
		alert($("#t1").attr("class"));
	});
	$("#btn2").click(function(){
   
		$("#t1").attr("class",function(n,v){
   
			return v+"modify";});
		alert($("#t1").attr("class"