JQuery 里val，text，html的使用与区别

介绍：

.html()用为读取和修改元素的HTML标签 对应js中的innerHTML
.html()是用来读取元素的HTML内容（包括其Html标签）,.html()方法使用在多个元素上时，只读取第一个元素

.text()用来读取或修改元素的纯文本内容 对应js中的innerText
.text()用来读取元素的纯文本内容，包括其后代元素;.text()方法不能使用在表单元素上

.val()用来读取或修改表单元素的value值
.val()是用来读取表单元素的"value"值,.val()只能使用在表单元素上

使用方法：

• value：
  获取：jquery对象.val()
  赋值：jquery对象.val(“值”)
• html：
  获取：jquery对象.html()
  赋值：jquery对象.html(“值”)
• text：
  获取：jquery对象.text()
  赋值：jquery对象.text(“值”)

区别：

• html和text设置值的区别：
  - - html会把标签直接解析到页面上
  - - text会把标签作为文本的形式展示到页面上

• html和text获取值的区别：
  - - html会把标签体中存在的html标签获取出来
  - - text不会把标签体中存在的html标签获取出来

代码：

	
		
		Insert title here

		

		
			$(document).ready(function() {

				//3.1 设置 username的默认值为"许多多"
				$("[name=username]").val("许多多");

				//3.2获取 username的value属性的值
				//alert($("[name=username]").val());

				//3.3通过html获取div标签体的内容
				//alert($("div").html());

				//3.4通过html设置div标签体的内容
				$("div").html("如果我们角色互换，我会让你知道什么是残忍！");

				//3.5通过text获取div标签体的内容
				//alert($("div").text());

				//3.6通过text设置div标签体的内容
				$("div").text("要来一发吗");

				//3.7 两者设置值的区别
				//$("#sp1").html("
html方式设置值
");
				$("#sp1").text("
text方式设置值
");

				//3.8 两者获取值的区别
				//alert($("#sp").html());
				alert($("#sp").text());
			});
		

		
			.textClass {
				background-color: #ff0;
			}
		

	

	
		
表单
		
			

				

					
姓名
					

				
				

					
密码
					

				
				

					
性别
					

						男
						女
					
				

				

					

					

						普通按钮
						
						
					
				
			
		

		
公告信息
		

			未满18慎进
		
		外span内超链