1走诞、less文件

? ? ? ? less文件本身不能夠被瀏覽器識別屎飘，所以要使用less文件，必須引入less.js文件个粱，且應該在引入我們自己寫的less文件之后再引入less.js文件古毛，切記：順序不能夠錯！

如果不引入less文件，只想使用less文件來寫代碼稻薇，webstorm提供了一轉化方法嫂冻，操作如下：建立less文件，在setting中搜索File Watchers 塞椎，

點擊右上角的加號桨仿，出現如下頁面，選擇less案狠，點擊確定服傍，則在less文件中寫的代碼，webstrom可以自動生成對應的css文件莺戒，完成后伴嗡，可以只引入css文件

2、一些css標簽

1) input標簽type類型為search

<input type="search" />从铲，可以實現在文本框里添加文字時自動出現X號（僅限在谷歌瀏覽器中）瘪校，如果引入bootstrap插件，則X號會被隱藏名段，可以通過如下方式自己設置一個X號：

2）屬性選擇器

input [ type=search ]阱扬；假如有多個input標簽，type值不同伸辟，則可以通過標簽選擇器的某個屬性來選中某個標簽麻惶，如上圖，選擇type值為search的input標簽信夫。

3）去掉默認邊框

border：0窃蹋；

outline：none；

4）設置背景圖片相關事宜：

設置背景圖片后静稻，記得寫background-size警没；如下圖：

5）相對于父級元素的結構元素：

div：last-of-type? 匹配的是某父元素下相同類型子元素中的第一個

div：last-child 匹配的是某父元素的第一個子元素，可以說是結構上的第一個子元素

具體區(qū)別如下

3振湾、任意居中

line-height可以實現文本垂直居中杀迹，text-align：center；可以實現文本居中對齊押搪，可以使用上圖方法實現任意居中树酪。

4、伸縮盒子與柵格系統(tǒng)

伸縮盒子：

設置父元素display：flex大州；子元素設置flex：1续语；表示占據剩余位置，具體的參見伸縮盒子部分文章厦画。

伸縮盒子默認不會自動換行绵载，所以如果要設置多行顯示，記得要設置flex-wrap:wrap;

nowrap是不自動換行的意思。

柵格系統(tǒng)：

使用書寫格式如下：

注意：.row盒子默認有負的margin值娃豹，.col-xs-4盒子默認有padding值焚虱，記得使用時有必要要清除默認值

伸縮盒子與柵格系統(tǒng)的使用區(qū)別：

如果要動態(tài)添加或者刪除元素，則只能使用伸縮盒子

5懂版、偽元素after鹃栽、before

一般加一些小的部分或圖標，可以考慮使用偽元素after或before躯畴，記得一定要寫content：" "民鼓；如果要設置為元素的標簽是行內元素，則要轉化為塊級元素蓬抄，既添加display：block丰嘉；

注意：行內元素變成塊級元素的三種方式：display：block；嚷缭，浮動饮亏，定位。

6阅爽、template模板

使用template模板路幸，需要引入template.js文件，且若{{}}包裹的是字符串式的語義化的標簽時付翁，需要在模板中加上#

7简肴、jquery添加元素技巧

jQuery添加插入元素技巧：

jquery添加分為在指定元素的里面添加和外面添加兩種：

里面添加使用（append 和prepend）

里面添加又分為在里面的前面添加和后面添加

里面的前面添加使用

prepend和prependTo

里面的后面添加使用

append(規(guī)定要插入的內容（可包含 HTML 標簽))? 或appendTo(規(guī)定要插入的內容（必須包含 HTML 標簽）)

外面添加使用（after和before）

外面添加又分為在外面的前面添加和后面添加

外面的前面添加使用

before或insertBefore

外面的后面添加使用

after或insertAfter

append() - 通過 HTML、jQuery 和 DOM 創(chuàng)建內容

8百侧、通過jquery獲取元素內容

三個簡單實用的用于 DOM 操作的 jQuery 方法：

.text() - 設置或返回所選元素的文本內容

.html() - 設置或返回所選元素的內容（包括 HTML 標記）

