前端学习第三阶段-第4章 jQuery编程
创始人
2025-06-01 21:38:55
0

4-1 jQuery介绍及常用API导读

  • 01-jQuery入门导读

在这里插入图片描述
在这里插入图片描述

  • 02-JavaScript库

在这里插入图片描述
在这里插入图片描述

  • 03-jQuery概述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 04-jQuery基本使用-入口函数

在这里插入图片描述在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

  • 05-jQuery顶级对象$

在这里插入图片描述

  • 06-DOM对象和jQuery对象

在这里插入图片描述
在这里插入图片描述

  • 07-DOM对象和jQuery对象相互转换

在这里插入图片描述
在这里插入图片描述

  • 08-jQuery常用API导读

在这里插入图片描述

在这里插入图片描述

4-2 jQuery选择器及案例

  • 09-jQuery基本和层级选择器

在这里插入图片描述
在这里插入图片描述

  • 10-jQuery隐式迭代

在这里插入图片描述
在这里插入图片描述

  • 11-jQuery筛选选择器

在这里插入图片描述

  • 12-jQuery筛选方法-选取父子元素

在这里插入图片描述
在这里插入图片描述

  • 13-新浪下拉菜单

在这里插入图片描述

在这里插入图片描述

  • 14-jQuery其他筛选方法
  • 15-jQuery排他思想

在这里插入图片描述

  • 16-淘宝服饰精品案例

在这里插入图片描述
在这里插入图片描述

4-3 jQuery链式编程及样式操作

  • 17-jQuery链式编程(修复)

在这里插入图片描述

  • 18-jQuery修改样式css方法

在这里插入图片描述

  • 19-jQuery修改样式操作类

在这里插入图片描述

  • 20-tab栏切换案例

在这里插入图片描述
在这里插入图片描述

  • 21-jQuery类操作和className区别

在这里插入图片描述

4-4 jQuery动画及王者荣耀手风琴案例

  • 22-jQuery显示与隐藏效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 23-jQuery滑动效果以及事件切换

在这里插入图片描述

  • 24-jQuery停止动画排队stop

在这里插入图片描述

  • 25-jQuery淡入淡出以及突出显示案例

在这里插入图片描述
在这里插入图片描述

  • 26-jQuery自定义动画animate方法

在这里插入图片描述

  • 27-王者荣耀手风琴案例布局分析

在这里插入图片描述

  • 28-王者荣耀手风琴案例制作

在这里插入图片描述

4-5 jQuery实现购物车案例

  • 01-jQuery属性操作

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 02-购物车模块-全选(上)

在这里插入图片描述

  • 03-购物车模块-全选(下)

在这里插入图片描述

  • 04-jQuery内容文本值

在这里插入图片描述

  • 05-购物车模块-增减商品数量

在这里插入图片描述

  • 06-购物车模块-修改商品小计(上)

在这里插入图片描述

  • 07-购物车模块-修改商品小计(中)

在这里插入图片描述

  • 08-购物车模块-修改商品小计(下)

在这里插入图片描述

  • 09-jQuery遍历对象each方法

在这里插入图片描述

  • 10-jQuery遍历数据$.each
  • 11-购物车模块-计算总件数和总额

在这里插入图片描述

  • 12-创建、添加、删除元素

在这里插入图片描述

  • 13-购物车模块-清理购物车
  • 14-购物车模块-选中商品添加背景颜色

在这里插入图片描述

  • 15-jQuery尺寸方法

在这里插入图片描述

  • 16-jQuery位置方法

在这里插入图片描述
在这里插入图片描述

  • 17-jQuery被卷去头部方法

在这里插入图片描述

  • 18-带有动画的返回顶部

在这里插入图片描述

4-6 jQuery实现电梯导航案例

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

在这里插入图片描述

  • 20-电梯导航案例-点击滚动目标位置
  • 21-电梯导航案例-点击当前li添加current类
  • 22-电梯导航案例-滑动页面电梯导航自动添加current类
  • 23-电梯导航案例节流阀(互斥锁)(修复)

4-7 jQuery事件绑定和解绑

  • 01-jQuery事件导读

在这里插入图片描述
在这里插入图片描述

  • 02-事件处理on绑定一个或者多个事件

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

  • 03-on实现事件委派和给动态元素绑定事件

在这里插入图片描述

  • 04-微博发布案例

在这里插入图片描述

  • 05-off解绑事件

在这里插入图片描述

  • 06-jQuery自动触发事件

