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

 

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