JQuery每日一练-进步一点再一点

简介: 这是关于jQuery练习的指南,涵盖网站导航、省市区级联、表格操作、键盘事件监听、动画效果及对象概念。通过具体实例与任务,深入讲解了hover事件、html()方法、ajax请求、checkbox用法、keydown()方法及animate()高级用法等。每个练习均提供无JS版本页面下载与在线预览,帮助读者快速掌握jQuery核心技巧。适合初学者实践巩固,提升编程能力。

虽然我很菜鸟,但我还想分享

1.练习一

1.1 练习网站导航相关

jquery01.gif

考察重点

  • hover事件
  • show(); hide() 方法
  • index(); eq(); 方法
  • addClass(); removeClass() 方法
  • siblings() 方法
  • 链式调用

页面除去js均已列出,请在10分钟内有思路,一小时内完后,可参考百度。
点击查看页面 不要F12偷看
点击下载无js的页面 记得修改后缀

2.练习二

2.1 省市区三级联动

任务目标:实现省市区级联及选中地区时将省市区编码和名称拼接展示
用于何处:一般用于级联或联动操作

jquery-02.gif

考察重点

  • html() 方法
  • change事件
  • jquery.ajax 方法
  • empty() 方法
  • append() 方法
  • jquery(".province").val() 获取下拉选中的option的value值
  • jquery(".province").find("option:selected").text() 获取下拉选中的option的文本值
  • 接口文档学习查看

接口地址

http://b2b.haier.com/shop/api/process/app/getAreaInfo

请求方法

POST

参数

参数 注释 是否必填 备注
areaId 地区id 地区id(查词地区下子集),若不填则查询全部省份

点击查看页面 不要F12偷看
点击下载无js的页面 记得修改后缀

3.练习三

3.1 checkbox详细用法

任务目标:实现表格行的增加删除,及checkbox详细用法
用于何处:一般用于表格的变更,如报表处理的复杂操作

3.gif

考察重点

  • is() 方法 - 如jquery(".allCheck").is(":checked") 查看目标元素是否被选中
  • change事件 - jquery(".allCheck").on("change",fn) checkbox切换事件
  • prop() - jquery(".allCheck").prop('checked',true) 设置目标元素被选中
  • remove()方法 - jquery("tr").remove(); 删除目标元素*

ES6知识点

  • 模板字符串

点击查看页面 不要F12偷看
点击下载无js的页面 记得修改后缀

4.练习四

4.1 键盘事件监听用法

任务目标:实现贪吃蛇的基本简单事件
用于何处:一般用于js小游戏,或需要监听键盘事件的页面

4.gif

考察重点

  • keydown()方法 - 如jquery(document).keydown(fn) 监听键盘按下事件
  • event.keyCode - 键盘事件所对应触发的键值 如左箭头 37
  • css() -设置目标元素的css样式
  • parseInt() - 取整数
  • switch case - 语句判断

点击查看页面 不要F12偷看
点击下载无js的页面 记得修改后缀

5.练习五

5.1 jquery动画相关

任务目标:实现图片轮播切换的基本简单事件
用于何处:一般用于轮播图,图片切换等
后续学习:此练习只是简单动画,后续会完善为插件,类似于swiper可动态设置相关参数

5.gif

考察重点

  • animate()方法 - 如$(".xxx").animate({left:30px}); 动画平滑切换
  • setInterval(fn,3000) - 定时器,每隔3000毫秒执行一次,3000ms=3秒
  • jquery(".xxx").trigger("click"); -设置目标元素动态执行click方法
  • +"1" - 快速转number +“1” 就等于 1

BUG提出

  • 在此特别表扬短腿同学提出的bug,加个鸡腿 ?
问题重现

当快速点击时,会出现切换空白情况

5-bug.gif

问题剖析

当animate()使用时,动态获取目标元素的css的最终目的值是需要等到动画过度之后方才是最终所得,如 jquery("bb").animate({left:30px}),当动画运行还没结束时,获取$("bb").css("left") 可能得到的值小于30px

点击查看bug出现页面
点击查看页面 不要F12偷看
点击下载无js的页面 记得修改后缀

