4.jQuery对元素和元素的属性值进行获取和设置_jquery获取元素自定义属性和值-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_75166176/article/details/145707451

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="http://www.itheima.com/">
        <p>1</p>
    </a>
    <input type="text" value="qq" myData="自定义数据">
</body>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
    //1.prop(属性名，属性值)的使用
    //获取属性值
    console.log($("a").prop("href")); //http://www.itheima.com/
    console.log($("input").prop("value")); //qq
    //修改属性值
    $("input").prop("value", "修改了数据");
    console.log($("input").prop("value")); //修改了数据


    //2.attr(属性名，属性值)的使用
    //修改自定义属性值
    $("input").attr("myData", "修改了自定义数据");
    //获取自定义属性值
    console.log($("input").attr("myData")); //修改了自定义数据


    //3.数据缓存，将数据存放在元素的内存里
    $("a").data("myName", "Andy");
    console.log($("a").data("myName")); //Andy

    //4.html()
    //修改元素内容
    $("a p").html("修改了");
    //获取元素内容
    console.log($("a").html()); //<p>修改了</p>

    //5.text()
    //修改元素文本内容
    $("a").text("text修改了");
    //获取元素文本内容
    console.log($("a").text()); //text修改了

    //6.val()
    //修改表单元素的值
    $("input").val("val修改了");
    //获取表单元素的值
    console.log($("input").val()); //val修改了
</script>

</html>