jQuery操作元素内容

之前发现val()函数可以取得元素内容,但是是加上jQuery之中,也可以利用val设置元素内容
示例设置元素value

<html>
<head>
	<meta charset="UTF-8">
	<title>jquery项目</title>
	<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8"></script>
	<script type="text/javascript">
		function fun(){
			//取得id为"name"的元素中的内容,并设置元素内容
			var str = $(uname).val("你好世界");
			
		}
	</script>
</head>
<body>
	请输入:<input type="text" id="uname" name="uname" />
	<input type="button" id="but" name="but" onclick="fun()" value="设置内容"/>
</body>
</html>

运行结果

在这里插入图片描述

自整个jQuery的设计之中,充分考虑到便捷的操作形式
val()函数时进行元素内容设置获取的,但是如果要对元素中的内容进行设置,则也可以使用text()或者html()
所谓的元素内容实际上在讲解HTML的时候也强调过,在最早的IE中出现过自己的标准"元素,innerHTML",后来这个标准被保留下来了,但是很多认识也觉得这次操作不标准,所以在jQuery里面针对于元素内容的设置提供了新的支持.
示例:设置元素文本内容

<html>
<head>
	<meta charset="UTF-8">
	<title>jquery项目</title>
	<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8"></script>
	<script type="text/javascript">
		function fun(){
			//取得id为"name"的元素中的内容,并设置元素内容
			$(mydiv).text("mydiv的文本内容");
			
		}
	</script>
</head>
<body>
	<div id="mydiv"></div>
	<input type="button" id="but" name="but" onclick="fun()" value="设置内容"/>
</body>
</html>

运行结果

在这里插入图片描述

此时的程序使用的是text()函数完成的,但是这个函数只能够设置文本,无法设置HTML元素内容.
错误使用

	<script type="text/javascript">
		function fun(){
			//错误设置元素内容
			$(mydiv).text("<h1>想要设置元素中的h1内容</h1>");
			
		}
	</script>

运行结果

在这里插入图片描述

如果使用text()函数设置元素内容,元素的只会被认为是普通的文本,只有将这戏标签进行转以后才可以进行显示,当然如果希望可以暴力显示西欧爱过,就尅使用html()函数处理
示例:使用html()函数进行处理

<script type="text/javascript">
		function fun(){
			//错误设置元素内容
			$(mydiv).html("<h1>想要设置元素中的h1内容</h1>");
			
		}
	</script>

显示效果

在这里插入图片描述

实际上这两个处理函数就属于加强版的innerHTML操作…实际上所有的dom操作,如果要想简化处理,就是用innerHTML完成.

jQuery操作元素内容

猜你喜欢