jquery面试题

1.jQuery 库中的 $() 是什么？

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

2、网页上有 5 个 <div> 元素，如何使用 jQuery来选择它们？

3、jQuery 里的 ID 选择器和 class 选择器有何不同？

ID 选择器使用 ID 来选择元素，比如 #element1，而 class 选择器使用 CSS class 来选择元素。当你只需要选择一个元素时，使用 ID 选择器，而如果你想要选择一组具有相同 CSS class 的元素，就要用 class 选择器。

从语法角度来说，ID 选择器和 class 选择器的另一个不同之处是，前者用字符”#”而后者用字符”.”

$('#LoginTextBox')  // Returns element wrapped as jQuery object with id='LoginTextBox'

$('.active') // Returns all elements with CSS class active.

4、如何在点击一个按钮时使用 jQuery 隐藏一个图片？

$('#ButtonToClick').click(function(){

     $('#ImageToHide').hide();

});

5、$(document).ready() 是个什么函数？为什么要用它？

文档就绪函数，当DOM 完全加载（例如HTML被完全解析DOM树构建完成时）后执行，并适用所有浏览器。

6、JavaScript window.onload 事件和 jQuery ready 函数有何不同？

JavaScript window.onload 事件和 jQuery ready 函数之间的主要区别是，前者除了要等待 DOM 被创建还要等到包括大型图片、音频、视频在内的所有外部资源都完全加载。如果加载图片和媒体内容花费了大量时间，用户就会感受到定义在 window.onload 事件上的代码在执行时有明显的延迟。

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

7、如何找到所有 HTML select 标签的选中项？

$('[name=NameOfSelectedTag] :selected')

8、jQuery 里的 each() 是什么函数？你是如何使用它的？

遍历函数，可以遍历一个集合

9、你是如何将一个 HTML 元素添加到 DOM 树中的？

文档操作函数，如appendTo等

10、你能用 jQuery 代码选择所有在段落内部的超链接吗？

11、$(this) 和 this 关键字在 jQuery 中有何不同？

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

12、你如何使用jQuery来提取一个HTML 标记的属性 例如. 链接的href?

attr() 方法

13、你如何使用jQuery设置一个属性值?

attr(name, value)

14、jQuery中 detach() 和 remove() 方法的区别是什么?

尽管 detach() 和 remove() 方法都被用来移除一个DOM元素, 两者之间的主要不同在于 detach() 会保持对过去被解除元素的跟踪, 因此它可以被取消解除, 而 remove() 方法则会保持过去被移除对象的引用.

15、你如何利用jQuery来向一个元素中添加和移除CSS类?

addClass() 和 removeClass()

16、使用 CDN 加载 jQuery 库的主要优势是什么 ?

节省服务器带宽以及更快的下载速度这许多的好处之外, 最重要的是，如果浏览器已经从同一个CDN下载类相同的 jQuery 版本, 那么它就不会再去下载它一次. 因此今时今日，许多公共的网站都将jQuery用于用户交互和动画, 如果浏览器已经有了下载好的jQuery库，网站就能有非常好的展示机会。

17、jQuery.get() 和 jQuery.ajax() 方法之间的区别是什么?

ajax() 方法更强大，更具可配置性, 让你可以指定等待多久，以及如何处理错误。get() 方法是一个只获取一些数据的专门化方法。

18、jQuery 中的方法链是什么？使用方法链有什么好处？

法链是对一个方法返回的结果调用另一个方法，这使得代码简洁明了，同时由于只对 DOM 进行了一轮查找，性能方面更加出色。

19、你要是在一个 jQuery 事件处理程序里返回了 false 会怎样？

这通常用于阻止事件向上冒泡。

20、哪种方式更高效：document.getElementbyId("myId") 还是 $("#myId")？

第一种，因为它直接调用了 JavaScript 引擎。

21、jQuery中有哪几种类型的选择器？

22、请使用jQuery将页面上的所有元素边框设置为2px宽的虚线？

<script language="javascript" type="text/javascript">

         $("*").css("border", "2px dotted red");

</script>

23、当CDN上的jQuery文件不可用时，该怎么办？

为了节省带宽和脚本引用的稳定性，我们会使用CDN上的jQuery文件，例如google的jquery cdn服务。但是如果这些CDN上的jQuery服务不可用，我们还可以通过以下代码来切换到本地服务器的jQuery版本：

<script type="text/javascript" language="Javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.min.js "></script>

 

<script type='text/javascript'>//<!--[CDATA[

 

if (typeof jQuery == 'undefined') {

 

document.write(unescape("%3Cscript src='/Script/jquery-1.4.1.min.js' type='text/javascript' %3E%3C/script%3E"));

 

}//]]-->

 

</script>

 

24、jQuery中的Delegate()函数有什么作用？

回答：delegate()会在以下两个情况下使用到：

 

1、如果你有一个父元素，需要给其下的子元素添加事件，这时你可以使用delegate()了，代码如下：

 

$("ul").delegate("li", "click", function(){

 

$(this).hide();

 

});

2、当元素在当前页面中不可用时，可以使用delegate()

25、怎样用jQuery编码和解码URL？

encodeURIComponent(url) and decodeURIComponent(url)

26、如何用jQuery禁用浏览器的前进后退按钮？

<script type="text/javascript" language="javascript">

 

$(document).ready(function() {

 

     window.history.forward(1);

     //OR

     window.history.forward(-1);

 

});

 

</script>

 

 

27、如何修改jQuery默认编码（例如默认UTF-8改成改GB2312）：

