jQuery 面试题



亲爱的读者们,这些jQuery 面试题专为帮助您熟悉面试中可能遇到的jQuery相关问题而设计。根据我的经验,优秀的面试官很少会预先设定具体的题目,通常会从一些基本概念开始,然后根据您的回答和进一步的讨论展开。

jQuery 是一个快速、简洁的 JavaScript 库,由 John Resig 于 2006 年创建,其口号是 - 少写代码,多做事情。jQuery 简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互,从而加快了 Web 开发速度。jQuery 是一个旨在通过编写更少代码来简化各种任务的 JavaScript 工具包。

以下是 jQuery 支持的重要核心功能列表:

  • DOM 操作 - jQuery 使选择 DOM 元素、遍历它们以及使用名为 Sizzle 的跨浏览器开源选择器引擎修改其内容变得容易。

  • 事件处理 - jQuery 提供了一种优雅的方式来捕获各种事件,例如用户点击链接,而无需在 HTML 代码本身中添加事件处理程序。

  • AJAX 支持 - jQuery 可以帮助您使用 AJAX 技术开发响应迅速且功能丰富的网站。

  • 动画 - jQuery 附带大量内置动画效果,您可以在网站中使用。

  • 轻量级 - jQuery 是一个非常轻量级的库 - 大约 19KB(压缩和 gzip 压缩)。

  • 跨浏览器支持 - jQuery 具有跨浏览器支持,可在 IE 6.0+、FF 2.0+、Safari 3.0+、Chrome 和 Opera 9.0+ 中良好运行。

  • 最新技术 - jQuery 支持 CSS3 选择器和基本的 XPath 语法。

使用 $(document).ready() 函数。其中的所有内容将在 DOM 加载完毕且页面内容加载之前加载。

JavaScript 很好地支持对象的概念。您可以使用对象字面量创建对象,如下所示:

var emp = {
   name: "Zara",
   age: 10
};

您可以使用点表示法编写和读取对象的属性,如下所示:

// Getting object properties
emp.name  // ==> Zara
emp.age   // ==> 10

// Setting object properties
emp.name = "Daisy"  // <== Daisy
emp.age  =  20      // <== 20

您可以使用数组字面量定义数组,如下所示:

var x = [];
var y = [1, 2, 3, 4, 5];

数组具有一个 length 属性,可用于迭代。我们可以按如下方式读取数组的元素:

var x = [1, 2, 3, 4, 5];

for (var i = 0; i < x.length; i++) {
   // Do something with x[i]
}

命名函数在定义时具有名称。可以使用 function 关键字定义命名函数,如下所示:

function named(){
   // do some stuff here
}

JavaScript 中的函数可以是命名函数或匿名函数。

匿名函数的定义方式与普通函数类似,但它没有名称。

可以!匿名函数可以赋值给变量。

可以!匿名函数可以作为参数传递给另一个函数。

JavaScript 变量 arguments 表示传递给函数的参数。

使用 typeof 运算符,我们可以获取传递给函数的参数类型。例如:

function func(x){
   console.log(typeof x, arguments.length);
}

func();                //==> "undefined", 0
func(1);               //==> "number", 1
func("1", "2", "3");   //==> "string", 3

使用 arguments.length 属性,我们可以获取传递给函数的参数总数。例如:

function func(x){
   console.log(typeof x, arguments.length);
}

func();                //==> "undefined", 0
func(1);               //==> "number", 1
func("1", "2", "3");   //==> "string", 3

arguments 对象具有一个 callee 属性,它引用您所在的函数。例如:

function func() {
   return arguments.callee; 
}

func();                // ==> func

JavaScript 中著名的关键字 this 始终指向当前上下文。

变量的作用域是程序中定义它的区域。JavaScript 变量只有两种作用域。

  • 全局变量 - 全局变量具有全局作用域,这意味着它在 JavaScript 代码的任何地方都是可见的。

  • 局部变量 - 局部变量仅在其定义的函数内可见。函数参数始终是该函数的局部变量。

局部变量优先于同名全局变量。

回调函数是一个普通的 JavaScript 函数,作为参数或选项传递给某些方法。一些回调函数只是事件,调用它们是为了给用户一个机会在触发特定状态时做出反应。

每当从某个内部作用域访问在当前作用域之外定义的变量时,就会创建闭包。

以下示例显示了变量 counter 如何在 create、increment 和 print 函数内可见,但在它们外部不可见:

function create() {
   var counter = 0;
	
   return {
      increment: function() {
         counter++;
      },
  
      print: function() {
         console.log(counter);
      }
   }
}

var c = create();
c.increment();
c.print();     // ==> 1

charAt() 方法返回指定索引处的字符。

concat() 方法返回指定索引处的字符。

forEach() 方法为数组中的每个元素调用一个函数。

indexOf() 方法返回在调用 String 对象中指定值的第一次出现的索引,如果未找到则返回 -1。

length() 方法返回字符串的长度。

pop() 方法从数组中删除最后一个元素并返回该元素。

push() 方法将一个或多个元素添加到数组的末尾并返回数组的新长度。

reverse() 方法反转数组元素的顺序 - 第一个元素变成最后一个,最后一个元素变成第一个。

sort() 方法对数组的元素进行排序。

substr() 方法返回从指定位置开始,通过指定字符数的字符串中的字符。

toLowerCase() 方法返回转换为小写的调用字符串值。

toUpperCase() 方法返回转换为大写的调用字符串值。

toString() 方法返回数字值的字符串表示形式。

jQuery 选择器是一个函数,它使用表达式根据给定的条件从基于 DOM 的元素中查找匹配的元素。简单来说,选择器用于使用 jQuery 选择一个或多个 HTML 元素。选择元素后,我们就可以对所选元素执行各种操作。jQuery 选择器以美元符号和括号开头 - $()。

工厂函数 $() 是 jQuery() 函数的同义词。因此,如果您正在使用任何其他 JavaScript 库,其中 $ 符号与其他内容冲突,则可以将 $ 符号替换为 jQuery 名称,并且可以使用函数 jQuery() 代替 $()。

$('tag-name') 选择文档中所有类型为 tag-name 的元素。例如,$('p') 选择文档中的所有段落 <p>。

$('#some-id') 选择文档中 ID 为 some-id 的单个元素。

$('.some-class') 选择文档中所有类为 some-class 的元素。

$('*') 选择 DOM 中所有可用的元素。

$('E, F, G') 选择指定选择器 E、F 或 G 的所有组合结果,其中选择器可以是任何有效的 jQuery 选择器。

attr() 方法可以用于从匹配集合中的第一个元素获取属性的值。

attr(name, value) 方法可以用于使用传递的值将命名属性设置到包装集中的所有元素上。

addClass( classes ) 方法可以用于将定义的样式表应用于所有匹配的元素。可以使用空格分隔多个类。

removeAttr( name ) 方法可以用于从每个匹配的元素中删除属性。

hasClass( class ) 方法如果指定的类至少存在于匹配元素集中,则返回 true

removeClass(class) 方法删除匹配元素集中所有或指定的类。

toggleClass(class) 方法在类不存在时添加它,存在时删除它。

html() 方法获取第一个匹配元素的 HTML 内容 (innerHTML)。

html( val ) 方法设置每个匹配元素的 HTML 内容。

text( ) 方法获取所有匹配元素的组合文本内容。

text( val ) 设置所有匹配元素的文本内容。

val( ) 方法获取第一个匹配元素的输入值。

val(val) 方法如果在 `` 元素上调用,则设置每个匹配元素的 value 属性;如果在 `