jquery实现购物车案例模块全选

最新推荐文章于 2023-04-27 16:59:27 发布

㼛思雨

最新推荐文章于 2023-04-27 16:59:27 发布

阅读量2.6k

点赞数 9

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_45147894/article/details/109220729

版权

该博客详细介绍了如何使用jQuery进行属性操作、文本属性值处理和元素操作，包括prop()、attr()、data()、html()、text()、val()等方法的使用，并通过一个购物车全选的案例，演示了如何利用jQuery实现全选功能，重点关注了复选框状态的同步。

摘要由CSDN通过智能技术生成

文章目录

一、jQuery属性操作:
二、jQuery 文本属性值:
- 1. jQuery内容文本值
- - 1.1 语法:
  - 1.2 演示代码:
三、jQuery元素操作:
四、案例: 购物车案例模块-全选:

一、jQuery属性操作:

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

1. 元素固有属性prop():

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

获取属性语法:

prop("属性名");

设置属性语法:

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

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

2. 元素自定义属性 attr()

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

attr("属性名");

设置属性语法:

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

该方法也可以获取H5自定义属性;
注意: attr() 除了普通属性操作, 更适合操作自定义属性. (该方法也可以获取 H5 自定义属性)

3. 数据缓存 data():

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

data('name', "value");	// 向被选中元素附加数据

获取数据语法

data('name');	// 向被选元素获取数据

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

4. 演示代码:

<body>
    <a href="http://www.baidu.com" title="都挺好">都挺好</a>
    <input type="checkbox" name="" id="" checked>
    <div index="1" data-index="2">我是div</div>
    <span>123</span>
    <script>
        $(function() {
            //1. element.prop("属性名") 获取元素固有的属性值
            console.log($("a").prop("href"));
            $("a").prop("title", "我们都挺好");
            $("input").change(function() {
                console.log($(this).prop("checked"));
            });
            // console.log($("div").prop("index"));
            // 2. 元素的自定义属性 我们通过 attr()
            console.log($("div").attr("index"));
            $("div").attr("index", 4);
            console.log($("div").attr("data-index"));
            // 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面
            $("span").data("uname", "andy");
            console.log($("span").data("uname"));
            // 这个方法获取data-index h5自定义属性 第一个 不用写data-  而且返回的是数字型
            console.log($("div").data("index"));
        })
    </script>
</body>

<body>
    <a href="http://www.baidu.com" title="都挺好">都挺好</a>
    <input type="checkbox" name="" id="" checked>
    <div index="1" data-index="2">我是div</div>
    <span>123</span>
    <script>
        $(function() {
            //1. element.prop("属性名") 获取元素固有的属性值
            console.log($("a").prop("href"));
            $("a").prop("title", "我们都挺好");
            $("input").change(function() {
                console.log($(this).prop("checked"));
            });
            // console.log($("div").prop("index"));
            // 2. 元素的自定义属性 我们通过 attr()
            console.log($("div").attr("index"));
            $("div").attr("index", 4);
            console.log($("div").attr("data-index"));
            // 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面
            $("span").data("uname", "andy");
            console.log($("span").data("uname"));
            // 这个方法获取data-index h5自定义属性 第一个 不用写data-  而且返回的是数字型
            console.log($("div").data("index"));
        })
    </script>
</body>

二、jQuery 文本属性值:

jQuery的文本属性值常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性

1. jQuery内容文本值

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

1.1 语法:

普通元素内容html(): 相当于原生的innerHTML

html(); // 获取元素内容
html("内容");	// 设置元素内容

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

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

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

val(); // 获取表单的数据
val("值"); // 设置表单元素的值

1.2 演示代码:

<body>
    <div>
        <span>我是内容</span>
    </div>
    <input type="text" value="请输入内容">
    <script>
        // 1. 获取设置元素内容 html()
        console.log($("div").html());
        // $("div").html("123");