首页登陆欢迎您!
首页登陆 > 运维知识 > 运维知识jQuery 源码解析二:jQuery.fn.extend=jQuery.extend 方法探究

运维知识jQuery 源码解析二:jQuery.fn.extend=jQuery.extend 方法探究

时间:2019-12-06

本文实例讲述了jQuery仿gmail实现fixed布局的方法。分享给大家供大家参考。具体实现方法如下:

      终于动笔开始 jQuery 源码解析第二篇,写文章还真是有难度,要把自已懂的表述清楚,要让别人听懂真的不是一见易事。

这篇文章主要介绍了jQuery内部原理和实现方式浅析,本文试图从整体来阐述一下jQuery的内部实现,需要的朋友可以参考下

fixed bar demobody{margin:0;height:2000px;}#top{background-color:#333;height:80px;}#nav{background-color:#999;height:30px;position:absolute;top:80px;width:100%;}$.scroll{ var scrollTop = $; if $.css; else $.css('top', scrollTop +'px'); });});

运维知识,      在 jQuery 源码解析一:jQuery 类库整体架构设计解析 一文,大致描述了 jQuery 源码整体大致架构,主要分为以下几个点:

 

希望本文所述对大家的jQuery程序设计有所帮助。

      A 通过自执行函数,在内部将 jQuery (jQuery 为一个函数,同时,在 JS 中,函数也为对象)以 window.jQuery=window.$ 引入,供用户直接便可使用 $、jQuery 调用。

这段时间在学习研究jQuery源码,受益于jQuery日益发展强大,研究jQuery的大牛越来越多,学习的资料也比前两年好找了,有很多非常不错的资源,如高云的jQuery1.6.1源码分析系列。这些教程非常细致的分析了jQuery内部原理和实现方式,对学习和理解jQuery有非常大的帮助。但是个人认为很多教程对jQuery的整体结果把握不足,本人试图从整体来阐述一下jQuery的内部实现。

      B 以 C#、Java 为例,可知存在静态方法、对象方法区别,该原理类比 jQuery ,jQuery.xxx 相当于给为其增加静态方法,而 jQuery.fn.xxx 则可类比于相当于给其增加对象方法。

大家知道,调用jQuery有两种方式,一种是高级的实现,通过传递一个参数实现DOM选择,如通过$(“h1″)选择所有的h1元素,第二种是较为低级的实现,如果通过$.ajax实现ajax的操作。那么,这两种方式到底有何不同?用typeof函数检测$(‘h1′)和$.ajax,类型分别为object和function,稍微学过jQuery的都知道或者听过过,前者返回的是一个jQuery对象,那么jQuery对象是什么,它和jQuery是什么关系呢?我们先来通过for(var i in $(”)) document.write(i+” :::”+$(“”)[i]+””);打印一下jQuery对象的属性和对应的值,可以看到它有100多个属性,通过console输入$(“*”)可以看到大部分属性是继承自jQuery原型的属性,jQuery对象实际上是这样一个对象:

      C 在 jQuery 源码内部,巧妙运用原型,直接上代码:

 

上一篇:原生JS和JQuery动态添加、删除表格行的方法_javascript技巧_脚本之家 下一篇:没有了