jQuery面试题(一)

一、手写一个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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容