1.jquery中$是神马?$.fn又是神马?

稍微有jquery经验的都知道在jquery中$等价于jQuery,在控制台一试便知:

我们在jquery(1.8.3)源码中也能找到下面代码:

其实在jquery中$就是一个函数function,当我们执行$()时会得到一个jquery对象,得到的jquery对象的类型是object类型,而不是数组。除此之外$也是个对象,因为在$上面也可以定义方法和属性,比如常见的$.ajax。

$.fn就是$的原型,,在源码中我们也能找到jQuery.fn = jQuery.prototype

jquery对象中的上百种方法就是定义在原型中,为什么定义在原型中?这就是js面向对象的重要知识了,可参考我的这篇文章 对于jquery这么多方法的库来说,方法定义在原型上极大的节省了内存。这里只需知道$.fn就是$的原型就行。

插件的写法

插件说白了就是为jquery库添加特定的方法,插件的形式一般开头为$.fn.extend 在源码中我们也能看到很多这样的例子:

            

所以一个常见的插件的基本样式应该如下(注释写的很详细,就不再一一赘述):

/*
插件名:
作者:
日期:等信息
*/ //一个匿名自执行函数,划分一个独立的作用域,不至于插件中的变量干扰jquery

;(function($){ //开始写上; 为防止代码压缩出错

//为jquery扩展方法,也就是插件的主体
$.fn.extend({ //方法名
"method" : function(opts){
//定义插件的默认参数
var default = {
width : //定义默认宽度
height : //定义默认高度
speed : //定义默认速度
//等等各种默认参数
}
//有些参数用户直接使用默认,有些参数用户要使用自己定义的
//自定义参数替换默认参数
//var option = $.extend(default,opts); //为什么不用此行代码?为了保护默认参数
//extend方法中opts会永久取代default,所以新加一个空对象{}来保存本次所使用的参数,下次使用default依然不变
var option = $.extend({},default,opts); this.each(function(){ //用each处理选择器选中的一个或多个dom节点
/*
此处是插件处理过程代码
*/
}); //最后别忘了保持jquery的链式操作(视情况而定)
return this; //返回被选中的元素节点,以供后续操作。
} }); })(jQuery)//传入jQuery是为更快查找,避免沿作用域链往上层查找,提高性能

常见的插件写法就是这样,据说90%以上的插件就是用$.fn.extend()方式实现的,因为jquery的特色就是先选择dom节点,然后链式处理这些节点。还有不常见的$.extend()插件编写方式,该方式编写的插件是在jquery命名空间内添加方法,也就是说在使用时不需要先选择dom节点,使用时直接$.method()即可。

插件的命名和代码压缩

命名默认采用jquery.method.js (method代指插件名),除此之外最好弄一个压缩版:jquery.method.min.js 至于代码的压缩,包括去空格,去换行,其实还有方法名的简写操作,比如方法名叫removeAttr,很长,那么可以直接改写为一个字母a,这也是短化代码的方法,除此之外还有if else 转换为三木运算等压缩方式。

jquery插件需要明白的那些知识点的更多相关文章

  1. JQuery插件定义

    一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...

  2. 教你开发jQuery插件(转)

    教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文: ...

  3. 推荐两款简单好用的图片放大jquery插件

    一.zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件引入该插件的js:zoomfiy.js 或 min引入该插件的css:zoomfiy.css 或 min前后顺序都可j ...

  4. 详解jquery插件中;(function ( $, window, document, undefined )的作用

    在jquery插件中我们经常看到以下这段代码 1 2 3 ;(function ( $, window, document, undefined ){ //函数体内具体代码 })(jQuery, wi ...

  5. jQuery插件入门

    一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写("#"),("#"),("."),写了几年就对别人说非常熟悉JQ ...

  6. 不定义JQuery插件,不要说会JQuery 分类: JavaScript 2014-11-24 14:18 155人阅读 评论(0) 收藏

    一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...

  7. [转]不定义JQuery插件,不要说会JQuery

    一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写("#"),("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人,直 ...

  8. 不定义JQuery插件,不要说会JQuery

    转自:http://www.cnblogs.com/xcj26/p/3345556.html 一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#") ...

  9. DWZ(JUI) 教程 中如何整合第三方jQuery插件

    Query插件一般是$(document).ready()中初始化 $(document).ready(function(){  // 文档就绪,初始化jQuery插件| });  // 或者或缩写形 ...

随机推荐

  1. 一道前端面试题:定义一个方法将string的每个字符串间加个空格返回,调用的方式'hello world'.spacify();

    偶然在群里看到了这道题:定义一个方法将string的每个字符串间加个空格返回,调用的方式'hello world'.spacify(); 这道题主要是对JavaScript对象原型的考察.

  2. Visual Studio调试之符号文件

    原文链接地址:http://www.cnblogs.com/killmyday/archive/2009/10/14/1582882.html 前面在不能设置断点的检查步骤和Visual Studio ...

  3. BZOJ 4777 Usaco2017 Open Switch Grass Kruskal+替罪羊树+权值线段树

    这道题首先可以看出答案一定是一条边,而且答案一定在最小生成树上,那么我们就可以在这个最小生成树上维护他与异色儿子的边最小值,所以我们就可以已通过Kruskal和一棵平衡树来解决,时间复杂度是O(n*l ...

  4. poj 2104 (主席树写法)

    //求第K的的值 1 #include<stdio.h> #include<iostream> #include<algorithm> #include<cs ...

  5. JAVA中string.replace()和string.replaceAll()的区别及用法

    乍一看,字面上理解好像replace只替换第一个出现的字符(受javascript的影响),replaceall替换所有的字符,其实大不然,只是替换的用途不一样.    public String r ...

  6. hadoop更换硬盘

    hadoop服务器更换硬盘操作步骤(datanode hadoop目录${HADOOP_HOME}/bin    日志位置:/var/log/hadoop)1.登陆服务器,切换到mapred用户,执行 ...

  7. 7月18号day10总结

    今天学习过程和小结 今天学会了用git从GitHub上克隆代码然后打包成jar包,然后在idea程序中引入这个jar包的依赖来使用jar包中的程序. 通过这个中的网址: 在Git Bash Here中 ...

  8. SLF4J 与Log4J

    为什么要使用SLF4J而不是Log4J 每一个Java程序员都知道日志对于任何一个Java应用程序,尤其是服务端程序是至关重要的,而很多程序员也已经熟悉各种不同的日志库如java.util.loggi ...

  9. Java Error: Failed to validate certificate. The application will not be executed

    Hi, last week a customer had the problem that he wants to connect to the administration interface of ...

  10. css中文本超出部分省略号代替

    p{ width: 100px; //设置p标签宽度 white-space: nowrap; //文本超出P标签宽度不换行,而是溢出 overflow: hidden; //文本超出P标签,超出部分 ...