华清远见-重庆中心-前端技术阶段

花了两周多的时间对HTML、CSS、JavaScript和jQuery进行系统性的学习，学习完了后打算花一点时间对之前学习的内容进行复习巩固与总结，划分熟悉程度进行不同程度的梳理，顺便记录。

复习

HTML知识框架

 CSS知识框架

 关于定位position 子元素需要在父元素上时采取绝对定位，

static静态定位、relative相对定位、fixed固定定位、absolute绝对定位

相关面试题

1、javascript基本数据类型？

        number数字型、string字符型、boolean布尔型、undefined未定义型、null空类型

2、浅谈javascript中变量和函数声明的提升？

        变量声明提升：使用var声明变量，会有默认undefined值，定义语句后才为语句中赋予的值。

        函数声明提升：用 function 声明的函数，在声明语句之前可以直接调用。

3、JS数组和对象的遍历方式，以及几种方式的比较？

•         for in循环、for循环、for-each循环
  •         for in循环需要分析出array 的每个属性，开销大，不划算，不建议使用此循环方法；
    •         for循环每次循环都需要检查数组长度，读取属性（数组⻓度）要⽐读局部变量慢， 尤其是当 array ⾥存放的都是 DOM 元素， 因为每次读取都会扫描⼀遍⻚⾯上的选择器相关元素，速度降低；
      •         for-each循环存在两个函数value、index，无法使用break、continue跳出循环，只能使用return跳过本次循环，无法遍历对象，IE不支持该方法。

4、javascript定义类的四种方法?

1.         工厂方法、构造函数法、原型法、构造函数和原型方法组合使用

5、javascript实现继承的三种方法？

        经典继承、对象冒充、组合继承

6、说说ajax的原理？

        通过XmlHttpRequest 对象来向服务器发送异步请求,从服务器获得数据 然后用JavaScript来操作DOM而更新页面。

7、异步加载JS的方式有哪些？

        （1）script 标签的 defer="defer" 属性

        （2） onload 时的异步加载

        （3） script 标签的 async="async" 属性

8、介绍JS有哪些内置对象？

        1.值属性；2.函数属性；3.基本对象；4.错误对象；5.数字和日期对象；6.字符串；7.可索引的集合对象；8.使用键的集合对象；9.结构化数据；10.控制抽象对象；11.反射

9、说几条写javascript的基本规范？   

        （1）、不要在同一行声明多个变量

        （2）、使用===或!==来比较

        （3）、使用字面量的方式来创建对象、数组，替代new Array这种形式

       （4）、不要使用全局函数

        （5）、switch语句必须要带default分支

        （6)、函数不应该有的时候有return，有的时候没有return

        （7)、fon-in循环中的变量，用var关键字说明作用域，防止变量污染

        （8)、变量的声明遵循驼峰命名法，用let替代val，声明构造函数时首字母大写，定义常量的时候尽量用大写字母，用_分割

        （9)、三元表达式可以替代if语句

        （10)、&&和||是可以短路的，使用&&时如果前面一个值是错的，那么后面的值不用判断，使用||时，如果前面一个值是对的，那么后面的值不用判断

        （11)、比较数据类型以下6中情况是false，其他都是true------false、""、0、null、undefined、NaN

        （12）、数据类型检测用typeof，对象类型检测用instanceof

        （13）、异步加载第三方的内容

        （14）、单行注释//，多行注释/**/

        （15）、使用命名空间解决变量名冲突

        （16）、新建一个js文件，const声明常量，在js文件中引用，用常量名替代方法名，这样做可以防止命名冲突

10、说说对JSON的理解？

        JSON 指的是 JavaScript 对象表示法;是轻量级的文本数据交换格式;独立于语言;使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言;具有自我描述性，更易理解

11、说说JS延迟加载的方式有哪些？

        (1)在script标签上，设置defer属性，可以延迟执行js脚本文件。

        (2)在script标签上，设置async属性。

        (3)动态创建DOM方式,创建script标签，当页面的全部内容加载完毕后，在执行创建挂载。

        (4)设置定时器。

12、说说attribute和property的区别？

        （1）attribute 是 dom 元素在文档中作为 html 标签拥有的属性

        （2）property 就是 dom 元素在 js 中作为对象拥有的属性。

        （3）对于 html 的标准属性来说，attribute 和 property 是同步的，是会自动更新的，但是对于自定义的属性来说，他们是不同步的。

13、正则表达式的使用？

         使用new或字面量方式创建正则表达式；正则表达式可使用test（）方法或exec（）方法匹配字符串

14、javascript数组去重的方法汇总？

        （1）使用indexOf方法进行数组去重

        （2）使用sort()数组排序api去重

        （3）使用splice()方法去重

        （4）使用对象属性的方法

        （5）使用Set构造函数方法

        （6）使用双重for循环去重

        （7）使用includes方法去重

15、javascript数组排序的几种方式？

        （1）sort方法直接排序

        （2）冒泡排序

        （3）插入排序

        （4）快速排序

        （5）选择排序

16、javascript数组一行代码去重方法？

        function Arr(arr) { 

                var newArr = new Set(arr)；

                return Array.from(newArr)
}

17、javascript如何判断一个对象是否为数组？

        （1）可以使用typeof操作符判断当他遇到null类型和Array对象时都会判断为object

        （2）验证原型对象。利用isPrototypeOf()方法，判定Array是不是在obj的原型链中，如果是，返回true,否则返回false。

        （3）构造函数来验证，instanceof判断的是的数组是返回true，否则是false。

        （4）根据对象的class属性（类属性），跨原型链调用toString()方法。

        （5）Array.isArray()方法。

