JQuery学习之路Part5：DOM元素内容和属性值的获取和设置

一、获取/设置内容

1、text()

获取所选元素的文本内容
获取双标签文本内容
不往方法里传入参数 即为获取

例：

$("#btn1").click(function(){
	alert("Text: " + $("#test1").text());
});

设置所选元素的文本内容
设置双标签文本内容
往方法里传入要设置的文本内容

例：

$("#btn1").click(function(){
	$("#test1").text("Hello world!");
});

---

2、html()

不同于val() 该方法获取的时候 会将HTML标记也一并获取过来
获取所选元素的内容（包括 HTML 标记）

例：

$("#btn1").click(function(){
	alert("HTML: " + $("#test1").html());
});

设置所选元素的内容（包括 HTML 标记）

例：

$("#btn1").click(function(){
	$("#test1").html("<b>Hello world!</b>");
});

---

3、val()

获取表单字段的值
获取单标签文本内容
获取来的就是原原本本的内容 不包含HTML标记

例：

$("#btn1").click(function(){
	alert("Value: " + $("#test1").val());
});

设置表单字段的值
设置单标签文本内容

例：

$("#btn1").click(function(){
	$("#test1").val("Cool Boy");
});

---

二、获取/设置属性值

1、prop()

对于HTML元素本身就带有的属性(不直接出现在标签中的属性)
对于布尔(boolean)类型属性 应使用prop()方法
例：[checked] [selected] [desabled]

获取指定属性值
语法：prop(属性名)

例：

$("button").click(function(){
	alert($("#ck1").prop("checked"));
});

设置指定属性值
语法：prop(属性名,属性值)

例：

$("button").click(function(){
	$("#ck1").prop("checked",true);
});

设置多个属性值
例：

$("button").click(function(){
	$("#ck1").prop({
		"href" : "https://www.baidu.com",
		"title" : "百度"
	});
});

---

2、attr()

对于HTML元素中直接出现在标签中的属性

获取指定属性值
语法：attr(属性名)

例：

$("button").click(function(){
alert($("#ck1").attr("href"));
});

若有多个同名对象 则输出的是第一个对象的属性

设置指定属性值

语法：attr(属性名,属性值)

例：

$("button").click(function(){
	$("#ck1").attr("href","https://www.baidu.com");
});

若无某属性 则自动添加该属性

设置多个属性值
语法：

.attr({
	属性名1:"属性值1,
	属性名2:"属性值2,
	属性名3:"属性值3,
})

例：

$("button").click(function(){
	$("#ck1").attr({
		"href" : "http://www.baidu.com",
		"title" : "百度"
	});
});

若无某属性 则自动添加该属性

---