热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

开发笔记:前端面试秘籍JavaScript+JQuery篇

本文由编程笔记#小编为大家整理,主要介绍了前端面试秘籍Javascript+JQuery篇相关的知识,希望对你有一定的参考价值。
本文由编程笔记#小编为大家整理,主要介绍了前端面试秘籍Javascript+JQuery篇相关的知识,希望对你有一定的参考价值。















前端面试秘籍Javascript+JQuery篇(二)







Javascript基础

一、split() 与 join()的区别是什么?

        答: 前者split() 是把字符串切割成数组的形式。后者 join()是将数组转换成字符串。









//把一个字符串分割成字符串数组: var str = "小ke同学";  var  array = str.split(""); console.log(array);

前端面试秘籍Javascript+JQuery篇(二)









var array = ["小","k","e","同","学"];var str = array.join();console.log(str);

前端面试秘籍Javascript+JQuery篇(二)











var str = array.join(); //join() 里面的参数表示根据什么相拼接默认情况是数组的" , " 例如:var str = array.join(""); //小ke同学var str = array.join(" "); //小 k e 同 学var str = array.join("_");    //小_k_e_同_学var str = array.join("+");    //小+k+e+同+学

二、如何阻止事件冒泡和默认事件。












e. stopPropagation();    //标准浏览器event.canceBubble=true; //ie9 之前
阻止默认事件:为了不让a点击之后跳转,我们就要给他的点击事件进行阻止return false;e.preventDefault();

三、document load 和 document ready的区别是什么?

       Document.onload是在结构和样式加载完才执行 js。window.onload:不仅仅要在结构和样式加载完,还要执行完所有的样式、图片这些资源文件,全部加载完才会触发 window.onload 事件。

        Document.ready 原生中没有这个方法,jquery 中有 $().ready(function)

四、“==”和“===”的不同是什么?

        前者==会自动转换类型,后者===不会自动转换类型








// == 自动转换类型console.log(1=="1"); //trueconsole.log(null==undefined) //true











// === 不会自动转换类型console.log(1==="1"); //falseconsole.log(null===undefined) //false===先判断左右两边的数据类型,如果数据类型不一致,直接返回 false之后才会进行两边值的判断

五、Javascript的同源策略








前端面试秘籍Javascript+JQuery篇(二)


       如果两个页面拥有相同的协议(protocol),端口(如果指定),和主机,那么这两个页面就是属于同一个源。


       览器有一个很重要的概念——同源策略(Same-Origin Policy)。所谓同源是指,域名,协议,端口相同。不同源的客户端脚本(Javascript、ActionScript)在没明确授权的情况下,不能读写对方的资源




前端面试秘籍Javascript+JQuery篇(二)











为什么要是用同源策略呢 ?













    一个浏览器中,打开一个银行网站和一个恶意网站,如果恶意网站能够对银行网站进行修改,那么就会很危险。


    你打开了恶意网站和另一个网站,如果没有同源限制,该恶意网站就可以构造AJAX请求频繁在另一个网站发广告帖。同源策略就是为了解决这类问题而出现的。





    同源策略带来的麻烦:端口不一致时,同域名下的请求无法实现,如果说想要请求其他来源的 js 文件,或者 json 数据,那么可以通过 jsonp 来解决

六、Javascript 的数据类型都有什么?







基本数据类型:String,Boolean,number,undefined,object,Null引用数据类型:Object(Array,Date,RegExp,Function)

那么问题来了,如何判断某变量是否为数组数据类型?







方法一.判断其是否具有“数组性质”,如 slice()方法。可自己给该变量定义 slice 方法,故有时会失效






方法二.obj instanceof Array 在某些 IE 版本中不正确





















方法三. 方法一二皆有漏洞,在ECMA Script5 中定义了新方法 Array.isArray(), 保证其兼容性,最好的方法如下:toString.call(18);//”[object Number]”toString.call(“”);//”[object String]”

解析这种简单的数据类型直接通过 typeof 就可以直接判断
toString.call 常用于判断数组、正则这些复杂类型toString.call(/[0-9]{10}/)//”[object RegExp]”
if(typeof Array.isArray==="undefined"){ Array.isArray = function(arg){ return Object.prototype.toString.call(arg)==="[object Array]" };}

七、已知ID的Input  输入框,希望获取这个输入框的输入值,怎么做?(不使用第三方框架) 






document.getElementById("ID").value

八、希望获取到页面中所有的 checkbox  怎么做(不使用第三方框架)













var domList = document.getElementsByTagName('input');var checkBoxList = [];//返回的所有的 checkboxvar len = domList.length; //缓存到局部变量  while (len--) { //使用 while的效率会比 for循环更高 if (domList[len].type == 'checkbox') { checkBoxList.push(domList[len]); }  }

