该博客涵盖前端面试题，包括HTML的<!Doctype>作用、语义化标签，CSS的浮动处理、BFC规则、新特性，JavaScript的数据类型、函数声明、DOM操作、事件机制，以及jQuery和Zepto的使用等内容，为前端面试提供全面参考。
面试题
第一阶段
1.<!Doctype>的做用
<!DOCTYPE html>决定浏览
目录
IE7 及更早浏览器下当 li 中出现 2 个或以上的浮动时，li之间产生的空白间隙
34.document.write和innerHTML的区别？
42.使用函数计算50,100,150,200,1000，以内所有奇数的和
50.http://item.taobo.com/item.html?a=1&b=2&c=&d=xxx&e"转换返回json结构
53.数组方法pop(),push(),unshift(),shift()
63.clientWidth，clientWidth，scrollTop的区别
81.小贤是一条可爱的小狗(Dog)，它的叫声很好听(wow)，每次看到主人的时候就会乖乖叫一声(yelp)。从这段描述可以得到以下对象：
83.请用js去除字符串空格 var str=“fdf er re324 3423 2fdfd”
85.判断字符串是否这样组成。第一个字符串必须是字母，后面可以是数字，字母下划线，总长度5-20
88.ajax请求的时候get 和post方式的区别，什么时候用post？
97.$(document).ready()方法和window.onload有什么区别
98.Query的属性拷贝(extend)的实现原理是什么，如何实现深拷贝
100.jQuery里的each()是什么函数？你是如何使用它的
102.jQuery中使用过哪些插入节点的方法，他们的区别是什么
103.jQuery中有事件冒泡吗，它是怎么执行的，如何来停止冒泡事件
105.简单讲述一下jQuery是怎么处理事件的，有哪些事件？
109.jQuery中$.get()提交和$.post()提交有区别吗
110.jquery.extend与jquery.fn.extend的区别
111.解释什么是Zepto，jQuery和Zepto的区别在哪里
器渲染方式
<!DOCTYPE>：告知 浏览器当前的 HTML 或 XML 文档是哪一个版本. Doctype 是一条 声明, 而不是一个标签; 也可以把它叫做 "文档类型声明", 或 简称为 "DTD".
<!DOCTYPE html>：用HTML5的doctype声明文件包含HTML5标记
2.常见浏览器及其内核
浏览器：IE（Trident），Chrome（Blink），FireFox（Gecko），Safari（WebKit），Opera（Blink）。
内核：Trident，Gecko，Blink，Webkit。
1，使用Trident的是internet explorer，国产的绝大部分浏览器。
2，使用Gecko的是Mozilla Firefox
3，使用Blink的是Chrome和Opera
4，使用WebKit的有苹果的safari，谷歌的chrome，还有国产的大部分双核浏览器其中一核就是WebKit
3.b和strong（i和em）标签的区别
b标签是一个实体标签，它所包围的字符被设为bold（粗体)，而strong标签是一个语义标签，作用是加强字符的语义
em标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。i标签仅仅将文字规定为斜体，并无特殊语义。
strong标签具有语义并充当强调作用 em标签也是可以让字体显示斜体同时加强语气
4.谈谈语义化标签的理解
语义化是指用合理的HTML标记以及其特定的属性去格式化文档内容，
在没有css的情况下，也很能很好的去显示页面
- 增加了代码的可读性，有利于团队合作
- 有利于用户体验（alt，title）
- 有利于seo（和搜索引擎建立良好的沟通，有利于爬虫去抓取更有效的信息，标签的使用和上下文的联系影响爬虫对信息的抓取）
5.如何合并单元格
跨行合并rowspan，跨列合并colspan
6.表格常用属性
单元格与边框间距：cellpadding=“10”，单元格与单元格间距cellspacing=“10”
7.块级标签与行内标签的区别
Html中常见行级标签：span、a、em、strong、b ......
特点：在一行内显示（在一行中可以并列多个行级标签），不能设置宽高属性，水平方向的padding和margin可以设置，垂直方向的无效。
Html中常见块级标签：div、p、ul、li、dl、td、dd、h1~h6 ......
特点：独占一行，能设置width，height，margin和padding等属性
8.浮动产生的问题？清除浮动的方案
浮动元素引起的问题：
浮动元素脱离文档流之后在文档流中不占位，父元素的高度无法被撑开，影响与父元素同级的元素
清楚浮动的方法：
（1）给父级元素加高度（不推荐使用，它只适合高度固定的布局，一般父盒子都是为由内容撑起来）
（2）在结尾处添加空div标签clear:both。具体做法：添加一个div标签并定义一个cl的类名，给cl类名添加样式clear:both，将该div标签放到父元素内容结束前的位置（缺点：会多加CSS和HTML标签）。
（3）给父级元素定义 overflow:hidden（推荐使用，缺点：不能和position配合使用，因为超出的尺寸的会被隐藏）
（4）给父级div定义伪类：after和zoom（推荐使用）
9.伪元素如何创建
E::before{
content:"伪元素内容"；
属性名：属性值；
}10.如何让盒子垂直水平居中
一、定位+margin负值，盒子有宽高
.father{ position:relative;}
.son{position:absolute;left:50%;margin-left:-小盒子宽度的一半，top：50%；margin-top：-小盒子高度的一半}
二、定位+margin：auto，盒子有宽高
.father{ position:relative;}
.son{position:absolute;left：0；top：0；right：0；bottom：0；margin：auto}
11.图片下方空白间隙如何解决
两个图片之间和图片下方多出的空白间隙可以使用以下方式解决。
方法 1：将图片显示为块：解决下方间隙
img{
display:block;
}
方法 2：改变图片的 vertical-align :解决下方间隙
img{
vertical-align:middle;
}
除了 middle值，还可以设置为 top| bottom 等
方法 3：设置图片父级标签的 font-size:0;line-height:0; 水平间隙，图片下方间隙都能解决
.imgwrap{
font-size:0;
line-height:0;
}
12.请简述等高布局，圣杯布局，双飞翼布局，的实现原理
等高布局
原理： 左右两列固定宽度 中间列自适应 (100%)
圣杯布局
过程：
三列同时左浮动，中间列写到结构的上面去，利用负外边距把两列放到中间列上，然后利用最外侧大盒子的内边距和相对定位把中间列内容居中
双飞翼布局
过程：
原理：三列同时左浮动，中间列写到结构的上面去，利用负外边距把两列放到中间列上，然后利用中间列盒子的内容盒子的外边距把中间列内容居中
13.简述css精灵图原理，及优缺点
英文叫法 css sprites，通常被解释为“CSS 图像拼合”或“CSS 贴图定位”；其实就
是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”，
“background- repeat”，“background-position”的组合进行背景定位，background-position 用数字能精确的定位出背景图片的位置。适用于一般小图标，不适合大背景大布局背景
优点：
（1）减少网页的 http 请求，从而大大的提高页面的性能
（2）图片命名上的困扰
（3）更换风格方便
缺点：
（1）必须要限定容器大小符合背景图元素位置，需要计算
14.简述BFC规则及解决的问题
BFC规则
内部的标签会在垂直方向上一个接一个的放置
垂直方向上的距离由margin决定，属于同一个BFC的两个相邻标签的margin会发生重叠
每个标签的左外边距与包含块的左边界相接触（从左向右），即使浮动标签也是如此。
BFC的区域不会与float的标签区域重叠
计算BFC的高度时，浮动子标签也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子标签不会影响到外面标签，反之亦然
BFC解决的问题
1.解决外边距折叠
特性的第②条：垂直方向上的距离由margin决定。在常规文档流中，两个兄弟盒子之间的垂直距离是由他们的外边距所决定的，但不是他们的两个外边距之和，而是以较大的为准。特性的第⑥条：bfc就是页面上的一个独立容器，容器里面的子标签不会影响外面标签，同样外面的标签不会影响到BFC内的标签。所以可以让其中的一个标签处于一个BFC中
2.自适应两栏或三栏布局
左边固定宽度，右边不设宽，因此右边的宽度自适应，随浏览器窗口大小的变化而变化。
左右两边固定宽度，中间不设宽，因此中间的宽度自适应，随浏览器的大小变化而变化。
浮动的标签会覆盖正常标签根据第④条规则，BFC的区域不会与float的标签区域重叠，
所以我们只需要创建一个BFC，它就会自动缩小，以不被浮动的标签遮盖，就能够实现右侧栏自适应。
3.防止字体环绕
浮动的盒子会遮盖下面的盒子，但是下面盒子里的文字是不会被遮盖的，文字反而还会环绕浮动的盒子。
4.清除浮动
利用overflow:hidden清除浮动，因为浮动的盒子无法撑出处于标准文档流的父盒子的height。根据特性第⑤条。计算BFC的高度时，浮动子标签也参与计算。
15.文本溢出显示省略号如何实现
单行文本显示省略号
div{
width:200px; /*限定宽度*/
white-space:nowrap; /* 文本不换行*/
overflow:hidden; /*给元素设置溢出隐藏*/
text-overflow:ellipsis; /*文本溢出显示省略号*/
}
多行文本溢出隐藏
div{
width:200px; /* 限定盒子的宽度 */
display:-webkit-box; /* 将对象作为弹性伸缩盒子模型显示*/
-webkit-line-clamp:3; /* 用来限制在一个块元素显示的文本行数*/
-webkit-box-orient:vertical; /* 设置或检索伸缩盒对象的子元素的排列方式*/
overflow:hidden; /*给元素设置溢出隐藏*/
text-overflow:ellipsis; /*文本溢出显示省略号*/
}
利用伪元素模拟溢出显示省略号
div{
border: solid;
width:500px;
height: 90px; /*限定高度*/
line-height: 30px; /*行距与高度要成比例*/
position: relative;
overflow: hidden;
}
div:after{
content: '...';
position: absolute;
right:0px;
bottom:0px;
padding-left:7px;
background-image:-webkit-linear-gradient(left,tansparent,#fff 60%);
background-image:-ms-linear-gradient(left,tansparent,#fff 60%);
background-image:-o-linear-gradient(left,tansparent,#fff 60%);
background-image: -webkit-linear-gradient(left,#fff,#fff);
}16.说说你了解的浏览器兼容问题
ie8中图片边框问题
Ie8 中图片放在a标签中显示边框。
解决方案:
img{
border:none;
}
ie8中背景复合属性写法问题
如下代码，在标准浏览器中均能正常显示背景图片，但是在ie8中图片显示异常。
.bg{
background:url(“./images/bg.jpg”)no-repeat center;
}
解决方案:在url和no-repeat之间加上空格
.bg{
background:url(“./images/bg.jpg”) no-repeat center;
}
其他ie低版本兼容性问题了解
1.在 IE6 及更早浏览器中定义小高度的容器？
解决方案：
#test{
overflow:hidden;
height:1px;
font-size:0;
line-height:0;
}
2.IE6 及更早浏览器浮动时产生双倍边距的 BUG ？
解决方案：针对 ie6 设置该标签的 display 属性为 inline 即可
#test{
float:left;
_display:inline;
}
3.IE7 及更早浏览器下子标签相对定位时父标签 overflow 属性的 auto|hidden 失效的问题
解决方案：给父标签也设置相对定位 position:relative;
块转内联块 ie7- 不在一行显示问题
解决方案：
div {
display:inline-block;
*display:inline;
*zoom:1;
}
IE7 及更早浏览器下当 li 中出现 2 个或以上的浮动时，li之间产生的空白间隙
解决方案：将垂直对齐方式设置为除了 top 值，还可以设置其它值如 middle | bottom 等
li{
vertical-align:top;}
17.html5有哪些新特性
新的布局的元素，比如 article、footer、header、nav、section
新的表单控件，比如date、time、email、url、search
新的表单属性
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
18.如何处理html5新标签浏览器兼容问题
HTML5新标签对IE低版本浏览器的影响及兼容情况处理方案：
方案一：使用javascript新增元素的方法解决
document.createElement(“header”);
document.createElement(“footer”);
…
由于创建出来的元素是内联元素，所以需要转换成块级，宽度和高度才能生效。
header,footer{ display:block;}
方案二：使用封装好的插件html5shiv.js解决兼容性问题。
<!--[if lt IE 9]>
<script type="text/javascript" src="./html5shiv.js"></script>
<![endif]-->
上面这段代码仅会在IE浏览器下运行。
19.css3有哪些新增特性？
选择器
框模型
背景和边框
文本效果
2D/3D 转换
动画
过渡
多列布局
用户界面
20.css3新增选择器有哪些？
属性选择器
属性选择器在CSS2中就被引入，即E[attr]、E[attr=”value”]、E[attr~=”value”]。
结构性伪类选择器
:first-child 选择器：用于选取属于其父元素的首个子元素的指定选择器
:last-child 选择器：匹配属于其父元素的最后一个子元素的每个元素
:nth-child() 选择器：匹配属于其父元素的第 n 个子元素，n 可以是数字、关键词或公式。
:nth-last-child() 选择器：匹配属于其元素的第 n 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n 可以是数字、关键词或公式。
:nth-of-type(n)：选择器匹配属于父元素的特定类型的第n 个子元素。n 可以是数字、关键词或公式
:nth-last-of-type(n)：选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数。n 可以是数字、关键词或公式。
状态伪类选择器
:checked 匹配用户界面上处于选中状态的元素
:enabled 匹配用户界面上处于可用状态的元素
:disabled 匹配用户界面上处于禁用状态的元素
21.css3中过渡和动画的区别和各自适用的场景
22.说出你知道的2D和3D变形函数
23.什么是响应式？
页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。
响应式布局可以根据屏幕的大小自动的调整页面的展现方式，以及布局。响应式布局是根据设备屏幕宽度不同适当调整标签显示布局，在每种设备屏幕宽度的设备下呈现的界面是不同的。
响应式网站的优点：
减少工作量 网站、设计、代码、内容都 只需要一份，多出来的工作量只是JS脚本、CSS样式做一些改变
节省时间
每个设备都能得到正确的设计
响应式网站的缺点：
会加载更多的样式和脚本资源
设计比较难精确定位和控制
老版本浏览器兼容不好
24.响应式项目中常用到哪些核心技术？
25.简述rem布局
rem是指相对于根元素的字体大小的单位,即根据html元素的font-size来计算大小。 比如说html的font-size大小为100px,一个div的width为1rem,则div的width大小为100px。
rem布局实现步骤
设置页面的viewport
动态计算并设置html的fontsize值
按照pc端布局方式正常布局，把px单位换算成rem（较小的长度比如1px的边框就不需要转换成rem,直接设置px）
26.什么是less
LESS是一种动态语言，属于CSS预处理语言的一种,它扩展了 CSS 语言，使 CSS 更易维护和扩展,可以更便捷的进行 Web 开发，使css的编写有编程思想。
Less 包含一套自定义的语法，用户根据这些语法定义自己的样式规则，最终会通过解析器，编译生成对应的 CSS 文件,只有在被编译成css后才能够被浏览器识别使用。
好处：
结构清晰，便于扩展，易维护。
可以方便地屏蔽浏览器私有语法差异。
可以轻松实现多重继承。
完全兼容 CSS 代码，可以方便地应用到老项目中
27.你能想出几种让盒子消失的方法
1.display:none;（将整个元素隐藏，并且不会占据任何的空间）
2.visibility:hidden;（元素的内容不可见，但是元素仍然保持原来的位置和大小）
3.设定它的位置,让其消失不见：
position:absolute或fixed，用z-index遮盖。
4.overflow:hidden将要隐藏的元素移除父元素的范围。
5.设置元素为透明：即opacity:0；
6.将元素的font-size，line-height,width,height设置为0；（虽然这些方法很赖皮。）
7.设置元素的transform的translateX（Y）的值为-100%；
28.css哪些属性是可以继承的
1）、字体系列属性
font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格
line-height：行高
2）、文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
color：文本颜色
3） list-style属性
29.外边距塌陷问题
父子元素margin合并问题
在父元素里面有子元素时，若父元素在没有设置overflow:hidden或者是border属性，则父元素的margin-top的值为父元素和子元素中的margin-top的最大值。
父子元素margin合并问题解决办法
方法一：设置父元素的overflow属性为hidden。
方法二：设置父元素的border属性，如：border:1px solid red;
兄弟元素margin合并问题
当元素是兄弟元素时，在不设置float和position:absolute时，margin-bottom和margin-top会合并为两者中的最大值。
兄弟元素margin合并问题解决方法
使兄弟元素不在同一个BFC区域下，具体做法如：将兄弟元素分别触发BFC或将兄弟元素包在不同的div下，这些不同的div再分别触发BFC。
30.优先级如何计算
- 选择器优先级与权值相关
- 基础选择器的权值：通配符选择器（0）、标签选择器（1）、class选择器（10）、id选择器（100）
复合选择器的权值是所有的单一选择器权值的累加
- 权值越大，优先级越高；权值相同，后写的会覆盖先写的
- 继承样式的优先级为0，子元素设置样式会覆盖继承样式
- 行间样式权值为1000，优于id选择器
- !important优于行间样式
第二阶段JavaScript
31.什么是JavaScript？
JavaScript是基于对象和事件驱动的解释性脚本语言；
它具有解释性，基于对象，事件驱动，安全性和跨平台性等特点。
- 基于对象：js内部提供了一些对象（工具），这些对象的方法或者属性可以实现js的基本功能
- 事件驱动：浏览器对用户行为的直接响应，不需要经过服务器，
- 解释性：浏览器可以直接识别js语言，逐行解析代码，不需要编译，可以直接识别的代码，读一行执行一行
- 编译性：高级语言，计算机没有办法直接识别和执行，必须先编译成计算机能够识别的，然后在一起执行
32.JavaScript与ECMAScript的关系？
ECMAScript是JavaScript的标准
JavaScript是ECMAScript的具体实现
33.JavaScript组成（掌握）
-
ECMAScript ： JavaScript的标准
-
DOM：Document Object Model 文档对象模型
-
BOM：Browser Object Model 浏览器对象模型
34.document.write和innerHTML的区别？
- 共同点：都可以识别标签，都可以改变body标签的内容
-
区别：
-
innerHTML会覆盖
-
document.write：写入的时候文档已经加载完成，会重绘文档-- 覆盖之前的内容。写入的时候文档没有加载完，不会覆盖原有的内容
-
-
35.变量的命名规则
- 只能由数字，字母，下划线，$,组成
- 不能以数字开头
- 不能使用关键字和保留字
- 具有语义化，达到见名知意的效果
- 小驼峰命名（userName）
36.window.onload
语法：window.onload = function(){ 所有的js代码 }
作用：等文档和资源都加载完成后调用
37.js的数据类型
五大基本数据类型：Number,String,Boolean,Undefined,Null
复合类型(复杂类型、引用类型)：object ： 对象，array：数组，function：函数
分类依据
-
存储数据的特点:
-
基本数据类型存储数据结构单一
-
复合数据类型存储数据结构复杂
-
-
存储位置不同
-
基本数据类型存储在栈，变量名中直接存储数值
-
复合数据类型存储在堆区，变量名中存储的是内存地址
-
38.null和undefined的区别
null：空对象，返回一个不存在对象返回的值
Undefined：访问一个声明完没有赋值的变量返回的值，表示空变量
39.运算符的种类
- 算术运算符：+，-,*,/,%(取余),++,--
- 赋值运算符：=，+=，-+，*=，/=
- 比较运算符：==，>,<,>=,!=,===,!==
- 逻辑运算符：&&（与）,||(或)，！（非）,
- 三木运算符：语法： 条件 ？ 条件成立执行的代码 ： 条件不成立执行的代码
40.this对象的理解
this存在任何地方，不同环境代表不同的含义，取决于调用时的环境。
A.事件处理函数中的this---触发事件的对象
document.onclick = function(){ alert（this） }
B.普通函数中的this---window
function sum（）{ alert(this)} sum()；
41.声明函数的方法？
普通函数：function 函数名(){}
表达式函数：var fun = function(){}
42.使用函数计算50,100,150,200,1000，以内所有奇数的和
//50,100,150,200,1000，以内所有奇数的和
function sum(n){
var s = 0;
for(var i = 0;i<=n;i++){
if(i % 2 != 0){
s += i;
}
}
}
sum(50)
sum(100)
sum(150)
sum(200)
sum(1000)
//声明一个函数，打印某个值内的所有偶数
function even(n){//n--形参
for(var i = 1;i<=n;i++){
if(i%2==0){
console.log(i);
}
}
}
even(10);
//声明一个函数，计算n的阶乘 n! 6!=6*5*4*3*2*1
function jiec(n){
var s = 1;
for(var i = 2;i<=n;i++){
s *= i; //s = 1*2*3*4*5*6
}
console.log(s);
}
jiec(1)
jiec(2)
jiec(3)43.写一个非行间样式的函数
function getStyle(ele, attr) {
if (window.getComputedStyle) {
// 标准浏览器
return window.getComputedStyle(ele)[attr];
} else {
// IE8及以下
return ele.currentStyle[attr];
}
}
//函数封装
function getArrt(obj,attr){
var style;
if(obj.currentStyle){
var w=obj.currentStyle[attr];
} else{
var w=getComptedStyle(obj)[attr]
}
return w;
}44.说说你对作用域链的理解
作用域：区域 变量或函数的有效使用范围 （生命周期）
当代码在一个环境中执行时，会创建变量对象的一个作用域链。作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问。
作用域链：js中的一种查找机制，先查找自己作用域范围内是否存在，有就使用自己的，没有就往上一级作用域查找，依次往上查找，一直找到全局，全局没有报错、
//作用域链是js中的一种查找机制，从当前作用域查找，当前作用域没有往上一级作用域查找，一直到最外层，如果都找不到则是is not define
var i = 10;
function f() {
var i = 20;
function ff() {
console.log(i); //20 当前作用域没有，往上一级作用域查找
}
ff()
}
f()45.函数声明和表达式声明的区别
声明提前是函数声明和函数表达式的一个重要区别;
46.定时器的分类？他们的区别和用法
-
setTimeout：延迟定时器
-
使用场景：广告弹窗
-
语法：setTimeout(函数,时间ms) 延迟某个时间执行函数一次
-
-
setInterval：间歇执行定时器
-
使用场景:轮播图，倒计时，抽奖
-
语法：setInterval(函数，时间) 间隔某个时间就执行函数一次
-
47.生成n位验证码
function randomCode(n) {
var str = "1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";
var s = ""; //存放随机验证码
for (var i = 0; i < n; i++) {
s += str.charAt(Math.floor(Math.random() * str.length));
}
return s;
}
48.js中有哪些内置对象
对象的分类
-
内置对象：Number，String,Boolean,Object,Array,Function,Date,Math,RegExp,Error
-
宿主对象：window,document DOM,BOM
-
全局对象：global
49.字符串去重
var str = "fjsalkjoiu3rklsjfkwursmflkoiwrlkjfjdsoiqiwurew";
//思路：
//声明一个空字符
//将需要去重字符，一个一个添加到空字符串中(条件：s里面没有这个字符加)
var s = "";
for(var i = 0;i<str.length;i++){
//如果s中没有这个符号，就拼接 indexOf():有返回对应的下标，没有返回-1
if(s.indexOf(str.charAt(i))==-1){
s += str.charAt(i);
}
}
//扩展
var str = "1233fddfd&3434fdsaff&454545&4545444rfdsfds&545gdsgs";
var n = "";
var s="";
for(var i=0;i<str.length;i++){
if((str[i]>=0&&str[i]<=9)&&n.indexOf(str[i])==-1){
n+=str[i];
}else if((str.charCodeAt(i)>=97&&str.charCodeAt(i)<=122)&&s.indexOf(str[i])==-1){
s+=str[i];
}
}
console.log(n+s); //12345fdsarg50.http://item.taobo.com/item.html?a=1&b=2&c=&d=xxx&e"转换返回json结构
var str = "http://item.taobo.com/item.html?a=1&b=2&c=&d=xxx&e";
var json = {}; //声明一个空对象，用于存储
//1.获取url中的get参数(？号后面的内容)
str = str.split("?")[1];
console.log(str); //a=1&b=2&c=&d=xxx&e
//2.将get参数分成一对一对 a=1 b=2
var getArr = str.split("&");
console.log(getArr); // ["a=1", "b=2", "c=", "d=xxx", "e"]
//3.将get参数一对一对的存入到json中
for (var i = 0; i < getArr.length; i++) {
var arr = getArr[i].split("="); //"a=1" ["a", "1"]
json[arr[0]] = arr[1];
}
console.log(json);
51.数组去重
var arr = [3,6,4,1,8,8,8,8,8,4,0,9,2,7,8,5,3,4,8,9,3];
//1.创建一个空数组，把arr里面的元素往空对象中添加，判断如果空数组没有这个元素，加
/* var array = [];
for(var i = 0;i<arr.length;i++){
if(array.indexOf(arr[i]) == -1){
array.push(arr[i]);
}
} */
//2.拿数组中第一个元素，和后面所有的元素进行比较，如果一样删除后面哪一个
//拿数组中第二个元素，和后面所有的元素进行比较，如果一样删除后面哪一个
//数组中所有的元素后需要和后面的进行比较
for(var i = 0;i<arr.length;i++){
//和后面所有的元素进行比较
for(var j = i+1;j<arr.length;j++){
if(arr[i]==arr[j]){ //重复，删除后面的元素
arr.splice(j,1);
j--; //删除一个元素后元素位置会自动往前挪，下标也需要往前j--
}
}
}
console.log(arr);52.split(),join()的区别
split（）：将字符串分成数组
join（）：将数组分成字符串
53.数组方法pop(),push(),unshift(),shift()
/1.push，pop在数组的末尾添加或删除元素
var arr = [1,2,3];
//push(items):在数组的末尾添加一个或多个元素，返回当前数组的长度
arr.push(4,5);
console.log(arr); // [1, 2, 3, 4,5]
//pop():在数组末尾删除一个元素，返回被删除的元素
var del = arr.pop();
console.log(arr);//[1, 2, 3, 4]
console.log(del); //5
//2.unshift，shift：在数组的头部添加或删除元素
//unshift():在数组的头部添加一个或多个元素，返回当前数组的长度
arr.unshift("A");
console.log(arr); //["A", 1, 2, 3, 4]
//shift():在数组头部删除一个元素，返回被删除的元素
arr.shift();
console.log(arr);//[1, 2, 3, 4]54.冒泡排序
//2.冒泡排序，相邻的两个比较
var arr = [6, 3, 9, 2, 7, 4, 8, 5, 1];
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr.length-1-i; j++) {
//相邻的两个比较
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);55.快速排序
//3.快排 ： 取中间值，声明两个空数组，比较小放前面，大的放后面
var arr = [6, 3, 9, 2, 7, 4, 8, 5, 1];
function quickSort(arr){
//5.递归结束条件
if(arr.length<=1) return arr;
//1.取中间值（从数组中删除）
var middle = arr.splice(parseInt(arr.length/2),1)[0];
//2.声明两个空数组
var left = [],right=[];
//3.比较小放前面，大的放后面
for(var i = 0;i<arr.length;i++){
if(middle>arr[i]){
left.push(arr[i]);
}else{
right.push(arr[i]);
}
}
//4.组合数组
return quickSort(left).concat(middle,quickSort(right));
}56.选择排序
//1.选择排序 ，拿第一个和后面所有的进行比较，如果前面比较大，交换位置
var arr = [6, 3, 9, 2, 7, 4, 8, 5, 1];
for (var i = 0; i < arr.length; i++) {
//和后面所有的元素进行比较
for (var j = i + 1; j < arr.length; j++) {
if (arr[i] > arr[j]) { //如果前面的比较大，交换位置
var temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
}
}
console.log(arr);57.找出数组最大值
var arr = [7,4,8,1,5];
var max = arr[0]; //默认第一个为最大
for(var i = 0;i<arr.length;i++){
if(max < arr[i] ){
max = arr[i]
}
}
console.log(max)58.数组排序算法
var arr = [6, 3, 9, 2, 7, 4, 8, 5, 1];
//1.选择排序算法
//实现思路：拿第一个元素和后面所有的元素进行比较，如果后面的值比较小，交换位置
for (var i = 0; i < arr.length; i++) {
for (var j = i + 1; j < arr.length; j++) {
if (arr[i] > arr[j]) {
var temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
}
}
console.log(arr);
//2.冒泡排序算法 相邻的两个进行比较
var arr = [6, 3, 9, 2, 7, 4, 8, 5, 1];
for (var i = 0; i < arr.length; i++) {
for (var j = 0; j < arr.length-1-i; j++) {
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
//3.快速排序(递归函数)
var arr = [6, 3, 9, 2, 7, 4, 8, 5, 1];
function quickSort(arr){
//如果数组的没有元素，或者就一个了，停止
if(arr.length <=1) return arr;
//1.获取中间值
var middle = arr.splice(parseInt(arr.length/2),1)[0];
//2.创建两个空数组
var left = [],right=[];
//3.判断数组中的元素，比中间值小的放left，大的放right
for(var i = 0;i<arr.length;i++){
if(arr[i]<middle){
left.push(arr[i]);
}else{
right.push(arr[i]);
}
}
//4.组合数组
return quickSort(left).concat(middle,quickSort(right));
}
console.log(quickSort(arr));
59.DOM常用的API有哪些？
DOM：Document Object Model 文档对象模型
节点：node
DOM主要是针对标签的一些操作：获取，添加，修改，删除，替换
获取
-
通过选择器
-
document.querySelector（）：选择器选中的标签中的第一个
-
document.querySelectorAll（）：选择器选中的所有标签
-
-
获取子节点
-
==父节点.children 非标准属性 只获取标签==
-
父节点.childNodes 标准属性 获取所有到所有的节点(文本、标签、属性、注释....)
-
-
获取父节点
-
==子节点.parenNode ： 直接父节点==
-
子节点.offsetParent :获取定位父节点，没有父节点获取到body
-
-
获取兄弟节点
-
首：父节点.fristElementChild || 父节点.firstChild
-
尾：父节点.lastElementChild || 父节点.lastChild
-
上一个：参考节点.previousElementSibling|| 参考节点.previousSibling
-
下一个：参考节点.nextElementSibling|| 参考节点.nextSibling
-
创建节点
- 创建节点： document.createElement("标签名")
- 创建文本节点：document.createTextNode("文本内容")
添加节点
- 追加 在父元素的末尾添加 父节点.appendChild(子节点)
- 在某个元素之前添加: 父节点.insertBefore(newChild，refChild)
删除节点
-
删除自身：标签.remove（） ie不兼容
-
删除子节点：标签.removeChild(子节点)
复制与替换
-
替换：父节点.replaceNode(newChild，refChild)
-
复制：被复制的节点.cloneNode(true)：复制节点：被复制的节点.cloneNode(boolean)
boolean 默认是false:只复制标签没有内容 true：复制标签和内容
操作属性节点
-
操作属性
-
获取：var 变量 = 标签.属性名
-
设置：标签.属性名 = 属性值
-
-
DOM操作属性节点
-
设置： 节点.setAttribute（属性名，属性值）
-
获取： 节点.getAttribute（属性名）
-
删除 ： 节点.removeAttribute（属性名）
-
和标签.属性区别，可以获取直接写在行间的自定义属性，删除属性
-
60.html和DOM有区别吗？
- HTML DOM适合操作属性，如读取或修改属性的值
- 核心DOM适合操作节点，如创建，删除，查找等
- DOM对象：Document,Node, ElementNode,TextNode,AttributeNode，CommentNode,NodeList
-
HTML DOM 对象：image,Table,Form,Input,Select...HTML标签对象化
61.数组迭代方法
-
every()：对数组进行判断，所有结果都为true，最后结果才为true
-
some():对数组进行判断，只要有一个为true，结果就为true
-
filter():对数组进行判断，满足条件的组成一个新的数组返回
-
map():循环数组，返回的值会组成一个新的数组返回
-
forEach():循环数组
表单事件方法
-
表单事件
-
oForm.onsubmit : 表单提交事件
return true : 默认，允许提交
return false： 阻止提交
-
oForm.onreset : 表单重置事件
return true：默认 允许重置
return false：阻止重置
-
- 表单元素事件
- oIn.onfocus : 获取焦点
- oIn.onblur : 失去焦点
- oIn.oninput/oIn.onpropertychange : 输入框发生改变的时候实时触发
- 自动获得焦点方法 oIn.focus();
62.什么是window对象，什么是document对象
- window对象是指浏览器打开的窗口。所有的全局函数和对象都属于Window 对象的属性和方法。表示窗口，包含document
- document对象是每个载入浏览器的HTML文档都会成为Document对象。
- Document对象是window对象的一部分，document对象使我们可以从脚本中对HTML页面中的所有元素进行访问。
63.clientWidth，clientWidth，scrollTop的区别
- 元素.clientWidth: 可视宽 content+padding
- 元素clientWidth: 元素占位宽 content+padding+border
- 元素.scrollTop: 元素被卷去的高
64.如何获取url地址中搜索内容？
如何获取url地址中搜索内容？
window.location.search
65.事件，IE与火狐的事件机制有什么区别？
1. 我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。
2. 事件处理机制：IE是事件冒泡、火狐是 事件捕获；
66.如何阻止冒泡？
阻止事件冒泡：
- 标准浏览器： event.stopPropagation();
- ie浏览器：event.cancelBubble = true;
//兼容
ev.stopPropagation ? ev.stopPropagation():ev.cancelBubble = true;
67事件绑定与普通事件的区别？
- 事件绑定
- 标准浏览器：标签.addEventListener（事件类型[不加on],事件处理函数，是否捕获）
- ie浏览器：标签.attachEvent（事件类型[加on],事件处理函数）
- 区别
-
标准浏览器不加on，ie加on
-
标准浏览器有捕获，ie没有捕获
-
标准浏览器按添加顺序执行，ie低版本倒序执行
-
标准浏览器this指触发事件的对象，ie this指window
-
- 事件绑定与普通事件的区别？
- 普通添加事件的方法不支持添加多个事件，最下面的事件会覆盖上面的，而事件绑定（addEventListener）方式添加事件可以添加多个。
//普通添加事件的方法
var btn = document.getElementById('hello');
btn.onclick = function () {
alert(1) // 不执行
}
btn.onclick = function () {
alert(2) // 执行
}
//执行上面的代码只会执行2
//事件绑定添加事件
var btn = document.getElementById('hello');
btn.addEventListener('click', function () {
alert(1) // 执行
}, false)
btn.addEventListener('click', function () {
alert(2) // 执行
}, false)
//执行上面的代码会一次执行 1 2 68.如何用原生js给元素添加两个click事件？
//事件绑定添加事件
var btn = document.getElementById('hello');
btn.addEventListener('click', function () {
alert(1) // 执行
}, false)
btn.addEventListener('click', function () {
alert(2) // 执行
}, false)
//执行上面的代码会一次执行 1 2 69.解释一下事件流？
当一个HTML元素产生一个事件时,该事件会在元素节点与根节点之间的路径传播，路径所经过的节点都会收到该事件，这个传播的过程叫
做DOM事件，元素触发事件时，事件的传播过程称为事件流，过程分为捕获和冒泡两种
DOM事件流：两个机制
-
==事件捕获机制==：事件发生的时候，事件从window开始,根据结构一层一层往里查找，一直到目标元素位置(不处理事件)
-
==事件冒泡机制==：由目标元素开始处理事件，处理完成以后将事件根据结构依次传递给父元素，一直到window
window--document--body--标签
70.什么是事件委托？事件委托的原理是什么？他有哪些应用？
- 事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
- 实现思路：将事件绑定到父元素ul上,当用户点击按钮时，通过事件流，冒泡到父元素ul，从而执行回调。
-
原理
-
事件的冒泡；通过父元素监听子元素触发的事件。
- DOM的遍历：父元素拥有多个子元素，当一个事件触发，那么就触发了某一类型的元素（拥有相同class）
-
-
应用
- 很多商品放在一个ul下面的li标签里面，点击添加或删除商品，就可以绑定商品的父元素ul标签，通过事件代理去找到要点击的商品，完成添加删除事件
71.给1000个li添加点击事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
padding:0 0 0 20px;
}
li{
width: 100%;
height: 30px;
margin-top: 1px;
}
</style>
<script>
window.onload = function () {
var oul = document.getElementsByTagName('ul')[0];
//用一个变量接受添加的标li标签，可以提高运行速度。
//循环添加10000个li标签。
var str = '';
for (var i = 0; i < 1000; i++) {
str += '<li>' + (i + 1) + '</li>';
}
oul.innerHTML = str;
//事件委托，把事件添加给父元素，当事件发生时，父元素会找到对应触发事件的子元素去处理，
//用事件委托方式添加的事件，后期新添加的子元素仍有这个事件。
oul.onclick = function(ev){
var ev = window.event || ev;//兼容
var targ = ev.target;
targ.style.background = 'green';
}
}
</script>
</head>
<body>
<ul></ul>
</body>
</html>72.拖拽效果有几个事件？
- onmousedown：鼠标按下事件
- onmousemove：鼠标移动事件
- onmouseup：鼠标抬起事件
73.什么是回调函数？
回调函数是一段可执行的代码段，它作为一个参数传递给其他的代码，其作用是在需要的时候方便调用这段（回调函数）代码。
回调函数callback：某个动作或者是某个行为执行完以后调用的函数，是解决异步操作的有效途径
异步：在做某一个操作的时候，其他的操作可以继续执行 定时器
同步：在做某一个操作的时候，其他的操作只能等待 alert for
回调函数的优点和使用场景
优点
- 避免重复代码。
- 可以将通用的逻辑抽象。
- 加强代码可维护性。
- 加强代码可读性。
- 分离专职的函数。
使用场景
- 异步编程。
- 事件监听、处理。
- setTimeout、setInterval方法。
- 通用功能，简化逻辑。
74.new操作符具体干了什么？
- 隐式的创建了对象 new Object
- 让this指向这个空对象
- 让实例对象的__proto__指向构造函数的prototype
- 执行函数代码 给this添加了属性和方法
- 隐式返回创建好的对象
75.用过哪些设计模式？
- 工厂模式
- 优点：解决了代码冗余的问题，适合批量创建
- 缺点：识别不清
- 构造函数
- 1.构造函数名首字母大写,为了区分普通函数
- 2.不需要创建对象，属性和方法直接添加在this上,不需要return
- 3.构造函数调用，前面一定要加new，不加new，就和普通函数一样了
76.call()与apply()的区别和作用？
作用：改变this的指向。
- call与apply改变this的指向
- call 函数名.call(this的指向,参数一,...)
- apply 函数名.apply(this的指向,[参数一,...])
77.JavaScript对象的几种创建方式？
- 字面量创建
var obj = {
name:“web”,
eat:function(){}
}
缺点：代码冗余，适合单个对象创建 - 实例创建
var obj = new Object();
obj.name = “web”;
obj.eat = function(){}
缺点：代码冗余，适合单个对象创建 - 工厂模式创建
function createObj(name){
var obj = new Object();
obj.name = name;
obj.eat = function(){}
return obj
}
createObj(“web”);
缺点：识别不明确 - 构造函数创建
function Student(name){
//new Object
this.name = name;
this.eat = function(){}
}
new Student(name)
缺点：浪费内存 - 原型创建
原型对象：prototype ，构造函数中，共享的一块区域
原型属性：proto,实例对象中，指向原型对象
function Student(){}
Student.prototype.name = “web”;
Student.prototype.eat = function(){}
new Student();
缺点：不能传参 - 混合创建，构造函数(可变的)+原型(共享，不变的)
function Student(name){
this.name = name;
}
Student.prototype.eat = function(){
}
78.JavaScript对象的几种继承方式？
-
//原型链继承
function Student(name,age){
this.name = name;
this.age = age;
}
Student.prototype.study = function () { console.log(“Fd”);
} -
function SmallStudent(name,age){
//对象冒充继承
Student.call(this,name,age);
} -
//原型链继承：
SmallStudent.prototype = new Student(“web”,18);
79.js的原型，原型链？
-
原型：这类对像共有的方法和属性的集合
-
原型链：属性或方法的查找方式
80.如何判断对象是否属于某个类？
对象.constructor === 类名
var obj = new String("csdn");
alert(obj instanceof String);
81.小贤是一条可爱的小狗(Dog)，它的叫声很好听(wow)，每次看到主人的时候就会乖乖叫一声(yelp)。从这段描述可以得到以下对象：
function Dog() {
this.wow = function() {
alert("Wow");
};
this.yelp = function() {
this.wow();
};
}
小芒和小贤一样，原来也是一条可爱的小狗，可是突然有一天疯了(MadDog)，一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。请根据描述，按示例的形式用代码来实。（继承，原型，setInterval）
function Dog(){
this.wow = function(){
console.log("wow");
};
this.yelp = function(){
this.wow();
}
}
//疯了MadDog，看到人以后，隔半秒叫一次
function MadDog(){
//对象冒充继承
Dog.call(this);
var that = this;
//重写
this.yelp = function(){
//setInterval(this.wow,500);
setInterval(function(){
that.wow();
},500)
}
}
var md = new MadDog();
md.yelp();82.使用正则表达式验证邮箱。
oBtn.onclick = function(){
var re = /^\w+@[a-z0-9]+\.[a-z]{2,4}$/;
//数字、字母、下划线 + @ + 数字、英文 + . +英文（长度是2-4）
if(re.test(oTxt.value)){
alert("你写对了");
}else{
alert("你写错了");
}
}
}83.请用js去除字符串空格 var str=“fdf er re324 3423 2fdfd”
var re = /\s*/g; //去除所有空格
var str = " fdf er re324 3423 2fdfd ";
var str1 = str.replace(re, "");
console.log(str1);
console.log(str);84.闭包的概念，特点以及使用规则?
- 闭包的概念：能够获取其他函数内部变量的函数 函数套函数
- 闭包的特点
- 闭包的优点：闭包中使用的变量会一直存储在内存中个，类似全局变量，避免全局污染
- 缺点：可能会造成内存泄漏，不用的时候需要销毁
- 使用规则
- 使用函数内部变量的时候
- 解决全局作用域问题
- 用于私有属性(外界不可见)
85.判断字符串是否这样组成。第一个字符串必须是字母，后面可以是数字，字母下划线，总长度5-20
//第一个字符串必须是xt字母，后面可以是数字，字母下划线，总长度5-20
var text= document.getElementsByTagName("input")[0]
var re = /^[a-z|A-Z]{1}\w{4,19}$/;
text.onblur = function () {
console.log(text.value);
if (re.test(text.value)) {
console.log(1);//是
} else{
console.log(2);//否
}
}
86.私有属性外界不可见
//用闭包的方式完成下面代码修改，使得属性name，id外界不可见
// var user=function(){
// }
// user.prototype={
// id:" ",
// name=" ",
// getid:function(){
// return this.id
// },
// setid:function(){
// this.id=id
// },
// getname:function(){
// return this.name
// },
// setname:function(){
// this.name=name
// },
// }
//直接声明两个变量，这两个变量的作用域只是在这个函数体之中所以外界是不能访问的
var User = function () {
var id =" id";
var name =" name";
this.proto = {
getId: function () {
return id;
},
setId: function (_id) {
id = _id;
},
getName: function () {
return name;
},
setName: function (_name) {
name = _name;
}
}
}
var u = new User();
u.setId("007");
u.setName("tom");
console.log(u.name, u.getName()); //undefined,tom87.创建Ajax的过程
/1.创建请求对象
var xhr = new XMLHttpRequest();
//2.建立连接 xhr.open(method,url,async);
//method:请求方式 get post
//url:请求地址 get请求的参数在地址栏的后面 url?参数&参数
//async：是否异步 默认就是true
xhr.open("GeT","http://edu.xqb.ink/api/courselist?limits=5&classname=web前端",true);
//3.发送请求
xhr.send();
//4.监听结果
/*
准备状态码
* 0: 创建了一个请求对象
* 1: 和服务器建立了连接
* 2: 发送了请求
* 3: 服务器接收到了请求，并且正在处理
* 4: 服务器处理完成并返回结果 （响应包）
*
网络状态码
*404 200 500
*/
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){ //有结果了，并且将结果返回
if(xhr.status == 200){ //请求成功
document.write( xhr.responseText)
}
}
}88.ajax请求的时候get 和post方式的区别，什么时候用post？
- GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。当然在Ajax请求中，这种区别对用户是不可见的
- GEt传输数据容量小，不安全，post传输数据内容大，更加安全；
当向服务器发送一些数据的时候选择post比较安全
89.ajax请求时，如何解释json数据。
1.eval() : 接收一个字符串，把字符串转换真正的数据类型，并且执行里面的代码
- 如果是字符串形式的json：eval("("[1,2,3,4].length")")
2.JSON.parse():将字符串格式的json数据转换为真正的json数据
- 如果是本地的json文件：JSON.parse(data)
3.JSON.stringify:将json转换转换为字符串
- console.log(JSON.stringify(res))
90.同步和异步的区别?
- 异步：客户端与服务器请求数据的过程中，可以做其他的事情
- 同步：客户端与服务器请求数据的过程中，不能做其他的事情
91.常见的http状态码？
常见的如200 404 503
- 200状态码：表示请求已成功，请求所希望的响应头或数据体将随此响应返回
- 201状态码：表示请求成功并且服务器创建了新的资源，且其 URI 已经随Location 头信息返回。假如需要的资源无法及时建立的话，应当返回 ‘202 Accepted’
- 202状态码：服务器已接受请求，但尚未处理
- 301状态码：被请求的资源已永久移动到新位置。服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
- 302状态码：请求的资源临时从不同的URI响应请求，但请求者应继续使用原有位置来进行以后的请求
- 304自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。 如果网页自请求者上次请求后再也没有更改过，您应将服务器配置为返回此响应(称为 If-Modified-Since HTTP 标头)。
- 301状态码：被请求的资源已永久移动到新位置。服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
- 302状态码：请求的资源临时从不同的URI响应请求，但请求者应继续使用原有位置来进行以后的请求
- 304自从上次请求后，请求的网页未修改过。服务器返回此响应时，不会返回网页内容。 如果网页自请求者上次请求后再也没有更改过，您应将服务器配置为返回此响应(称为 If-Modified-Since HTTP 标头)。
- 401状态码：请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。
- 403状态码：服务器已经理解请求，但是拒绝执行它。与401响应不同的是，身份验证并不能提供任何帮助，而且这个请求也不应该被重复提交。
- 404状态码：请求失败，请求所希望得到的资源未被在服务器上发现。没有信息能够告诉用户这个状况到底是暂时的还是永久的。假如服务器知道情况的话，应当使用410状态码来告知旧资源因为某些内部的配置机制问题，已经永久的不可用，而且没有任何可以跳转的地址。404这个状态码被广泛应用于当服务器不想揭示到底为何请求被拒绝或者没有其他适合的响应可用的情况下。
- 500状态码：服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。一般来说，这个问题都会在服务器的程序码出错时出现。
- 503状态码：由于临时的服务器维护或者过载，服务器当前无法处理请求。通常，这个是暂时状态，一段时间会恢复
92.eval的作用是？
eval:计算某个字符串，并且执行其中的JavaScript代码，eval函数是强大的数码转换引擎,字符串经eval转换后得到一个javascript对象,
- console.log(eval(“2+3”)); //5
- console.log(res); //’[“img/1.jpg”,“img/2.jpg”,“img/3.jpg”,“img/4.jpg”]’
- console.log(eval(res)); //(4) [“img/1.jpg”, “img/2.jpg”, “img/3.jpg”, “img/4.jpg”]
93.解释touch.js以及使用场景
基本事件：
- touchstart //手指刚接触屏幕时触发
- touchmove //手指在屏幕上移动时触发
- touchend //手指从屏幕上移开时触发
- touchcancel //触摸过程被系统取消时触发（少用）
94.touch.js如何监听事件？有哪些事件
95.touch.js事件配置
96.使用touch.js快速搭建移动端页面
97.$(document).ready()方法和window.onload有什么区别
- window.onload会覆盖之前的 ; $(document).ready() 的区别，不会覆盖，会叠加。
- window.onload等文档和资源都加载完成以后调用 ； $(document).ready()只要文档加载完成以后就会调用
- $(document).ready() ：绑定一个在DOM文档载入完成后执行的函数；，而window.onload是网站资源加载完毕后再进行加载的函数。
98.Query的属性拷贝(extend)的实现原理是什么，如何实现深拷贝
- 浅拷贝（只复制一份原始对象的引用,也就是地址） var newObject = $.extend({}, oldObject);
- 深拷贝（对原始对象属性所引用的对象进行递归拷贝） var newObject = $.extend(true, {},oldObject);
99.jQuery中attr和prop的区别以及使用场景
- 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
- 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
- 处理表单元素的时候使用prop方法
- 对于dom自定义属性使用attr方法
100.jQuery里的each()是什么函数？你是如何使用它的
- 遍历函数，又称迭代函数，
- 对于数组，对象等使用$.each(obj,fun);
- 遍历节点的时候使用$(‘select’).each(fun);
101.jQuery对象和DOM对象是怎样转换的
- DOM转jQuery $(DOM)；
- $("div").click(function(){
- console.log(this); //DOM
- $(this).css("background","red");
- });
- jQuery转DOM $()[下标] $().get(下标)
- console.log($("div")[0]);
- console.log($("div").get(0));
102.jQuery中使用过哪些插入节点的方法，他们的区别是什么
-
在父元素末尾添加
-
$(父元素).append(子元素)
-
$(子元素).appendTo(父元素)
-
-
在父元素头部添加
-
$(父元素).prepend(子元素)
-
$(子元素).prependTo(父元素)
-
-
在某个元素之前添加
-
$(参考元素).before(添加的元素)
-
$(添加的元素).insertBefore(参考元素)
-
-
在某个元素之后添加
-
$(参考元素).after(添加的元素)
-
$(添加的元素).insertAfter(参考元素)
-
103.jQuery中有事件冒泡吗，它是怎么执行的，如何来停止冒泡事件
- 有事件冒泡，
- 由内向外触发，触发子元素，父元素也会受到影响
- 停止冒泡：使用stopstopPropagation；使用retrun false;
- 使用阻止默认行为preventDefault；
104.jQuery中$(this)和this之间的区别
$(this)是一个Jquery对象，有各种方法可以给我们调用；
this则是html中的当前元素，即使是在Jquery方法中引用this，它依然是html元素，只有当你写成$(this)才会转变成一个Jquery对象。
105.简单讲述一下jQuery是怎么处理事件的，有哪些事件？
首先去装载文档，在页面家在完毕后，浏览器会通过 javascript 为 DOM 元素添加事件。
106.怎么解决跨域问题
解决跨域：jsonp
-
解决思路：src属性不受同源策略的限制
-
解决办法：script标签的src属性，发起数据请求(回调函数)，后台接收请求，通过调用回调函数，将数据返回
-
这种不标准的数据交互方式，叫jsonp
107.ajax的缺点
- 优点：
- 1.不需要插件支持
- 2.优秀的用户体验
- 3.提高web程序性能
- 4.减轻服务器和带宽的压力
- 缺点：
- 1.破坏了浏览器的前进、后退按钮的正常功能
- 2.对搜索引擎支持不足
108.ajax如何实现异步定时5秒刷新
setInterval(function(){
host = window.location.host
$.post("url");
},5000);109.jQuery中$.get()提交和$.post()提交有区别吗
1.参数传递机制不一致：
get:在请求地址中传递参数
post：在再请求方法(请求体)中传递参数
2.传递的数据量大小不一致
get:有大小限制(最大2k)
post：理论上没有限制
3.安全性
get:参数在地址中传递，会在浏览器中被缓存，
post：不会有缓存
110.jquery.extend与jquery.fn.extend的区别
- jquery.extend是为jQuery对象新增方法
- jquery.fn.extend是为元素对象新增方法
111.解释什么是Zepto，jQuery和Zepto的区别在哪里
zepto是移动端开发框架，是jQuery的轻量级替代品，API及语句与jQuery相似，但文件更小（可压缩至8k），是目前功能完备的库中，最小的一个。为了保持源码的精简，Zepto默认只加载一些模块，当需要某些模块时，可以把对应的模块加载进来。
区别：
jQuery更多是在PC端被应用，因此考虑了很多兼容性问题，zepto.js则是直接抛弃了兼容问题，显得更加轻盈。
Zepto.js在移动端被运用的更加广泛
jQuery的底层是通过DOM来实现效果的，而Zepto.js是用css3来实现的
Zepto.js可以说是jQuery的轻量版
112.Zepto事件委托？
语法：$('父元素选择器').on('无on的事件','子元素选择器',function(){})' 给父元素的子元素委托事件
同jq区别:可能会造成触发一个子元素事件会让所有子元素事件触发
若满足以下情况,zepto中的事件委托,会类似将同级委托的所有元素的事件按代码执行顺序放进数组里,从实际触发的位置向后依次执行
- 同一个父元素
- 同一个事件
- 多个委托事件之间有关联，比如两个委托事件互相调用对方选择的类
- 具有绑定顺序，从当前位置向后执行，即之后有满足前三条的委托事件
113.Zepto相关事件以及使用
- 绑定事件不同
- 用 “on”来代替“bind”、“delegate”、”live”。
- 用 “off”来代替“unbind”、“undelegate”、”die”。
- 用 “ $.ajax”来代替“$.ajaxJSONP”。
- 用 “tap”来代替 ”click“,因为click会有200-300ms的延迟。
扫一扫
549
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
