Jquery 面试题 | 呆小徐

# Q1: Jquery 库中的 $() 是什么？

$() 函数是 jQuery() 函数的别称。$() 函数用于将任何对象包裹成 jQuery 对象，接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你甚至可以将一个选择器字符串传入 $() 函数，它会返回一个包含所有匹配的 DOM 元素数组的 jQuery 对象。

# Q2: $(document).ready() 是个什么函数？为什么要用它？

$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数，可执行多次。使用$(document).ready()的最大好处在于它适用于所有浏览器，jQuery帮你解决了跨浏览器的难题。

# Q3: window.onload 事件和 jQuery ready 函数有何不同？

window.onload 事件除了要等待 DOM 被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。如果加载图片和媒体内容花费了大量时间，用户就会感受到定义在 window.onload 事件上的代码在执行时有明显的延迟。
jQuery ready() 函数只需对 DOM 树的等待，而无需对图像或外部资源加载的等待，从而执行起来更快。使用 jQuery $(document).ready() 的另一个优势是你可以在网页里多次使用它，浏览器会按它们在 HTML 页面里出现的顺序执行它们，相反对于 onload 技术而言，只能在单一函数里使用。

# Q4: $(this) 和 this 关键字在 jQuery 中有何不同?

$(this) 返回一个 jQuery 对象，你可以对它调用多个 jQuery 方法，比如用 text() 获取文本，用val() 获取值等等。而 this 代表当前元素，它是 JavaScript 关键词中的一个，表示上下文中的当前 DOM 元素。你不能对它调用 jQuery 方法，直到它被 $() 函数包裹，例如 $(this)。

# Q5: jquery中addClass、removeClass、toggleClass的使用

$(selector).addClass(class)：为每个匹配的元素添加指定的类名
$(selector).removeClass(class)：从所有匹配的元素中删除全部或者指定的类，删除class中某个值
$(selector).toggleClass(class)：如果存在就删除一个类，不存在添加一个类
$(selector).removeAttr(class)：删除class这个属性

# Q6: jquery中$.get()提交和$.post()提交有区别吗?

相同点：都是异步请求的方式来获取服务端的数据;

异同点：

请求方式不同：$.get()方法使用GET方法来进行异步请求的。$.post()方法使用POST方法来进行异步请求的。
参数传递方式不同：get请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器的，这种传递是对用户不可见的。
数据传输大小不同：get方式传输的数据大小不能超过2KB而POST要大的多
- 理论上GET请求数据长度没有限制的，真正起到限制的是浏览器对其长度进行了限制
安全问题：GET方式请求的数据会被浏览器缓存起来，因此有安全问题。

# Q7: $.extend() 和 $.fn.extend() 使用

JQuery为插件的开发提供了两个方法，一个是$.extend()，另一个是$.fn.extend()，$.fn.extend() = $.prototype.extend()，即是在原型链中添加对象方法，当定义一个对象的时候，该对象一生成就具有·中声明的方法，可以直接调用。

$.extend()添加类方法,实际就是jq的静态方法

$.extend({
    addNum: function(a, b){
        return a + b;
    },
    age:120  //然而这样做并没有意义
});

// 使用
var sum = $.addNum(1, 2) // 3
console.log($.age) // 120

$.fn.extend() 给原型链上添加属性或方法

$.fn.extend({
    consoleWhileClick: function(){
        $(this).click(function(){
            console.log('click one button');
        });
    },
    age: 110
})

// 使用
$('div').consoleWhileClick(); //点击 #div 的时候打印 click one button
console.log($('body').age) // 110

← HTML 面试题