元素的属性操作
DOM操作能力 (DOM=XML+HTML)
1.1获取内容
- text() 设置或返回所选元素的文本信息
- html()设置或者返回所选元素的内容(包括HTML标记)
- val()设置或返回表单字段的值
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
1.2获取属性
- attr()
$("button").click(function(){
alert($("#w3s").attr("href"));
});
2.1设置内容
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记),这里要提到原生innerHTML,基本等价如果真要使用innerHTML,就只能使用 $("#responsediv")[0].innerHTML=msg
- val() - 设置或返回表单字段的值
DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").innerhtml("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
});
</script>
</head>
<body>
<p id="test1">这是段落。</p>
<p id="test2">这是另一个段落。</p>
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
</body>
</html>
2.2设置属性
单个属性
$("button").click(function(){ $("#w3s").attr("href","http://www.w3school.com.cn/jquery"); });
多个属性
$("button").click(function(){ $("#w3s").attr({ "href" : "http://www.w3school.com.cn/jquery", "title" : "W3School jQuery Tutorial" }); });
2.3回调函数
$("#btn1").click(function(){
$("#test1").text(function(i,origText){ //i 是选中元素的下标 ,返回值即作为text属性
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
同理有atrr()
$("button").click(function(){ $("#w3s").attr("href", function(i,origValue){ return origValue + "/jquery"; }); });