$.ajaxSetup({

     ajaxSettings:{ contentType:"application/x-www-form-urlencoded;chartset=GB2312"}

});

 

28、JavaScript中的作用域与变量声明提升？

JavaScript的作用域只有两种：全局作用域和局部作用域，局部作用域是按照函数来区分的。在JavaScript中没有块级作用域，函数是js中唯一拥有自身作用域的结构。

声明的提升：

当前作用域内的声明都会提升到作用域的最前面，包括变量和函数的声明。

比如：

(function(){

  var a = "1";

   var f = function(){};

   var b = "2";

   var c = "3";

})();

声明会被提升为：

(function(){

  var a,f,b,c;

  a = "1";

  f = function(){};

  b = "2";

  c = "3";

})();

注意函数表达式并没有被提升，这也是函数表达式与函数声明的区别。进一步看二者的区别：

(function(){

  //var f1,function f2(){}; //hoisting,被隐式提升的声明

 

  f1(); //ReferenceError: f1 is not defined

  f2();

 

  var f1 = function(){};

  function f2(){}

})();

 

 

29、如何编写高性能的Javascript？

1、让代码简洁：一些简略的表达方式也会产生很好的优化。比如x=x+1;在不影响功能的情况下可以简写为x++;

2、变量名方法名尽量在不影响语意的情况下简单，比如定义数组的长度可以取名为：ArrLen而不需要取为ArrayLength。

3、关于JS的循环，循环是一种常用的流程控制。JS提供了三种循环：for(;;)、while()、for(in)。在这三种循环中for(in)的效率最差，因为它需要查询Hash键，因此应尽量少用for(in)循环，for(;;)、while()循环的性能基本持平。当然，推荐使用for循环，如果循环变量递增或递减，不要单独对循环变量赋值，而应该使用嵌套的++或–运算符。

4、如果需要遍历数组，应该先缓存数组长度，将数组长度放入局部变量中，避免多次查询数组长度。因为我们常常要根据字符串、数组的长度进行循环，而通常这个长度是不变的，比如每次查询a.length，就要额外进行一个操作，而预先把var len=a.length，则就少了一次查询。

5、尽量选用局部变量而不是全局变量。局部变量的访问速度要比全局变量的访问速度更快，因为全局变量其实是window对象的成员，而局部变量是放在函数的栈里的。

6、尽量少使用eval。每次使用eval需要消耗大量时间，这时候使用JS所支持的闭包可以实现函数模板。

7、减少对象查找。因为JavaScript的解释性，所以a.b.c.d.e，需要进行至少4次查询操作，先检查a再检查a中的b，再检查b中的c，如此往下。所以如果这样的表达式重复出现，只要可能，应该尽量少出现这样的表达式，可以利用局部变量，把它放入一个临时的地方进行查询。

8、字符串连接。如果是追加字符串，最好使用s+=anotherStr操作，而不是要使用s=s+anotherStr。如果要连接多个字符串，应该少使用+=，如s+=a;s+=b;s+=c;应该写成s+=a + b + c； 而如果是收集字符串，比如多次对同一个字符串进行+=操作的话，最好使用一个缓存。怎么用呢？使用JavaScript数组来收集，最后使用join方法连接起来，如下

var buf = new Array();for(var i = 0; i < 100; i++){ buf.push(i.toString());}var all = buf.join("");

30、那些操作会造成内存泄漏？

http://www.jb51.net/article/37685.htm

 

31、jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？

this指向的是jQuery.fn的实例对象

32、jquery中如何将数组转化为json字符串，然后再转化回来？

$.parseJSON

 

$.fn.stringify = function() {

   return JSON.stringify(this);

}

使用：$(array).stringify();

 

33、jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？

Query中的$.extend浅拷贝，拷贝对象A时，对象B将拷贝A的所有字段，如果字段是内存地址，B将拷贝地址，若果字段是基元类型，B将复制其值。它的缺点是如果你改变了对象B所指向的内存地址，你同时也改变了对象A指向这个地址的字段。

   jQuery中的$.extend深拷贝，这种方式会完全拷贝所有数据，优点是B与A不会相互依赖（A,B完全脱离关联）， 缺点是拷贝的速度更慢，代价更大。

$.extend(true,a,b)用法

 

34、jquery.extend 与 jquery.fn.extend的区别？

jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。

jQuery.fn.extend(object);给jQuery对象添加方法。

 

35、jQuery 的队列是如何实现的？队列可以用在哪些地方？

通过函数：queue()、dequeue（）以及clearQueue（）实现队列的操作。

主要使用场景：对于一系列需要按次序运行的函数特别有用。特别animate动画，ajax，以及timeout等需要一定时间的函数

 

36、谈一下Jquery中的bind(),live(),delegate(),on()的区别？

bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数

live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的

delegate(selector,[type],[data],fn) 指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数

on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数

 

差别：

 

.bind()是直接绑定在元素上

.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。和.bind()的优势是支持动态数据。

.delegate()则是更精确的小范围使用事件代理，性能优于.live()

.on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制

 

 

37、jQuery 是通过哪个方法和 Sizzle 选择器结合的？

Sizzle，作为一个独立全新的选择器引擎，出现在jQuery 1.3版本之后，并被John Resig作为一个开源的项目，可以用于其他框架：Mool, Dojo，YUI等。

jQuery.fn.find()进入Sizzle

38、针对 jQuery性能的优化方法？

http://www.frontopen.com/1077.html

*基于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++) {}