1.jQuery插件小知识点:

估计很多人都没弄明白下面的东西,特从网络上搜索了下面的知识,自己以后用起来也比较方便:

$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例(对象)每一个有效。 
    如扩展$.fn.abc() 
    那么你可以这样子:$("#div").abc(); 
    通常使用extend方法扩展,详细请看API.

$.fx是指jquery的特效。 
如果使用显示、滑动、淡入淡出、动画等。

$.fx.off可以关闭动画,其实是直接显示结果。

jquery的extend和fn.extend

jQuery为开发插件提拱了两个方法,分别是:

jQuery.fn.extend(object);

jQuery.extend(object);

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

jQuery.fn.extend(object);给jQuery对象添加方法。

fn 是什么东西呢。查看jQuery代码,就不难发现。

jQuery.fn = jQuery.prototype = {

   init: function( selector, context ) {//.... 

   //......

};

原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。

虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便。

jQuery便是一个封装得非常好的类,比如我们用 语句 $("#btn1") 会生成一个 jQuery类的实例。

jQuery.extend(object); 为jQuery类添加添加类方法,可以理解为添加静态方法。如:

$.extend({

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

});

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

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

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

比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:

Java代码 $.fn.extend({           alertWhileClick:function(){              $(this).click(function(){                   alert($(this).val());            });            }        });        $("#input1").alertWhileClick(); //页面上为:<input id="input1" type="text"/>

$("#input1") 为一个jQuery实例,当它调用成员方法 alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。

真实的开发过程中,当然不会做这么小白的插件,事实上jQuery提拱了丰富的操作文档,事件,CSS ,Ajax、效果的方法,结合这些方法,便可以开发出更加 Niubility 的插件。

jquery(function(){})与(function(){}(jQuery)的区别

1.first

jQuery(function(){});

全写为

jQuery(docunemt).ready(function(){

});

意义为在DOM加载完毕后执行ready()方法

2.

(funtion(){

}(jQuery);

实际执行()(para)匿名方法,只不过传递了jQuery对象。

总结:jQuery(funtion(){});用于存放DOM对象的代码,执行其中代码时DOM对象已经存在。

不可用于存放开发插件代码。因为jQuery对象没有得到传递,外部通过jQuery.methodye

调用不来其中方法。

(funtion(){

}(jQuery);用于存放开发插件的代码,执行其中代码DOM不一定存在,直接自动执行DOM操作代码请小心使用

jQuery 小知识点(插件)的更多相关文章

  1. JQuery小知识点代码

    1.链式操作 $(function(){ /*var oDiv = $('#div1'); oDiv.html('hello'); oDiv.css('background','red'); oDiv ...

  2. Intel项目所用jquery小知识点总结

    1.$("#tdGeo input[type='checkbox']:checked")   ---筛选出所有已经Check的Checkbox 2.$("#tdCount ...

  3. JQuery小知识点

    //get() : 就是把JQ转成原生JS,可以让通过jquery获得元素使用JS的innerHTML方法. $(function(){ //document.getElementById('div1 ...

  4. jquery 小知识点

    //计算checkbox有多少个被选中 $("input[name='user_apply']:checked").length)://可以查看 所有的name=user_appl ...

  5. 黑色半透明镂空遮罩指引效果实现jQuery小插件

    /*! * by zhangxinxu(.com) 2017-05-18 * 新版上线时候的黑色半透明镂空遮罩指引效果实现jQuery小插件 * 兼容到IE8+ * MIT使用协议,使用时候保留版权 ...

  6. 基于HTML5 audio元素播放声音jQuery小插件

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1609 一.前面的些唠 ...

  7. 小教程:自己创建一个jQuery长阴影插件

    长阴影设计是平面设计的一个变体,添加了阴影,产生了深度的幻觉,并导致了三维的设计.在本教程中,我们将创建一个jQuery插件,通过添加完全可自定义的长阴影图标,我们可以轻松地转换平面图标. 戳我查看效 ...

  8. 10个jQuery小技巧

    收集的10个 jQuery 小技巧/代码片段,可以帮你快速开发. 1.返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件. $('a.top' ...

  9. 分享22款响应式的 jQuery 图片滑块插件

    响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验.这篇文章收集了22款优秀的响应式 jQuery 幻灯片插件,它们能够帮助 ...

随机推荐

  1. 创建局域网内远程git仓库,并将本地仓库push推到远程仓库中

    转载请注明出处 http://www.goteny.com/articles/2014/06/136.html http://www.cnblogs.com/zjjne/p/3778640.html ...

  2. 转:hadoop知识整理

    文章来自于:http://tianhailong.com/hadoop%E7%9F%A5%E8%AF%86%E6%95%B4%E7%90%86.html 按照what.how.why整理了下文章,帮助 ...

  3. 转:视觉中国的NoSQL之路:从MySQL到MongoDB

    起因 视觉中国网站(www.chinavisual.com)是国内最大的创意人群的专业网站.2009年以前,同很多公司一样,我们的CMS和社区产品都构建于PHP+Nginx+MySQL之上:MySQL ...

  4. CSS中.和#区别

    一.问题来源 制作导航栏,参考别人的代码,发现的. 二.解析 2.1 概述 id:用来定义页面中大的样式,如栏目划分,顶部,正文,底部等:用#top的形式来定义: class:用来定义一些比较细节的样 ...

  5. 【HDOJ】1558 Segment set

    并查集+计算几何. /* 1558 */ #include <cstdio> #include <cstring> #include <cstdlib> #defi ...

  6. 【HDOJ】5131 Song Jiang's rank list

    STL的使用. /* 5131 */ #include <iostream> #include <map> #include <cstdio> #include & ...

  7. (转)C++ 编程规范

    转载地址:http://www.cnblogs.com/len3d/archive/2008/02/01/1061902.html C/C++编码规范 今天人们越来越明白软件设计更多地是一种工程,而不 ...

  8. 在linux下文件转码

    在linux下转码命令: iconv  -f utf-8 a.txt > b.txt

  9. jQuery.holdReady()方法用法实例

    调用此方法可以延迟jQuery的ready事件,也就是说尽管文档已经加载完成,也不会执行ready事件处理方法.可以多次调用jQuery.holdReady()方法,以延迟jQuery的ready事件 ...

  10. 通过jdbc取得数据库表结构信息

    做制作开发平台时,首要的一点是如何取得数据库表结构信息.一般通用的做法就是通过JDBC中的ResultSetMetaData类来进行操作,当你取得了数据库表结构信息后,比如说表的每个字段名称,字段类型 ...