Jquery（三）——Jquery操作DOM结点（下）_jquery 往bady下插入一个节点-CSDN博客

本文链接：https://blog.csdn.net/qq_37084904/article/details/99299476

目录

4. 设置和获取HTML，文本和值；

4.1 获取html，设置html；

4.2 获取文本，设置文本；

4.3 获取值，设置值；

5.遍历结点操作；

5.1 获取所有子节点；

5.2 获取邻近的下一个兄弟结点next()；

5.3 获取邻近的上一个兄弟结点prev()；

6. Jquery操作DOM结点CSS；

6.1 获取DOM结点CSS样式；

6.2 设置DOM结点CSS样式；

4. 设置和获取HTML，文本和值；

4.1 获取html，设置html；

<script type="text/javascript">
	$(document).ready(function(){
		//设置和获取HTML，文本和值
		var l1_html=$("ul li:eq(0)").html();
		alert(l1_html);
	});
</script>

<script type="text/javascript">
	$(document).ready(function(){
		$("ul li:eq(0)").html("<font color=red>HTML哈哈</font>");
	});
</script>

4.2 获取文本，设置文本；

<script type="text/javascript">
	$(document).ready(function(){
		//获取文本，设置文本
		var l1_text=$("ul li:eq(0)").text();
		alert(l1_text);
	});
</script>

<script type="text/javascript">
	$(document).ready(function(){
		//获取文本，设置文本
		$("ul li:eq(0)").text("丫丫");
	});
</script>

4.3 获取值，设置值；

初始页面：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<style type="text/css">
	.lc{
		background-color: red;
	}
	
	.lc2{
		background-color: blue;
	}
	
	.lc3{
		font-weight: bold;
	}
</style>
</head>
<body>
<p>你最喜欢的名人是？</p>
<ul>
	<li title="这是乔布斯"><font color="green">乔布斯</font></li>
	<li title="这是比尔盖茨" class="lc">比尔盖茨</li>
	<li title="这是詹姆斯高斯林">詹姆斯高斯林</li>
</ul>
<input type="text" id="userName"/>
<input type="button" value="获取数据" onclick="getUserName()"/>
<input type="button" value="设置数据" onclick="setUserName()"/>
</body>
</html>

<script type="text/javascript">
	function getUserName(){
		var userName=$("#userName").val();
		alert(userName);
	}
	
	function setUserName(){
		$("#userName").val("你懂的");
	}
</script>

5.遍历结点操作；

5.1 获取所有子节点；

先看看结点下面有几个结点：

<script type="text/javascript">
	$(document).ready(function(){
		// 遍历节点
		var b=$("body").children();
		//看body结点下面有几个结点，应该有5个
		alert(b.length);
	});
</script>

进行遍历：

<script type="text/javascript">
	$(document).ready(function(){
		// 遍历节点
		var u=$("ul").children();
		alert(u.length);
		for(var i=0;i<u.length;i++){
			// alert(u[i].innerHTML);
			alert($(u[i]).html());
		}
	});
</script>

5.2 获取邻近的下一个兄弟结点next()；

<script type="text/javascript">
	$(document).ready(function(){
		var l=$("ul li:eq(1)").next();//获取第二个结点的下一个结点
		alert(l.html());
	});
</script>

5.3 获取邻近的上一个兄弟结点prev()；

<script type="text/javascript">
	$(document).ready(function(){
		var l=$("ul li:eq(1)").prev();//获取第二个结点的上一个结点
		alert(l.html());
	});
</script>

6. Jquery操作DOM结点CSS；

6.1 获取DOM结点CSS样式；

新添加一个节点：

<p id="jc" style="color:red">六神</p>

<script type="text/javascript">
	$(document).ready(function(){
		var l=$("#jc").css("color");
		alert(l);
	});
</script>

6.2 设置DOM结点CSS样式；

<script type="text/javascript">
	$(document).ready(function(){
		$("#jc").css("color","yellow");
	});
</script>