jQuery前端面试题

本文涵盖了jQuery面试中常见的核心问题,包括DOM操作、函数方法、事件绑定、内存管理、性能优化等。讨论了document.write与innerHTML的区别,.call()与.apply()的使用场景,以及jQuery的实现原理和源码分析。还涉及到了jQuery中的事件绑定、选择器、动画效果、数据转换以及与其他库如Zepto的对比。此外,文章还讨论了前端路由、浏览器调试技巧、单元测试和模板引擎等内容,帮助读者全面掌握jQuery及其在现代前端开发中的应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  • documen.write和 innerHTML的区别

      document.write只能重绘整个页面
    
      innerHTML可以重绘页面的一部分
    
  • DOM操作——怎样添加、移除、移动、复制、创建和查找节点?

      (1)创建新节点
        createDocumentFragment()    //创建一个DOM片段
        createElement()   //创建一个具体的元素
        createTextNode()   //创建一个文本节点
      (2)添加、移除、替换、插入
        appendChild()
        removeChild()
        replaceChild()
        insertBefore() //在已有的子节点前插入一个新的子节点
      (3)查找
        getElementsByTagName()    //通过标签名称
        getElementsByName()    //通过元素的Name属性的值(IE容错能力较强,会得到一个数组,其中包括id等于name值的)
        getElementById()    //通过元素Id,唯一性
    
  • .call() 和 .apply() 的区别?

       例子中用 add 来替换 sub,add.call(sub,3,1) == add(3,1) ,所以运行结果为:alert(4);
    
       注意:js 中的函数其实是对象,函数名是对 Function 对象的引用。
    
     	function add(a,b)
     	{
     	    alert(a+b);
     	}
    
     	function sub(a,b)
     	{
     	    alert(a-b);
     	}
    
     	add.call(sub,3,1);
    
  • 数组和对象有哪些原生方法,列举一下?

  • JS 怎么实现一个类。怎么实例化这个类

  • JavaScript中的作用域与变量声明提升?

  • 如何编写高性能的Javascript?

  • 那些操作会造成内存泄漏?

  • JQuery的源码看过吗?能不能简单概况一下它的实现原理?

  • jQuery.fn的init方法返回的this指的是什么对象?为什么要返回this?

  • jquery中如何将数组转化为json字符串,然后再转化回来?

  • jQuery 的属性拷贝(extend)的实现原理是什么,如何实现深拷贝?

  • jquery.extend 与 jquery.fn.extend的区别?

     * jquery.extend 为jquery类添加类方法,可以理解为添加静态方法
     * jquery.fn.extend:
     	源码中jquery.fn = jquery.prototype,所以对jquery.fn的扩展,就是为jquery类添加成员函数
     使用:
     jquery.extend扩展,需要通过jquery类来调用,而jquery.fn.extend扩展,所有jquery实例都可以直接调用。
    
  • jQuery 的队列是如何实现的?队列可以用在哪些地方?

  • 谈一下Jquery中的bind(),live(),delegate(),on()的区别?

  • JQuery一个对象可以同时绑定多个事件,这是如何实现的?

  • 是否知道自定义事件。jQuery里的fire函数是什么意思,什么时候用?

  • jQuery 是通过哪个方法和 Sizzle 选择器结合的?(jQuery.fn.find()进入Sizzle)

  • 针对 jQuery性能的优化方法?

  • Jquery与jQuery UI 有啥区别?

     *jQuery是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等。
    
     *jQuery UI则是在jQuery的基础上,利用jQuery的扩展性,设计的插件。
      提供了一些常用的界面元素,诸如对话框、拖动行为、改变大小行为等等
    
  • JQuery的源码看过吗?能不能简单说一下它的实现原理?

  • jquery 中如何将数组转化为json字符串,然后再转化回来?

