1、less文件
? ? ? ? less文件本身不能夠被瀏覽器識別，所以要使用less文件，必須引入less.js文件，且應(yīng)該在引入我們自己寫的less文件之后再引入less.js文件，切記：順序不能夠錯！
如果不引入less文件，只想使用less文件來寫代碼，webstorm提供了一轉(zhuǎn)化方法，操作如下：建立less文件，在setting中搜索File Watchers ，
點擊右上角的加號，出現(xiàn)如下頁面，選擇less，點擊確定，則在less文件中寫的代碼，webstrom可以自動生成對應(yīng)的css文件，完成后，可以只引入css文件
2、一些css標簽
1) input標簽type類型為search
<input type="search" />，可以實現(xiàn)在文本框里添加文字時自動出現(xiàn)X號（僅限在谷歌瀏覽器中），如果引入bootstrap插件，則X號會被隱藏，可以通過如下方式自己設(shè)置一個X號：
2）屬性選擇器
input [ type=search ]；假如有多個input標簽，type值不同，則可以通過標簽選擇器的某個屬性來選中某個標簽，如上圖，選擇type值為search的input標簽。
3）去掉默認邊框
border：0；
outline：none；
4）設(shè)置背景圖片相關(guān)事宜：
設(shè)置背景圖片后，記得寫background-size；如下圖：
5）相對于父級元素的結(jié)構(gòu)元素：
div：last-of-type? 匹配的是某父元素下相同類型子元素中的第一個
div：last-child 匹配的是某父元素的第一個子元素，可以說是結(jié)構(gòu)上的第一個子元素
具體區(qū)別如下
3、任意居中
line-height可以實現(xiàn)文本垂直居中，text-align：center；可以實現(xiàn)文本居中對齊，可以使用上圖方法實現(xiàn)任意居中。
4、伸縮盒子與柵格系統(tǒng)
伸縮盒子：
設(shè)置父元素display：flex；子元素設(shè)置flex：1；表示占據(jù)剩余位置，具體的參見伸縮盒子部分文章。
伸縮盒子默認不會自動換行，所以如果要設(shè)置多行顯示，記得要設(shè)置flex-wrap:wrap;
nowrap是不自動換行的意思。
柵格系統(tǒng)：
使用書寫格式如下：
注意：.row盒子默認有負的margin值，.col-xs-4盒子默認有padding值，記得使用時有必要要清除默認值
伸縮盒子與柵格系統(tǒng)的使用區(qū)別：
如果要動態(tài)添加或者刪除元素，則只能使用伸縮盒子
5、偽元素after、before
一般加一些小的部分或圖標，可以考慮使用偽元素after或before，記得一定要寫content：" "；如果要設(shè)置為元素的標簽是行內(nèi)元素，則要轉(zhuǎn)化為塊級元素，既添加display：block；
注意：行內(nèi)元素變成塊級元素的三種方式：display：block；，浮動，定位。
6、template模板
使用template模板，需要引入template.js文件，且若{{}}包裹的是字符串式的語義化的標簽時，需要在模板中加上#
7、jquery添加元素技巧
jQuery添加插入元素技巧：
jquery添加分為在指定元素的里面添加和外面添加兩種：
里面添加使用（append 和prepend）
里面添加又分為在里面的前面添加和后面添加
里面的前面添加使用
prepend和prependTo
里面的后面添加使用
append(規(guī)定要插入的內(nèi)容（可包含 HTML 標簽))? 或appendTo(規(guī)定要插入的內(nèi)容（必須包含 HTML 標簽）)
外面添加使用（after和before）
外面添加又分為在外面的前面添加和后面添加
外面的前面添加使用
before或insertBefore
外面的后面添加使用
after或insertAfter
append() - 通過 HTML、jQuery 和 DOM 創(chuàng)建內(nèi)容
8、通過jquery獲取元素內(nèi)容
三個簡單實用的用于 DOM 操作的 jQuery 方法：
.text() - 設(shè)置或返回所選元素的文本內(nèi)容
.html() - 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標記）
.val() - 設(shè)置或返回表單字段的值
9、jquery屬性操作
1) ?.attr() ?與 prop()
.attr() ?設(shè)置或返回匹配元素的屬性和值,注意只能返回行內(nèi)樣式的屬性的值
$("img").attr("width","180"); ?設(shè)置屬性
$("img").attr("width") ? ? 獲取屬性的值
attr()與prop()的區(qū)別：
具有 true 和 false 兩個屬性的屬性，如 checked, selected 或者 disabled 使用prop()，獲取返回會得到false，或者true，而其他的使用 attr()：具體事例如下
運行如上代碼，得到的結(jié)果是如下圖：
2）.addClass() ?
addClass() 方法向被選元素添加一個或多個類。
該方法不會移除已存在的 class 屬性，僅僅添加一個或多個 class 屬性,提示：如需添加多個類，使用空格分隔類名
3).removeClass()
removeClass() 方法從被選元素移除一個或多個類,
規(guī)定要移除的 class 的名稱。
如需移除若干類，請使用空格來分隔類名。
如果不設(shè)置該參數(shù)，則會移除所有類。
4)removeAttr()?
removeAttr() 方法從被選元素中移除屬性。
必需規(guī)定從指定元素中移除的屬性
5).toggleClass() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?*****
toggleClass() 對設(shè)置或移除被選元素的一個或多個類進行切換。
該方法檢查每個元素中指定的類。如果不存在則添加類，如果已設(shè)置則刪除之。這就是所謂的切換效果。
5).val()
val() 方法返回或設(shè)置被選元素的值。
元素的值是通過 value 屬性設(shè)置的。該方法大多用于 input 元素。
如果該方法未設(shè)置參數(shù)，則返回被選元素的當前值。
6).html()
html() 方法設(shè)置或返回被選元素的內(nèi)容（innerHTML）,會將符合標簽格式的內(nèi)容解析成標簽。
當該方法用于返回內(nèi)容時，則返回第一個匹配元素的內(nèi)容。
當該方法用于設(shè)置內(nèi)容時，則重寫所有匹配元素的內(nèi)容。
7）.text()
text() 方法設(shè)置或返回被選元素的文本內(nèi)容。
當該方法用于返回內(nèi)容時，則返回所有匹配元素的文本內(nèi)容（會刪除 HTML 標記）。
當該方法用于設(shè)置內(nèi)容時，則重寫所有匹配元素的內(nèi)容。
10、自定義屬性
普通的HTML中，可以直接自定義屬性，通過getAttribute() 獲取相關(guān)特性，也可以獲取到自定義的特性，區(qū)別于使用DOM元素的屬性獲取
setAttribute() 設(shè)置相關(guān)特性
html5中，要求自定義屬性前必須加data，
1）使用getAttribute()方法以及setAttribute()方法操作自定義屬性
2）使用dataset操作自定義屬性
注意的是如果data-屬性名中包含了連字符（比如：data-date-of-birth),則映射中對應(yīng)的屬性為dateOfBirth,即轉(zhuǎn)換為相應(yīng)的駝峰格式來顯示。
11、交集選擇器的使用
當需要給某個元素動態(tài)設(shè)置某個屬性時，可以選擇動態(tài)添加屬性，然后既是某元素，又具有此屬性時怎樣怎樣，代碼實現(xiàn)如下：
12、split()字符串分割成數(shù)組
使用一個指定的分隔符把一個字符串分割存儲到數(shù)組中，
13、join() 將數(shù)組合并成字符串
使用您選擇的分隔符將一個數(shù)組合并為一個字符串，
14、slice()切割字符串
slice(x,y) ?X;起始位置 ? y：結(jié)束位置
Substr(x,y) ?x:起始位置 ? Y：長度
Substring（x,y）X;起始位置? y：結(jié)束位置
15、將數(shù)組轉(zhuǎn)換成對象
16.unbind() 與.bind()方法移除被選元素的事件處理程序
1）.unbind()方法移除被選元素的事件處理程序
規(guī)定從指定元素上刪除的一個或多個事件處理程序。
如果沒有規(guī)定參數(shù)，unbind() 方法會刪除指定元素的所有事件處理程序。
2）.bind()給被選元素添加事件
bind() 方法為被選元素添加一個或多個事件處理程序，并規(guī)定事件發(fā)生時運行的函數(shù)。
17、兄弟選擇器
+：獲取當前元素的相鄰的滿足條件的元素
~：獲取當前元素的滿足條件的兄弟元素
18、Javascript:history.go()和history.back()的用法和區(qū)別
.go()后退并刷新
.back()后退
19、document對象
document.title ?獲取當前頁面的標題
document.URL ?奪取當前頁面的地址
document.write();向文檔寫入 HTML 表達式或 JavaScript 代碼。
20、dom與jquery關(guān)于獲取屬性的語法區(qū)別：
1）classList（）：（h5）
屬性返回元素的類名，作為 DOMTokenList 對象。
該屬性用于在元素中添加，移除及切換 CSS 類。
classList 屬性是只讀的，但你可以使用 add() 和 remove() 方法修改它。
2）className（）：（dom）
屬性設(shè)置或返回元素的 class 屬性。 ? ?
3）.attr("calss"): ?(jqury)
設(shè)置或返回被選元素的屬性和值。
21、精靈圖
1）背景圖片與img圖片的區(qū)別：
Img屬于html標簽，background是css方法，按照瀏覽器解析機制，html標簽優(yōu)先解析，所以重要的元素，如logo就應(yīng)該使用img，如果僅僅是為了顯示一張圖片，比如banner、廣告圖等，建議采用background方式。因為不重要的自動往后排，避免占用帶寬，造成數(shù)據(jù)阻塞。
建議：重要的需要優(yōu)先加載的圖片最好采用img。不重要的圖片最好采用background。
2）精靈圖的優(yōu)點：
減少請求次數(shù)，降低服務(wù)器壓力
使用精靈圖基本語法如上圖。
22、盒模型
box-sizing : content-box; 此時，盒子總寬度/高度=width/height+padding+border+margin
box-sizing: border-box;此時，盒子總寬度/高度=width/height + margin；
23、background-size
1）設(shè)置數(shù)字
2）設(shè)置百分比
3）設(shè)置container：
按比例調(diào)整圖片大小，使用圖片寬高自適應(yīng)整個元素的背景區(qū)域，使圖片全部包含在容器內(nèi)
1.圖片大于容器：有可能造成容器的空白區(qū)域,將圖片縮小
2.圖片小于容器：有可能造成容器的空白區(qū)域，將圖片放大
4）設(shè)置cover：
與contain剛好相反，背景圖片會按比例縮放自 適應(yīng)整個背景區(qū)域，如果背景區(qū)域不足以包含所有背景圖片，圖片內(nèi)容會溢出
1.圖片大于容器：等比例縮小，會填滿整個背景區(qū)域，有可能造成圖片的某些區(qū)域不可見
2.圖片小于容器：等比例放大，填滿整個背景區(qū)域，圖片有可能造成某個方向上內(nèi)容的溢出
使用：banner圖片比較大，要想使圖片居中顯示，要使用如下方法：
24、提升響應(yīng)區(qū)域的大小
25、獲取屏幕高度、內(nèi)容高度、滑動高度的方法
26、獲取元素
.querySelector獲得的是單個元素
querySelectorAll獲取的是一個數(shù)組
1）前半部分選擇器
選擇器實例說明
.class ? ? $('.myClass')類選擇器：可以獲取到class為‘myClass’的所有元素
element ? ?$('p')獲取所有的元素
:header ? ? ?$(':header')獲取所有的標題元素：
:animated ? ? $(':animated')獲取所有的動畫元素
:contains(text) ? ? $('p:contains(Hello)')獲取所有包含文本為Hello的元素，中間的文本區(qū)分大小寫
:hidden ? ? ? $(':hidden')獲取所有的隱藏元素：width和height為0、display:none、type=hidden、
[attribute] ? ? $('[href]')屬性選擇器：獲取所有含有屬性為href的元素
[attribute=value] ? ? ?$('[href=a.html]')= ? 獲取所有帶有屬性href，并且值為a.html的元素
!= ?獲取所有帶有屬性href，并且值不等于為a.html的元素
$= ?獲取所有帶有屬性href，并且值以a.html結(jié)尾的元素
^= ?獲取所有帶有屬性href，并且值以a.html開頭的元素
~= ?獲取所有帶有屬性href，并且值包含單詞”a.html“的元素
*= ?獲取所有帶有屬性href，并且值包含文本”a.html“的元素
:input ? ? $(':input')獲取所有input元素
:radio ? ? ? $(':radio')所有帶有 type="radio" 的 input 元素，相似的有：:text、:chexbox、:password、:submit、:reset、:button、:file
:enabled ? ? $(':enabled')所有啟用的input元素。 :disabled ?則相反
:checked ? ? $(':checked')所有選中的input選擇（單選框、復選框）
:gt(index) ? ? ?$('p:gt(2)')index從0開始，獲取index大于（不包含）2的所有
元素
:lt(index) ? ? ? $('p:lt(2)')index從0開始，獲取index小于（不包含）2的所有
元素
2）后半部分選擇器：可以精確到某一個元素
選擇器實例說明
:first ? ?$('p:first')第一個元素
:last ? ? $('p:last')最后一個元素
:eq(index) ? $("p:eq(1)")第二個元素，index從0開始
三、獲取同級元素
顧名思義：獲取選中元素的同級元素。首先需要定位到該元素，然后獲取它的同級元素。
1）選擇器
選擇器實例說明
element + next ? ?$('div + p')每個div相鄰的下一個元素
element ~ siblings ? $('div ~ p')獲取跟div同級的所有的元素
2）遍歷函數(shù)
方法描述
next()返回被選元素的后一個同級元素
nextAll()返回被選元素之后的所有同級元素
prev()返回被選元素的前一個同級元素
prevAll()返回被選元素之前的所有同級元素
四、獲取父級元素
獲取選中元素的父級元素
1）選擇器
選擇器實例說明
:parent ? ?$('p:parent')獲取所有p元素的父級元素
2）遍歷函數(shù)
方法描述
parent()獲取被選元素的父級元素
parents()獲取被選元素的所有祖先元素
五、獲取子級元素
獲取選中元素的子級元素
1）選擇器
選擇器實例說明
parent > child ? ?$('div > p')獲取div直接子元素的所有元素
parent descendant ? ?$('div p')獲取div所有后代的元素
2）遍歷函數(shù)
方法描述
children()返回被選元素的所有直接子元素
contents()返回被選元素的所有直接子元素(包含文本和注釋節(jié)點)
find()返回被選元素的后代元素
獲取頁面I屬性D為test的元素：
1) document.getElementById("test");? //or
2) document.querySelector("#test");? ? //or
3) document.querySelectorAll("#test")[0];
獲取頁面class屬性為”red”的元素:
1) document.getElementsByClassName('red')? ? //or
2) document.querySelector('.red')? //or
3) document.querySelectorAll('.red')
27、移動web觸摸事件
在移動web中，許多的pc端鼠標事件就沒有了，比如mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave全都沒了，click也與之前有所差別。取而代之的是幾個原始的事件：
touchstart ?觸摸開始事件
touchmove 手機滑動事件
touchend 觸摸結(jié)束事件
touchcancel ?觸摸意外中斷事件
Touch對象主要屬性如下：
-clientX / clientY：觸摸點相對瀏覽器窗口的位置
-pageX / pageY：觸摸點相對于頁面的位置
-screenX / screenY：觸摸點相對于屏幕的位置
-identifier：touch對象的ID
-target：當前的DOM元素
28、addEventListenert添加事件方法
addEventListenert與on添加事件的區(qū)別：on后添加的會覆蓋住前面添加的事件，從而只執(zhí)行最后一次添加的事件，addEventListenert不會覆蓋，可以多次綁定同一個事件
addEventListenert事件參數(shù)：（三個參數(shù)）
addEventListenert方法第一個參數(shù)填寫事件名，注意不需要寫on，第二個參數(shù)可以是一個函數(shù)，第三個參數(shù)是指在冒泡階段還是捕獲階段處理事件處理程序,如果為true代表捕獲階段處理,如果是false代表冒泡階段處理，第三個參數(shù)可以省略
29、事件冒泡、捕獲執(zhí)行過程
事件冒泡執(zhí)行過程：
從最具體的的元素（你單擊的那個元素）開始向上開始冒泡，拿我們下面的案例講它的順序是：child->box
addEventListenert事件第三個參數(shù)默認是false，既默認情況是按照事件冒泡的執(zhí)行順序進行的
事件捕獲執(zhí)行過程：
從最不具體的元素（最外面的那個盒子）開始向里面冒泡，拿我們下面的案例講它的順序是：box->child
第三個參數(shù)寫的是true，則按照事件捕獲的執(zhí)行順序進行的
30、.trim()事件
$.trim() 函數(shù)用于去除字符串兩端的空白字符。
注意：$.trim()函數(shù)會移除字符串開始和末尾處的所有換行符，空格(包括連續(xù)的空格)和制表符。如果這些空白字符在字符串中間時，它們將被保留，不會被移除。
31、過渡效果
translation:過渡效果執(zhí)行完畢之后，默認會還原到原始狀態(tài)，多個樣式同時添加效果，用逗號隔開。
1）.transition-property:添加過渡效果的樣式屬性名稱
transition-property: left;
2）.transition-duration:過渡效果的耗時 以秒做為單位
transition-duration: 2s;
3）.transition-timing-function:設(shè)置時間函數(shù)--控制運動的速度
transition-timing-function: linear;
4）.transition-delay:過渡效果的延遲
transition-delay: 2s;
簡寫：transition:屬性名稱 過渡時間? 時間函數(shù)? 延遲
32、節(jié)流閥的使用
當要控制完成某一段代碼之后再執(zhí)行下一段代碼的時候，可以考慮使用節(jié)流閥，對代碼進行控制。具體使用案例如下：
33、findIndex()方法
調(diào)用list.findIndex()方法根據(jù)傳入的id獲取到這個要刪除數(shù)據(jù)的索引值
小技巧：
1）為了防止頁面縮小后布局混亂，可以限制寬或高，然后溢出隱藏；
2）元素要浮動，父級元素必須要有寬度；
3）伸縮盒子row默認有-15px的margin，col默認有10px的padding，記得要自己清除；
4）關(guān)于數(shù)字計算時，為了避免字符串相加為字符串平拼接，就得不到我們想要的結(jié)果，所以要記得加parseInt（）；
5）對于伸縮盒子和柵格系統(tǒng)，盒子之間要設(shè)margin或者盒子有可見的邊框，直接在盒子上設(shè)置，會被擠的換行，要解決這個問題，可以給盒子里再套一個小盒子，然后給小盒子設(shè)margin；
6）position：static；可以用來取消定位（比如使用第三方庫，修改的時候某個元素不需要定位，則可以使用方法來取消第三方庫中的不必要定位）；
7）function auto(){ $(".change").fadeOut(400); $(".change").fadeIn(400); } setInterval(auto,0);實現(xiàn)閃爍功能
