jquery 備忘清單-1 · 地表最強JS文檔

[TOC] # 為什么要做備忘清單 1. 最近經常忘事兒? 做個備忘清單吧, 這樣你就可以忘得心安理得了... 2. 經驗, 唯項目實戰可得... 通過做項目, 把零碎的知識點整合起來 3. 項目就是門面, 是經驗最好的證明 # 最終結果(1.0) 一開始, 什么都沒有 ![1544939816596](https://box.kancloud.cn/d28689ab960b181376cfb1d7102c1103_665x142.png) 輸入以后, 按回車, 或者點擊按鈕, 就可以看到添加后的清單 ![1544939954147](https://box.kancloud.cn/05fce2f16668502bf570c0ef478391d5_647x263.png) 新增的清單會放在最上面 ![1544940007373](https://box.kancloud.cn/42bec48534676d0b1a94a803204b83ae_703x332.png) 這是 1.0 版本, 后續會增加`編輯`,`刪除`,`完成`等功能 # 資源準備 1. jquery 2. 阿里云矢量圖標 # 搭建項目(文件夾 todo) 兩個文件夾加一個文件 1. `css`文件夾 1. `js`文件夾 1. `index.html`文件 ![1544940550978](https://box.kancloud.cn/24afb6a7127ece85e5d36d02e66e28dc_199x152.png) # 搭建 html 結構(index.html) ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>備忘清單</title> </head> <body></body> </html> ``` 注意: 1. `lang`屬性要寫成`zh`, 不然 chrome 會總是問你, 要不要翻譯 2. 把`tittle` 改成`備忘清單` 因為我們是偉大的前端工程師, 恪守`結構, 樣式, 行為三者分離`的金科玉律, 所以我們需要單獨的新建 css 文件和 js 文件既然我們已經有了`index.html`了, 那么現在就可以愉快的引入 css 和自定義的 js 了 ```html <link rel="stylesheet" href="css/style.css" /> <script src="js/index.js"></script> ``` 現在, 我們就可以修改 html 的結構了, 先看看最終效果圖... ![1544940670798](https://box.kancloud.cn/fb151682a550f150e1c454cf0d5378f0_653x313.png) 看來我們需要一個`h1`標題, 一個`input`框來輸入內容, 一個`button`來添加備忘還需要一些`復選框`, 和`div`套`div`的內容展示, 當然還有后續會用到的兩個圖標... 多說無益, 擼起來!!! 先來一個總的容器(div), class 為`container` ```html <div class="container"></div> ``` 然后`container`里有一個標題... 我們就叫他`myTitle`吧 ```html <body> <div class="container"><h1 class="myTitle">我的備忘清單</h1></div> </body> ``` 標題下面是一個`input`框和一個藍色的`button`... 我們用一個 class 為`add-task`的`div`把他們包起來 `emmet`快捷鍵 `.add-task>input[placeholder=寫下你的備忘吧...][name=content]+button{添加備忘}` ```html <div class="container"> <h1 class="myTitle">我的備忘清單</h1> <div class="add-task"> <input type="text" placeholder="寫下你的備忘吧..." name="content" /> <button>添加備忘</button> </div> </div> ``` 等等... `placeholder`屬性是個什么鬼? > placeholder, HTML 5 <input> 屬性,placeholder 屬性提供可描述輸入字段預期值的提示信息（hint）。該提示會在輸入字段為空時顯示，并會在字段獲得焦點時消失。看個例子 ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> body { text-align: center; } input { margin-top: 50px; width: 50%; height: 25px; border-radius: 10px; outline: none; } </style> </head> <body> <input type="text" placeholder="內容為空,自動顯示, 輸入內容則消失..." /> </body> </html> ``` 撤回來, 接著說... 下面是清單的列表 ![1544942731021](https://box.kancloud.cn/375d83dd5307eed0cb748076d65a6c6c_689x325.png) 我們用 div 套 div class`task-list`套 class`task-item` ```html <div class="task-list"><div class="task-item"></div></div> ``` `task-item`下面是 4 個`span` ![1544943333146](https://box.kancloud.cn/8cb1b76fa551ee2d0837574ced213752_666x64.png) 分別是, 一個`checkbox`, 一個文本, 兩個圖標 ```html <div class="task-item"> <span><input type="checkbox" /></span> <span class="task-content">item content 1</span> <span class="iconfont-span"></span> <span class="iconfont-span"></span> </div> ``` 說到這, 我們需要兩個圖標, 一個是編輯, 一個是刪除去阿里圖標庫, 歡樂的購物吧, `let's go shopping!!!` [阿里巴巴矢量圖標庫](https://www.iconfont.cn/) 阿里巴巴推薦使用圖標的三種方式 1. font-class ![1544943981442](https://box.kancloud.cn/fe4cd6d563dbcb7354351c2c75b184a4_327x250.png) 第一步：引入項目下面生成的 fontclass 代碼： ```js <link rel="stylesheet" type="text/css" href="./iconfont.css"> ``` 第二步：挑選相應圖標并獲取類名，應用于頁面： ```css <i class="iconfont icon-xxx"></i> ``` 2. symbol ![1544944740635](https://box.kancloud.cn/b47b0a72143dbb7b8c191242bca8075d_370x215.png) 第一步：引入項目下面生成的 symbol 代碼： ```js <script src="./iconfont.js" /> ``` 第二步：加入通用 css 代碼（引入一次就行）： ```js <style type="text/css"> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style> ``` 第三步：挑選相應圖標并獲取類名，應用于頁面： ```js <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx" /> </svg> ``` 3. unicode ![1544944890413](https://box.kancloud.cn/61004abb3260d0f8c37a78fc0ccbc8dc_323x176.png) 第一步：拷貝項目下面生成的 font-face ```js @font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg'); } ``` 第二步：定義使用 iconfont 的樣式 ```js .iconfont{ font-family:"iconfont" !important; font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; } ``` 第三步：挑選相應圖標并獲取字體編碼，應用于頁面 ```js <i class="iconfont">3</i> ``` 我們選擇第一種方案, 只需要簡單的幾步 1. 拷貝資源(`iconfont.css`) ![1544945193291](https://box.kancloud.cn/e90dc715e921b61e15d2cca2664c6ba2_200x165.png) 2. 引入 css `<link rel="stylesheet" href="css/iconfont.css">` 3. 寫入 html 代碼 ```html <div class="task-list"> <div class="task-item"> <span><input type="checkbox" /></span> <span class="task-content">item content 1</span> <span class="iconfont-span"> <i class="iconfont icon-delete"></i> </span> <span class="iconfont-span"> <i class="iconfont icon-edit"></i> </span> </div> </div> ``` 現在完整版的 html 是這樣的... ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="css/iconfont.css" /> <script src="js/index.js"></script> <title>備忘清單</title> </head> <body> <div class="container"> <h1 class="myTitle">我的備忘清單</h1> <div class="add-task"> <input type="text" placeholder="寫下你的備忘吧..." name="content" /> <button>添加備忘</button> </div> <div class="task-list"> <div class="task-item"> <span><input type="checkbox" /></span> <span class="task-content">item content 1</span> <span class="iconfont-span"> <i class="iconfont icon-del"></i> </span> <span class="iconfont-span"> <i class="iconfont icon-edit"></i> </span> </div> </div> </div> </body> </html> ``` 效果這樣... ![1544945303532](https://box.kancloud.cn/344e884efc8115eddcd531a2eeaf7c4b_282x133.png) 嗯... 好丑... 丑就對了, 不然要 css 干什么? 最后, 注釋是個好習慣加完注釋的樣子... ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="css/iconfont.css" /> <script src="js/index.js"></script> <title>備忘清單</title> </head> <body>  <div class="container"> <h1 class="myTitle">我的備忘清單</h1>  <div class="add-task"> <input type="text" placeholder="寫下你的備忘吧..." name="content" /> <button>添加備忘</button> </div>   <div class="task-list"> <div class="task-item"> <span><input type="checkbox" /></span> <span class="task-content">item content 1</span> <span class="iconfont-span"> <i class="iconfont icon-del"></i> </span> <span class="iconfont-span"> <i class="iconfont icon-edit"></i> </span> </div> </div>  </div>  </body> </html> ``` # css 布局再看一眼最終效果... ![1544940670798](https://box.kancloud.cn/fb151682a550f150e1c454cf0d5378f0_653x313.png) 首先, 干掉默認樣式 ```css * { margin: 0; padding: 0; } ``` 給個背景需要用到`picpick`的取色器 ```css body { background: #00334b; color: #fff; } ``` 看下效果... ![1544945900678](https://box.kancloud.cn/efab9753b1034fcac54854a8cc74e873_278x109.png) 我們把標題居中吧... ```css h1 { text-align: center; } ``` ![1544945945711](https://box.kancloud.cn/b8557f99b7dedb14b3556892c71c08ff_1080x102.png) 讓我們把總容器也居中吧, 不過先多加幾個內容吧 ```html <div class="task-list"> <div class="task-item"> <span><input type="checkbox" /></span> <span class="task-content">item content 1</span> <span class="iconfont-span"><i class="iconfont icon-del"></i></span> <span class="iconfont-span"><i class="iconfont icon-edit"></i></span> </div> <div class="task-item"> <span><input type="checkbox" /></span> <span class="task-content">item content 1</span> <span class="iconfont-span"><i class="iconfont icon-del"></i></span> <span class="iconfont-span"><i class="iconfont icon-edit"></i></span> </div> <div class="task-item"> <span><input type="checkbox" /></span> <span class="task-content">item content 1</span> <span class="iconfont-span"><i class="iconfont icon-del"></i></span> <span class="iconfont-span"><i class="iconfont icon-edit"></i></span> </div> <div class="task-item"> <span><input type="checkbox" /></span> <span class="task-content">item content 1</span> <span class="iconfont-span"><i class="iconfont icon-del"></i></span> <span class="iconfont-span"><i class="iconfont icon-edit"></i></span> </div> <div class="task-item"> <span><input type="checkbox" /></span> <span class="task-content">item content 1</span> <span class="iconfont-span"><i class="iconfont icon-del"></i></span> <span class="iconfont-span"><i class="iconfont icon-edit"></i></span> </div> </div> ``` ![1544946158333](https://box.kancloud.cn/cfaa05ca8c9d3df5590e07bae2d9598d_1080x200.png) 然后, 我們來設置居中 ```css .container { max-width: 600px; margin: 0 auto; background: red; } ``` ![1544946325556](https://box.kancloud.cn/380f40c66bb3cb7b7b962937e534ae3e_1080x191.png) `.task-item` 實在是太丑了, 需要美化一下了... ```css .task-item { background: #fff; color: #333; } ``` ![1544946596637](https://box.kancloud.cn/2eb915c65b714cd68b40deb611eb180f_1080x195.png) 從全紅, 變成了全白... 還得改 ```css .task-item { background: #fff; color: #333; margin-bottom: 2px; cursor: pointer; } ``` 增加每個 item 的縫隙, 并且增加小手 ![1544946726991](https://box.kancloud.cn/17bd011e1c8224fc1eabf634dc028c75_1080x196.png) 把紅色背景干掉吧... ```css .container { max-width: 600px; margin: 0 auto; /* background: red; */ } ``` ![1544946787334](https://box.kancloud.cn/c563fc8253971e7b101f8b069ac48075_1080x206.png) 鼠標經過 item 的時候, 應該暗一點... ```css .task-item:hover { background: #ddd; } ``` ![1544946912902](https://box.kancloud.cn/fb747ff96095c5c253ec7554b6c54773_1080x206.png) 嗯... item 應該更高一點, 順便加一個圓角吧... ```css .task-item { background: #fff; color: #333; margin-bottom: 2px; cursor: pointer; padding: 10px; border-radius: 3px; } ``` ![1544947103402](https://box.kancloud.cn/667a50f7cfd3872ad66142069dad659e_1080x314.png) 這樣就好看多了... 圖標應該放到右邊... ```css .iconfont-span { float: right; } ``` ![1544947306437](https://box.kancloud.cn/351475142f904b8588e193dcf6ad2e07_1080x300.png) 再隔開一點就好了... ```css .iconfont { margin-right: 10px; } ``` ![1544947432796](https://box.kancloud.cn/7fa83279377af592fa48cb744b5056d1_1080x310.png) 咦? 小鉛筆和小垃圾簍的位置好像變了? ![1544947477837](https://box.kancloud.cn/38e11a9e02ddfd8158e35e8727b2f9ef_949x269.png) ![1544947491245](https://box.kancloud.cn/650b119f94b519d4682e18797cb07a8e_947x268.png) 一般都是編輯在左, 刪除再右, 確實符合使用習慣, 但是, 為什么順序會變呢? > html 代碼是順序執行的, 先看到了垃圾簍, 然后右浮動, 所有最右邊被垃圾簍先占了... 把內容輸入框和按鈕也搞一下吧... 先把他們跟下面的寬度對齊... 那就需要設置這兩個元素的寬度了 ```css input[type="text"] { float: left; width: 84%; margin-right: 1%; } .add-task button { width: 15%; } ``` 這樣, 一個 85%, 一個 15%, 就可以排成一列, 并且和下面對齊了... ![1544949025721](https://box.kancloud.cn/7dc8c7324efd8043209bb1c3f8df2991_1080x316.png) 打擾了.... 為什么呢? 注意邊框 ```css input[type="text"], .add-task button { border: 0; } ``` 這回可以了... ![1544949079739](https://box.kancloud.cn/0eb1a2b9f8bd007b2ca0efdf86557d94_1080x293.png) 給按鈕一個藍色背景吧, 還是需要取色... ```css .add-task button { background: #03aeff; } ``` ![1544949177781](https://box.kancloud.cn/5f1dc6c77347358aeed49e2e4f9bea52_1080x293.png) 想讓 input 和 button 一樣高... 可以給父級定一個高度, 讓后讓他倆都是 height100% ```css .add-task { height: 37px; } input[type="text"], .add-task button { border: 0; height: 100%; } ``` ![1544949332790](https://box.kancloud.cn/eaf8af54fdc55f86967449f0f258b1bd_1080x318.png) 看起來還不錯, 不過需要加點間距... 我們可以給列表內容 div(`task-list`)加上 10px 的上下 margin... 當然也可以有其他增加間距的方式... ```css .task-list { margin: 10px 0; } ``` ![1544949568651](https://box.kancloud.cn/f8ad7d23b912a124d7c6b7afbd41f390_1080x320.png) 看起來還不錯, 不過標題似乎太近了, 也加上 margin 吧... > 注意, 單純的使用標簽來給樣式, 很容易`樣式污染`, 所以盡量加上限制條件 ```css h1.myTitle { text-align: center; margin: 20px; } ``` ![1544949753593](https://box.kancloud.cn/efdfad0399c4a62095b8eb89f3d90bd1_1080x371.png) 趨于完美... input 框的文字太靠左了... 加點 padding... ![1544949831464](https://box.kancloud.cn/ed3d69cf2ea5157a4ae39fd084dd3232_947x322.png) ```css input[type="text"] { float: left; width: 84%; margin-right: 1%; padding: 10px; } ``` 這樣應該就完美了... ![1544951132638](https://box.kancloud.cn/fd604c9706e55c88a45e151a1e750c6d_1080x373.png) 好吧, 心好累... 應該是 484 才對啊, 因為 504 是剛剛好啊... 現在加上 padding, 瓦特了... ![1544951211116](https://box.kancloud.cn/12ec147935ede2b51f93d9f8c664ab89_227x192.png) 又想增加 padding, 又想不改變 width, 怎么辦呢? ```css input[type="text"] { float: left; width: 84%; margin-right: 1%; padding: 10px; -moz-box-sizing: border-box; /*Firefox3.5+*/ -webkit-box-sizing: border-box; /*Safari3.2+*/ -o-box-sizing: border-box; /*Opera9.6*/ -ms-box-sizing: border-box; /*IE8*/ box-sizing: border-box; } ``` 神奇的 box-sizing, 之前提過 ![1544951275415](https://box.kancloud.cn/04489464fc8f25de9a9ab64a3a4cf9a4_1080x369.png) 完美! 下面就是追求更完美的細節問題了... 如果你和我一樣, 也有強迫癥, 可以繼續往下看... 首先, input 和 button 的圓角問題所有的 input 和 button, 都應該圓角... 既然之前, 已經寫過了, 那么直接合并就好 ```css input, button, .task-item { background: #fff; color: #333; margin-bottom: 2px; cursor: pointer; padding: 10px; border-radius: 3px; } ``` ![1544951921325](https://box.kancloud.cn/bb34a6b10bddb52b4312c45b16a78850_1080x366.png) 其次, task-item 的文字過于靠左沒啥說的, 直接加 margin-left ```css .task-content { margin-left: 5px; } ``` ![1544952015249](https://box.kancloud.cn/b3b6be743f5b1037cb7e367bd39dbe4c_1080x380.png) 產品經理說話了 > "input 輸入框, 我想一開始是暗的, 鼠標懸停或者輸入文字時是亮的..." 好吧, 這是我最后一次改樣式... ```css input[type="text"] { background: #ddd; float: left; width: 84%; margin-right: 1%; padding: 10px; -moz-box-sizing: border-box; /*Firefox3.5+*/ -webkit-box-sizing: border-box; /*Safari3.2+*/ -o-box-sizing: border-box; /*Opera9.6*/ -ms-box-sizing: border-box; /*IE8*/ box-sizing: border-box; } ``` 加上背景屬性即可 ![1544952407763](https://box.kancloud.cn/bbef289aa2b21e468f25e15a1af82863_1080x366.png) 懸停或者輸入文本時高亮是吧... 那就是 hover 和 focus 的屬性 ```css input[type="text"]:hover, input[type="text"]:focus { background: #eee; } ``` ![1544952537788](https://box.kancloud.cn/5362cedbd5518e38bbaa9a31f5a57667_1080x364.png) 是不是比剛才更亮了? > "input 輸入框可以實現, 那么藍色按鈕沒有理由不實現啊..." 好吧, 是我拿不動刀了, 還是你產品狗飄了? ![img](https://box.kancloud.cn/9dc3100c5190a2f199267bf5699b6c18_154x166.jpg) ```css .add-task button:hover { background: #57c6fb; } ``` ![1544952659202](https://box.kancloud.cn/285f5e27e9a8461f738c9e815ed2ffcc_1080x378.png) 截屏的時候, 小手截不到, 但是對比上圖, 確實更亮了另外, 輸入內容時, 好像有個藍色的邊框... ![1544952802718](https://box.kancloud.cn/b71283622ec84b2fc8769e0a0da1985e_1080x363.png) 這是瀏覽器的默認樣式, 干掉它!!! ```css * { margin: 0; padding: 0; outline: 0; } ``` 加上 outline 即可煩人的藍色邊框不見了... ^\_^ ![1544952890380](https://box.kancloud.cn/37cd768eef8c8c21018f41499795b8a8_1080x375.png) 圖標懸停的時候, 可以變得更黑嗎? 不然我怎么知道這個圖標可點? ```css .iconfont:hover { filter: drop-shadow(0 0 0 black); } ``` ![1544954883392](https://box.kancloud.cn/741bc6e7aece2e5c8c8592e4fe174e2a_1080x381.png) 看起來, 是粗了一點... ``` filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值); ``` 例如： ``` filter:drop-shadow(5px 5px 10px black) ``` 什么? 什么? task-item 上的背景顏色, 來回切換時過于生硬? ![img](https://box.kancloud.cn/cb1fd6c21569b9485d9a069c99536dd9_100x100.png) 動畫, 安排上... ```css * { margin: 0; padding: 0; outline: 0; -webkit-transition: background 200ms; -moz-transition: background 200ms; -ms-transition: background 200ms; -o-transition: background 200ms; transition: background 200ms; } ``` ![1544953000108](https://box.kancloud.cn/80d254a8aa2d0ab955c25f18a92dcbfa_1080x374.png) 搞定! ![img](https://box.kancloud.cn/e9863fd8665bbb9a66592b3d4e6354bd_400x274.jpg) **什么是動畫???** ``` transition: property duration timing-function delay; ``` | 值 | 描述 | | -------------------------- | ----------------------------------- | | transition-property | 規定設置過渡效果的 CSS 屬性的名稱。 | | transition-duration | 規定完成過渡效果需要多少秒或毫秒。 | | transition-timing-function | 規定速度效果的速度曲線。 | | transition-delay | 定義過渡效果何時開始。 | 簡單來說, `transition: background 200ms;` 就是 **轉換背景顏色, 需要多長時間** 客戶經理又說了... > 最后一個需求了, 能加點陰影就更有`質感`了... ![img](https://box.kancloud.cn/c38c88f9d97d52e3bebf947cd81b7649_300x187.jpg) **產品經理, 你全家都有`質感`...** 那么砍死產品經理以后, 我們可以說說陰影的事兒了... ``` box-shadow: h-shadow v-shadow blur spread color inset; ``` > 注釋：box-shadow 向框添加一個或多個陰影。該屬性是由逗號分隔的陰影列表，每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關鍵詞來規定。省略長度的值是 0。 | 值 | 描述 | | ---------- | ---------------------------------------- | | _h-shadow_ | 必需。水平陰影的位置。允許負值。 | | _v-shadow_ | 必需。垂直陰影的位置。允許負值。 | | _blur_ | 可選。模糊距離。 | | _spread_ | 可選。陰影的尺寸。 | | _color_ | 可選。陰影的顏色。請參閱 CSS 顏色值。 | | inset | 可選。將外部陰影 (outset) 改為內部陰影。 | ```css -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); ``` > 內陰影, 水平 0, 垂直 1px, 模糊距離 2px; 陰影顏色 rgba(0, 0, 0, 0.1); ![1544954761746](https://box.kancloud.cn/0dd453bbb12944ae693fbb74f928b200_1080x376.png) 質感? 還好吧... 圖個心安... ![img](https://box.kancloud.cn/2728a18fa005676323314ca077f5c286_240x240.jpg) 完整的 css 代碼 ```css * { margin: 0; padding: 0; outline: 0; -webkit-transition: background 200ms; -moz-transition: background 200ms; -ms-transition: background 200ms; -o-transition: background 200ms; transition: background 200ms; } body { background: #00334b; color: #fff; } h1.myTitle { text-align: center; margin: 20px; } .container { max-width: 600px; margin: 0 auto; /* background: red; */ } input, button, .task-item { background: #fff; color: #333; margin-bottom: 2px; cursor: pointer; padding: 10px; border-radius: 3px; } .task-item:hover { background: #ddd; } .iconfont-span { float: right; } .iconfont { margin-right: 10px; } .iconfont:hover { filter: drop-shadow(0 0 0 black); } input[type="text"]:hover, input[type="text"]:focus { background: #eee; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } input[type="text"] { background: #ddd; float: left; width: 84%; margin-right: 1%; padding: 10px; -moz-box-sizing: border-box; /*Firefox3.5+*/ -webkit-box-sizing: border-box; /*Safari3.2+*/ -o-box-sizing: border-box; /*Opera9.6*/ -ms-box-sizing: border-box; /*IE8*/ box-sizing: border-box; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); } .add-task button { width: 15%; } input[type="text"], .add-task button { border: 0; height: 100%; } .add-task button { background: #03aeff; } .add-task button:hover { background: #57c6fb; } .add-task { height: 37px; } .task-list { margin: 10px 0; } .task-content { margin-left: 10px; } ``` # 書寫 js 終于到了 jquery 時間... 我們今天先來 1.0 的版本功能 1. 輸入內容在 input 框中回車, 或者點擊藍色按鈕, 可以把內容插入備忘內容區 1. 最后插入的排在最上面 1. 如果文字內容過長, 展示時要有省略號 1. 頁面刷新或者重啟瀏覽器, 內容不丟失第 0 步, **引入 jquery!** **引入 jquery!** **引入 jquery!** 重要的事情說三遍! 注意兩者的順序, 先引入 jquery, 再引入你自己的 index.js ![1544972943062](https://box.kancloud.cn/521adf47f3b1b2ea6dc8cd502572c707_977x379.png) 第一步, 先搭一個 jquery 的大致框架 1. 聲明變量 1. 聲明函數 1. 使用變量和函數完成代碼邏輯 ```javascript $(function() { /* 聲明變量 */ /* 聲明函數 */ /* 邏輯代碼 */ }); ``` 這什么都沒寫啊... 別著急, 正式開始 ```javascript $(function() { /* 聲明變量 */ var aTaskList = []; // task數組, 用來保存task var nTaskIndex = 0; // task索引, 以后編輯task, 刪除task, 都用得到 /* 聲明函數 */ /* 邏輯代碼 */ }); ``` 先完成第一個功能`輸入內容在input框中回車, 或者點擊藍色按鈕, 可以把內容插入備忘內容區` 咱們來分解一下 ![1544972629563](https://box.kancloud.cn/d8385176f953e129028538ebdccc365f_966x228.png) ```javascript /* 邏輯代碼 */ // 獲取輸入框的內容-input-回車 // 輸入框中, 按下回車, 獲取內容 $("input[name=content]").on("keypress", function(ev) { if (ev.keyCode === 13) { console.log($(this).val()); } }); ``` ![1544973037824](https://box.kancloud.cn/96eaa18f0069c0b834b6a6ba6dc5b688_1920x927.png) `keyCode`是什么? > `keyCode` 屬性返回[onkeypress]()事件觸發的鍵的值的字符代碼(13 表示回車) 搞定第一個! ![1544973211087](https://box.kancloud.cn/0a51c01ed5ee92274775c085162c509d_968x191.png) 接著是點擊提交按鈕... ```javascript // 點擊submit按鈕, 獲取輸入框內容 $(".add-task button").on("click", function() { console.log($("input[name=content]").val()); }); ``` ![1544973278553](https://box.kancloud.cn/aa7f34ddfe601013899001bf2d46e06c_1920x927.png) 兩種獲取內容的方式都搞定了... ![1544973326326](https://box.kancloud.cn/963d69eea33796871c122a2b2020c548_961x203.png) 然后獲取內容并展示新建一個函數`addTask` ```javascript // 新增task function addTask(str) { // 獲取內容 var taskHTML = ""; // 寫入現有的html代碼中 $(".task-list").prepend(taskHTML); } ``` 下載需要設置寫入的內容, 就是文檔中的這些內容 ```html <div class="task-item"> <span><input type="checkbox" /></span> <span class="task-content">item content 1</span> <span class="iconfont-span"><i class="iconfont icon-del"></i></span> <span class="iconfont-span"><i class="iconfont icon-edit"></i></span> </div> ``` 給變量`taskHTML`賦值 ```javascript function addTask(str) { // 獲取內容 var taskHTML = ""; // 變量賦值 taskHTML += '<div class="task-item">'; taskHTML += '<span><input type="checkbox"/></span>'; taskHTML += '<span class="task-content">' + str + "</span>"; taskHTML += '<span class="iconfont-span">'; taskHTML += '<i class="iconfont icon-del"> </i>'; taskHTML += "</span>"; taskHTML += '<span class="iconfont-span">'; taskHTML += '<i class="iconfont icon-edit"> </i>'; taskHTML += "</span>"; taskHTML += "</div>"; // 寫入現有的html代碼中 $(".task-list").prepend(taskHTML); } ``` 同時, 我們也需要把之前的`獲取內容,` 改為`添加內容` ```javascript // 獲取輸入框的內容-input-回車 // 輸入框中, 按下回車, 獲取內容 $("input[name=content]").on("keypress", function(ev) { if (ev.keyCode === 13) { addTask($(this).val()); } }); // 點擊submit按鈕, 獲取輸入框內容 $(".add-task button").on("click", function() { addTask($("input[name=content]").val()); }); ``` 先試一下... ![1544974837366](https://box.kancloud.cn/d74255cd06cab9951035e46d8b566dde_829x428.png) 可以寫進去, 成功了!!! ![1544979559788](https://box.kancloud.cn/2a436b1e517278e07f8364319df5f2d3_1058x211.png) 讓我們多插幾次! ![1544974922268](https://box.kancloud.cn/bf41d76d98547b2aab7baf4273e2a709_650x583.png) 發現一個問題, 每次插入以后, 原來 input 框里的內容還在, 新輸入的話, 還需要把里面的內容先刪了... 要是能增加以后, 自動清空 input 框就好了... 沒有問題!!! ![img](https://box.kancloud.cn/dc441d0c0224f45b6988cce881a2d80c_240x240.jpg) 只需要稍微改幾行代碼就好了... ![1544975147291](https://box.kancloud.cn/49c11a422136eb33e95ab1cb611bb6c0_715x436.png) ![1544975188326](https://box.kancloud.cn/8706001ff78898970613adf96a4581bb_747x634.png) 自動清空, 毫無壓力... 然而, 還有一個更嚴重的問題在等著大家... 當我小手一抖, 輕點刷新之后... ![1544975257977](https://box.kancloud.cn/8bcd62da1a6398c87dd454c2fea04041_799x379.png) 之前插入的內容全沒了... 瀏覽器忘得比我快啊...![img](https://box.kancloud.cn/c2b6730d6bf9ac14ae2126c7bd7fdfc8_194x187.jpg) 數據持久化問題, 怎么解決呢? 方案一: 存數據庫, 除非硬盤損毀, 和人為刪庫, 其他情況, 萬無一失... 方案二: 存瀏覽器的 localStorage, 刷新, 重啟, 只要瀏覽器不清緩存, 數據一直都在那里我們使用方案二, 因為更快, 更簡單關于 localStorage, 你要知道... 1. 在 HTML5 中，新加入了一個 localStorage 特性，這個特性主要是用來作為本地存儲來使用的，解決了 cookie 存儲空間不足的問題(cookie 中每條 cookie 的存儲空間為 4k)，localStorage 中一般瀏覽器支持的是 5M 大小，這個在不同的瀏覽器中 localStorage 會有所不同。 2. localStorage 會可以將第一次請求的數據直接存儲到本地，這個相當于一個 5M 大小的針對于前端頁面的數據庫，相比于 cookie 可以節約帶寬 3. 目前所有的瀏覽器中都會把 localStorage 的值類型限定為 string 類型，這個在對我們日常比較常見的 JSON 對象類型需要一些轉換 4. localStorage 在瀏覽器的隱私模式下面是不可讀取的 5. localStorage 本質上是對字符串的讀取，如果存儲內容多的話會消耗內存空間，會導致頁面變卡 6. localStorage 與 sessionStorage 的唯一一點區別就是 localStorage 屬于永久性存儲，而 sessionStorage 屬于當會話結束的時候，sessionStorage 中的鍵值對會被清空 7. 一般我們會將 JSON 存入 localStorage 中，但是在 localStorage 會自動將 localStorage 轉換成為字符串形式, 這個時候我們可以使用 JSON.stringify()這個方法，來將 JSON 轉換成為 JSON 字符串 8. 讀取之后要將 JSON 字符串轉換成為 JSON 對象，使用 JSON.parse()方法了解一下語法吧... ```js localStorage.setItem("myCat", "Tom"); // 設置 ``` ```js let cat = localStorage.getItem("myCat"); // 獲取 ``` ```js localStorage.removeItem("myCat"); // 刪一項 ``` ```js localStorage.clear(); // 刪所有 ``` 現在, 我們可以著手改代碼了... 獲取內容后, 除了要添加到 html 代碼中, 同時需要壓入數組, 把數組存起來, 方便刷新后使用 ```javascript $("input[name=content]").on("keypress", function(ev) { if (ev.keyCode === 13) { addTask($(this).val()); aTaskList.push($(this).val()); // 壓入數組 localStorage.setItem("aTaskList", aTaskList); // 更新緩存 $(this).val(""); } }); // 點擊submit按鈕, 獲取輸入框內容 $(".add-task button").on("click", function() { addTask($("input[name=content]").val()); aTaskList.push($("input[name=content]").val()); // 壓入數組 localStorage.setItem("aTaskList", aTaskList); // 更新緩存 $("input[name=content]").val(""); }); ``` 那么, 刷新時, 我們需要一個把數據從緩存中取出, 并且展示出來的函數 ```javascript // 展示數據到內容區 function showTaskHTML() { var taskHTML = ""; var arr = localStorage.getItem("aTaskList"); for (var i = 0; i < arr.length; i++) { taskHTML += '<div class="task-item">'; taskHTML += '<span><input type="checkbox"/></span>'; taskHTML += '<span class="task-content">' + arr[i] + "</span>"; taskHTML += '<span class="iconfont-span">'; taskHTML += '<i class="iconfont icon-del"> </i>'; taskHTML += "</span>"; taskHTML += '<span class="iconfont-span">'; taskHTML += '<i class="iconfont icon-edit"> </i>'; taskHTML += "</span>"; taskHTML += "</div>"; } $(".task-list").html(taskHTML); } ``` 邏輯也比較簡單, 從緩存中讀取數據, 然后動態拼接 html, 修改 html 文件內容我已經迫不及待的想試一下了... 當然, 別忘了調用... ![1544976910618](https://box.kancloud.cn/c5d094ed0dd102a6967d334d3319bfd9_437x196.png) 結果當然是悲劇了... ![img](https://box.kancloud.cn/892c26472196111af41ac4f12c824db6_200x200.jpg) ![1544977217156](https://box.kancloud.cn/1dec9ed5d10bb1d80302ae166fe6554e_714x321.png) 為什么會這樣? 打印出來從緩存中獲得的結果是`dddd`, 然后循環就悲劇了, `dddd`不是我最后一次的內容嗎? ![img](https://box.kancloud.cn/ac0eaab208ac0843dd93fb700722123b_200x200.jpg) 騷年, 你忘了這么一句: > 1. 一般我們會將 JSON 存入 localStorage 中，但是在 localStorage 會自動將 localStorage 轉換成為字符串形式, 這個時候我們可以使用 JSON.stringify()這個方法，來將 JSON 轉換成為 JSON 字符串 > 1. 讀取之后要將 JSON 字符串轉換成為 JSON 對象，使用 JSON.parse()方法 localStorage 會把緩存起來的內容, 轉成字符串, 所以我們要自己轉 json 字符串, 完事兒自己轉回來... 為了方便大家理解, 看個更刺激的 ![1544977568211](https://box.kancloud.cn/4e18924507b7b7b4bfc8b31533f2c7f9_1920x927.png) 數組轉字符串就是這個下場!!!![img](https://box.kancloud.cn/a1579efe8b3f009a6c2147518bbf1aa8_299x300.jpg) 還有什么可說的, 改代碼吧... 一共改了三個地方... ![1544977888136](https://box.kancloud.cn/79274622befe0e415544d30489f1f167_892x520.png) ![1544977907216](https://box.kancloud.cn/569db33747e3f7537971382b6c812135_1060x496.png) 結果`清空緩存`之后一刷新, 更熱鬧了... ![1544977958198](https://box.kancloud.cn/870792e0898ebba5b4b575cd14d294dd_1920x387.png) 想來也簡單, 清空以后, 就沒有數據了, 如何遍歷呢, 看來還得在初始化變量時做文章... ```javascript /* 聲明變量 */ // var aTaskList = []; // task數組, 用來保存task if (localStorage.getItem("aTaskList")) { var aTaskList = JSON.parse(localStorage.getItem("aTaskList")); showTaskHTML(); } else { var aTaskList = []; } ``` 數據展示也得改... ```javascript function showTaskHTML() { var taskHTML = ""; for (var i = 0; i < aTaskList.length; i++) { taskHTML += '<div class="task-item">'; taskHTML += '<span><input type="checkbox"/></span>'; taskHTML += '<span class="task-content">' + aTaskList[i] + "</span>"; taskHTML += '<span class="iconfont-span">'; taskHTML += '<i class="iconfont icon-del"> </i>'; taskHTML += "</span>"; taskHTML += '<span class="iconfont-span">'; taskHTML += '<i class="iconfont icon-edit"> </i>'; taskHTML += "</span>"; taskHTML += "</div>"; } $(".task-list").html(taskHTML); } ``` 刷新, 重啟都 ok, 除了... ![1544978388877](https://box.kancloud.cn/e756a2b2846e811af7559b51768c4880_676x311.png) ![1544978407740](https://box.kancloud.cn/ebbc82287aa80394721ccce3d865a029_677x318.png) 刷新之前, 4444 在最上面, 而刷新后 4444 就跑到了下面... 為什么?![img](https://box.kancloud.cn/05f8f020d2ed208951a755981f3d2f43_274x239.jpg) 因為數組有順序啊, 小傻瓜!!! 你把`push`改成`unshift`再試試? 果然好了!!! ![img](https://box.kancloud.cn/9fb9ba6730d50d62c2575ef8b153132c_240x240.jpg) 不過當我看到這些的時候, 我的強迫癥又犯了... ![1544978756155](https://box.kancloud.cn/fa603e4aff981501f03265e1793a32fc_859x915.png) 這兩段代碼, 真 TMD 的像!!! 不能忍! ![img](https://box.kancloud.cn/9abcc810e0c1cb0e2ab82ca6b57ba48d_184x210.jpg) 其實, 添加, 不就是, `把新寫的代碼, 加入緩存, 然后刷新`嗎? 那就好辦了... 直接把`addTask`干掉, 然后修改 input 回車和 button 點擊的邏輯就可以了. ```javascript $("input[name=content]").on("keypress", function(ev) { if (ev.keyCode === 13) { aTaskList.unshift($(this).val()); // 壓入數組 localStorage.setItem("aTaskList", JSON.stringify(aTaskList)); // 更新緩存 $(this).val(""); showTaskHTML(); } }); // 點擊submit按鈕, 獲取輸入框內容 $(".add-task button").on("click", function() { aTaskList.unshift($("input[name=content]").val()); // 壓入數組 localStorage.setItem("aTaskList", JSON.stringify(aTaskList)); // 更新緩存 $("input[name=content]").val(""); showTaskHTML(); }); ``` 什么? 什么? checkbox 和文字挨得太近? 把原來的 margin-left, 從 5px 改成 10px 就好了... ![1544979266132](https://box.kancloud.cn/fe90564b609e5e4915d1e0e5acda571c_690x448.png) ```css .task-content { margin-left: 10px; } ``` ![1544979502742](https://box.kancloud.cn/4b55c76a5dfe8375d8ddf137524236bc_677x462.png) 到了這里, 1.0 的版本, 可以告一段落了... 怎么可能? 你忘了這個!!! ![1544979664780](https://box.kancloud.cn/da4d00aef0808ebe02eb1a4141246606_671x188.png) 不過這真的是最后一個了... 文字過長容易出問題... ![1544979717770](https://box.kancloud.cn/bed218502aa42ea668b49b373f3798c8_698x494.png) ![1544979737070](https://box.kancloud.cn/8bf4465d453f2d7c5998a1b156e55101_720x565.png) 設置, 超過字數就顯示省略號 ```javascript // 文字過多就顯示省略號 function compressContent(str) { if (str.length >= 30) { return str.slice(0, 29) + "···"; } } ``` ```javascript // 獲取輸入框的內容-input-回車 // 輸入框中, 按下回車, 獲取內容 $("input[name=content]").on("keypress", function(ev) { if (ev.keyCode === 13) { var taskContent = compressContent($(this).val()); aTaskList.unshift(taskContent); // 壓入數組 localStorage.setItem("aTaskList", JSON.stringify(aTaskList)); // 更新緩存 $(this).val(""); showTaskHTML(); } }); // 點擊submit按鈕, 獲取輸入框內容 $(".add-task button").on("click", function() { var taskContent = compressContent($("input[name=content]").val()); aTaskList.unshift(taskContent); // 壓入數組 localStorage.setItem("aTaskList", JSON.stringify(aTaskList)); // 更新緩存 $("input[name=content]").val(""); showTaskHTML(); }); ``` ![1544980166214](https://box.kancloud.cn/7d22a9419671a490741ee6751d279875_686x156.png) 完美!!! ![img](https://box.kancloud.cn/2e7d7445b77319148b0f0583ee7b6cfd_240x240.jpg) 最后貼出 js 的完整代碼 ```javascript $(function() { /* 聲明變量 */ if (localStorage.getItem("task_list")) { aTaskList = JSON.parse(localStorage.getItem("task_list")); } else { aTaskList = []; } showTask(); /* 聲明函數 */ function showTask() { var taskHTML = ""; for (var i = 0; i < aTaskList.length; i++) { taskHTML += '<div class="task-item">'; taskHTML += '<span><input type="checkbox"></span>' + "\n"; taskHTML += '<span class="task-content">' + aTaskList[i] + "</span>"; taskHTML += '<span><i class="iconfont icon-del"></i></span>'; taskHTML += '<span><i class="iconfont icon-edit"></i></span>'; taskHTML += "</div>"; } $(".task-list").html(taskHTML); } /* 邏輯代碼 */ $("[name=content]").on("keypress", function(ev) { if (ev.keyCode === 13 && compressContent($(this).val())) { aTaskList.unshift(compressContent($(this).val())); localStorage.setItem("task_list", JSON.stringify(aTaskList)); $(this).val(""); showTask(); } }); $(".add-task button").on("click", function() { if (compressContent($("[name=content]").val())) { aTaskList.unshift(compressContent($("[name=content]").val())); localStorage.setItem("task_list", JSON.stringify(aTaskList)); $("[name=content]").val(""); showTask(); } }); // 文字過多, 就顯示省略號 function compressContent(str) { if (str.length >= 30) { return str.slice(0, 30) + "···"; } else { return str; } } }); ``` 完整 css ```css * { margin: 0; padding: 0; outline: none; -webkit-transition: background 200ms; -moz-transition: background 200ms; -ms-transition: background 200ms; -o-transition: background 200ms; transition: background 200ms; } body { background: #00334b; color: #fff; } h1.myTitle { text-align: center; margin: 20px; } .container { margin: 0 auto; /* background: red; */ max-width: 600px; } .task-item { background: #fff; color: #333; margin-bottom: 3px; cursor: pointer; padding: 10px; border-radius: 3px; } .task-item:hover { background: #ddd; } .iconfont { float: right; margin-right: 10px; } input[type="text"] { background: #ddd; float: left; width: 84%; margin-right: 1%; padding: 10px; -moz-box-sizing: border-box; /*Firefox3.5+*/ -webkit-box-sizing: border-box; /*Safari3.2+*/ -o-box-sizing: border-box; /*Opera9.6*/ -ms-box-sizing: border-box; /*IE8*/ box-sizing: border-box; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); } input[type="text"]:focus, input[type="text"]:hover { background: #eee; } .add-task button { width: 15%; background: rgb(3, 174, 255); } .add-task button:hover { background: rgb(77, 195, 251); } input[type="text"], .add-task button { border: 0; height: 100%; } .add-task { height: 37px; } .task-list { margin: 10px 0; } input, button { border-radius: 3px; } .task-content { margin-left: 5px; } .iconfont:hover { filter: drop-shadow(0 0 0 black); } ``` 完整 html ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" type="text/css" href="css/iconfont.css" /> <script src="js/jquery.js"></script> <script src="js/index.js"></script> <title>備忘清單</title> </head> <body>  <div class="container"> <h1 class="myTitle">我的備忘清單</h1>  <div class="add-task"> <input type="text" placeholder="寫下你的備忘吧..." name="content" /> <button>添加備忘</button> </div>   <div class="task-list"> <div class="task-item"> <span><input type="checkbox" /></span> <span class="task-content">item content 1</span> <span><i class="iconfont icon-del"></i></span> <span><i class="iconfont icon-edit"></i></span> </div> <div class="task-item"> <span><input type="checkbox" /></span> <span class="task-content">item content 1</span> <span><i class="iconfont icon-del"></i></span> <span><i class="iconfont icon-edit"></i></span> </div> <div class="task-item"> <span><input type="checkbox" /></span> <span class="task-content">item content 1</span> <span><i class="iconfont icon-del"></i></span> <span><i class="iconfont icon-edit"></i></span> </div> <div class="task-item"> <span><input type="checkbox" /></span> <span class="task-content">item content 1</span> <span><i class="iconfont icon-del"></i></span> <span><i class="iconfont icon-edit"></i></span> </div> <div class="task-item"> <span><input type="checkbox" /></span> <span class="task-content">item content 1</span> <span><i class="iconfont icon-del"></i></span> <span><i class="iconfont icon-edit"></i></span> </div> </div>  </div>  </body> </html> ```