JQuery每日一练

JQuery每日一练

技术杂谈小彩虹2021-08-27 8:33:34110A+A-

Tips

实践是检验真理的唯一标准

1.练习一

1.1 练习网站导航相关

jquery01.gif
jquery01.gif

考察重点

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

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

2.练习二

2.1 省市区三级联动

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

jquery-02.gif
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
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
4.gif

考察重点

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

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

5.练习五

5.1 jquery动画相关

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

5.gif
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
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
jquery-06.gif

考察重点

  • 复习keydown()方法
  • 对象概念学习
  • animate() 高级用法 - jquery(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的页面 记得修改后缀

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们