前端工程师面试问题归纳（二、问答类JQ相关）

6、JQuery有几种选择器?

(1)、基本选择器：#id，class,element,*;

(2)、层次选择器：parent > child，prev + next ，prev ~ siblings

(3)、基本过滤器选择器：:first，:last ，:not ，:even ，:odd ，:eq ，:gt ，:lt

(4)、内容过滤器选择器： :contains ，:empty ，:has ，:parent

(5)、可见性过滤器选择器：:hidden ，:visible

(6)、属性过滤器选择器：[attribute] ，[attribute=value] ，[attribute!=value] ，[attribute^=value] ，[attribute$=value] ，[attribute*=value]

(7)、子元素过滤器选择器：:nth-child ，:first-child ，:last-child ，:only-child

(8)、表单选择器： :input ，:text ，:password ，:radio ，:checkbox ，:submit 等；

(9)、表单过滤器选择器：:enabled ，:disabled ，:checked ，:selected

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

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

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

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

8、$(document).ready()方法和window.onload有什么区别？

(1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。

(2)、$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵，并调用执行绑定的函数。

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

实现代码如下：

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

异同点：

1、请求方式不同：$.get() 方法使用GET方法来进行异步请求的。$.post() 方法使用POST方法来进行异步请求的。

2、参数传递方式不同：get请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器的，这种传递是对用户不可见的。

3、数据传输大小不同：get方式传输的数据大小不能超过2KB 而POST要大的多

4、安全问题： GET 方式请求的数据会被浏览器缓存起来，因此有安全问题。

11、写出一个简单的$.ajax()的请求方式？

12、jQuery的事件委托方法bind 、live、delegate、on之间有什么区别？

(1)、bind 【jQuery 1.3之前】

定义和用法：主要用于给选择到的元素上绑定特定事件类型的监听函数；

语法：bind(type,[data],function(eventObject))；

特点：

(1)、适用于页面元素静态绑定。只能给调用它的时候已经存在的元素绑定事件，不能给未来新增的元素绑定事件。

(2)、当页面加载完的时候，你才可以进行bind()，所以可能产生效率问题。

实例如下：$( "#members li a" ).bind( "click", function( e ) {} );

(2)、live 【jQuery 1.3之后】

定义和用法：主要用于给选择到的元素上绑定特定事件类型的监听函数；

语法：live(type, [data], fn);

特点：

(1)、live方法并没有将监听器绑定到自己(this)身上，而是绑定到了this.context上了。

(2)、live正是利用了事件委托机制来完成事件的监听处理，把节点的处理委托给了document，新添加的元素不必再绑定一次监听器。

(3)、使用live（）方法但却只能放在直接选择的元素后面，不能在层级比较深，连缀的DOM遍历方法后面使用，即$(“ul”").live...可以，但$("body").find("ul").live...不行；

实例如下：$( document ).on( "click", "#members li a", function( e ) {} );

(3)、delegate 【jQuery 1.4.2中引入】

定义和用法：将监听事件绑定在就近的父级元素上

语法：delegate(selector,type,[data],fn)

特点：

(1)、选择就近的父级元素，因为事件可以更快的冒泡上去，能够在第一时间进行处理。

(2)、更精确的小范围使用事件代理，性能优于.live()。可以用在动态添加的元素上。

实例如下：

$("#info_table").delegate("td","click",function(){/*显示更多信息*/});

$("table").find("#info").delegate("td","click",function(){/*显示更多信息*/});

(4)、on 【1.7版本整合了之前的三种方式的新事件绑定机制】

定义和用法：将监听事件绑定到指定元素上。

语法：on(type,[selector],[data],fn)

实例如下：$("#info_table").on("click","td",function(){/*显示更多信息*/});参数的位置写法与delegate不一样。

说明：on方法是当前JQuery推荐使用的事件绑定方法，附加只运行一次就删除函数的方法是one()。

总结：.bind(), .live(), .delegate(),.on()分别对应的相反事件为：.unbind(),.die(), .undelegate(),.off()

13、解释”deferreds”。

开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。其中，既有异步的操作（比如ajax读取服务器数据），也有同步的操作（比如遍历一个大型数组），它们都不是立即能得到结果的。

通常的做法是，为它们指定回调函数（callback）。即事先规定，一旦它们运行结束，应该调用哪些函数。

但是，在回调函数方面，jQuery的功能非常弱。为了改变这一点，jQuery开发团队就设计了deferred对象。

简单说，deferred对象就是jQuery的回调函数解决方案。在英语中，defer的意思是”延迟”，所以deferred对象的含义就是”延迟”到未来某个点再执行。

14、你知道哪些针对jQuery的优化方法？

• 1.总是从ID选择器开始继承在jQuery中最快的选择器是ID选择器，因为它直接来自于JavaScript的getElementById()方法。

例如有一段HTML代码：

比如需要选择红绿单选框，那么可以使用一个tag name来限制(修饰)class，如下所示：var active_light=(“input.on”);当然也可以结合就近的ID，如下所示：varactivelight=(“input.on”);当然也可以结合就近的ID，如下所示：varactivelight=(“#traffic_light input.on”); 如果采用下面的选择器，那么效率是低效的。var traffic_button=(“#content.button”);因为button已经有ID了，我们可以直接使用ID选择器。如下所示：var traffic_button=(“#content.button”);因为button已经有ID了，我们可以直接使用ID选择器。如下所示：var traffic_button=(“#traffic_button”);当然这只是对于单一的元素来讲。如果你需要选择多个元素，这必然会涉及到DOM遍历和循环，为了提高性能，建议从最近的ID开始继承。如下所示：var traffic_lights=$(“#traffic_light input”);

• 2.在class前使用tag(标签名)在jQuery中第二快的选择器是tag(标签)选择器(比如：$(“head”))。

跟ID选择器累时，因为它来自原生的getElementsByTagName()方法。继续看刚才那段HTML代码：

在使用tag来修饰class的时候，我们需要注意以下几点：（1）不要使用tag来修饰ID，如下所示：var content=(“div#content”);这样一来，选择器会先遍历所有的div元素，然后匹配#content。（好像jQuery从1.3.1开始改变了选择器核心后，不存在这个问题了。暂时无法考证。）（2）不要画蛇添足的使用ID来修饰ID，如下所示：var traffic_light=(“div#content”);这样一来，选择器会先遍历所有的div元素，然后匹配#content。（好像jQuery从1.3.1开始改变了选择器核心后，不存在这个问题了。暂时无法考证。）（2）不要画蛇添足的使用ID来修饰ID，如下所示：var traffic_light=(“#content#traffic_light”);

• 3.将jQuery对象缓存起来把jQuery对象缓存起来就是要告诉我们要养成将jQuery对象缓存进变量的习惯。

下面是一个jQuery新手写的一段代码：

$("#traffic_light input.on").bind("click",function(){});

$("#traffic_light input.on").css("border","1px dashed yellow");

$("#traffic_light input.on").css("background-color","orange");

$("#traffic_light input.on").fadeIn("slow");

但切记不要这么做。我们应该先将对象缓存进一个变量然后再操作，如下所示：

记住，永远不要让相同的选择器在你的代码里出现多次.注：（1）为了区分普通的JavaScript对象和jQuery对象，可以在变量首字母前加上$符号。（2）上面代码可以使用jQuery的链式操作加以改善。如下所示：

• 4.如果你打算在其他函数中使用jQuery对象，那么你必须把它们缓存到全局环境中。

如下代码所示：

这里的基本思想是在内存中建立你确实想要的东西，然后更新DOM。这并不是一个jQuery最佳实践，但必须进行有效的JavaScript操作。直接的DOM操作速度很慢。例如，你想动态的创建一组列表元素，千万不要这样做,如下所示：对直接的DOM操作进行限制。

var top_100_list = [];// 假设这里是100个独一无二的字符串

var $mylist = $("#mylist");// jQuery选择到<ul>元素

for(var i = 0,l = top_100_list.length;i<l;i++) {

    $mylist.append("<li>" + top_100_list[i] + "</li>");

}

我们应该将整套元素字符串在插入进dom中之前先全部创建好，如下所示：

$("#entryform input").bind("focus",function() {

    $(this).addClass("selected");

}).bind("blur",function(){

    $(this).removeClass("selected");

});

• 5.冒泡除非在特殊情况下,否则每一个js事件(例如:click,mouseover等.)都会冒泡到父级节点。

当我们需要给多个元素调用同个函数时这点会很有用。代替这种效率很差的多元素事件监听的方法就是,你只需向它们的父节点绑定一次。比如,我们要为一个拥有很多输入框的表单绑定这样的行为:当输入框被选中时为它添加一个class传统的做法是，直接选中input，然后绑定focus等，如下所示：

$("#entryform").bind("focus",function(e) {

    var $cell = $(e.target); // e.target捕捉到触发的目标元素

    $cell.addClass("selected");

}).bind("blur",function(e) {

    var $cell = $(e.target);

    $cell.removeClass("selected");

});

当然上面代码能帮我们完成相应的任务，但如果你要寻求更高效的方法，请使用如下代码：

通过在父级监听获取焦点和失去焦点的事件，对目标元素进行操作。在上面代码中，父级元素扮演了一个调度员的角色,它可以基于目标元素绑定事件。如果你发现你给很多元素绑定了同一个事件监听,那么现在的你肯定知道哪里做错了。

• 6.推迟到$(window).load。

jQuery对于开发者来说有一个很诱人的东西,可以把任何东西挂到(document).ready下。尽管(document).ready下。尽管(document).rady确实很有用，它可以在页面渲染时，其它元素还没下载完成就执行。如果你发现你的页面一直是载入中的状态，很有可能就是(document).ready函数引起的。你可以通过将jQuery函数绑定到(document).ready函数引起的。你可以通过将jQuery函数绑定到(window).load事件的方法来减少页面载入时的cpu使用率。它会在所有的html(包括iframe)被下载完成后执行。一些特效的功能，例如拖放,视觉特效和动画,预载入隐藏图像等等，都是适合这种技术的场合。

• 7.压缩JavaScript。

在线压缩地址:http://dean.edwards.name/packer/压缩之前，请保证你的代码的规范性，否则可能失败，导致Js错误。

• 8.尽量使用ID代替Class。

  前面性能优化已经说过，ID选择器的速度是最快的。所以在HTML代码中，能使用ID的尽量使用ID来代替class。看下面的一个例子：

 // 创建一个list

 var $myList = $('#myList');

 var myListItems = '<ul>';

 for(var i = 0; i < 1000; i ++) {

     myListItems += '<li class = "listItem'+i+'">This is a list item</li>';

     // 这里使用的是class

 }

myListItems += '</ul>';

$myList.html(myListItems);

// 选择每一个li

for(var i = 0; i<1000; i++) {

    var selectedItem = $('.listItem' + i);

}

在上段代码中，选择每个li总共只用了61毫秒，相比class的方式，将近快了100倍。 在代码最后，选择每个li的过程中，总共用了5066毫秒，超过5秒了。接着我们做一个对比，用ID代替class：

• 9.给选择器一个上下文。

jQuery选择器中有一个这样的选择器，它能指定上下文。jQuery(expression,context);通过它，能缩小选择器在DOM中搜索的范围，达到节省时间，提高效率。普通方式：(‘.myDiv′)改进方式：(‘.myDiv′)改进方式：(‘.myDiv’,$(“#listItem”))。

• 10.慎用.live()方法（应该说尽量不要使用）。

这是jQuery1.3.1版本之后增加的方法，这个方法的功能就是为新增的DOM元素动态绑定事件。但对于效率来说，这个方法比较占用资源。所以请尽量不要使用它。例如有这么一段代码:

 <script type="text/javascript">

     $(function(){

         $("p").click(function(){

             alert($(this).text());

         });

         $("button").click(function(){

             $("<p>this is second p</p>").appendTo("body");

        });

    })

</script>

<body>

    <p>this is first p</p>

    <button>add</button>

</body>

运行后，你会发现新增的p元素，并没用被绑定click事件。你可以改成.live(“click”)方式解决此问题，代码如下：

 $(function() {

     $("p").live("click",function() {

         // 改成live方式

         alert($(this).text());

     });

     $("button").click(function() {

         $("<p>this is second p</p>").appendTo("body");

     });

})

但我并不建议大家这么做，我想用另一种方式去解决这个问题，代码如下：

 $(function() {

     $("p").click(function() {

         alert($(this).text());

     });

     $("button").click(function() {

         $("<p>this is second p</p>").click(function() {

             // 为新增的元素重新绑定一次

             alert($(this).text());

        }).appendTo("body");

    });

})

虽然我把绑定事件重新写了一次，代码多了点，但这种方式的效率明显高于live()方式，特别是在频繁的DOM操作中，这点非常明显。

15、什么是效果队列？

jQuery中有个动画队列的机制。当我们对一个对象添加多次动画效果时后添加的动作就会被放入这个动画队列中，等前面的动画完成后再开始执行。可是用户的操作往往都比动画快，如果用户对一个对象频繁操作时不处理动画队列就会造成队列堆积，影响到效果。jQuery中有stop这个方法可以停止当前执行的动画，并且它有两个布尔参数，默认值都为false。第一个参数为true时会清空动画队列，第二个参数为true时会瞬间完成掉当前动画。所以，我们经常使用obj.stop(true,true)来停止动画。但是这还不够！正如jQuery文档中的说法，即使第二个参数为true，也仅仅是把当前在执行的动画跳转到完成状态。这时第一个参数如果也为true，后面的队列就会被清空。如果一个效果需要多个动画同时处理，我们仅完成其中的一个而把后面的队列丢弃了，这就会出现意料之外的结果。

16、请指出.get()，[]，eq()的区别。

eq:返回是一个jquery对象作用是将匹配的元素集合缩减为一个元素。这个元素在匹配元素集合中的位置变为0，而集合长度变成1。

get:是一个html对象数组作用是取得其中一个匹配的元素。num表示取得第几个匹配的元素。

17、请指出和和.fn的区别，或者说出$.fn的用途。

Jquery为开发插件提供了两个方法，分别是：

$.extend(obj);

$.fn.extend(obj);

• 1.那么这两个分别是什么意思？ 
  $.extend(obj);是为了扩展jquery本身，为类添加新的方法。

$.fn.extend(obj);给JQUERY对象添加方法。

• 2..fn中的fn是什么意思，其实是prototype，即.fn中的fn是什么意思，其实是prototype，即.fn=$.prototype; 
  具体用法请看下面的例子：

$.extend({

    add:function(a, b) {

        return a+b;

    }

})

$.add(5,8); // return 13

注意没有，这边的调用直接调用，前面不用任何对象。直接$.+方法名

$.fn.extend(obj)；对prototype进行扩展，为jquery类添加成员函数，jquery类的实例可以使用这个成员函数。

 $.fn.extend({

     clickwhile:function(){

         $(this).click(function(){

             alert($(this).val())

         })

     }

 })

$('input').clickwhile(); // 当点击输入框会弹出该对象的Value值

注意调用时候前面是有对象的。即$(‘input’)这么个东西。