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 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素

具体区别如下

3、任意居中

line-height可以实现文本垂直居中，text-align：center；可以实现文本居中对齐，可以使用上图方法实现任意居中。

4、伸缩盒子与栅格系统

伸缩盒子：

设置父元素display：flex；子元素设置flex：1；表示占据剩余位置，具体的参见伸缩盒子部分文章。

伸缩盒子默认不会自动换行，所以如果要设置多行显示，记得要设置flex-wrap:wrap;

nowrap是不自动换行的意思。

栅格系统：

使用书写格式如下：

注意：.row盒子默认有负的margin值，.col-xs-4盒子默认有padding值，记得使用时有必要要清除默认值

伸缩盒子与栅格系统的使用区别：

如果要动态添加或者删除元素，则只能使用伸缩盒子

5、伪元素after、before

一般加一些小的部分或图标，可以考虑使用伪元素after或before，记得一定要写content：" "；如果要设置为元素的标签是行内元素，则要转化为块级元素，既添加display：block；

注意：行内元素变成块级元素的三种方式：display：block；，浮动，定位。

6、template模板

使用template模板，需要引入template.js文件，且若{{}}包裹的是字符串式的语义化的标签时，需要在模板中加上#

7、jquery添加元素技巧

jQuery添加插入元素技巧：

jquery添加分为在指定元素的里面添加和外面添加两种：

里面添加使用（append 和prepend）

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

里面的前面添加使用

prepend和prependTo

里面的后面添加使用

append(规定要插入的内容（可包含 HTML 标签))  或appendTo(规定要插入的内容（必须包含 HTML 标签）)

外面添加使用（after和before）

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

外面的前面添加使用

before或insertBefore

外面的后面添加使用

after或insertAfter

append() - 通过 HTML、jQuery 和 DOM 创建内容

8、通过jquery获取元素内容

三个简单实用的用于 DOM 操作的 jQuery 方法：

.text() - 设置或返回所选元素的文本内容

.html() - 设置或返回所选元素的内容（包括 HTML 标记）

.val() - 设置或返回表单字段的值

9、jquery属性操作

1)  .attr()  与 prop()

.attr()  设置或返回匹配元素的属性和值,注意只能返回行内样式的属性的值

$("img").attr("width","180");  设置属性

$("img").attr("width")     获取属性的值

attr()与prop()的区别：

具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，获取返回会得到false，或者true，而其他的使用 attr()：具体事例如下

运行如上代码，得到的结果是如下图：

2）.addClass()  

addClass() 方法向被选元素添加一个或多个类。

该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性,提示：如需添加多个类，使用空格分隔类名

3).removeClass()

removeClass() 方法从被选元素移除一个或多个类,

规定要移除的 class 的名称。

如需移除若干类，请使用空格来分隔类名。

如果不设置该参数，则会移除所有类。

4)removeAttr() 

removeAttr() 方法从被选元素中移除属性。
必需规定从指定元素中移除的属性

5).toggleClass()                                                                              *****

toggleClass() 对设置或移除被选元素的一个或多个类进行切换。

该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。

5).val()

val() 方法返回或设置被选元素的值。

元素的值是通过 value 属性设置的。该方法大多用于 input 元素。

如果该方法未设置参数，则返回被选元素的当前值。

6).html()

html() 方法设置或返回被选元素的内容（innerHTML）,会将符合标签格式的内容解析成标签。

当该方法用于返回内容时，则返回第一个匹配元素的内容。

当该方法用于设置内容时，则重写所有匹配元素的内容。

7）.text()

text() 方法设置或返回被选元素的文本内容。

当该方法用于返回内容时，则返回所有匹配元素的文本内容（会删除 HTML 标记）。

当该方法用于设置内容时，则重写所有匹配元素的内容。

10、自定义属性

普通的HTML中，可以直接自定义属性，通过getAttribute() 获取相关特性，也可以获取到自定义的特性，区别于使用DOM元素的属性获取

setAttribute() 设置相关特性

html5中，要求自定义属性前必须加data，

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

2）使用dataset操作自定义属性

注意的是如果data-属性名中包含了连字符（比如：data-date-of-birth),则映射中对应的属性为dateOfBirth,即转换为相应的驼峰格式来显示。

11、交集选择器的使用

当需要给某个元素动态设置某个属性时，可以选择动态添加属性，然后既是某元素，又具有此属性时怎样怎样，代码实现如下：

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()方法移除被选元素的事件处理程序

规定从指定元素上删除的一个或多个事件处理程序。

如果没有规定参数，unbind() 方法会删除指定元素的所有事件处理程序。

2）.bind()给被选元素添加事件

bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

17、兄弟选择器

+：获取当前元素的相邻的满足条件的元素

~：获取当前元素的满足条件的兄弟元素

18、Javascript:history.go()和history.back()的用法和区别

.go()后退并刷新

.back()后退

19、document对象

document.title  获取当前页面的标题

document.URL  夺取当前页面的地址

document.write();向文档写入 HTML 表达式或 JavaScript 代码。

20、dom与jquery关于获取属性的语法区别：

