JQuery DOM(Document Object Model 文档对象模型)操作
1.获得或设置内容
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括HTML标记)
- val() - 设置或返回表单字段的值
View Code <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); $("#btn3").click(function(){
alert("Name: " + $("#name").val());
});
}); </script> </head> <body> name:<input id = "name" type = "text" value = "name"/>
<p id="test">这是段落中的<b>粗体</b>文本。</p> <button id="btn1">显示文本</button> <button id="btn2">显示 HTML</button>
<button id="btn3">显示 name</button>
</body> </html>
这三个函数拥有回掉函数
2.attr() 获取或设置属性
$(".btn7").click(function(){
$(".setHref").attr({
"href":"http://www.google.com.hk/",
"title":"改变之后的标题"
});
3.添加元素
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
4.删除内容
- remove()
- empty()