前端理论知识（2）

前端理论知识题（2）
js
js由dom，bom，ECMAScript

1. 变量命名规则
   1. 可以含有字母、数字、_ 、$
   2. 不能以数字开头
   3. 不能是ES中的关键字或保留字
   4. 一般都采用驼峰命名法

2. 数据类型有几种，判断数据类型的方法
   undefined（未定义）null（空值）string（字符串）number（数字）boolean（布尔值）objick（对象）
   使用typeof判断数据类型 可以判断undefined，objick，number，boolean，function，string

3. 哪些运算符常用作布尔判断简述运算符的优先级
   逻辑运算符常用作布尔判断
   算数运算符>自增自减运算符>关系运算符>逻辑运算符>三元运算符>赋值运算符

4. 写出以下常用函数：生成随机数、数字四舍五入、字符串查询子串、字符串分割为数组、检索数组中的元素、数组拼接成字符串、向数组中增删元素
   生成随机数：Math.random
   数字四舍五入：Math.round
   字符串查询子串：indexOf
   字符串分割为数组：split
   检索数组中的元素：array.indexOf
   数组拼接成字符串：join()
   向数组中增删元素：shift头部删除 unshift头部添加 push尾部添加 pop尾部删除

5. 怎样改变元素的内容、属性、样式
   改变元素的内容：innerHTML innerTEXT
   改变元素的属性：选择器名称.属性=属性值
   改变元素的样式：element.style

6. 怎样获取浏览器窗口尺寸
   window.innerWidth 获取浏览器宽度
   window.innerHeight 获取浏览器高度

   7. 怎样控制浏览器前进、后退、页面跳转
      Window.History.go(参数) -1 表示上一页 1表示下一页
      页面跳转
      在原来的窗体中直接跳转
      window.location.href=“你所要跳转的页面”;
      在新窗体中打开页面
      window.open(‘你所要跳转的页面’);

7. 遍历数组和对象的常用方法有哪些
   for循环、for-in遍历

8. Js数据类型显式转换的方法（写出三种即可）
   string、tostring转化为字符串
   number转换为数字
   parseFloat() 转为浮点数
   parseInt() 转为整数

9. 说明全局变量和局部变量的作用范围和生命周期
   全局变量：范围是整个HTML页面，生命周期整个程序
   局部变量：范围是这个变量的代码块，生命周期是函数创建时执行，结束时销毁

10. 列举3中强制转换类型和2种隐式转换类型
    强制转换类型：
    toString()
    Number()
    Boolean()
    parseFloat()
    parseInt()
    隐式转换类型：
    转换为字符串：
    + “”
    转换为数字:
    -0 *1 /1

11. 向数组中添加和删除元素的方法有哪些？至少各写一个
    头部添加: unshift
    尾部添加: push
    头部删除: shift
    尾部删除: pop

12. 什么是事件委托
    让利用事件冒泡的原理，自己所触发的事件，让他的父元素代替执行！

13. 闭包是什么？有什么特性？对页面有什么影响？
    闭包就是能够读取其他函数内部变量的函数，
    特性：封闭性：外界无法访问闭包内部的数据，除非闭包主动向外界提供访问端口
    持久性：一般的函数调用完毕之后，系统自动注销，闭包可以让作用域里的变量,在函数执行完之后依旧存在
    影响：使用闭包会占有内存资源，过多的使用闭包会导致内存溢出等

14. 如何创建新元素并添加到页面中
    用createElement方法创建新元素
    用appendChild方法把新元素追加到父元素中

15. 希望获取到页面中所有的checkbox怎么做？
    1.先获取到所有的input标签，
    2.循环所有的input标签，用if判断input标签的type值是不是checkbox
    3.创建一个数组将type值为checkbox的input标签添加到数组中
    4.然后把这个数组的值循环出来就获得了所有的checkbox

16. 创建一个包含50个元素的数组，每一项都是0到50之间的随机数字，请写出关键代码
    Math.floor(Math.random()*50)

