看jQuery的這幾天

如今在作SPA時，有不少很是好用並且流行的前端框架，好比Vue，React，Angular等，jQuery彷佛要逐漸退出前端的舞臺了。不得不說，'write less，do more' 這句話吸引了我，仍是決定花一些時間來看jQuery。

主要是三個過程，過程當中記錄了不少細節內容以及想法，可是比較亂，因此寫這篇梳理一下，怕忘了。

• 先看了一些簡單的例子，http://biaoyansu.com/16.x
• 而後系統的瞭解了jQuery經常使用的內容，https://github.com/smyhvae/Web/tree/master/05-jQuery
• 最後是官方文檔和小項目，http://hemin.cn/jq/

 

以點來寫，篇幅可能會比較長。

1.jQuery和Js的加載模式不一樣，

• Js的入口函數是在全部的文件資源加載完成後，才執行。這些文件資源包括：頁面文檔、外部的js文件、外部的css文件、圖片等。

• jQuery的入口函數，是在文檔加載完成後，就執行。文檔加載完成指的是：DOM樹加載完成後，就能夠操做DOM了，不用等到全部的外部資源都加載完成

2.入口函數的不一樣寫法和$符號的衝突解決

3.jQuery對象，一個僞數組，包含Js中的DOM對象，能夠經過each方法遍歷，下圖是打印的一個jQuery對象

 

4.選擇器和.css()設置樣式，其中參數能夠傳一個對象

5.操做樣式，

• 實現公告欄的收起、展開， 注意判斷條件：if ( board.is (':visible' ))  
• 閃動廣告牌的製做，設置要改變的樣式，經過hasClass判斷，addClass和removeClass切換樣式
• 選擇器的細節，子代和後代，注意對選擇權和篩選區分一下，文檔中是兩個模塊

6.操做DOM，

• 下拉菜單，stop(false，false)的使用
• 選擇水果，從左欄移動到右欄（option：selected）
• 教務系統側欄，實現思路，顯示一個，隱藏其他同等級的元素（切換顯示的這種要考慮到用<ul>來作、相似的還有選項卡）
• 文檔中過濾、查找中的各類選擇方法（parent、siblings、eq）多嘗試
• $(this)的理解，誰觸發事件，this就是誰

7.添加事件，

• 事件有兩種添加方法，直接寫事件名更快捷，也易於拼寫檢查，on的方法能夠用更多默認以外的事件
• 阻止默認事件（表單提交時的默認行爲）和事件冒泡（由裏向外傳遞，用return false來禁止）
• 事件的命名空間 （click.z \ click.x \ click.c 只區分添加者，對顯示沒有影響）
• 事件委託，可對動態生成的要素進行選擇和操做
• 解綁事件 off()，可傳入參數個數 0、一、2

8.ajax

• 五步發送一個ajax請求、注意舊版IE的兼容（ie默認請求同一url會返回同一結果，在url後加time或者隨機數來保證是不一樣請求）
• jQuery和原生Js實現ajax的區別，根據jQuery的效果對Js進行改進
• 根據Github用戶名請求介紹信息、
• Chrome開發者工具Network的使用，查看請求，禁用緩存，提取圖片，預覽數據（經過左下角{ }進行格式化）
• 微博模擬項目，建立一條微博的方法和把微博添加到頁面兩者分離，經過參數傳入輸入內容，調用函數生成時間
• opacity和rgba的區別，後者不會對子代添加透明效果

 

9.快捷鍵： 快速註釋   /   xx.log   /   w0 h0   /  取色器  /  按shift右鍵可在此文件夾下打開CMD，Git Bash也同樣

10.一些想法：

• 先各部分主要內容，再完善各部分次要內容
• 寫一個元素，佈局一次
• 思考細節，逐步完善
• 敲命令和點鼠標一回事

11.最後，有不懂的就查文檔吧，也要注意一下一部分已經在新版中棄用的方法 

一年過去了，感受什麼也看了，惋惜什麼也忘了。看了一篇之前收藏的利用chrome調試的文章，發現裏面的方法技巧我都已經在平時的練習中基本掌握了，這總算是一件欣慰的事了。