九、设置一个已知ID的DIV的html 内容为xxxx 字体颜色设置为黑色( 不使用第三方框架)








var dom = document.getElementById("ID");dom.innerHTML = "xxxx"dom.style.color = "#000"











十、请你谈谈COOKIE 的弊端


    
缺点:













1. COOKIE 受数量和长度的限制。每个domain最多只能有20条COOKIE,每个COOKIE长度不能超过4KB,否则会被截掉。
2. 安全性问题。如果COOKIE被人拦截了,那人就可以取得所有的session信息。即使加密也与事无补,因为拦截者并不需要知道COOKIE的意义,他只要原样转发COOKIE就可以达到目的了。
3.有些状态不可能保存在客户端。例如,为了防止重复提交表单,我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端,那么它起不到任何作用。



十一、documen.write 和 innerHTML区别是什么?









document.write 只能重绘整个页面
innerHTML 可以重绘页面的一部分



十二、哪些操作会造成内存泄漏?















内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。

垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量。


如果一个对象的引用数量为 0(没有其他对象引用过该对象),或对该对象的惟一引用是循环的,那么该对象的内存即可回收。


























1. setTimeout 的第一个参数使用字符串而非函数的话,会引发内存泄漏。2. 闭包3. 控制台日志4. 循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)


十三、 HTTP协议中,GET和POST有什么区别?分别适用于什么场景?












get 传送的数据长度有限制,post没有限制get 通过url传递,在浏览器地址栏可见,post 是在报文中传递

适用场景:get 一般用于简单的数据查询,严格要求不是那么高的场景post 一般用于表单提交


十四、HTTP状态消息200   302   304   403    404   500 分别表示什么?


























200:请求已成功,请求所希望的响应头或数据体将随此响应返回。
302:请求的资源临时从不同的 URI 响应请求。由于这样的重定向是临时的,客户端应当继续向原有地址发送以后的请求。只有在Cache-Control或 Expires中进行了指定的情况下,这个响应才是可缓存的
304:如果客户端发送了一个带条件的 GET 请求且该请求已被允许,而文档的内容(自上次访问以来或者根据请求的条件)并没有改变,则服务器应当返回这个状态码。304 响应禁止包含消息体,因此始终以消息头后的第一个空行结尾。
403:服务器已经理解请求,但是拒绝执行它。
404:请求失败,请求所希望得到的资源未被在服务器上发现。
500:服务器遇到了一个未曾预料的状况,导致了它无法完成对请求的处理。一般来说,这个问题都会在服务器端的源代码出现错误时出现。




十五、谈谈你对JSON的了解。






JSON(Javascript Object Notation) 是一种轻量级的数据交换格式。它是基于Javascript的一个子集。数据格式简单, 易于读写, 占用带宽小



 十六、
清除浮动的几种方式,及原理?


    
清除浮动简单,但这题要引出的是BFC,BFC也是必考的基础知识点