18、javascript有几种类型的值？

        有两种数据类型，一种是基本数据类型，一种是引用数据类型。

19、javascript深浅拷贝？

         （1）浅拷贝：浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用，它与原来的对象指向同一个堆内存地址，两者相互影响（藕断丝连），例如数组和对象的赋值。

        （2）深拷贝：拷贝多层，每一级别的数据都会拷贝。我的理解是独立开辟一块新的内存地址，将原来对象中的各个属性逐一复制进去；对拷贝对象和源对象各自的操作互不影响。

21、 jquery对象和dom对象是怎样转换的？

        jquery转换为DOM对象

        (1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。

        (2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象

        DOM转换为jquery对象

        用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)

22、 你是如何使用jquery中的ajax的？

         jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象；

最简单的情况下，$.ajax() 可以不带任何参数直接使用。

23、同步和异步区别？

        同步是让两个或多个数据库内容保持一致，或者按需要部分保持一致；“同步通信”的通信双方必须先建立同步，即双方的时钟要调整到同一个频率；同步各结点的时钟之间允许有微小的误差，这个时候会采用其他措施实现同步传输。

        异步则是计算机多线程的异步处理；异步通信发送端不需要在发送一帧之前和接收端进行协调；异步通信的好处是通信设备简单、便宜，但传输效率较低。

24、jquery中$.get()提交和$.post()提交有区别吗？

        有区别在于以下几个方面：

（1）、请求方式不同：$.get() 方法使用GET方法来进行异步请求的。$.post() 方法使用POST方法来进行异步请求的。

（2）、参数传递方式不同：GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器的，这种传递是对用户不可见的。

（3）、数据传输大小不同：GET方式传输的数据大小不能超过2KB，而POST要大的多。

（4）、安全问题：GET方式请求的数据会被浏览器缓存起来，因此有安全问题。

25、你在jquery中使用过哪些插入节点的方法，它们的区别是什么？

        在元素内部添加 append（）方法：向每个匹配的元素内部追加内容 

        appendTo：将所有匹配的元素追加到指定的元素中

        prepend：向每个匹配的元素内部前置添加内容

        prependTo：将所有匹配的元素前置到指定的元素中   

        after：在每个匹配元素之后插入内容 

        insertAfter：将所有配的元素插入到指定元素的后面

         before：在每个匹配的元素之前插入内容

        insertBefore：将所有匹配的元素插入到指定的元素的前面

26、jquery中如何来获取或和设置属性？

        

        jquery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()，attr()有4个表达式。

        (1)attr(属性名)       //获取属性的值（取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined ）

        (2)attr(属性名, 属性值)   //设置属性的值 （为所有匹配的元素设置一个属性值。）

        (3)attr(属性名,函数值)     //设置属性的函数值  （为所有匹配的元素设置一个计算的属性值。不提供值，而是提供一个函数，由这个函数计算的值作为属性值。）

        (4)attr(properties)    //给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }。(这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意，如果你要设置对象的class属性，你必须使用'className' 作为属性名。或者你可以直接使用'class'或者'id'。)

27、你jquery中有哪些方法可以遍历节点？

        (1)children()方法：$('p').children()---遍历查找p元素的所有子元素节点

        (2)next()方法：$('p').next() --- 查找p元素后相邻的同级元素但非所有同级元素

        (3)prev()方法：$('p').prev() ---- 查找p之前相邻的同级元素

        (4)siblings()方法:$('p').siblings()---- 查找p前后所有的同级元素

        (5)ind()方法:$('p').find('span') ---- 查找p元素内子元素并且是span元素

        (6)eq()方法:$('p').eq(1) --- 查找第二个p元素(索引下标从0开始)

        (7)first()方法:$('li').first() --- 获取第一个li元素

        (8)last()方法:$('li').last() --- 获取最后一个li元素

        (9)filter()方法:$('p').filter('.box') --- 获取类名为box的p元素

        (10)is()方法:$('.box').is('p') ---- 判断.box是否是p元素

28、$(document).ready()  $(function（{}）)方法和window.onload有什么区别？

        (1)、执行时间上的区别：window.onload必须等到页面内（包括图片的）所有元素加载到浏览器中后才能执行。而$(document).ready(function(){})是DOM结构加载完毕后就会执行。

        (2)、编写个数不同：window.onload不能同时写多个，如果有多个window.onload，则只有最后一个会执行，它会把前面的都覆盖掉。$(document).ready(function(){})则不同，它可以编写多个，并且每一个都会执行。

        (3)、简写方法：window.onload没有简写的方法，$(document).ready(function(){})可以简写为$(function(){})。

29、jQuery是如何处理缓存的？

        

        （1）通过$.post()方法来获取数据，那么默认就是禁用缓存的。

        （2）通过$.get()方法来获取数据，可以通过设置时间戳来避免缓存。可以在URL后面加上+(+new Date)来增加上时间戳参数.

        （3）通过$.ajax方法来获取数据，只要设置参数cache:false即可。

30、在ajax中发送data主要有几种方式？ ?

        （1）json对象格式

        （2）标准参数模式

31、你知道jQuery中的事件冒泡吗，它是怎么执行的，何如来停止冒泡事件？

        事件冒泡是从里面的往外面开始触发的，就是点击子节点，会向上触发父节点，祖先节点的点击事件。

停止冒泡事件方法：

1. 使用stopstopPropagation；
2. 使用retrun false;
3. 使用阻止默认行为preventDefault；