jQuery的id选择器

最新推荐文章于 2024-07-29 03:29:37 发布

疆~

最新推荐文章于 2024-07-29 03:29:37 发布

阅读量8.4k

点赞数

文章标签： jQuery

本文链接：https://blog.csdn.net/qq_40323256/article/details/89279768

版权

jQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1. 控制内容的显示和隐藏（display:block/none）

2.用Text（）改变内容。将“helloworld”改为“lijiang”

注意：

$("#one") //返回一个jQuery对象
document.getElementById("one") //返回一个DOM对象

1. 控制内容的显示和隐藏（display:block/none）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
		<script type="text/javascript">
			
//			$(function(){
//				$("#one").show();//display:block
//			})
		</script>
	</head>
	<body>
		<div id="one" style="display: none;">helloworld</div>
	</body>
</html>

上面这样运行不会显示“helloworld”，因为display为none,下面这样就可以让它显示出来：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
		<script type="text/javascript">
			
			$(function(){
				$("#one").show();//display:block
			})
		</script>
	</head>
	<body>
		<div id="one" style="display: none;">helloworld</div>
	</body>
</html>

以下这种方式也可以显示“helloworld”，但是很明显要复杂一些

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
		<script type="text/javascript">
			
			$(function(){				
				document.getElementById("one").style.display="block";				
			})
		</script>
	</head>
	<body>
		<div id="one" style="display: none;">helloworld</div>
	</body>
</html>

2.用Text（）改变内容。将“helloworld”改为“lijiang”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
		<script type="text/javascript">
			
			$(function(){
				$("#one").text("lijiang");
			})
		</script>
	</head>
	<body>
		<div id="one">helloworld</div>
	</body>
</html>

下面这种方式实现的功能和$("#one").text("lijiang")相同，但显然此方式要复杂很多

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
		<script type="text/javascript">
			
			$(function(){
				//$("#one").text("lijiang");
				document.getElementById("one").innerText="lijiang";//功能和$("#one").text("lijiang")相同，但显然此方式要复杂很多
				
			})
		</script>
	</head>
	<body>
		<div id="one">helloworld</div>
	</body>
</html>