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

迈不过友情╰ 2024-05-11 09:02 142阅读 0赞

![在这里插入图片描述][0427352d7ba2495b8db394506783797f.png]

> 点赞关注养成习惯?  
> 有需要csdn下载需求的同学,评论微信关注回复我都可以，**免费给大家下载**⚽

### 1.练习一 ###

#### 1.1 练习网站导航相关 ####

![在这里插入图片描述][4a4bce9084294d30aa736fcefab65196.gif]

##### 考察重点 #####

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

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

### 2.练习二 ###

#### 2.1 省市区三级联动 ####

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

![在这里插入图片描述][695a91ceb14541768c4871bf98c939ff.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

##### 参数 #####

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>注释</th> 
   <th>是否必填</th> 
   <th>备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>areaId</td> 
   <td>地区id</td> 
   <td>否</td> 
   <td>地区id(查词地区下子集),若不填则查询全部省份</td> 
  </tr> 
 </tbody> 
</table>

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

### 3.练习三 ###

#### 3.1 checkbox详细用法 ####

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

![在这里插入图片描述][8d455640c50b4e22a6784693c1bbc448.gif]

##### 考察重点 #####

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

**ES6知识点**

*  模板字符串 ``

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

### 4.练习四 ###

#### 4.1 键盘事件监听用法 ####

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

![在这里插入图片描述][5d713a72f9f44c19872a1d82603aba8c.gif]

##### 考察重点 #####

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

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

### 5.练习五 ###

#### 5.1 jquery动画相关 ####

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

![在这里插入图片描述][ede2e49151454168b23b93539773debf.gif]

##### 考察重点 #####

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

##### BUG提出 #####

*  在此特别表扬短腿同学提出的bug，加个鸡腿 [?][Link 5]

###### 问题重现 ######

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

![在这里插入图片描述][e004e9e4bd834f6abba5018d7b2d85a7.gif]

###### 问题剖析 ######

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

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

### 6.练习六 ###

#### 6.1 对象概念初识 ####

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

![在这里插入图片描述][99fb5a9f0f9148988eced5cace71d463.gif]

##### 考察重点 #####

*  复习keydown()方法
 *  对象概念学习
 *  animate() 高级用法 - $(selector).animate(styles,options)

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>styles</td> 
   <td>必需。规定产生动画效果的 CSS 样式和值（同上）</td> 
  </tr> 
  <tr> 
   <td>options</td> 
   <td>可选。规定动画的额外选项 可能的值 ,如下</td> 
  </tr> 
  <tr> 
   <td>speed - 设置动画的速度</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>easing - 规定要使用的 easing 函数</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>callback - 规定动画完成之后要执行的函数</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>step - 规定动画的每一步完成之后要执行的函数</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

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

![在这里插入图片描述][d958b9822bd047c4996d4697c528dd46.gif]

[0427352d7ba2495b8db394506783797f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/f82b46a07dcd4453a7d49862c94cde8c.png
[4a4bce9084294d30aa736fcefab65196.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/ef35ac6569a740148a5e7e52d72204bb.gif
[Link 1]: http://download.javadog.net/html/jquery/jquery-01.html
[js]: http://download.javadog.net/html/jquery/jquery-01.md
[695a91ceb14541768c4871bf98c939ff.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/efca9365052a48bc9629dab51334d764.gif
[Link 2]: http://download.javadog.net/html/jquery/jquery-02.html
[js 1]: http://download.javadog.net/html/jquery/jquery-02.md
[8d455640c50b4e22a6784693c1bbc448.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/0a95faa85b49463db437a02e7262a2dc.gif
[Link 3]: http://download.javadog.net/html/jquery/jquery-03.html
[js 2]: http://download.javadog.net/html/jquery/jquery-03.md
[5d713a72f9f44c19872a1d82603aba8c.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/7f9aa1c3b34c4a63aae117638a281721.gif
[Link 4]: http://download.javadog.net/html/jquery/jquery-04.html
[js 3]: http://download.javadog.net/html/jquery/jquery-04.md
[ede2e49151454168b23b93539773debf.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/9e5843e3a78545cca0b629ff442765a4.gif
[Link 5]: https://emojipedia.org/poultry-leg/
[e004e9e4bd834f6abba5018d7b2d85a7.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/5332ac3ddfd7498c830d7bcfc73deadf.gif
[bug]: http://download.javadog.net/html/jquery/jquery-05-bug.html
[Link 6]: http://download.javadog.net/html/jquery/jquery-05.html
[js 4]: http://download.javadog.net/html/jquery/jquery-05.md
[99fb5a9f0f9148988eced5cace71d463.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/4576c378096642228dec063ee1fc4834.gif
[Link 7]: http://download.javadog.net/html/jquery/jquery-06.html
[js 5]: http://download.javadog.net/html/jquery/jquery-06.md
[d958b9822bd047c4996d4697c528dd46.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/11/d0dd25a75cbb45c5a50203fdb88298fe.gif