18.函数调用的方式有几种（写出三种即可）
1.用this指针调用
2.用函数名调用
3.把函数赋值给变量，然后利用变量名调用
4.把函数添加到对象中，利用对象名调用

19. JS有几种引入方式
    内部引入
    外部引入
    行内引入

20. 数据类型分为几类
    基本数据类型
    number
    boolean
    string
    undefined
    null
    引用数据类型
    Object

21. null和undefined的区别
    null表示为空，没有值
    undefined表示为未定义，应该有值，但是并没有赋值

22. JS的特点是什么
    简单性
    安全性
    动态性
    跨平台性

23. 怎样获取到页面中的

    
    document.getElementById

24. javascript输出数据的方法？
    alert()
    console.log()
    document.write()
    innerHTML
    innerText

25. 什么是JavaScript
    JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言

26. javascript的typeof返回哪些数据类型
    number string boolean undefined object function

27. 请写出添加 删除 替换 插入节点所用的方法？

    添加节点：
            createElement
            createAttribute
            createTextNode
    删除节点：
            removeChild
    替换节点：
            replaceChild
    插入节点：     
            appendChild
    

28. 什么是数组，什么是对象，并说出他们的区别
    数组就是一组数据的集合
    对象就是用来储存变量的

    创建方式不同：
            对象可以通过new关键字创建对象，或者通过对象字面量创建
            数组：var aaa=new Array()
    数组表示有序数据的集合，而对象表示无序数据的集合
    数组的数据没有名称（name），对象的数据有名称
    如果数据的顺序很重要，那么就使用数组，反之使用对象
    

29. 请写出js中的两种定时器，区别是什么？
    setTimeout 只执行一次
    setInterval 无限执行

30. js两要素是什么
    选择器
    事件

31.split和join的区别
split()用于分割字符串，返回一个数组
join()用于连接多个字符或字符串，返回值为一个字符串

32. js中入口函数及作用
    window.onload = function (){};
    1 . 等待页面加载完毕
    2 . 有一个独立的作用域,

33. pop、Push、unshift、shift的作用
    pop在数组的尾部删除一个元素，并返回这个元素
    push在数组的尾部添加一个元素，并返回原有length+1的长度
    unshift 在数组的头部添加一个元素，并返回原有length+1的长度
    shift 删除数组头部的一个元素，并返回元素

34. 函数分为几种，区别是什么
    声明函数 给函数声明一个名称，用名称调用

        var aaa=function(){} 
    匿名函数  不需要给函数声明变量
        function fun(){}
    
    闭包函数  函数内嵌套函数
        var aaa=function(){
            var bbb=function(){}
        }
    

35. 如何判断一个数是不是整数？
    parseFloat() 和取余数%

36. innerHTML和innerText的区别是什么？
    innerHTML返回的是标签内的 html内容，包含html标签。
    innerText返回的是标签内的文本值，不包含html标签。

37. Break和continue的区别是什么？
    break 是终止这个循环
    continue是跳过本次循环,继续向下执行

38. this是指向的哪个全局变量
    以函数的形式调用时this永远都是window
    以方法的形式调用时，this就是调用方法的对象

39. addEventListener()方法中有几个参数，作用分别是什么?
    指定事件名
    指定需要事件触发时执行的函数
    布尔值判断 指定事件是否在捕获或冒泡阶段执行
    为true时是捕获阶段 false是冒泡阶段，默认为冒泡阶段

40. 如何设置ajax为同步或异步
    同步：
    async = false;
    异步：
    async = true;

41. http和https分别是什么？区别是什么？
    http协议：是超文本传输协议
    https协议：是具有安全性的ssl加密传输协议

    传输信息安全性不同：
    http明文传输，https加密传输
    
    连接方式不同：
    http连接简单，无状态。https可进行加密传输，
    

什么是dom，作用是什么
dom是文档对象模型
可以根据dom节点对HTML进行增删改的行为

42. dom中的节点分为几种类型
    分为五种：1.文档节点、2.元素节点、3.属性节点、4.文本节点、5、注释节点