在这里插入图片描述

  • 07-jQuery事件对象

在这里插入图片描述

  • 08-jQuery其他方法导读

在这里插入图片描述
在这里插入图片描述

  • 09-jQuery对象拷贝extend

在这里插入图片描述

在这里插入图片描述

4-8 jQuery插件的使用

  • 10-jQuery多库共存

在这里插入图片描述

  • 11-瀑布流插件使用

在这里插入图片描述

  • 12-图片懒加载技术

在这里插入图片描述

  • 13-全屏滚动插件使用

在这里插入图片描述
https://github.com/alvarotrigo/fullPage.js

  • 14-bootstrap组件
  • 15-bootstrapJS插件
  • 16-阿里百秀

4-9 jQuery实现todolist案例

  • 17-todolist布局功能需求分析

在这里插入图片描述
在这里插入图片描述

  • 18-todolist核心思路以及本地存储格式

在这里插入图片描述

  • 19-todolist按下回车读取本地存储数据

在这里插入图片描述

  • 20-todolist按下回车保存最新数据到本地存储
  • 21-todolist本地存储数据渲染加载到页面中

在这里插入图片描述

  • 22-todolist点击删除按钮获取当前索引号

在这里插入图片描述

  • 23-todolist点击删除按钮完成删除操作
  • 24-点击复选框修改相应数据done属性

在这里插入图片描述

  • 25-todolist正在进行和已经完成事项制作

在这里插入图片描述

  • 26-todolist统计正在进行和已经完成事项个数

在这里插入图片描述

相关内容

热门资讯

智谋的成语 关于智谋的成语  导读:智谋是一种能够指导行为的有效思维方式;是人们为了取得利益的方法论,主要包括:...
“天作之合”的意思 “天作之合”的意思 成语拼音: [tiān zuò zhī hé] ...
成语见缝插针是贬义词吗 成语见缝插针是贬义词吗  见缝插针是我国的一个成语,是褒义词,而不是贬义词。相关的信息内容,我们来看...
“待价而沽”的意思 “待价而沽”的意思 成语拼音: [dài jià ér gū] ...
“力不胜任”的意思 “力不胜任”的意思 成语拼音: [lì bù shèng rèn] ...
“摸不着边”的意思 “摸不着边”的意思 成语拼音: [mō bù zháo biān] ...
“春蚕到死丝方尽”的意思 “春蚕到死丝方尽”的意思 成语拼音: [chūn cán dào sǐ sī fāng ...
鸦雀无声的成语解释 鸦雀无声的成语解释  【成语】:鸦雀无声  【拼音】:yā què wú shēng  【简拼】:y...
形容很舒服的成语 形容很舒服的成语  成语是汉语词汇中定型的词。成语,众人皆说,成之于语,故成语。成语多为四字,亦有三...
摘抄形容心境的成语 摘抄形容心境的成语  1、抑郁寡欢:由于心情不舒畅而很少高兴的时候。  2、惊魂未定:指受惊后心情还...
包含不古的成语 关于包含不古的成语  [不古不今] 指事物不正常,古代现代都不曾有过。原讥讽人学无所得却故作诡异。后...
如胶似漆成语 如胶似漆成语  成语是中国传统文化的一大特色,有固定的结构形式和固定的说法,表示一定的`意义,在语句...
“锥刀之末”的意思 “锥刀之末”的意思 成语拼音: [zhuī dāo zhī mò] ...
“出神入化”的意思 “出神入化”的意思 成语拼音: [chū shén rù huà] ...
形容诗词的成语拼音与相应解释 形容诗词的成语拼音与相应解释  【提要】本篇《形容诗词的成语》由应届毕业生小编特别为需要成语古诗古文...
形容哭的的成语 形容哭的的成语  哭,是一种心情的状态,也是一种特殊的感受,那么有哪些成语是形容哭的'呢?下面小编就...
数字成语接龙 数字成语接龙精选  一尘不染 二龙戏珠 三生有幸 四分五裂 五光十色 六神无主 七嘴八舌 八面威风 ...
“铁钉铁铆”的意思 “铁钉铁铆”的意思 成语拼音: [tiě dīng tiě mǎo] ...
“情之所钟”的意思 “情之所钟”的意思 成语拼音: [qíng zhī suǒ zhōng] ...
“谦受益,满招损”的意思 “谦受益,满招损”的意思 成语拼音: [qiān shòu yì,mǎn zhāo sǔ...