Jquery 中DOM对象操作

最新推荐文章于 2024-04-10 10:06:32 发布

jiangtao7913

最新推荐文章于 2024-04-10 10:06:32 发布

阅读量370

点赞数

CC 4.0 BY-SA版权

分类专栏：回顾学习文章标签： jquery dom 对象

本文链接：https://blog.youkuaiyun.com/jiangtao7913/article/details/50224179

回顾同时被 2 个专栏收录

18 篇文章

订阅专栏

学习

17 篇文章

订阅专栏

本文介绍了jQuery中用于操作DOM的核心方法，包括text(), html(), val()和attr()等函数的使用方式及实例。通过这些方法，开发者能够高效地读取和修改网页元素的内容与属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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