本文主要介绍通过JQuery操作DOM对象以及其属性
获得内容 - text(),html() ,val(),attr()
text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值
attr() 方法用于获取属性值。
下面的例子演示如何通过 jQuery text(),html(),val(),attr() 方法来获得内容:
实例
$("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); $("#btn1").click(function(){ alert("Value: " + $("#test").val()); }); $("button").click(function(){ alert($("#w3s").attr("href")); });
设置内容 - text()、html() ,val(),attr()
实例$("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); }); $("button").click(function(){ $("#w3s").attr("href","http://www.w3school.com.cn/jquery"); });
text()、html(),val(),attr() 的回调函数
回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。下面的例子演示带有回调函数的 text() html(),attr():
实例
$("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "Old text: " + origText + " New text: Hello world!(index: " + i + ")"; }); }); $("#btn2").click(function(){ $("#test2").html(function(i,origText){ return "Old html: " + origText + " New html: Hello <b>world!</b>(index: " + i + ")"; }); }); $("button").click(function(){ $("#w3s").attr("href", function(i,origValue){ return origValue + "/jquery"; }); });