四、jQuery 属性操作、jQuery 文本属性值

最新推荐文章于 2022-12-10 19:06:32 发布

没人回复我哼

最新推荐文章于 2022-12-10 19:06:32 发布

阅读量170

点赞数

文章标签： javascript js

本文链接：https://blog.csdn.net/qq_45645902/article/details/106036054

版权

jQuery 属性操作

jQuery 常用属性操作有三种：prop() / attr() / data()

1、元素固有属性值 prop()

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

语法

获取属性值

  element.prop('属性名')

设置属性值

  element.prop('属性名','属性值')

注释
prop()除了普通属性操作，更适合操作表单属性：disabled / checked / selected等。

2、元素自定义属性值 attr()

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

语法

获取属性值

  element.attr('属性名')  // 类似原生 getAttribute()

设置属性值

  element.attr('属性名','属性值')  // 类似原生 setAttribute()

注释
attr()除了普通属性操作，更适合操作自定义属性。（该方法也可以获取 H5 自定义属性）

3、数据缓存 data()

data()方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。
里面的数据是存放在元素的内存里面。

语法

附加数据

  element.data('属性名')  // 向被选元素附加数据

获取数据

  element.data('属性名','属性值')  // 向被选元素获取数据

注释
同时，还可以读取 HTML5 自定义属性data-index，得到的是数字型。

示例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>

<body>
    <a href="https://www.baidu.com/" title="百度网址">百度一下，你就知道</a>
    <input type="checkbox" name="" id="" checked>
    <div index="1" data-index="2">我是div</div>
    <span>123</span>
    <script>
        $(function () {
            // element.prop("属性名") 
            // 获取元素固有的属性值
            console.log($("a").prop("href"));
            // 设置属性值
            $("a").prop("title", "这就是百度网址");
            $("input").change(function () {
                console.log($(this).prop("checked"));
            });

            // 元素的自定义属性 attr()
            // 获取属性值
            console.log($("div").prop("index"));  // undefined 对于自定义属性不能使用 prop
            console.log($("div").attr("index"));
            console.log($("div").attr("data-index"));
            // 设置属性值
            $("div").attr("index", 4);

            // 数据缓存 data()，里面的数据是存放在元素的内存里面
            $("span").data("uname", "andy");
            console.log($("span").data("uname"));
            // 这个方法获取 data-index，h5自定义属性，第一个不用写data-，而且返回的是数字型
            console.log($("div").data("index"));
        })
    </script>
</body>

</html>

在这里插入图片描述

4、购物车案例模块—全选

jQuery 内容文本值

jQuery 的文本属性值常见操作有三种：html() / text() / val()
分别对应JS中的 innerHTML 、innerText 和 value 属性。
主要针对元素的内容还有表单的值操作

普通元素内容 html() (相当于原生innerHTML)
语法

  html()  // 获取元素的内容
  html('内容')  // 设置元素的内容

示例

<body>
    <div>
        <span>我是内容</span>
    </div>
    <script>
        console.log($("div").html());
        $("div").html("123");
    </script>
</body>

在这里插入图片描述

普通元素文本内容 text() (相当于原生innerText)
语法

  text()  // 获取元素的文本内容
  text('文本内容')  // 设置元素的文本内容

示例

<body>
    <div>
        <span>我是内容</span>
    </div>
    <script>
        console.log($("div").text());
        $("div").text("123");
    </script>
</body>

在这里插入图片描述

表单的值 val() (相当于原生value)
语法

  val()  // 获取表单的值
  val('内容')  // 设置表单的值

示例

<body>
    <input type="text" value="请输入内容">
    <script>
        console.log($("input").val());
        $("input").val("123");
    </script>
</body>

在这里插入图片描述

注释
html() 可识别标签，text() 不识别标签。

2、案例：购物车案例模块—增减商品数量

3、案例：购物车案例模块—修改商品小计

没人回复我哼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
四、jQuery 属性操作、jQuery 文本属性值

目录jQuery 属性操作1、元素固有属性值 prop()2、元素自定义属性值 attr()3、数据缓存 data()4、购物车案例模块—全选jQuery 文本属性值1、jQuery内容文本值2、案例：购物车案例模块-增减商品数量3、案例：购物车案例模块-修改商品小计jQuery 元素操作1、遍历元素2、案例：购物车案例模块-计算总计和总额3、创建、添加、删除1.3.4 案例：购物车案例模块-删除商品模块1.3.5 案例：购物车案例模块-选中商品添加背景1.4. jQuery 尺寸、位置操作1.4.1
复制链接

扫一扫