43. 访问节点和创建节点的方法都有什么
    访问节点：1.通过使用 getElementById() 和 getElementsByTagName() 等方法
    2.通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性
    创建节点：1.createElement() 方法创建一个新的元素节点
    2.createAttribute() 用于创建一个新的属性节点
    3.createTextNode() 方法创建一个新的文本节点

44. 数组是什么？声明数组的方法有几种？数组的三大特性是什么？
    数组就是一组数据的集合
    有两种：1.var a = [ ]
    2.var a = new Array ( )

    三大特征是：1.索引可以是任何对象
                         2.存放任意类型的数据
             3.动态储存
    

45. new关键字的作用
    1.创建对象
    2.声明数组

46. js事件绑定的几种方式
    1.在HTML标签中直接绑定
    2.在JS代码中绑定
    3.绑定事件监听函数

47. 你对面向对象编程的理解
    面向对象就是将我们的程序模块化，对象化，他具有封装性、继承性和多态性。

48. 请讲讲原型链
    当调取一个对象的属性时，会先在本身查找，若无，就根据 proto 找到构造原型，若无，继续往上找。
    最后会到达顶层Object prototype，它的 proto 指向null，均无结果则返回undefined，结束

49. 创建对象的方法有哪些？
    1.var a = { }
    2.var a= new 函数名称()

50. 如何阻止事件冒泡和浏览器默认事件？
    阻止事件冒泡：stopPropagation();
    阻止浏览器默认事件：preventDefault();

51. 请谈谈cookie、和SessionStorage的区别和特点
    Cookie将数据在浏览器和服务端来回传递，
    SessionStorage页面会话期间可用
    localStorage除非数据被清除，否则一直存在
    都是保存在浏览器端，和服务器端的cookie机制不同

52. 事件流有几种？dom事件流分为几个阶段？
    分别是事件冒泡和事件捕获
    事件捕获阶段，处于目标阶段，事件冒泡阶段

53. return的作用是什么?
    从被调函数返回到主调函数继续执行，返回时可附带一个返回值，由return后面的参数指定

54. 函数声明与函数表达式的区别？
    1.以函数声明的方法定义的函数，函数名是必须的，而函数表达式的函数名是可选的
    2.以函数声明的方法定义的函数，函数可以在函数声明之前调用，而函数表达式的函数只能在声明之后调用。
    3.以函数声明的方法定义的函数并不是真正的声明，他们仅仅可以出现在全局中或者嵌套在其它函数中。

55. 什么是cookie？cookie的优缺点。
    cookie是存储于访问者计算机中的变量
    优点：cookie可以实现跨页面全局变量 ，cookie可以跨越同域名下的多个网页，但不能跨越多个域名使!用同一个网站中所有页面共享一套cookie
    缺点：cookie可能被禁用； cookie与浏览器相关，不能互相访问； cookie可能被用户删除； cookie安全性不够高； cookie存储空间很小(只有4–10KB左右)

56. js本地存储有两种，分别是什么？区别是什么？
    sessionStorage，只会在窗口打开的时候才有效，一次性缓存会话，关闭浏览器自动清除
    localStorage，只要没有手动清除，就会一直保留，永久存储，以文件形式存储

57. cookie和本地存储的区别是什么？
    cookie在浏览器和服务器间来回传递，传递的容量小
    而本地储存不会把数据发给服务器，仅在本地保存，传递内容

58. 什么是json？json的三种值类型是什么？
    一种轻量级的数据交换格式
    数组，对象，简单数据类型

59. 请解释一下冒泡排序的原理？
    每次对相邻的两个元素进行比较，若前者大于后者则进行交换，如此一趟下来最后一趟的就是最大元素，重复以上的步骤

60. HTTP和HTTPS是什么？为什么HTTPS更安全？
    HTTPS是在HTTP上建立SSL加密层，并对传输数据进行加密，是HTTP协议的安全版。现在它被广泛用于万维网上安全敏感的通讯，例如交易支付方面。

