1. $.extend()拓展方法:
  2.  
  3. $(function(){
  4. $.extend({
  5. money:function(){
  6. alert"我要努力赚钱"
  7. },
  8. money:function(){
  9. alert"我要努力赚钱"
  10. },
  11. })
  12. })
  13.  
  14. $.money()----->就可以调用;
  15. ----------------------------------------------------
  16. $.fn.extend()jq对象的拓展方法:
  17.  
  18. $(function(){
  19. $.fn.extend({
  20. color:function(){
  21. $(this).css("color","red");
  22. },
  23. bg:function(){
  24. $(this).css("background","red");
  25. }
  26. })
  27.  
  28. })
  29.  
  30. $("div").color();------>即可调用
  31. --------------------------------------------------------
  32. 插件名字:jQuery.插件名.js,以免和其他.js文件或者库冲突
  33. 局部对象附加在jQuery.fn对象上,全局函数附加在jQuery上;
  34. 插件内部this指向是当前的局部对象;
  35. 可以通过this.each()来遍历所有元素;
  36. 所有方法或插件,必须用分号结尾,避免出现问题(建议这么做)
  37. 插件应该返回的是jQuery对象,以保证可链式连缀
  38. 避免插件内部使用$,如果要使用,请传递jQuery进去;
  39.  
  40. 如:jQuery.nav.js

  41. (function($){
  42. $.fn.extend({
  43. nav:function(){
  44. $(this).find(".nav").css({
  45. listStyle:"none",
  46. margin:0,
  47. padding:0,
  48. display:"none",
  49. color:"red"
  50. });
  51. $(this).find(",nav").parent.hover(function(){
  52. $(this).find(".nav").slidDown("normal");
  53. },function(){
  54. $(this).find(".nav").stop().slidUp("normal");
  55. })
  56. return this; ----->当前jq对象
  57. }
  58. })
  59.  
  60. })(jQuery)
  61.  
  62. 结构:
  63. <ul class=""list>
  64. <li>一级
  65. <ul class="nav">
  66. <li>首页</li>
  67. <li>首页</li>
  68. <li>首页</li>
  69. <li>首页</li>
  70. </ul>
  71. </li>
  72. <li>一级
  73. <ul class=""nav>
  74. <li>首页</li>
  75. <li>首页</li>
  76. <li>首页</li>
  77. <li>首页</li>
  78. </ul>
  79. </li>
  80. <li>一级
  81. <ul class="nav">
  82. <li>首页</li>
  83. <li>首页</li>
  84. <li>首页</li>
  85. <li>首页</li>
  86. </ul>
  87. </li>
  88.  
  89. </ul>
  90.  
  91. 页面引用插件---->写在引用jq的下面,
  92. $(".list").nav();

  93. 以下为常用的一些技巧:
  94. cache:fale ---->$.ajax不设置缓存 //jq ajax 属性
  1. var data = $("from").serialize();----->获取from表单整个需要发送参数。
    console.log(data);
    data:data;
    success:function(){}return false
    $.getScript(url,[callback])
    $.getJSON(url,[callback])

jq封装插件的更多相关文章

  1. 怎么用jq封装插件

    怎么用jq封装插件 以隔行变色为例 实现原理:1.找到表格的奇偶行,然后添加不同的class,激活行高亮显示也很简单,只要判断mouseover事件,然后添加一个class,mouseout的时候,再 ...

  2. jq封装插件,简单dome

    (function($) { $.fn.extend({ bold: function() { this.css({ fontWeight: "bold", color: 'red ...

  3. jQuery框架-3.jQuery自定义封装插件和第三方插件

    一.jQuery的封装扩展 1.jQuery中extend方法使用 (挂在到jQuery和jQuery.fn两对象身上的使用) 1.1.官方文档定义: jQuery.extend   Merge th ...

  4. jq分页插件

    jq分页插件 http://www.zhangxinxu.com/jq/pagination_zh/ html --------------- <tbody id="hiddenres ...

  5. vue封装插件并发布到npm上

    vue封装插件并发布到npm上 项目初始化 首先,要创建项目,封装vue的插件用webpack-simple很合适,vue init webpack-simple 项目名称此命令创建我们的项目的目录, ...

  6. ***使用jQuery去封装插件(组件化、模块化的思想),即扩展方法

    如何使用jQuery去封装插件,区分扩展全局方法与扩展一个普通的jQuery实例对象的方法 1.给全局对象扩展方法:①$.方法 = function(参数可加可不加){}  ②使用:$.方法(有参数的 ...

  7. jq封装选项卡写法

    jq普通选项卡写法: var tabTag=$('#tabon'); var tabon=tabTag.find('li');//菜单栏 var tabCon=$(".hidden" ...

  8. 封装插件并发布到npm的历程

    1.封装插件 2.使用webpack打包的时候发生了很多问题 3.过程很反复 4.但最终还是发布成功了

  9. JQ封装图片预加载插件

    我们知道,图片的加载,特别是资源较大的图片,加载相当耗费时间.为了提高用户体验,不得不使用图片预加载技术来提前加载,以提高用户在浏览时的流畅度. 先来弄明白图片的懒加载和预加载的不同: 1)概念:懒加 ...

随机推荐

  1. Jafka源码分析——LogManager

    在Kafka中,LogManager负责管理broker上全部的Log(每个topic-partition为一个Log). 通过阅读源码可知其详细完毕的功能例如以下: 1. 依照预设规则对消息队列进行 ...

  2. 工作总结 js for 循环遍历 json 数据

    [{"Branch":"Bangkok","2017-01|Replenishment":"0","2017- ...

  3. influxdb常用命令

    创建数据库 create database DBName 删除数据库 drop database DBName 使用指定数据库 use DBName 显示所有表 SHOW MEASUREMENTS 删 ...

  4. WebSocket服务端

    http://blog.csdn.net/qq_20282263/article/details/54310737 C# 实现WebSocket服务端 原创 2017年01月10日 09:22:50 ...

  5. SSL和SSH的差别

    有人说,SSH通常是用来提供安全的登录用的.SSL仅仅是一个在协议层中增加的一层用来提供安全.    SSH工作在TCP之上,能够在启动一个SSH应用后.在其通道里执行其他协议的应用.如邮件.    ...

  6. jQuery通过地址获取经纬度demo

    在开始之前,首先需要登录百度地图API控制台申请密钥ak. 1.登录百度地图开放平台http://lbsyun.baidu.com 注册账号,完善信息,点击网站右上角的“API控制台”,点击,创建应用 ...

  7. Dagger2----一个最简单的Dagger2依赖的实现

    Dagger2是首个使用生成代码实现完整依赖注入的框架,极大降低了使用者的编码负担.Dagger2分析全部依赖并生成代码将这些依赖组织在一起,关于很多其它的Dagger2理论介绍请移步具体解释Dagg ...

  8. ‘CONFIG_ENV_SIZE’未声明(不在函数内【转】

    本文转载自: http://bbs.csdn.net/topics/390678466 见论坛讨论.可以临时修复.

  9. YTU 2508: 武功秘籍

    2508: 武功秘籍 时间限制: 1 Sec  内存限制: 128 MB 提交: 1384  解决: 438 题目描述 小明到X山洞探险,捡到一本有破损的武功秘籍(2000多页!当然是伪造的).  他 ...

  10. android获取手机的IMSI码

    android--获取手机的IMSI码,并判断是中国移动\中国联通\中国电信转载 TelephonyManager telManager = (TelephonyManager) getSystemS ...