黑马程序员pink老师前端入门教程，零基础必看的JavaScript基础语法视频教程（jQuery2）

透明质酸钠

已于 2022-02-18 04:22:39 修改

阅读量8k

点赞数 3

CC 4.0 BY-SA版权

文章标签： javascript

于 2022-02-16 03:31:47 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/m0_51448653/article/details/122955501

这篇博客详细介绍了jQuery在属性、内容、元素操作等方面的应用，包括prop()、attr()、data()方法的使用，以及在购物车案例中的实践，如商品数量增减、总价计算和选中效果。同时，涉及到了元素遍历、动态创建与删除、尺寸位置操作，并展示了带有动画的返回顶部功能及电梯导航的实现，涵盖了页面交互和用户体验优化。

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

jQuery常用API

jQuery属性操作

设置或获取元素固有属性值prop（）

在这里插入图片描述

设置或获取元素自定义属性值attr（）

在这里插入图片描述

数据缓存data（）

在这里插入图片描述

在这里插入图片描述

购物车案例模块-全选

在这里插入图片描述

jQuery内容文本值

获取设置普通元素内容html（）

获取设置普通元素文本内容text（）

在这里插入图片描述

获取设置表单值val（）

在这里插入图片描述

在这里插入图片描述

购物车案例模块-增减商品数量

在这里插入图片描述

在这里插入图片描述

购物车案例模块-修改商品小记上

在这里插入图片描述

在这里插入图片描述

购物车案例模块-修改商品小记中

在这里插入图片描述

购物车案例模块-修改商品小记下

在这里插入图片描述

jQuery元素操作

遍历对象each方法

在这里插入图片描述

遍历数据$.each

在这里插入图片描述

购物车案例模块-计算总件数和金额

在这里插入图片描述

上面总计做好了，下面做总额

在这里插入图片描述

创建、添加、删除元素

在这里插入图片描述

在这里插入图片描述

购物车案例模块-删除商品模块

在这里插入图片描述

在这里插入图片描述

购物车案例模块-选中商品添加背景

在这里插入图片描述

jQuery尺寸、位置操作

jQeury尺寸

在这里插入图片描述

jQeury位置

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

带有动画的返回顶部功能

在这里插入图片描述

电梯导航案例-显示隐藏电梯导航

在这里插入图片描述

在这里插入图片描述

电梯导航案例-点击滚动目标位置

在这里插入图片描述

但还有个bug，那就是当在某处停留时，重新刷新页面这个电梯导航栏就不见了

在这里插入图片描述

电梯导航案例-点击当前li添加current类

在这里插入图片描述

电梯导航案例-滑动页面电梯导航栏自动添加current类

在这里插入图片描述

电梯导航案例-节流阀（互斥锁）

在这里插入图片描述

在这里插入图片描述

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。