61. js常用的几种事件，请分别描述一下
    click 鼠标单击
    dblclick 鼠标双击
    keyup 按下并释放键盘上的一个键时触发
    focus 获得焦点，表示文本框等获得鼠标光标
    blur 失去焦点，表示文本框等失去鼠标光标
    mouseover 鼠标悬停，即鼠标停留在图片等的上方
    mouseout 鼠标移出，即离开图片等所在的区域

62. 请将此数组进行排序，arr=[22,1,43,12,75,32]（两种方法）
    第一种方法：
    function sortNumber(a,b)
    {
    return a - b
    }
    var arr = [10, 5, 40, 25, 1];

    document.write(arr + “
    ”)
    document.write(arr.sort(sortNumber))

    第二种方法：
    var arr = [10, 5, 40, 25, 1];

    document.write(arr + “
    ”);
    document.write(arr.sort());

63. IE和标准下有哪些兼容性的写法
    1.获取事件对象：var ev = ev || window.event
    2.获取页面的可视区的宽度：document.documentElement.clientWidth || document.body.clientWidth
    3.获取触发事件的事件源：var target = ev.srcElement||ev.target

64. call和apply的区别
    apply：最多只能有两个参数——新this对象和一个数组argArray
    call：它可以接受多个参数，第一个参数与apply一样，后面则是一串参数列表

65. js延迟加载的方式有哪些？
    defer 属性
    async 属性
    动态创建DOM方式
    使用jQuery的getScript()方法
    使用setTimeout延迟方法
    让JS最后加载

66. 说说TCP传输的三次握手四次挥手策略
    第一次握手：首先客户端发送一个带有标志位为1的SYN标志的数据包给服务器。
    第二次握手：服务器接收后，返回一个带有ACK标志的数据包应答，即SYN和ACK标志位为1，并确认序列号为+1。
    第三次握手：最后客户端再次发送确认包（ACK），SYN的标志位为0，ACK标志位为1，并把服务器发送来的ACK的序号+1，代表握手结束。
    　　TCP断开连接需要四次挥手。也就是指断开一个TCP连接的时候，客户端和服务器总共传送四个数据包，服务器和客户端都可以主动发起挥手（断开连接）。
    第一次挥手：主动关闭方发送一个标志位为1的FIN的数据包，用来关闭主动方到被动关闭方的数据传输，也就是主动关闭方告知被动关闭方，不会再给被动方发送数据。但是在FIN包发送之前发送出去的数据，如果没有收到对应的ACK确认报文，主动关闭方依然会重发这些数据，此时主动关闭方还可以接受数据。
    第二次挥手：被动方收到FIN包后，发送一个标志位为1的ACK数据包，确认序号为收到的序号+1。
    第三次挥手：被动方发送一个标志位为1的FIN包，用来关闭被动方到主动方的数据传输，告知主动方，数据发送完毕，不会再发送数据。
    第四次挥手：主动关闭方收到FIN包后，发送一个标志位为1的ACK包，确认序号为收到的序号+1，到这里，四次挥手完成。

67. 网络传输的七层协议是哪七层？
    7 应用层
    6 表示层
    5 会话层
    4 传输层
    3 网络层
    2 数据链路层
    1 物理层

68.什么是bom 有什么作用?
BOM是浏览器对象模型，
用来获取或设置浏览器的属性、行为，例如：新建窗口、获取屏幕分辨率、浏览器版本号等。

              JQuery理论知识题

1.请写出js和jquery的入口函数，并简述他们的不同
window.onload = function (){};
$.(function(){})
js入口函数只能有一个，如果有多个的话后面的会覆盖前面的入口函数
Jquery入口函数可以有多个，并且他们不会进行覆盖。

 js入口函数是等页面加载完毕再加载js代码
jq入口函数是等dom树加载完毕再加载jq代码

2.请写出jquery动画的显示和隐藏
显示：show
隐藏：hide
3.请写出jquery中绑定事件的四种方式
$(‘div’).live(click,function(){})
$(‘div’).bind(click.function(){})
$(‘div’).on(click.function(){})
$(‘div’).delegate(click.function(){})
4.什么是jQuery？
Jquery是js的函数库
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
5.jQuery 库中的 $() 是什么
可以在里面传参数，作用就是获取元素
6. 网页上有 5 个

