jQuery内容节点操作(重点----jQuery对象和Dom对象的相互转换)

最新推荐文章于 2023-04-08 10:41:35 发布

司天宏

最新推荐文章于 2023-04-08 10:41:35 发布

阅读量771

点赞数 1

本文链接：https://blog.csdn.net/qq_41532872/article/details/86513799

版权

前端专栏收录该内容

47 篇文章 0 订阅

订阅专栏

jQuery对象和Dom对象的相互转换


<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<p>我是一个p标签1</p>
		<p>我是一个p标签2</p>
		<p>我是一个p标签3</p>
		<div id="txt">我是一个div</div>
		<script src="../js/jquery.min.js"></script>
     <script>
     	/*jQuery对象和DOM对象的相互转换
     	 *  1.DOM对象转换为jQuery对象-->用一个$()把DOM对象包装起来，就变成了jQuery对象
     	 *  2.jQuery对象转换为DOM对象,有2种转换方式
     	 *   第1种：用jQuery对象[索引]，获取对应的DOM对象
     	 *   第2种：用jQuery对象.get(索引)，获取对应的DOM对象
     	 * */
     	  //获取一个DOM对象
     	  var div=  document.getElementById('txt');
     	    //转换为jQuery对象
     	    var $div=  $(div);
     	    //把jQuery对象转换为DOM对象
     	    var domP=  $("p")[1];
     	    // console.log(domP.innerHTML);
     	       domP=$("p").get(2);
     	           console.log(domP.innerHTML);
     </script>
	</body>

</html>

在这里插入图片描述

html方法操作的内容


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="content">我是div</div>
		<input type="button"  id="btn" value="改变div的内容" />
		<script src="../js/jquery.min.js"></script>
		<script>
		/*	html() - 设置或获取所选元素的内容（包括 HTML 标记
		 *  设置：html(参数)，参数就是要加到元素中的内容
		 *  获取:html()
		 * */
			$('#btn').click(function(){
				  //用html()设置元素里的内容
				  $('#content').html("<h2>我是div里面的内容</h2>");
				  //获取div里的内容
				  console.log($('#content').html());
			});
		</script>
	</body>
</html>

在这里插入图片描述

text方法操作内容


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="content">我是div</div>
		<input type="button"  id="btn" value="改变div的内容" />
		<script src="../js/jquery.min.js"></script>
		<script>
		/*	text() - 设置或获取所选元素的内容（不包括 HTML标记
		 *  设置：text(参数)，参数就是要加到元素中的内容
		 *  获取:text()
		 * */
			$('#btn').click(function(){
				  //用html()设置元素里的内容
				  $('#content').text("<h2>我是div里面的内容</h2>");
				  //获取div里的内容
				  console.log($('#content').text());
			});
		</script>
	</body>
</html>

在这里插入图片描述

var方法操作元素的value属性


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		用户名：<input type="text" id="uname" />
		<input type="button"  id="btn" value="设置文本框的value" />
		<script src="../js/jquery.min.js"></script>
		<script>
		/*	val() - 设置或获取所选元素的value
		 *  设置：val(参数)，参数就是要加到元素中的值
		 *  获取:val()
		 * */
			$('#btn').click(function(){
				  //用val()设置元素里的value
				  $('#uname').val("mike");
				  //获取文本框里的value
				  console.log($('#uname').val());
			});
		</script>
	</body>
</html>

在这里插入图片描述