.val() - 設置或返回表單字段的值

9砰识、jquery屬性操作

1) ?.attr() ?與 prop()

.attr() ?設置或返回匹配元素的屬性和值,注意只能返回行內樣式的屬性的值

$("img").attr("width","180"); ?設置屬性

$("img").attr("width") ? ? 獲取屬性的值

attr()與prop()的區(qū)別：

具有 true 和 false 兩個屬性的屬性，如 checked, selected 或者 disabled 使用prop()佣渴，獲取返回會得到false仍翰，或者true，而其他的使用 attr()：具體事例如下

運行如上代碼观话，得到的結果是如下圖：

2）.addClass() ?

addClass() 方法向被選元素添加一個或多個類。

該方法不會移除已存在的 class 屬性越平，僅僅添加一個或多個 class 屬性,提示：如需添加多個類频蛔，使用空格分隔類名

3).removeClass()

removeClass() 方法從被選元素移除一個或多個類,

規(guī)定要移除的 class 的名稱。

如需移除若干類秦叛，請使用空格來分隔類名晦溪。

如果不設置該參數，則會移除所有類挣跋。

4)removeAttr()?

removeAttr() 方法從被選元素中移除屬性三圆。
必需規(guī)定從指定元素中移除的屬性

5).toggleClass() ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?*****

toggleClass() 對設置或移除被選元素的一個或多個類進行切換。

該方法檢查每個元素中指定的類。如果不存在則添加類舟肉，如果已設置則刪除之修噪。這就是所謂的切換效果。

5).val()

val() 方法返回或設置被選元素的值路媚。

元素的值是通過 value 屬性設置的黄琼。該方法大多用于 input 元素。

如果該方法未設置參數整慎，則返回被選元素的當前值脏款。

6).html()

html() 方法設置或返回被選元素的內容（innerHTML）,會將符合標簽格式的內容解析成標簽。

當該方法用于返回內容時裤园，則返回第一個匹配元素的內容撤师。

當該方法用于設置內容時，則重寫所有匹配元素的內容拧揽。

7）.text()

text() 方法設置或返回被選元素的文本內容剃盾。

當該方法用于返回內容時，則返回所有匹配元素的文本內容（會刪除 HTML 標記）强法。

當該方法用于設置內容時万俗，則重寫所有匹配元素的內容。

10饮怯、自定義屬性

普通的HTML中闰歪，可以直接自定義屬性，通過getAttribute() 獲取相關特性蓖墅，也可以獲取到自定義的特性库倘，區(qū)別于使用DOM元素的屬性獲取

setAttribute() 設置相關特性

html5中，要求自定義屬性前必須加data论矾，

1）使用getAttribute()方法以及setAttribute()方法操作自定義屬性

2）使用dataset操作自定義屬性

注意的是如果data-屬性名中包含了連字符（比如：data-date-of-birth),則映射中對應的屬性為dateOfBirth,即轉換為相應的駝峰格式來顯示教翩。

11、交集選擇器的使用

當需要給某個元素動態(tài)設置某個屬性時贪壳，可以選擇動態(tài)添加屬性饱亿，然后既是某元素，又具有此屬性時怎樣怎樣闰靴，代碼實現如下：

12彪笼、split()字符串分割成數組

使用一個指定的分隔符把一個字符串分割存儲到數組中，

13蚂且、join() 將數組合并成字符串

使用您選擇的分隔符將一個數組合并為一個字符串配猫，

14、slice()切割字符串

slice(x,y) ?X;起始位置 ? y：結束位置

Substr(x,y) ?x:起始位置 ? Y：長度

Substring（x,y）X;起始位置? y：結束位置

15杏死、將數組轉換成對象

16.unbind() 與.bind()方法移除被選元素的事件處理程序

1）.unbind()方法移除被選元素的事件處理程序

規(guī)定從指定元素上刪除的一個或多個事件處理程序捆交。

如果沒有規(guī)定參數，unbind() 方法會刪除指定元素的所有事件處理程序腐巢。

2）.bind()給被選元素添加事件

