Jquery 中DOM對象操作

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){})

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章