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