1）classList（）：（h5）

属性返回元素的类名，作为 DOMTokenList 对象。

该属性用于在元素中添加，移除及切换 CSS 类。

classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。

2）className（）：（dom）

属性设置或返回元素的 class 属性。    

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

设置或返回被选元素的属性和值。

21、精灵图

1）背景图片与img图片的区别：

Img属于html标签，background是css方法，按照浏览器解析机制，html标签优先解析，所以重要的元素，如logo就应该使用img，如果仅仅是为了显示一张图片，比如banner、广告图等，建议采用background方式。因为不重要的自动往后排，避免占用带宽，造成数据阻塞。

建议：重要的需要优先加载的图片最好采用img。不重要的图片最好采用background。

2）精灵图的优点：

减少请求次数，降低服务器压力

使用精灵图基本语法如上图。

22、盒模型

box-sizing : content-box; 此时，盒子总宽度/高度=width/height+padding+border+margin

box-sizing: border-box;此时，盒子总宽度/高度=width/height + margin；

23、background-size

1）设置数字

2）设置百分比

3）设置container：

按比例调整图片大小，使用图片宽高自适应整个元素的背景区域，使图片全部包含在容器内

1.图片大于容器：有可能造成容器的空白区域,将图片缩小

2.图片小于容器：有可能造成容器的空白区域，将图片放大

4）设置cover：

与contain刚好相反，背景图片会按比例缩放自 适应整个背景区域，如果背景区域不足以包含所有背景图片，图片内容会溢出

1.图片大于容器：等比例缩小，会填满整个背景区域，有可能造成图片的某些区域不可见

2.图片小于容器：等比例放大，填满整个背景区域，图片有可能造成某个方向上内容的溢出

使用：banner图片比较大，要想使图片居中显示，要使用如下方法：

24、提升响应区域的大小

25、获取屏幕高度、内容高度、滑动高度的方法

26、获取元素

.querySelector获得的是单个元素

querySelectorAll获取的是一个数组

1）前半部分选择器

选择器实例说明

.class     $('.myClass')类选择器：可以获取到class为‘myClass’的所有元素

element    $('p')获取所有的元素

:header      $(':header')获取所有的标题元素：

:animated     $(':animated')获取所有的动画元素

:contains(text)     $('p:contains(Hello)')获取所有包含文本为Hello的元素，中间的文本区分大小写

: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()返回被选元素的所有直接子元素(包含文本和注释节点)

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添加事件的区别：on后添加的会覆盖住前面添加的事件，从而只执行最后一次添加的事件，addEventListenert不会覆盖，可以多次绑定同一个事件

addEventListenert事件参数：（三个参数）

addEventListenert方法第一个参数填写事件名，注意不需要写on，第二个参数可以是一个函数，第三个参数是指在冒泡阶段还是捕获阶段处理事件处理程序,如果为true代表捕获阶段处理,如果是false代表冒泡阶段处理，第三个参数可以省略

29、事件冒泡、捕获执行过程

事件冒泡执行过程：

从最具体的的元素（你单击的那个元素）开始向上开始冒泡，拿我们下面的案例讲它的顺序是：child->box

addEventListenert事件第三个参数默认是false，既默认情况是按照事件冒泡的执行顺序进行的

事件捕获执行过程：

从最不具体的元素（最外面的那个盒子）开始向里面冒泡，拿我们下面的案例讲它的顺序是：box->child

第三个参数写的是true，则按照事件捕获的执行顺序进行的

30、.trim()事件

$.trim() 函数用于去除字符串两端的空白字符。

注意：$.trim()函数会移除字符串开始和末尾处的所有换行符，空格(包括连续的空格)和制表符。如果这些空白字符在字符串中间时，它们将被保留，不会被移除。

31、过渡效果

translation:过渡效果执行完毕之后，默认会还原到原始状态，多个样式同时添加效果，用逗号隔开。

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、节流阀的使用

当要控制完成某一段代码之后再执行下一段代码的时候，可以考虑使用节流阀，对代码进行控制。具体使用案例如下：

33、findIndex()方法

调用list.findIndex()方法根据传入的id获取到这个要删除数据的索引值

小技巧：

1）为了防止页面缩小后布局混乱，可以限制宽或高，然后溢出隐藏；

2）元素要浮动，父级元素必须要有宽度；

3）伸缩盒子row默认有-15px的margin，col默认有10px的padding，记得要自己清除；

4）关于数字计算时，为了避免字符串相加为字符串平拼接，就得不到我们想要的结果，所以要记得加parseInt（）；

5）对于伸缩盒子和栅格系统，盒子之间要设margin或者盒子有可见的边框，直接在盒子上设置，会被挤的换行，要解决这个问题，可以给盒子里再套一个小盒子，然后给小盒子设margin；

6）position：static；可以用来取消定位（比如使用第三方库，修改的时候某个元素不需要定位，则可以使用方法来取消第三方库中的不必要定位）；

7）function auto(){ $(".change").fadeOut(400); $(".change").fadeIn(400); } setInterval(auto,0);实现闪烁功能