bind() 方法為被選元素添加一個或多個事件處理程序品追，并規(guī)定事件發(fā)生時運行的函數。

17系忙、兄弟選擇器

+：獲取當前元素的相鄰的滿足條件的元素

~：獲取當前元素的滿足條件的兄弟元素

18诵盼、Javascript:history.go()和history.back()的用法和區(qū)別

.go()后退并刷新

.back()后退

19、document對象

document.title ?獲取當前頁面的標題

document.URL ?奪取當前頁面的地址

document.write();向文檔寫入 HTML 表達式或 JavaScript 代碼银还。

20风宁、dom與jquery關于獲取屬性的語法區(qū)別：

1）classList（）：（h5）

屬性返回元素的類名，作為 DOMTokenList 對象蛹疯。

該屬性用于在元素中添加戒财，移除及切換 CSS 類。

classList 屬性是只讀的捺弦，但你可以使用 add() 和 remove() 方法修改它饮寞。

2）className（）：（dom）

屬性設置或返回元素的 class 屬性。 ? ?

3）.attr("calss"): ?(jqury)

設置或返回被選元素的屬性和值列吼。

21幽崩、精靈圖

1）背景圖片與img圖片的區(qū)別：

Img屬于html標簽，background是css方法寞钥，按照瀏覽器解析機制慌申，html標簽優(yōu)先解析，所以重要的元素理郑，如logo就應該使用img蹄溉，如果僅僅是為了顯示一張圖片，比如banner您炉、廣告圖等柒爵，建議采用background方式。因為不重要的自動往后排赚爵，避免占用帶寬棉胀，造成數據阻塞。

建議：重要的需要優(yōu)先加載的圖片最好采用img冀膝。不重要的圖片最好采用background唁奢。

2）精靈圖的優(yōu)點：

減少請求次數，降低服務器壓力

使用精靈圖基本語法如上圖畸写。

22、盒模型

box-sizing : content-box; 此時氓扛，盒子總寬度/高度=width/height+padding+border+margin

box-sizing: border-box;此時枯芬，盒子總寬度/高度=width/height + margin论笔；

23、background-size

1）設置數字

2）設置百分比

3）設置container：

按比例調整圖片大小千所，使用圖片寬高自適應整個元素的背景區(qū)域狂魔，使圖片全部包含在容器內

1.圖片大于容器：有可能造成容器的空白區(qū)域,將圖片縮小

2.圖片小于容器：有可能造成容器的空白區(qū)域，將圖片放大

4）設置cover：

與contain剛好相反淫痰，背景圖片會按比例縮放自 適應整個背景區(qū)域最楷，如果背景區(qū)域不足以包含所有背景圖片，圖片內容會溢出

1.圖片大于容器：等比例縮小待错，會填滿整個背景區(qū)域籽孙，有可能造成圖片的某些區(qū)域不可見

2.圖片小于容器：等比例放大，填滿整個背景區(qū)域火俄，圖片有可能造成某個方向上內容的溢出

使用：banner圖片比較大犯建，要想使圖片居中顯示，要使用如下方法：

24瓜客、提升響應區(qū)域的大小

25适瓦、獲取屏幕高度、內容高度谱仪、滑動高度的方法

26玻熙、獲取元素

.querySelector獲得的是單個元素

querySelectorAll獲取的是一個數組

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結尾的元素

^= ?獲取所有帶有屬性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）遍歷函數

方法描述

next()返回被選元素的后一個同級元素

nextAll()返回被選元素之后的所有同級元素

prev()返回被選元素的前一個同級元素

prevAll()返回被選元素之前的所有同級元素

四芋膘、獲取父級元素

獲取選中元素的父級元素

1）選擇器

選擇器實例說明

:parent ? ?$('p:parent')獲取所有p元素的父級元素

2）遍歷函數

方法描述

parent()獲取被選元素的父級元素

parents()獲取被選元素的所有祖先元素

五鳞青、獲取子級元素

獲取選中元素的子級元素

1）選擇器

選擇器實例說明

parent > child ? ?$('div > p')獲取div直接子元素的所有元素

parent descendant ? ?$('div p')獲取div所有后代的元素

