$.extend()拓展方法:

$(function(){
$.extend({
money:function(){
alert("我要努力赚钱")
},
money:function(){
alert("我要努力赚钱")
},
})
}) $.money()----->就可以调用;
----------------------------------------------------
$.fn.extend()jq对象的拓展方法: $(function(){
$.fn.extend({
color:function(){
$(this).css("color","red");
},
bg:function(){
$(this).css("background","red");
}
}) }) $("div").color();------>即可调用
--------------------------------------------------------
插件名字:jQuery.插件名.js,以免和其他.js文件或者库冲突
局部对象附加在jQuery.fn对象上,全局函数附加在jQuery上;
插件内部this指向是当前的局部对象;
可以通过this.each()来遍历所有元素;
所有方法或插件,必须用分号结尾,避免出现问题(建议这么做)
插件应该返回的是jQuery对象,以保证可链式连缀
避免插件内部使用$,如果要使用,请传递jQuery进去; 如:jQuery.nav.js

(function($){
$.fn.extend({
nav:function(){
$(this).find(".nav").css({
listStyle:"none",
margin:0,
padding:0,
display:"none",
color:"red"
});
$(this).find(",nav").parent.hover(function(){
$(this).find(".nav").slidDown("normal");
},function(){
$(this).find(".nav").stop().slidUp("normal");
})
return this; ----->当前jq对象
}
}) })(jQuery) 结构:
<ul class=""list>
<li>一级
<ul class="nav">
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
</ul>
</li>
<li>一级
<ul class=""nav>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
</ul>
</li>
<li>一级
<ul class="nav">
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
</ul>
</li> </ul> 页面引用插件---->写在引用jq的下面,
$(".list").nav();

以下为常用的一些技巧:
cache:fale ---->$.ajax不设置缓存 //jq ajax 属性
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. [NOI2015Day1]解题报告

    今天一起做NOI的题. 我仅仅想说SunshinAK了好神啊. T3数据好坑啊,打表竟然被编译环境卡掉了... T1:程序自己主动分析 (http://www.lydsy.com/JudgeOnlin ...

  2. Android 网络学习之获取server文本文件

    上次我们学习怎样从网络上获取一张图片,今天我们学习怎样从网络上获取文本文件.以XML文件为样例. 由于XML文件在实际开发中最为常见. 我们以以下图片为样例学习怎样从网络上获取XML文件 我们的xml ...

  3. 【手势交互】8. Nimble Sense

    早在2012.2013年度,手势识别领域就发生了几起重要的行业并购.比方英特尔对Omek的收购,谷歌对Flutter的收购.而苹果公司更是以3.45亿美金得高价收购了之前为微软Kinect提供技术支持 ...

  4. HttpClient-03Http状态管理

    最初,Http被设计成一个无状态的,面向请求/响应的协议,所以它不能在逻辑相关的http请求/响应中保持状态会话.由于越来越多的系统使用http协议,其中包括http从来没有想支持的系统,比如电子商务 ...

  5. 关于Doctype、严格模式与混杂模式

    <!Doctype> 文档声明,位于文档中的最前面的位置,处于<html>标签之前.此标签告知浏览器文档使用哪种HTML或XHTML规范. 用于告知浏览器以何种模式来渲染文档. ...

  6. ReSharper warns: “Static field in generic type”

    http://stackoverflow.com/questions/9647641/resharper-warns-static-field-in-generic-type It's fine to ...

  7. BS与CS的联系与区别。

    C/S是Client/Server的缩写.服务器通常采用高性能的PC.工作站或小型机,并采用大型数据库系统,如Oracle.Sybase.Informix或 SQL Server.客户端需要安装专用的 ...

  8. 洛谷 P1328 生活大爆炸版石头剪刀布 —— 模拟

    题目:https://www.luogu.org/problemnew/show/P1328 直接模拟即可. 代码如下: #include<iostream> #include<cs ...

  9. robotframework - Run标签

    1.下面是Run标签的截图 2.Run 标签上的按钮和输入框的作用: 1) Execution Profile:选择运行方式,里面有 pybot.jybot 和 custom script.其中我们默 ...

  10. 学习http协议的三次握手和四次挥手 ~~笔记

    http协议是基于tcp协议的  所以应该说是tcp协议的三次握手和四次挥手 SYN:请求建立连接,并在其序列号的字段进行序列号的初始值设定.建立连接,设置为1 FIN:用来释放一个连接.FIN=1表 ...