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标签引入：<link href="./5-1.css" media="only screen and (max-width: 320px)">
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();//这个事件类型要加onjQuery目前有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:标准：事件对象.targetIE低版本：事件对象.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/nextElementSiblingjq: 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(正则对象 , 新串); 用新串替换 字符串中 满足正则对象的内容。
转载于:https://www.cnblogs.com/Joseph-lrc/p/9933288.html
相关资源：js jquery常用知识点汇总