jQuery面试题(一)

2017-09-07  本文已影响0人  迷人的洋葱葱

一、手写一个jQuery插件。

例1:封装jQuery对象方法的一个插件(使用jQuery.fn.extend()方法)。
编写 一个color()插件,color()用于返回对象元素的颜色,color("颜色")用于设置对象元素的颜色。
step1:首先,将插件命名为jquery.color.js
step2:编写插件代码如下。

;(function($){
        $.fn.extend({
                  "color":function(value){//value为color()方法的形参
                          return this.css("color",value);
                        }
        });
})(jQuery);

例2:封装全局函数的插件(使用jQuery.extend()方法)。
新增两个全局函数,用于去除字符串左侧和右侧的空格。

;(function($){
        $.extend({
                  ltrim:function(text){//ltrim为函数名,text为ltrim()方法的形参。
                              return (text||"").replace(/^\s+/g,"");
                      }
                  rtrim:function(text){
                              return (text||"").replace(/\s+$/g,"");
                      }                      
          });
})(jQuery);

二、在jquery方法和原型上面添加方法的区别和实现($.extend,$.fn.extend),以及jquery对象的实现(return new jQuery.fn.init)

Q1:区别:
1、两者的主要功能不同:
jQuery.extend(object); 扩展jQuery本身,添加全局函数。
jQuery.fn.extend(object);给jQuery对象添加方法。
2、两者调用方式不同:
jQuery.extend(),一般由传入的全局函数来调用
jQuery.fn.extend(),一般由具体的实例对象来调用

三、jQuery 中 end() 方法的作用

定义:
end() 方法结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态。

$("p").find("span").css("background-color","pink").end().css("border", "2px red solid");

<p><span>Hello, how are you?</span></p>
上一篇下一篇

猜你喜欢

热点阅读