jQ实现获得内容和属性

最新推荐文章于 2022-07-02 11:56:30 发布

原创最新推荐文章于 2022-07-02 11:56:30 发布 · 186 阅读

0 ·

CC 4.0 BY-SA版权

jq 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用jQuery的text(), html(), val()和attr()方法来操作网页中的DOM元素，包括设置或返回元素的文本内容、HTML内容、表单字段的值以及属性值。

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

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
attr() -方法用于获取属性值。

下面是这三个的代码样例：

text（），html()

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
});
</script>
</head>

<body>
<p id="test">这是段落中的<b>粗体</b>文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
</body>

</html>

value（）

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("Value: " + $("#test").val());
  });
});
</script>
</head>

<body>
<p>姓名：<input type="text" id="test" value="获取到了"></p>
<button>显示值</button>
</body>

</html>

attr( )

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("#www").attr("href"));
  });
});
</script>
</head>

<body>
<p><a href="https://blog.youkuaiyun.com/weixin_42630877" id="www">W3School.com.cn</a></p>
<button>显示 href 值</button>
</body>

</html>