jQuery - 捕获内容和属性-蒲公英云

jQuery - 捕获内容和属性

怼烎@ 2023-06-15 09:47 77阅读 0赞

前言：

    jQuery拥有可以操作HTML元素和属性的强大方法

1.用过jQuery来获得内容的三个方法：

text() ：设置或者返回所选元素的文本内容
html(): 设置或返回所选元素的内容（包括HTML标记）

包括HTML标记是 text() 和 html() 两个方法的最大区别

val() ：设置或者返回表单字段的值

案例：

<body>
    <div>
            <span>hahah </span>
    </div>
    <input type="text" value="请输入内容">
    <script>
        //1.获取设置元素内容 html（）
        console.log($("div").html());
        //结果为 <span>hahah </span>
        //设置元素内容
        $("div").html("哈哈");
        //2.获取设置元素文本内容 text()
        console.log($("div").text());
        //结果为 哈哈
        $("div").text("23");
        //3.获取设置表单值
        console.log($("input").val);
        $("input").val("123");
    </script>
</body>

页面中显示的结果：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNjMxMDYz_size_16_color_FFFFFF_t_70

2.通过jQuery来获得元素属性

2.1 设置或获取元素固有属性 prop()方法

所谓元素固有属性就是元素本身自带的属性，比如元素里面的href 比如元素里的type属性

2.1.1 获取属性语法：

prop("属性")

2.1.2 设置属性语法：

prop（”属性”，”属性值”）

案例：

<script>
    $(function(){
    //element.prop("属性名") 获取元素固有的属性值
     console.log($("a").prop("href"));
    //设置属性值
    $("a").prop("title","请问你是谁?");
})
</script>

2.2.设置或获取元素自定义属性值 attr() 方法

用户自己给元素添加的属性，我们称为自定义属性比如给div添加 index=“1” 。

2.2.1获取属性语法：

attr("属性")

2.2.2 设置属性语法：

attr("属性","属性值");

案例：

<div index="1" data-index="2">我是div</div> 
  //元素自定义属性 我们通过 attr()
            console.log($("div").attr("index"));
            $("div").attr("index",4);
            console.log($("div").attr("data-index"));