jQuery中没有提供这个功能,所以你需要先编写两个jQuery的扩展:

	$.fn.stringifyArray = function(array) {
	    return JSON.stringify(array)
	}

	$.fn.parseArray = function(array) {
	    return JSON.parse(array)
	}

	然后调用:
	$("").stringifyArray(array)
  • jQuery和Zepto的区别?各自的使用场景?

  • 针对 jQuery 的优化方法?

     *基于Class的选择性的性能相对于Id选择器开销很大,因为需遍历所有DOM元素。
    
     *频繁操作的DOM,先缓存起来再操作。用Jquery的链式调用更好。
      比如:var str=$("a").attr("href");
    
     *for (var i = size; i < arr.length; i++) {}
      for 循环每一次循环都查找了数组 (arr) 的.length 属性,在开始循环的时候设置一个变量来存储这个数字,可以让循环跑得更快:
      for (var i = size, length = arr.length; i < length; i++) {}
    
  • Zepto的点透问题如何解决?

  • jQueryUI如何自定义组件?

  • 需求:实现一个页面操作不会整页刷新的网站,并且能在浏览器前进、后退时正确响应。给出你的技术实现方案?

  • 如何判断当前脚本运行在浏览器还是node环境中?(阿里)

      this === window ? 'browser' : 'node';
    
      通过判断Global对象是否为window,如果不为window,当前脚本没有运行在浏览器中
    
  • 移动端最小触控区域是多大?

  • jQuery 的 slideUp动画 ,如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行,该如何处理呢?

     jquery stop(): 如:$("#div").stop().animate({width:"100px"},100);
    
  • 把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别?浏览器会如何解析它们?

  • 移动端的点击事件的有延迟,时间是多久,为什么会有? 怎么解决这个延时?(click 有 300ms 延迟,为了实现safari的双击事件的设计,浏览器要知道你是不是要双击操作。)

  • 知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout...)么? 能讲出他们各自的优点和缺点么?

  • Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法?

  • 解释JavaScript中的作用域与变量声明提升?

  • 那些操作会造成内存泄漏?

     内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
     垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0(没有其他对象引用过该对象),或对该对象的惟一引用是循环的,那么该对象的内存即可回收。
    
     setTimeout 的第一个参数使用字符串而非函数的话,会引发内存泄漏。
     闭包、控制台日志、循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)
    
  • JQuery一个对象可以同时绑定多个事件,这是如何实现的?

     * 多个事件同一个函数:
     	$("div").on("click mouseover", function(){});
     * 多个事件不同函数
     	$("div").on({
     		click: function(){},
     		mouseover: function(){}
     	});
    
  • Node.js的适用场景?

  • (如果会用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?

  • 解释一下 Backbone 的 MVC 实现方式?

  • 什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?

  • 知道什么是webkit么? 知道怎么用浏览器的各种工具来调试和debug代码么?

      Chrome,Safari浏览器内核。
    
  • 如何测试前端代码么? 知道BDD, TDD, Unit Test么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?

  • 前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?

  • 简述一下 Handlebars 的基本用法?

  • 简述一下 Handlerbars 的对模板的基本处理流程, 如何编译的?如何缓存的?

  • 用js实现千位分隔符?(来源:前端农民工,提示:正则+replace)

      参考:http://www.tuicool.com/articles/ArQZfui
      function commafy(num) {
          return num && num
              .toString()
              .replace(/(\d)(?=(\d{3})+\.)/g, function($0, $1) {
                  return $1 + ",";
              });
      }
      console.log(commafy(1234567.90)); //1,234,567.90
    
  • 检测浏览器版本版本有哪些方式?

      功能检测、userAgent特征检测
    
      比如:navigator.userAgent
      //"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36
        (KHTML, like Gecko) Chrome/41.0.2272.101 Safari/537.36"
    
  • What is a Polyfill?

      polyfill 是“在旧版浏览器上复制标准 API 的 JavaScript 补充”,可以动态地加载 JavaScript 代码或库,在不支持这些标准 API 的浏览器中模拟它们。
      例如,geolocation(地理位置)polyfill 可以在 navigator 对象上添加全局的 geolocation 对象,还能添加 getCurrentPosition 函数以及“坐标”回调对象,
      所有这些都是 W3C 地理位置 API 定义的对象和函数。因为 polyfill 模拟标准 API,所以能够以一种面向所有浏览器未来的方式针对这些 API 进行开发,
      一旦对这些 API 的支持变成绝对大多数,则可以方便地去掉 polyfill,无需做任何额外工作。
    
  • 做的项目中,有没有用过或自己实现一些 polyfill 方案(兼容性处理方案)?

      比如: html5shiv、Geolocation、Placeholder
    
  • 我们给一个dom同时绑定两个点击事件,一个用捕获,一个用冒泡。会执行几次事件,会先执行冒泡还是捕获?

  • 使用JS实现获取文件扩展名?

      function getFileExtension(filename) {
        return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2);
      }
    
      String.lastIndexOf() 方法返回指定值(本例中的'.')在调用该方法的字符串中最后出现的位置,如果没找到则返回 -1。
      对于'filename'和'.hiddenfile',lastIndexOf的返回值分别为0和-1无符号右移操作符(»>) 将-1转换为4294967295,将-2转换为4294967294,这个方法可以保证边缘情况时文件名不变。
      String.prototype.slice() 从上面计算的索引处提取文件的扩展名。如果索引比文件名的长度大,结果为""。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值