6.练习六

6.1 对象概念初识

任务目标:实现跳跳小人的简单游戏
用于何处:一般用于js小游戏,便于学习js对象概念,及jquery动画

jquery-06.gif

考察重点

  • 复习keydown()方法
  • 对象概念学习
  • animate() 高级用法 - $(selector).animate(styles,options)
参数 描述
styles 必需。规定产生动画效果的 CSS 样式和值(同上)
options 可选。规定动画的额外选项 可能的值 ,如下

speed - 设置动画的速度
easing - 规定要使用的 easing 函数
callback - 规定动画完成之后要执行的函数
step - 规定动画的每一步完成之后要执行的函数
queue - 布尔值。指示是否在效果队列中放置动画。如果为 false,则动画将立即开始
specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射,以及它们的对应 easing 函数

  • Math.random() - 取随机数 如取10-20 则 10+Math.random()*10
  • document.createElement("div") - 创建DOM对象
  • div.setAttribute("class", "bar") - 设置元素的class属性
    点击查看页面 再偷看那就只能打死了
    点击下载无js的页面 记得修改后缀

我是JavaDog,谢谢博友耐心看完, 抽空来我狗窝?瞅瞅呗 blog.javadog.net

目录
相关文章
|
人工智能 前端开发 JavaScript
合理使用WebStorm-环境配置篇(下)
合理使用WebStorm-环境配置篇(下)
合理使用WebStorm-环境配置篇(下)
|
JavaScript 前端开发 Web App开发
【网站开发必备】——12款响应式 Lightbox(灯箱)效果插件
  灯箱效果(Lightbox)是网站中最常用的效果之一,用于实现类似模态对话框的效果。网络上各种 Lightbox 插件琳琅满目,随着响应式设计(Respnsive Design)的发展,这一先进理念也被引入了 Lightbox 插件之中。
2697 1
|
存储 安全 测试技术
快速教你如何使用postman工具进行接口测试?(配置全局token、JWT可用)
快速教你如何使用postman工具进行接口测试?(配置全局token、JWT可用)
1107 0
|
10月前
|
人工智能 自然语言处理 语音技术
AI 工具导航网站分享
一个致力于成为您在 AI 世界探索旅程中的可靠伙伴,为您搭建起一座通往便捷与高效的桥梁的网站。
AI 工具导航网站分享
|
12月前
|
JavaScript 前端开发 编译器
吐血整理:纯前端如何实现批量dom转图片,并下载成压缩包
【10月更文挑战第2天】吐血整理:纯前端如何实现批量dom转图片,并下载成压缩包
222 2
|
12月前
|
运维 Cloud Native Java
Java项目部署的发展流程
本文介绍了四种不同的应用部署方式:传统部署、虚拟化部署、容器化部署和云原生部署。每种方式的特点、部署流程及优缺点进行了详细说明。传统部署直接在物理机上运行应用,存在资源利用率低和运维成本高的问题;虚拟化部署通过虚拟机实现资源隔离和复用,但有性能损失和单点故障风险;容器化部署则提供轻量级、可移植的应用环境,具备良好的隔离性和一致性;云原生部署结合了容器化和微服务架构,实现高效运维和灵活扩展。
379 0
Java项目部署的发展流程
|
前端开发 NoSQL Java
极简Markdown程序员简历模板
这是一份简洁明了的Markdown简历模板和在线编辑工具分享,适用于寻找Java工程师、前端工程师或全栈工程师职位的求职者。模板详细列出了个人信息、联系方式、技能清单及丰富的工作经验,适合用于制作专业的求职简历。
364 6
|
数据安全/隐私保护
炫酷的生日快乐网页 【附带源码】
炫酷的生日快乐网页 【附带源码】
349 4
antd如何隐藏Upload组件的删除和预览图标
antd如何隐藏Upload组件的删除和预览图标
716 1
|
JSON Java 数据格式
springboot全局异常实现以及@Valid和@Validated优雅实现入参验证
springboot全局异常实现以及@Valid和@Validated优雅实现入参验证
1317 0