前端基础 -JQuery之val，text，html

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内超链