點贊關注養成習慣😎
有需要csdn下載需求的同學,評論微信關注回覆我都可以，免費給大家下載⚽
1.練習一
1.1 練習網站導航相關
考察重點
- hover事件
- show(); hide() 方法
- index(); eq(); 方法
- addClass(); removeClass() 方法
- siblings() 方法
- 鏈式調用
頁面除去js均已列出，請在10分鐘內有思路，一小時內完後，可參考百度。
點擊查看頁面 不要F12偷看
點擊下載無js的頁面 記得修改後綴
2.練習二
2.1 省市區三級聯動
任務目標：實現省市區級聯及選中地區時將省市區編碼和名稱拼接展示
用於何處：一般用於級聯或聯動操作
考察重點
- 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詳細用法
用於何處：一般用於表格的變更，如報表處理的複雜操作
考察重點
- 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小遊戲，或需要監聽鍵盤事件的頁面
考察重點
- keydown()方法 - 如jquery(document).keydown(fn) 監聽鍵盤按下事件
- event.keyCode - 鍵盤事件所對應觸發的鍵值 如左箭頭 37
- css() -設置目標元素的css樣式
- parseInt() - 取整數
- switch case - 語句判斷
點擊查看頁面 不要F12偷看
點擊下載無js的頁面 記得修改後綴
5.練習五
5.1 jquery動畫相關
任務目標：實現圖片輪播切換的基本簡單事件
用於何處：一般用於輪播圖，圖片切換等
後續學習：此練習只是簡單動畫，後續會完善爲插件，類似於swiper可動態設置相關參數
考察重點
- animate()方法 - 如$(".xxx").animate({left:30px}); 動畫平滑切換
- setInterval(fn,3000) - 定時器，每隔3000毫秒執行一次，3000ms=3秒
- jquery(".xxx").trigger(“click”); -設置目標元素動態執行click方法
- +“1” - 快速轉number +“1” 就等於 1
BUG提出
- 在此特別表揚短腿同學提出的bug，加個雞腿 🍗
問題重現
當快速點擊時，會出現切換空白情況
問題剖析
當animate()使用時，動態獲取目標元素的css的最終目的值是需要等到動畫過度之後方纔是最終所得，如 jquery(“bb”).animate({left:30px})，當動畫運行還沒結束時，獲取$(“bb”).css(“left”) 可能得到的值小於30px
點擊查看bug出現頁面
點擊查看頁面 不要F12偷看
點擊下載無js的頁面 記得修改後綴
6.練習六
6.1 對象概念初識
任務目標：實現跳跳小人的簡單遊戲
用於何處：一般用於js小遊戲，便於學習js對象概念，及jquery動畫
考察重點
- 複習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的頁面 記得修改後綴
