jQuery学习（3）—— 获取和设置标签中的内容

最新推荐文章于 2023-06-13 19:27:35 发布

Yacht13

最新推荐文章于 2023-06-13 19:27:35 发布

阅读量1.9k

点赞数

分类专栏： HTML、CSS、JavaScript、jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/Archer__13/article/details/124847358

版权

HTML、CSS、JavaScript、jQuery 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

一. html()

1. 获取起始标签和结束标签中的内容

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>  <!--引入jquery -->
  <script type="text/javascript">
		$(function(){
			alert($("div").html());    //div标签 <span>div中的span标签</span>
		});
  </script>
</head>
<body>
	<div>div标签 <span>div中的span标签</span></div>
</body>
</html>

2. 设置起始标签和结束标签中的内容

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>  <!--引入jquery -->
  <script type="text/javascript">
		$(function(){
			$("div").html("<h1>标题</h1>")       //现在页面上是：标题
		});
  </script>
</head> 
<body>
	<div>div标签 <span>div中的span标签</span></div>
</body>
</html>

二. text()

1. 获取起始标签和结束标签中的文本

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>  <!--引入jquery -->
  <script type="text/javascript">
		$(function(){
			alert($("div").text());    //div标签 div中的span标签
		});
  </script>
</head>
<body>
	<div>div标签 <span>div中的span标签</span></div>
</body>
</html>

2. 设置起始标签和结束标签中的文本

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>  <!--引入jquery -->
  <script type="text/javascript">
		$(function(){
			$("div").text("<h1>标题</h1>")       //现在页面上是：<h1>标题</h1>
		});
  </script>
</head> 
<body>
	<div>div标签 <span>div中的span标签</span></div>
</body>
</html>

三. val()

1. 获取表单项中的内容

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>  <!--引入jquery -->
  <script type="text/javascript">
		$(function(){
			$("button").click(function(){
				alert($("#username").val());  //获取输入框中的值
			});
		});
  </script>
</head>
<body>
	<input type="text" name="username" id="username"/>
	<button>按钮</button>
</body>
</html>

2. 设置表单项中的内容

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>  <!--引入jquery -->
  <script type="text/javascript">
		$(function(){
			$("button").click(function(){ 
				$("#username").val("Tom");   //点击按钮之后，Tom会填入输入框内
			});
		});
  </script>
</head>
<body>
	<input type="text" name="username" id="username"/>
	<button>按钮</button>
</body>
</html>

四. attr()

设置和获取属性的值，不推荐操作checked、readOnly、selected、disabled

1.获取

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>  <!--引入jquery -->
  <script type="text/javascript">
		$(function(){
			alert($(":checkbox:first").attr("name"));   //hobby$(":checkbox:first").attr("name");   
		});
  </script>
</head>
<body>
	爱好：<input type = "checkbox" name = "hobby" value= "Java"/>Java 
		  <input type = "checkbox" name = "hobby" value= "Python"/>Python 
		  <input type = "checkbox" name = "hobby" value= "C++"/>C++ <br/>
</body>
</html>

2.设置

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>  <!--引入jquery -->
  <script type="text/javascript">
		$(function(){
			$(":checkbox:first").attr("name", "abc");   //第一个复选框的name属性的值从hobby变为abc
		});
  </script>
</head>
<body>
	爱好：<input type = "checkbox" name = "hobby" value= "Java"/>Java 
		  <input type = "checkbox" name = "hobby" value= "Python"/>Python 
		  <input type = "checkbox" name = "hobby" value= "C++"/>C++ <br/>
</body>
</html>

五. prop()

设置和获取属性的值，只推荐操作checked、readOnly、selected、disabled

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>  <!--引入jquery -->
  <script type="text/javascript">
		$(function(){
			$(":checkbox").prop("checked", true);   //两个复选框都选中
		});
  </script>
</head>
<body>
	爱好：<input type = "checkbox" name = "hobby" value= "Java"/>Java 
		  <input type = "checkbox" name = "hobby" value= "Python"/>Python 
		  <input type = "checkbox" name = "hobby" value= "C++"/>C++ <br/>
</body>
</html>

Yacht13

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习（3）—— 获取和设置标签中的内容

一. html()1. 获取起始标签和结束标签中的内容<!DOCTYPE html><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <!-
复制链接

扫一扫