元素，如何使用 jQuery来选择它们？
可以使用标签选择器
$(‘div’)7.jQuery里的ID选择器和class选择器有何不同？Id可以选择一个。Class可以选择多个或一个8.jQuery里的each()是什么函数？你是如何使用它的？等同于js中的for循环，可以遍历一个数组或者对象9.$(this) 和 this 关键字在 jQuery 中有何不同？
this在默认情况下指向的是window
$(this)表示把dom对象转换为jquery对象
$(this)的方法只能由jquery对象调用，javascript不可以调用
10. 你如何利用jQuery来向一个元素中添加和移除CSS类?
addClass() - 添加CSS类
removeClass() - 移除CSS类

11. 什么是ajax，为什么使用ajax？
    ajax是一种异步请求数据的web开发技术。
    ajaxs是异步加载可以在请求数据时可以执行其他代码块，可以提高用户体

12. ajax都有哪些优点和缺点？
    优点：就是能在不更新整个页面的前提下维护数据
    使用异步方式与服务器通信，具有更加迅速的响应能力。
    可以使用户有更好的体验
    缺点：ajax不支持浏览器back按钮。
    不能很好地支持移动设备
    对搜索引擎的支持比较弱。
    破坏了程序的异常机制,不容易调试。

13. post请求和get请求的区别？
    post比get更加安全
    post比get传输的数据大小更大
    GET请求参数会被保留在浏览器内，而POST中的参数不会被保留。

14. 什么是跨域?
    如果协议，域名，端口相同时为同域
    有一个不相同时为跨域

15. 请简述同步和异步的区别.
    同步是请求数据是如果需要等待此时浏览器不能有任何动作
    异步请求数据时需要等待的话还是会执行下边代码，也就是同步执行

16. HTTP协议中，GET和POST有什么区别？分别适用什么场景？
    get安全性非常低，post安全性较高，但是执行效率比post更好。
    get是从服务器上获取数据，post是向服务器传送数据

17. 将以下jquery选择符翻译成中文描述：$(“#d div.cls input[type=text][name^=text_]”);
    选择id为d的后代div标签class标签为cls中的input的type值类型为text的name值开头为text_的值

18. 请说出你知道的跨域的方法有哪些？最常用的是哪个？怎么使用的？
    1、JSONP 2、代理 3、PHP端修改header 4、iframe 5.通过 window.name 实现跨域
    常用JSONP进行跨域，jsonp形式的ajax请求:并且通过get请求的方式传入参数,
    需要注意:跨域请求只能使用get请求不能使用post请求。

19. 常见请求头与响应头你了解哪些？
    请求头：Accept 可接受的响应内容类型
    Accept-Charset 可接受的字符集
    Accept-Encoding 可接受的响应内容的编码方式。
    响应头：Access-Control-Allow-Origin 指定哪些网站可以跨域源资源共享
    Accept-Patch 指定服务器所支持的文档补丁格式
    Age 响应对象在代理缓存中存在的时间，以秒为单位
    Allow 对于特定资源的有效动作;

20. 如何设置ajax为同步或异步
    async：false时为同步
    async：true时为异步

21. 请写出ajax框架格式，并简述每个属性的作用

    type：请求方式一般为get或者post
    URL：请求数据的地址
    data：参数
    dataType：json：设置数据的类型，可以解决跨域的问题
    success：function（）{}请求成功返回的参数
    error：function（）{}请求失败返回的参数

22. $(document).ready()方法和window.onload有什么区别？
    window.onload方法是在网页中所有的元素(包括元素的所有的关联文件)完全加载到浏览器后才执行

23. Flash、Ajax各自的优缺点，在使用中如何取
    Flash优点：适合处理多媒体、矢量图形、访问机器；
    缺点对CSS、处理文本上不足，不容易被搜索。
    Ajax优点对CSS、文本支持很好，支持搜索；
    缺点多媒体、矢量图形、机器访问不足。