jQuery学习之获取和设置内容以及属性

最新推荐文章于 2022-06-01 15:33:11 发布

原创最新推荐文章于 2022-06-01 15:33:11 发布 · 401 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

31 篇文章

订阅专栏

本文介绍使用jQuery库来获取和设置HTML元素的文本内容、HTML内容及表单字段值的方法，同时也展示了如何获取和设置元素属性。通过具体示例说明了text()、html()、val()和attr()等函数的基本用法。

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

<!DOCTYPE html>
<!--
获取内容：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
获取属性：
attr() 方法用于获取属性值
设置内容：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
text()、html() 以及 val()，同样拥有回调函数。回调函数由两个参数：
被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
设置属性：
attr() 方法也用于设置/改变属性值。
attr()，也提供回调函数。回调函数由两个参数：
被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

-->
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery获取内容和属性</title>
    <script src="../res/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            //获取内容
            $("#btn1").click(function(){
                alert("Text: " + $("#test").text());
            });
            $("#btn2").click(function(){
                alert("HTML: " + $("#test").html());
            });
            $("#btn3").click(function(){
                alert("Value: " + $("#test1").val());
            });
            //获取属性
            $("#btn4").click(function(){
                alert($("#w3s").attr("href"));
            });
        });
    </script>
</head>
<body>
<p id="test">这是<b>粗体</b>文本</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示HTML</button>
<br>
<br>
<br>
<p>name:<input type="text" id="test1" value="米老师"></p>
<button id="btn3">显示值</button>
<br>
<br>
<br>
<p><a href="http://www.baidu.com" id="w3s">baidu.com</a></p>
<button id="btn4">显示href值</button>
</body>
</html>