创建父级 BFC(overflow:hidden




::after/
/clear:both




父级设置高度






前端面试秘籍Javascript+JQuery篇(二)
前端面试秘籍Javascript+JQuery篇(二)



    触发条件:




    • 根元素


    • position: absolute/fixed


    • display: inline-block / table


    • float 元素


    • ovevflow !== visible



    规则:




    • 属于同一个 BFC 的两个相邻 Box 垂直排列


    • 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠


    • BFC 的区域不会与 float 的元素区域重叠


    • 计算 BFC 的高度时,浮动子元素也参与计算


    • 文字层不会被浮动层覆盖,环绕于周围



十七、用js递归的方式写1到100求和?


























function add(num1,num2){ var num = num1+num2; if(num2+1>100){ return num; }else{ return add(num,num2+1) } }var sum =add(1,2);

或者:function add(num=0, idx=1) { var sum = num + idx; if (idx + 1 > 100) { return sum; } else { return add(sum, idx + 1) } } var sum = add();


十八、说一下CORS?



        CORS是一种新标准,支持同源通信,也支持跨域通信。fetch是实现CORS通信的


十九、如何中断ajax请求?






一种是设置超时时间让ajax自动断开,另一种是手动停止ajax请求,其核心是调用XML对象的abort方法,ajax.abort()



二十、什么是会话COOKIE,什么是持久COOKIE?






COOKIE是服务器返回的,指定了expire time(有效期)的是持久COOKIE,没有指定的是会话COOKIE






推荐阅读
  • 单页面应用 VS 多页面应用的区别和适用场景
    本文主要介绍了单页面应用(SPA)和多页面应用(MPA)的区别和适用场景。单页面应用只有一个主页面,所有内容都包含在主页面中,页面切换快但需要做相关的调优;多页面应用有多个独立的页面,每个页面都要加载相关资源,页面切换慢但适用于对SEO要求较高的应用。文章还提到了两者在资源加载、过渡动画、路由模式和数据传递方面的差异。 ... [详细]
  • PHP图片截取方法及应用实例
    本文介绍了使用PHP动态切割JPEG图片的方法,并提供了应用实例,包括截取视频图、提取文章内容中的图片地址、裁切图片等问题。详细介绍了相关的PHP函数和参数的使用,以及图片切割的具体步骤。同时,还提供了一些注意事项和优化建议。通过本文的学习,读者可以掌握PHP图片截取的技巧,实现自己的需求。 ... [详细]
  • [译]技术公司十年经验的职场生涯回顾
    本文是一位在技术公司工作十年的职场人士对自己职业生涯的总结回顾。她的职业规划与众不同,令人深思又有趣。其中涉及到的内容有机器学习、创新创业以及引用了女性主义者在TED演讲中的部分讲义。文章表达了对职业生涯的愿望和希望,认为人类有能力不断改善自己。 ... [详细]
  • Html5-Canvas实现简易的抽奖转盘效果
    本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ... [详细]
  • 在springmvc框架中,前台ajax调用方法,对图片批量下载,如何弹出提示保存位置选框?Controller方法 ... [详细]
  • 使用eclipse创建一个Java项目的步骤
    本文介绍了使用eclipse创建一个Java项目的步骤,包括启动eclipse、选择New Project命令、在对话框中输入项目名称等。同时还介绍了Java Settings对话框中的一些选项,以及如何修改Java程序的输出目录。 ... [详细]
  • 本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串,可以将不同的文本分别插入到两个div中,从而实现页面的动态更新。 ... [详细]
  • 本文介绍了使用FormData对象上传文件同时附带其他参数的方法。通过创建一个表单,将文件和参数添加到FormData对象中,然后使用ajax发送POST请求进行文件上传。在发送请求时,需要设置processData为false,告诉jquery不要处理发送的数据;同时设置contentType为false,告诉jquery不要设置content-Type请求头。 ... [详细]
  • 本文介绍了在Windows环境下如何配置php+apache环境,包括下载php7和apache2.4、安装vc2015运行时环境、启动php7和apache2.4等步骤。希望对需要搭建php7环境的读者有一定的参考价值。摘要长度为169字。 ... [详细]
  • C++字符字符串处理及字符集编码方案
    本文介绍了C++中字符字符串处理的问题,并详细解释了字符集编码方案,包括UNICODE、Windows apps采用的UTF-16编码、ASCII、SBCS和DBCS编码方案。同时说明了ANSI C标准和Windows中的字符/字符串数据类型实现。文章还提到了在编译时需要定义UNICODE宏以支持unicode编码,否则将使用windows code page编译。最后,给出了相关的头文件和数据类型定义。 ... [详细]
  • 基于dlib的人脸68特征点提取(眨眼张嘴检测)python版本
    文章目录引言开发环境和库流程设计张嘴和闭眼的检测引言(1)利用Dlib官方训练好的模型“shape_predictor_68_face_landmarks.dat”进行68个点标定 ... [详细]
  • 本文讨论了编写可保护的代码的重要性,包括提高代码的可读性、可调试性和直观性。同时介绍了优化代码的方法,如代码格式化、解释函数和提炼函数等。还提到了一些常见的坏代码味道,如不规范的命名、重复代码、过长的函数和参数列表等。最后,介绍了如何处理数据泥团和进行函数重构,以提高代码质量和可维护性。 ... [详细]
  • 本文介绍了在MFC下利用C++和MFC的特性动态创建窗口的方法,包括继承现有的MFC类并加以改造、插入工具栏和状态栏对象的声明等。同时还提到了窗口销毁的处理方法。本文详细介绍了实现方法并给出了相关注意事项。 ... [详细]
  • 本文介绍了使用哈夫曼树实现文件压缩和解压的方法。首先对数据结构课程设计中的代码进行了分析,包括使用时间调用、常量定义和统计文件中各个字符时相关的结构体。然后讨论了哈夫曼树的实现原理和算法。最后介绍了文件压缩和解压的具体步骤,包括字符统计、构建哈夫曼树、生成编码表、编码和解码过程。通过实例演示了文件压缩和解压的效果。本文的内容对于理解哈夫曼树的实现原理和应用具有一定的参考价值。 ... [详细]
  • 如何在HTML中获取鼠标的当前位置
    本文介绍了在HTML中获取鼠标当前位置的三种方法,分别是相对于屏幕的位置、相对于窗口的位置以及考虑了页面滚动因素的位置。通过这些方法可以准确获取鼠标的坐标信息。 ... [详细]
author-avatar
奶牛还在Henry
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有