jQuery的DOM操作之捕获和设置

.html()——获取或设置目标元素内的所有内容，包含html的标签及属性在内；

.text()——仅获取或设置目标元素内的文本内容；

.val()——获取输入框的值；

.attr()——获取或设置目标元素的属性；

首先是捕获示例：

<p>今年谁是冠军？会是<a href="#">上海上港</a>吗？</p>
<input type="text" value="用户名"/>
<a href="http://www.shydzc.com" id="yd">远地资产</a>
<button type="button" id="btn">点击</button>

<script>
$(document).ready(function(){
$("#btn").click(function(){
console.log($("p").html());
console.log($("p").text());
console.log($("input").val());
console.log($("#yd").attr("href"));
})
})
</script>

下面用以上方法对DOM元素进行设置：

<p id="p1">hello world</p>
<h2>上海远地资产</h2>
<a href="http://www.baidu.com">百度</a>
<input type="text" value="用户名"/>
<button id="btn">更换新内容</button>

$(document).ready(function(){
$("#btn").click(function(){
$("#p1").text(function(index,domEle){
return "old:"+domEle+" new:"+index;
});
$("a").text("远地资产");
$("h2").html("远地资产<small>做您信赖的理财伙伴</small>");
$("a").attr({
"href":"http://www.shydzc.com",
"title":"上海远地资产"
});
$("input").val("请输入真实姓名!");
});
})

点击按钮前：

点击按钮后：