2）遍歷函數

方法描述

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 觸摸結束事件

touchcancel ?觸摸意外中斷事件

Touch對象主要屬性如下：

-clientX / clientY：觸摸點相對瀏覽器窗口的位置

-pageX / pageY：觸摸點相對于頁面的位置

-screenX / screenY：觸摸點相對于屏幕的位置

-identifier：touch對象的ID

-target：當前的DOM元素

28剃斧、addEventListenert添加事件方法

addEventListenert與on添加事件的區(qū)別：on后添加的會覆蓋住前面添加的事件，從而只執(zhí)行最后一次添加的事件忽你，addEventListenert不會覆蓋幼东，可以多次綁定同一個事件

addEventListenert事件參數：（三個參數）

addEventListenert方法第一個參數填寫事件名，注意不需要寫on科雳，第二個參數可以是一個函數根蟹，第三個參數是指在冒泡階段還是捕獲階段處理事件處理程序,如果為true代表捕獲階段處理,如果是false代表冒泡階段處理，第三個參數可以省略

29糟秘、事件冒泡简逮、捕獲執(zhí)行過程

事件冒泡執(zhí)行過程：

從最具體的的元素（你單擊的那個元素）開始向上開始冒泡，拿我們下面的案例講它的順序是：child->box

addEventListenert事件第三個參數默認是false尿赚，既默認情況是按照事件冒泡的執(zhí)行順序進行的

事件捕獲執(zhí)行過程：

從最不具體的元素（最外面的那個盒子）開始向里面冒泡散庶，拿我們下面的案例講它的順序是：box->child

第三個參數寫的是true，則按照事件捕獲的執(zhí)行順序進行的

30凌净、.trim()事件

$.trim() 函數用于去除字符串兩端的空白字符悲龟。

注意：$.trim()函數會移除字符串開始和末尾處的所有換行符，空格(包括連續(xù)的空格)和制表符冰寻。如果這些空白字符在字符串中間時须教，它們將被保留，不會被移除斩芭。

31轻腺、過渡效果

translation:過渡效果執(zhí)行完畢之后羹奉，默認會還原到原始狀態(tài)，多個樣式同時添加效果约计，用逗號隔開。

1）.transition-property:添加過渡效果的樣式屬性名稱

transition-property: left;

2）.transition-duration:過渡效果的耗時 以秒做為單位

transition-duration: 2s;

3）.transition-timing-function:設置時間函數--控制運動的速度

transition-timing-function: linear;

4）.transition-delay:過渡效果的延遲

transition-delay: 2s;

簡寫：transition:屬性名稱 過渡時間? 時間函數? 延遲

32迁筛、節(jié)流閥的使用

當要控制完成某一段代碼之后再執(zhí)行下一段代碼的時候煤蚌，可以考慮使用節(jié)流閥，對代碼進行控制细卧。具體使用案例如下：

33尉桩、findIndex()方法

調用list.findIndex()方法根據傳入的id獲取到這個要刪除數據的索引值

小技巧：

1）為了防止頁面縮小后布局混亂，可以限制寬或高贪庙，然后溢出隱藏蜘犁；

2）元素要浮動，父級元素必須要有寬度止邮；

3）伸縮盒子row默認有-15px的margin这橙，col默認有10px的padding，記得要自己清除导披；

4）關于數字計算時屈扎，為了避免字符串相加為字符串平拼接，就得不到我們想要的結果撩匕，所以要記得加parseInt（）鹰晨；

5）對于伸縮盒子和柵格系統(tǒng)，盒子之間要設margin或者盒子有可見的邊框止毕，直接在盒子上設置模蜡，會被擠的換行，要解決這個問題扁凛，可以給盒子里再套一個小盒子忍疾，然后給小盒子設margin；

6）position：static令漂；可以用來取消定位（比如使用第三方庫膝昆，修改的時候某個元素不需要定位，則可以使用方法來取消第三方庫中的不必要定位）叠必；

7）function auto(){ $(".change").fadeOut(400); $(".change").fadeIn(400); } setInterval(auto,0);實現閃爍功能