JQuery每日一练

Tips

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

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事件
• ajax 方法
• empty() 方法
• append() 方法
• (".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() 方法 - 如(".allCheck").on("change",fn) checkbox切换事件
• prop() - ("tr").remove(); 删除目标元素*

ES6知识点

• 模板字符串``

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

4.练习四

4.1 键盘事件监听用法

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

4.gif

考察重点

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

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