1.text():設置或者返回所選元素的文本內容
.html():設置或者返回所元素的文本內容(包括HTML標記)
.val():設置或者返回元素value屬性的值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery對DOM操作(text(),html(),val())</title>
<script type="text/javascript" src="../尚學堂JavaWeb部分/servlet+jsp/servlet_day06/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$("#bt1").click(function(){
alert($("#text").text());
alert($("#bt1").val());
});
$("#bt2").click(function(){
alert($("#text").html("sss"));
alert($("#text").text("sss"));
alert($("#bt2").val());
});
$("#bt3").click(function(){
$("#username").val("江江帥哥");
});
});
</script>
</head>
<body>
<p id="text"> 這是段落中的<font color="red"><b>粗體文本</b></font></p>
<button id="bt1" value="你好!">顯示文本</button>
<button id="bt2" value="你也好!">顯示HTML</button>
<input type="text" id="username">
<button id="bt3">測試val</button>
</body>
</html>
2.獲取屬性 - attr()
下面的例子演示如何獲得href的屬性值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery獲得屬性</title>
<script type="text/javascript" src="../尚學堂JavaWeb部分/servlet+jsp/servlet_day06/jquery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$("button").click(function(){
console.log($("a").attr("href"));
});
});
</script>
</head>
<body>
<p><a href="http://www.baidu.com">百度</a></p>
<button>顯示href的值</button>
</body>
</html>
3.設置值text(),html(),val()的值:
3.1直接這樣寫text("aaa"),html("aaa"),val("aaa")
3.2可以使用回調函數text(function(i,oldVale){}),html(function(i,oldVale){}),val(function(i,oldVale){})
i表示所選元素列表的下標,oldVale表示老的值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script type="text/javascript" src="../尚學堂JavaWeb部分/servlet+jsp/servlet_day06/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$("#bt1").click(function(){
$("#text1").text(function(i,oldValue){
return "old value: "+oldValue+" new value: Hello <b>world!</b>"+i;
});
});
$("#bt2").click(function(){
$("#text2").html(function(i,oldValue){
return "old value: "+oldValue+" new value: Hello <b>world!</b>"+i;
});
});
});
</script>
</head>
<body>
<p id="text1">這是<b>粗體</b>文本.</p>
<p id="text2">這是另一段<b>粗體</b>文本。</p>
<button id="bt1">顯示舊/新文本</button>
<button id="bt2">顯示舊/新HTML</button>
</body>
</html>
3.3 attr設置屬性值
例如:attr("屬性","值")或者attr(
"屬性","值",
"屬性","值",
"屬性","值",
......
)或者使用回調函數
attr("屬性",function(i,oldAttr){})