這次我們將用jQuery做一個輪播
在遵循原則：內容(HTML)、樣式(CSS)、行為(JavaScript)分離的情況下
面試套路
如果被問到你對于前端內容、樣式、行為分離的理解。
我們當然認為這是理所當然的，但是這么回答顯然不行。
所以，我們可以反著回答，如果不分離的話會有什么壞處，以此論證需要分離。
例如：
- HTML負責樣式
現(xiàn)在，有的標簽是為了表示樣式的，有的標簽是為了表示內容的，這使得我們難以區(qū)分這些標簽真正的邏輯結構<body bgcolor="gray"> <center> <font color="red" size="20">你好</font> <center> </body> - CSS 表示內容
使用css表示內容，會導致用戶無法用鼠標選中它，同時，js也無法獲取它的內容// html <div id="x"></div> // css div::after{ content: '你好'; } // js console.log(x.innerText) // 什么都沒有，空的 - CSS 表示行為
使用css表示復雜的行為，會導致頁面變得很慢很慢
優(yōu)化的原則之一：不要使用IE發(fā)明的CSS Expressions - JS 表示 CSS
這種結果顯然不符合我們的預期，這里，建議使用添加 class 的方式來控制，js 只負責行為，它不知道一個div應該怎么show，block？flex？// html <div id="x"></div> // js var $div = $('#x') $div.hide() // 影藏很好理解，display:none $div.show() // 顯示呢？block？可如果我本來是flex呢？或者inline-flex呢？ // jQuery 為了處理這個問題，在 hide() 時獲取了你的 display 值 // 使得 flex 在經過 hide() show()之后依然是 flex // 可是，如果本來是 none 呢？ // css div{ display:none; } // 測試結果顯示 show() 之后是 block,也就是說 show() 默認 block
顯示還是不顯示？那是 css 的活。
$div.addClass('active')
思路
- 將圖片全部放到一個div里，把圖片放平，圖片最好是一樣大小的
- 然后用一個窗口來看圖片，圖片從左到右挨個出現(xiàn)，就好像以前的電影膠帶
- 有了思路，剩下的就是實現(xiàn)和改bug，這次是用jq來寫，會出現(xiàn)很多不認識的api，直接查文檔就行了
關于封裝
- 從 API 開始思考
- 盡量能讓人看見就明白是干嘛的
成果
本次任務用到的 jQuery API
-
.on()-link -
index()-link -
.eq()-link -
.trigger()-link -
.addClass()-link -
.removeClass()-link -
.siblings()-link -
.css()-link
優(yōu)化原則
- 不使用 CSS 來表示復雜的行為，不要使用IE發(fā)明的CSS Expressions。
- 如果你已經知道圖片的寬高了，那么最好是寫在上面
<img width=xx height=xx></img>，這樣瀏覽器就會少一次讓后面的圖片或者其它元素讓位的過程。
奇葩bug
- css tansform: translateX();在瀏覽器放大頁面下出現(xiàn)bug，抖動
