jQuery试题

 j〇uery源码中值得借鉴的？

使用模块化思想，模块间保持独立，不会导致多个开发人员合作时产生的冲突。

1．在设计程序时，要结构清晰，髙内聚，低耦合。

2．利用多态的方式，实现方法的重载，提髙代码的复用率

3．jQuery的链式调用以及回溯

4．jQuery.fn.extend与;jQuery.extend方法来实现扩展静态方法或实例方法

一些实例：

jquery获取display：none元素宽高，先将元素display：block， visibility：hidden，absolute，获取宽高后再display:none

jQuery 闭包结构

(function(window, undefined) {
   // jQuery 代码
})(window);

undefined 在js中不是关键字和保留字，它的值是可以被覆盖的。此外在代码层次过深时查找undefined或window将会更加节省资源

jQuery 的链式调用及回溯，

// 通过 end() 方法终止在当前链的最新过滤操作，返回上一个对象集合
$('div').eq(0).show().end().eq(1).hide();

当选择了 ('div').eq(0) 之后使用 end() 可以回溯到上一步选中的 jQuery 对象 $('div')，其内部实现其实是依靠添加了 prevObject 这个属性

jQuery.fn.extend与jQuery.extend的区别？

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

jQuery添加一个为 add的“静态方法”，之后便可以在引入 jQuery　的地方，使用这个方法了.

$.extend({ 
　　add:function(a,b){return a+b;} 
}); 

//$.add(3,4);
//return 7 

jQuery.fn.extend(object); 对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

$.fn.extend({ 
  alertClick:function(){ 
    $(this).click(function(){ 
      alert($(this).val()); 
    }); 
  } 
}); 

//页面上为：
<input id="input1" type="text"/>    

//使用
$("#input1").alertClick();  

jquery 怎么操作伪元素 ?

这是个坑，伪元素是无法选中的，因此无法操作

 $.ready是怎么实现的？

原生js中window.onload事件是在页面所有的资源都加载完毕后触发的.如果页面上有大图片等资源响应缓慢，会导致window.onload事件迟迟无法触发.所以出现了 DOM Ready事件.此事件在D0M文档结构准备完毕后触发，即在资源加载前触发.

jQuery中的ready方法实现了当页面加载完成后才执行的效果，但他并不是window.onload或者doucment.onload的封装，而是使用标准W3C浏览器DOM隐藏api和旧浏览器缺陷来完成的。可以通过阅读jq源码来理解：

DOMContentLoaded = function(){

    //取消事件监听，执行ready方法

   if ( document.addEventListener ){    

                  document.removeEventListener( "DOMContentLoaded",

   DOMContentLoaded, false );           

                  jQuery.ready();

   }else if ( document.readyState === "complete" ) {

                  document.detachEvent( "onreadystatechange", DOMContentLoaded );

                  jQuery.ready();

   }

};

在 jQuery 中完整的代码如下所示。

jQuery.ready.promise = function( obj ) {

   if ( !readyList ) {

                  readyList = jQuery.Deferred();

                                 //表示页面已经加载完成，直接调用 ready方法

                  if ( document.readyState === "complete" ) {

                                 //将 jQuery.ready压入异步消息队列，设置延迟时间1毫秒（注意，有些浏览器延迟不能小于4毫秒）

                                 setTimeout( jQuery.ready);

                  }

                  else if ( document.addEventListener ) //

                  {

                                  //监听DOM加载完成

                                 document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

                                  //这里是为了确保所有ready执行结束，如果DOMContentLoaded方法执行了，将有一个状态值 isReady被设置为true,因此，

                                  //ready方法一旦执行，那么将只执行一次，window.addEventListener中的ready 将被 return 中断

                                 window.addEventListener( "load", jQuery.ready, false );

                  } else {

                                 //低版本的IE浏览器

                                 document.attachEvent( "onreadystatechange", DOMContentLoaded );

                                 window.attachEvent( "onload", jQuery.ready );

                                 var top = false;

                                 try {

                                                top = window.frameElement == null && document.documentElement;

                                 } catch(e) {

                                 }

                                 if ( top && top.doScroll )  //剔除iframe的成分

                                 {

                                                (function doScrollCheck() {

                                                                if ( !jQuery.isReady ) {

 

                                                                               try {

                                                                                              //根据bug来兼容低版本的IE http://javascript.nwbox.com/IEContentLoaded/

                                                                                              top.doScroll("left");

                                                                               } catch(e) {

                                                                                              //由于低版本的IE 浏览器，onreadystatechange事件不可靠，因此需要根据各个bug来判断页面是否已加载完成

                                                                                              return setTimeout( doScrollCheck, 50 );

                                                                               }

                                                                               jQuery.ready();

                                                                }

                                                })();

                                 }

                  }

   }

  

return readyList.promise( obj );

};

需要的时候，在我们调用 ready 函数的时候，才需要注册这些判断页面是否完全加载的处理，如下所示： 

ready: function( wait ){

   if ( wait === true ? 一一jQuery.readyWait : jQuery.isReady ) {

                  //判断页面是否已完成加载并且是否已经执行ready方法

                  return;

   }

   if ( !document.body ) {

                  return setTimeout( jQuery.ready );

   }             

   jQuery.isReady = true; //指示ready方法已被执行         

   if ( wait !== true && 一一jQuery.readyWait > 0 ) {

                  return;

   }             

   readyList.resolveWith( document, [ jQuery ] );             

   if ( jQuery.fn.trigger ) {

                  jQuery( document ).trigger("ready").off("ready");

   }

}

总结：

 页面加载完成有两种事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是onload，指示页 面包含图片等文件在内的所有元素都加载完成。(可以说：ready 在onload 前加载！！！)
一般样式控制的，比如图片大小控制放在onload 里面加载;
jS事件触发的方法，可以在ready 里面加载;

 

JQuery中有几种类型的选择器

1.层叠选择器$(“form  input”)

2.基本过滤选择器 :first  :last :not()

3.内容过滤选择器:odd:eq():animated

4.可视化过滤选择器 :hidden :visible

5.属性过滤选择器：div[id]

6.子元素过滤选择器:first一child :last一child :only :child

7.表单元素过滤选择器 :enabled :disabled :checked :selected

8.id,类，类型,元素...

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

delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。 

  $("div").delegate("button","click",function(){
        $("p").slideToggle();
    });