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

jQuery常用API

jQuery属性操作

设置或获取元素固有属性值prop()

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第1张图片
黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第2张图片

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

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第3张图片
黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第4张图片

数据缓存data()

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第5张图片

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第6张图片

购物车案例模块-全选

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第7张图片
黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第8张图片
黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第9张图片
黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第10张图片

jQuery内容文本值

获取设置普通元素内容html()

获取设置普通元素文本内容text()

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第11张图片
黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第12张图片

获取设置表单值val()

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第13张图片

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第14张图片

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

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第15张图片

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第16张图片
黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第17张图片

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

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第18张图片

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第19张图片
黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第20张图片
黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第21张图片

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

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第22张图片
在这里插入图片描述
黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第23张图片
在这里插入图片描述

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

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第24张图片
黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第25张图片

jQuery元素操作

遍历对象each方法

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第26张图片
黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第27张图片
黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第28张图片

遍历数据$.each

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第29张图片
黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第30张图片
黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第31张图片

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

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第32张图片
黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第33张图片
黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第34张图片

  • 上面 总计 做好了,下面做 总额

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第35张图片

创建、添加、删除元素

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第36张图片
黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第37张图片
黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第38张图片

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第39张图片
黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第40张图片

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

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第41张图片

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第42张图片

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

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第43张图片
黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第44张图片
黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第45张图片

jQuery尺寸、位置操作

jQeury尺寸

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第46张图片
黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第47张图片

jQeury位置

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第48张图片
黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第49张图片

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第50张图片
黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第51张图片

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第52张图片
黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第53张图片

带有动画的返回顶部功能

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第54张图片
黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第55张图片

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

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第56张图片

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第57张图片

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

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第58张图片
黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第59张图片

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

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第60张图片

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

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第61张图片
黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第62张图片

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

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第63张图片
黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第64张图片
黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第65张图片

电梯导航案例-节流阀(互斥锁)

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第66张图片
黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第67张图片

黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(jQuery2)_第68张图片

你可能感兴趣的:(javascript)