1 js变量声明规则和数据类型有哪些?
- 变量名可以由数字、字母、下划线_、$符组成，但不能以数字开头。
- 不能使用关键字或保留字当做变量名。
- 变量名区分大小写；
建议使用驼峰式命名。
数据类型：number，boolean，string,object(复杂类型),null,undefined,
2 描述下js中的作用域
全局作用域和局部作用域
在局部作用域中的变量不能在全局中访问，
全局作用域中的变量可以在局部作用域中使用；
3 简单类型和复杂类型数据的区别
1.简单数据类型和复杂数据类型在内存中存放的地址有区别，
简单的存放在栈区中，复杂的数据类型变量名存放在栈区中，栈区中变量名所指向的数据是存放在堆区中；
2.基本数据类型作为参数时，函数内部对参数值的修改不会改变外部变量的值，因为他是简单的复制了一份，反之复杂数据类型会改变。
4 常用的数组和字符串方法各举例6个
数组：长度：length 结尾添加：push, 删除数组最后一个：pop,删除第一个：shift，在前面添加一个或多个元素unshift,截取：slice, 插入、删除或替换数组的元素splice( )
字符串：split() 将一个字符串转成数组；slice( ) 抽取一个子串；toUpperCase( ) 将字符串转换成大写；toLowerCase( ) 将字符串转换成小写；concat( ) 连接字符串
5 什么是DOM/BOM?
这是浏览器运行时中的两个不同的概念。
1、BOM 浏览器对象模型
提供了独立于内容而与浏览器窗口进行交互的对象。
描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作，
譬如可以弹出新的窗口，改变状态栏中的文本，对Cookie的支持，
IE还扩展了BOM，加入了ActiveXObject类，可以通过js脚本实例化ActiveX对象等等）
2、DOM 文档对象模型
DOM是针对XML的基于树的API。描述了处理网页内容的方法和接口，
是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。
DOM本身是与语言无关的API，它并不与Java，JavaScript或其他语言绑定。
6 用js实现匀速动画的思路
1.定义一个按钮，和一个盒子
2.设置一个定时器，然后获取盒子原有的left值（offsetleft），更改该盒子的位置；
3.设置一个left目标值；判断目标值left是否到达这个值，到达就清除定时器，结束本次函数执行；
7 原型的理解,什么是原型图
Javascript 是面向对象的，每个实例对象都有一个proto_属性，该属性指向它原 型对象，
这个实例对象的构造函数有一个原型属性 prototype，与实例的proto属性指 向同一个对象。
当一个对象在查找一个属性的时，自身没有就会根据proto_ 向它的原型 进行查找，如果都没有，
则向它的原型的原型继续查找，直到查到 Object.prototype.proto_为null，这样也就形成了原型链。
8 this指向有哪些?
this 是一个关键字，它代表函数运行时，自动生成的一个内部对象，只能在函数内 部使用。
1.作为纯粹的函数调用 this 指向全局对象
2.作为对象的方法调用 this 指向调用对象
3.作为构造函数被调用 this 指向新的对象（new会改变 this 的指向）
4.apply 、call调用 this 指向 apply方法的第一个参数
9 什么是闭包?
简单的说，作用域是针对变量的，比如我们创建一个函数a1，函数里面又包了一 个子函数 a2。
此时就存在三个作用域： 全局作用域、a1作用域、a2 作用域；即全局作用域包含了a1的作用域，
a2 的作用 域包含了 a1的作用域。 当a1 在查找变量的时候会先从自身的作用域区查找，
找不到再到上一级a2 的作用域 查找，如果还没找到就到全局作用域区查找，这样就形成了一个作用域链。
理解闭包首先要理解，js 垃圾回收机制，也就是当一个函数被执行完后，其作用域会被 收回，
如果形成了闭包，执行完后其作用域就不会被收回。 如果某个函数被他的父函数之外的一个变量引用，
就会形成闭包。 闭包的作用，就是保存自己私有的变量，通过提供的接口（方法）给外部使用，
但外部 不能直接访问该变量。
10 入口函数的理解
1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是 DOM 结构绘制完毕后就执行，不必等到加载完毕。
2.编写个数不同 window.onload不能同时编写多个，如果有多个 window.onload 方法，
只会执 行一个 $(document).ready()可以同时编写多个，并且都可以得到执行
3.简化写法 window.onload没有简化写法
$(document).ready(function (){})
可以简写成$(function(){})；
------------------------------------------------------------------------------------------------
1. 清除浮动的方式
清除浮动的方式有5种：1-父级元素定义设置高 2-结尾处加空的div clear:both;
3-父级div定义 overflow：hidden; 4-父级div定义 伪类：after 和 zoom ;
5-双伪元素法：
.clearfix：before，.clearfix：after {
content： ""；
display： block；
clear：both；
}
.clearfix {
zoom： 1；}
2.伪类和伪元素的区别
伪类多用于选择器，改变原有元素的样式；伪元素像before，after在原有的元素前面或者后面添加元素；
3.线性渐变的写法,径向渐变的写法
线性：background-image: linear-gradient(方向|角度, 颜色1 位置1, 颜色2 位置2, ...);
径向：background-image: radial-gradient(形状 大小 at 渐变中心点x位置 渐变中心点y位置, 颜色 颜色位置, 颜色 颜色位置 ...);
4.定义一个动画序列
animation: donghua 8s linear infinite;
@keyframes donghua {
from{}
to{}
}
5.浏览器本地存储的方式有哪些?有什么区别?
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
6.什么是流式布局?媒体查询怎么写?
流式布局 ：页面元素的宽度按照屏幕分辨率进行适配调整，单整体布局不变；
使用%百分比定义宽度，高度大都是用px来固定，根据可视区域（viewport）和父元素的实时尺寸进行调整；
媒体查询：
1-link标签引入：
2-css方式：@media only screen and (max-width: 640px) {
html {
background-color: pink;
}
/* 其它任意样式表 */
}
7.rem布局的理解?是如何做到随着窗口的更改让页面布局等比缩放的
其实rem布局的本质是等比缩放，一般是基于宽度，试想一下如果UE图能够等比缩放，
假设我们将屏幕宽度平均分成100份，每一份的宽度用x表示，x = 屏幕宽度 / 100，如果将x作为单位，
x前面的数值就代表屏幕宽度的百分比。
8.什么是http协议?它包含哪些部分?
http协议：超文本传输协议，客户端（浏览器端）与WEB服务器之间的交互协议。
当浏览器和服务器进行数据交换时，html文件、图片、CSS、JS等都是基于http协议进行传输的。
包含部分：
请求: 访问服务器的任何一个文件都是一次请求
响应: 服务器处理请求，将结果返回给浏览器。
9.什么是ajax?
主要用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新
10.请求报文有哪些部分组成?
3个部分组成：请求行，请求头，请求主体
请求行: 请求方式、请求URL地址、协议版本号
请求头: 主机域名，客户端(浏览器)的信息等
请求主体: 发送给服务器的数据，get和post都会通过请求主体将数据发送给服务器
-----------------------------------------------------------------------------------------
1.距离三大系列都有什么?
offset/client/scroll三大系列
------
offsetX 鼠标距离事件源左上角的横向距离
offsetWidth 元素真实宽高(以外边距为准)
offsetLeft 元素与最近定位过的父容器的距离
------
clientX 鼠标距离浏览器左边框的距离
clientWidth 元素真实宽高(以content+padding为准)
clientLeft 元素左边框
------
scrollX 允许横向滚动(scrollX:true)----几乎不用
scrollWidth 元素真实宽高(含卷曲出去的宽高)
scrollLeft 元素左边卷曲出去的距离----容器盒子使用
2.如何操作类名和自定义属性?
操作属性：元素.className 元素.className='' 元素.属性名/（设置）元素.属性名=‘值’
add,remove,toggle,datalist
自定义属性：
获取：节点对象.getAttribute('属性名')；//会返回标签的属性的值
设置：节点对象.setAttribute('属性名','值')；//会修改或者添加属性的值
删除：节点对象.removeAttribute('属性名')；//会删除标签的属性
3.事件三要素是什么?
事件源，事件类型，事件处理程序
4.什么是事件委托?它的原理是什么?为什么用事件委托?
事件委托：事件委托，也叫事件代理。指的是子孙元素的事件绑定，完全交给其上级父元素或祖先元素绑定
原理：
事件委托的原理用到的就是 目标元素 和 事件冒泡，把事件注册到父元素或父级以上的元素上，
等待 子元素事件冒泡，并且在父元素或父级以上的元素注册的事件中能够
通过事件对象.target判断是哪个子元素，从而做相应处理。
步骤：
① 给目标元素的父元素或父级以上的元素注册事件
② 在父元素或父级以上元素注册的事件中通过 事件对象.target判断是哪个子元素
③ 根据判断做出处理。
原因（作用）：
减少内存的滥用，提高程序性能；
可以代理新动态添加的元素的事件。
5.绑定的方式有哪些?有什么优缺点?
方式：
原生方式: 事件目标.事件类型 = 事件处理程序 元素.onclick = function(){};
事件监听： 事件目标.addEventListener(事件类型,事件处理程序,是否捕获); 元素.addElementListener('click',function(){});
attachEvent();//这个事件类型要加on
jQuery目前有on(),
off() 取消事件绑定
1. $("p").off(): 取消所有事件
2. $("p").off("click"): 取消点击事件
3. $("p").off("click mouseover"):取消多个事件
4. $(document).off("click","p"):取消事件委派
6.常见地址栏操作API有哪些?
location.assign('url');跳转到新的页面，并会把之前的页面保存在历史记录中
location.replace('url');跳转到新的页面，但不会把之前的页面保存在历史记录中
location.reload(); 刷新
7.事件三个阶段是什么?
捕获阶段，目标阶段，冒泡阶段（事件捕获、目标元素 、 事件冒泡）
默认为false, 启用了冒泡阶段的处理
8.历史操作API有哪些?
history.back();加载上一个历史记录
history.forward();加载下一个历史记录
history.go(num); num=-1 --->上一个页面 num=1 --->下一个页面
9.事件对象的兼容写法?
event:
标准：事件处理函数的第一个参数e;//随便给的一个字母
IE低版本：window.event;
target:
标准：事件对象.target
IE低版本：事件对象.srcElement
10.阻止冒泡/阻止默认事件的兼容写法?
阻止默认事件：
标准：事件对象.preventDefault();
IE:事件对象.returnValue = false;
阻止冒泡：
标准：事件对象.stopPropagation（）；
IE：事件对象.cancelBubble = true;
------------------------------------------------------------------------------
1.什么是链式编程?原理是什么? 断链怎么修复?
链式编程就是可以在一个函数后面一直点下去；
原理：返回自身，其他过程在函数内部实现，其好处是：节约js代码，返回的是同一个对象，提高代码的效率。
使用.end 方法可修复断链；
2.JQ的入口函数有哪些?
写法一：$(document).ready(function(){函数方法})
写法二(写法一的简洁版)：$(function(){函数方法})；
写法三：$(window).ready(function(){函数方法})；
3.用JQ和js获取元素: 父元素,子元素们, 上一个兄弟,下一个兄弟
js: parentNode,children,previousSibling/previousElementSibling, nextSibling/nextElementSibling
jq: parent, children,prev,next;
4.JQ和js样式操作?类名操作?属性操作?
5.JQ对象和DOM对象相互转换
$()[0]
6.JQ动画有哪些? 怎么防抖? C3动画怎么写?
animation,slide,fade,show,hide....;
元素动画之前添加结束end方法；
transition:donghua ....
@keyframes doghua {
from{}
to{}
};
7.JQ和js创建元素的方式,添加元素的方式?
8.JQ事件绑定和解绑(说明参数),事件触发
元素.on('','',function(){})
9.each方法和forEach方法的区别?
function里面两个参数（value，index）是相反的
js的foreach(value,index)
数组.foreach(function(value,index){})
jquery的each(index,value)
$("节点选择").each(function(index,value){})
-----------------------------------------------------------------------------------------------
正则表达式
------------------------------写法
/ 正则内容 /
------------------------------元字符
\d 纯数字
\w 数字,字母,下划线
\s 空格
\. 除换行外的一切
大写去反
------------------------------限定符
^x 以x开头
x$ 以x结尾
{ } 次数限定
{x, } 最少x次
{x,y} 最少x次,最多y次
[ ] 内容限定
[abc] abc中出现的任意字符
[a-z] 任意小写字母
[0-9] 任意数组
[A-Z] 任意大写字母
[A-z] 任意字母(包含下划线)
[\u4e00-\u9fa5] 任意汉字
/正则内容/g 全局修饰符
/正则内容/i 忽略大小写
------------------------------正则方法
--正则对象.test(字符串) ; 用于检测字符串是否匹配正则对象规则。返回true和false。
--正则对象.exec(字符串) ;返回所匹配的子字符串。调用一次exec方法则返回单个匹配项并且以数组包装，调用第二次则从第二个匹配项返回，若没有则返回null;
--字符串.match(正则对象); 返回匹配正则的子字符串组成的数组。
--字符串.replace(正则对象 , 新串); 用新串替换 字符串中 满足正则对象的内容。