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);实现闪烁功能
