面试题参考

参考地址
1. jQuery 库中的 $() 是什么？
$() 函数是 jQuery() 函数的别称，乍一看这很怪异，还使 jQuery 代码晦涩难懂。一旦你适应了，你会爱上它的简洁。$() 函数用于将任何对象包裹成 jQuery 对象，接着你就被允许调用定义在 jQuery 对象上的多个不同方法。

网页上有 5 个
元素，如何使用 jQuery来选择它们？
jQuery 代码：$(“div”)，这样会返回一个包含所有 5 个 div 标签的 jQuery 对象。
jQuery 里的 ID 选择器和 class 选择器有何不同？
$(‘#LoginTextBox’) // Returns element wrapped as jQuery object with id=’LoginTextBox’
$(‘.active’) // Returns all elements with CSS class active.
正如你所见，从语法角度来说，ID 选择器和 class 选择器的另一个不同之处是，前者用字符”#”而后者用字符”.”。更详细的分析和讨论参见上面的答案链接。
如何在点击一个按钮时使用 jQuery 隐藏一个图片？
这是一个事件处理问题。jQuery为按钮点击之类的事件提供了很好的支持。你可以通过以下代码去隐藏一个通过ID或class定位到的图片。你需要知道如何为按钮设置事件并执行hide() 方法，代码如下所示：

$(‘#ButtonToClick’).click(function(){
$(‘#ImageToHide’).hide();
});

$(document).ready() 是个什么函数？为什么要用它？
ready() 函数用于在文档进入ready状态时执行代码。当DOM 完全加载（例如HTML被完全解析DOM树构建完成时），jQuery允许你执行代码。使用$(document).ready()的最大好处在于它适用于所有浏览器，jQuery帮你解决了跨浏览器的难题。
JavaScript window.onload 事件和 jQuery ready 函数有何不同？
前者除了要等待 DOM 被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。如果加载图片和媒体内容花费了大量时间，用户就会感受到定义在 window.onload 事件上的代码在执行时有明显的延迟。

另一方面，jQuery ready() 函数只需对 DOM 树的等待，而无需对图像或外部资源加载的等待，从而执行起来更快。使用 jQuery $(document).ready() 的另一个优势是你可以在网页里多次使用它，浏览器会按它们在 HTML 页面里出现的顺序执行它们，相反对于 onload 技术而言，只能在单一函数里使用。鉴于这个好处，用 jQuery ready() 函数比用 JavaScript window.onload 事件要更好些。

如何找到所有 HTML select 标签的选中项？
你能用下面的 jQuery 选择器获取所有具备 multiple=true 的标签。
1. jQuery 里的 each() 是什么函数？你是如何使用它的？
  each() 函数就像是 Java 里的一个 Iterator，它允许你遍历一个元素集合。你可以传一个函数给 each() 方法，被调用的 jQuery 对象会在其每个元素上执行传入的函数。有时这个问题会紧接着上面一个问题，举个例子，如何在 alert 框里显示所有选中项。我们可以用上面的选择器代码找出所有选中项，然后我们在 alert 框中用 each() 方法来一个个打印它们，代码如下：
$(‘[name=NameOfSelectedTag] :selected’).each(function(selected) {
alert($(selected).text());
});
其中 text() 方法返回选项的文本。
1. 你是如何将一个 HTML 元素添加到 DOM 树中的？
  你可以用 jQuery 方法 appendTo() 将一个 HTML 元素添加到 DOM 树中。这是 jQuery 提供的众多操控 DOM 的方法中的一个。你可以通过 appendTo() 方法在指定的 DOM 元素末尾添加一个现存的元素或者一个新的 HTML 元素。
2. 你能用 jQuery 代码选择所有在段落内部的超链接吗？
  $(‘p a’);找出当前p下所有a标签(如果当前p包含其他标签且其他标签中也包含a也会查找出来)
  $(‘p>a’)仅找出当前p下的a标签
3. $(this) 和 this 关键字在 jQuery 中有何不同？
  $(this) 返回一个 jQuery 对象，你可以对它调用多个 jQuery 方法，比如用 text() 获取文本，用val() 获取值等等。
  而 this 代表当前元素，它是 JavaScript 关键词中的一个，表示上下文中的当前 DOM 元素。你不能对它调用 jQuery 方法，直到它被 $() 函数包裹，例如 $(this)。
4. 你如何使用jQuery来提取一个HTML 标记的属性例如. 链接的href?
  attr() 方法被用来提取任意一个HTML元素的一个属性的值. 你首先需要利用jQuery选择及选取到所有的链接或者一个特定的链接，然后你可以应用attr()方法来获得他们的href属性的值。下面的代码会找到页面中所有的链接并返回href值：
$(‘a’).each(function(){
alert($(this).attr(‘href’));
});
1. 你如何使用jQuery设置一个属性值?
  前面这个问题之后额外的一个后续问题是，attr()方法和jQuery中的其它方法一样，能力不止一样. 如果你在调用attr()的同时带上一个值例如. attr(name, value), 这里name是属性的名称，value是属性的新值。
2. jQuery中 detach() 和 remove() 方法的区别是什么?
  尽管 detach() 和 remove() 方法都被用来移除一个DOM元素, 两者之间的主要不同在于 detach() 会保持对过去被解除元素的跟踪, 因此它可以被取消解除, 而 remove() 方法则会保持过去被移除对象的引用. 你也还可以看看用来向DOM中添加元素的 appendTo() 方法.
3. 你如何利用jQuery来向一个元素中添加和移除CSS类?
  通过利用 addClass() 和 removeClass() 这两个 jQuery 方法。动态的改变元素的class属性可以很简单例如. 使用类“.active”来标记它们的未激活和激活状态，等等.
4. 使用 CDN 加载 jQuery 库的主要优势是什么 ?
  这是一个稍微高级点儿的jQuery问题。好吧，除了报错节省服务器带宽以及更快的下载速度这许多的好处之外, 最重要的是，如果浏览器已经从同一个CDN下载类相同的 jQuery 版本, 那么它就不会再去下载它一次. 因此今时今日，许多公共的网站都将jQuery用于用户交互和动画, 如果浏览器已经有了下载好的jQuery库，网站就能有非常好的展示机会。
5. jQuery.get() 和 jQuery.ajax() 方法之间的区别是什么?
  ajax() 方法更强大，更具可配置性, 让你可以指定等待多久，以及如何处理错误。get() 方法是一个只获取一些数据的专门化方法。
6. jQuery 中的方法链是什么？使用方法链有什么好处？
  方法链是对一个方法返回的结果调用另一个方法，这使得代码简洁明了，同时由于只对 DOM 进行了一轮查找，性能方面更加出色。
7. 你要是在一个 jQuery 事件处理程序里返回了 false 会怎样？
  这通常用于阻止事件向上冒泡。
8. 哪种方式更高效：document.getElementbyId(“myId”) 还是 $(“#myId”)？
  第一种，因为它直接调用了 JavaScript 引擎。
  
  链式调用的原理
  $("div").width("100px").height("100px"); ```javascript
let fun = { fun1: function() { console.log(“fun1”); return this; },
```
fun2: function() {
    console.log("fun2");
    return this;
},
fun3: function() {
    console.log("fun3");
    return this;
}
```
}

fun.fun1().fun2().fun3(); ```

这样就可以连续的输出字符串的fun1、fun2、fun3 了，原因是在每个方法后面加了一个return this。

如果没有加上return this语句的话，那么执行完一个函数之后，会默认返回undefined，这个是js内部自己隐式添加的。返回undefined的时候，再调用另一个方法肯定就会报错，因为undefined是没有方法的。

链式调用是通过return this的形式来实现的。通过对象上的方法最后加上return this，把对象再返回回来，对象就可以继续调用方法，实现链式操作了。

链式调用的好处：节省代码量，代码看起来更优雅。

链式调用的问题：所有对象的方法返回的都是对象本身，也就是说没有返回值，所以这种方法不一定在任何环境下都适合。

jQuery

面试题参考

链式调用的原理