jq封装插件
$.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封装插件的更多相关文章
- 怎么用jq封装插件
怎么用jq封装插件 以隔行变色为例 实现原理:1.找到表格的奇偶行,然后添加不同的class,激活行高亮显示也很简单,只要判断mouseover事件,然后添加一个class,mouseout的时候,再 ...
- jq封装插件,简单dome
(function($) { $.fn.extend({ bold: function() { this.css({ fontWeight: "bold", color: 'red ...
- jQuery框架-3.jQuery自定义封装插件和第三方插件
一.jQuery的封装扩展 1.jQuery中extend方法使用 (挂在到jQuery和jQuery.fn两对象身上的使用) 1.1.官方文档定义: jQuery.extend Merge th ...
- jq分页插件
jq分页插件 http://www.zhangxinxu.com/jq/pagination_zh/ html --------------- <tbody id="hiddenres ...
- vue封装插件并发布到npm上
vue封装插件并发布到npm上 项目初始化 首先,要创建项目,封装vue的插件用webpack-simple很合适,vue init webpack-simple 项目名称此命令创建我们的项目的目录, ...
- ***使用jQuery去封装插件(组件化、模块化的思想),即扩展方法
如何使用jQuery去封装插件,区分扩展全局方法与扩展一个普通的jQuery实例对象的方法 1.给全局对象扩展方法:①$.方法 = function(参数可加可不加){} ②使用:$.方法(有参数的 ...
- jq封装选项卡写法
jq普通选项卡写法: var tabTag=$('#tabon'); var tabon=tabTag.find('li');//菜单栏 var tabCon=$(".hidden" ...
- 封装插件并发布到npm的历程
1.封装插件 2.使用webpack打包的时候发生了很多问题 3.过程很反复 4.但最终还是发布成功了
- JQ封装图片预加载插件
我们知道,图片的加载,特别是资源较大的图片,加载相当耗费时间.为了提高用户体验,不得不使用图片预加载技术来提前加载,以提高用户在浏览时的流畅度. 先来弄明白图片的懒加载和预加载的不同: 1)概念:懒加 ...
随机推荐
- 具体解释Android定位
相信非常多的朋友都有在APP中实现定位的需求,今天我就再次超炒冷饭,为大家献上国内开发人员经常使用到的三种定位方式.它们分别为GPS,百度和高德,惯例先简介下定位的背景知识. 什么是GPS定位.基站定 ...
- Replica Sets+Sharding方案之真枪实弹篇
话说在虚拟机中会报各种错误.在真实的环境中就不会那么痛苦了. 想了一下虚拟机中报错的原因有. 机器卡,处理的时间长就会抛出错误 还有虚拟机假设给的空间太小.也会报异常. 此处讲讲我的大致思路. 第一, ...
- java并发编程之Semaphore
信号量(Semaphore).有时被称为信号灯.是在多线程环境下使用的一种设施, 它负责协调各个线程, 以保证它们可以正确.合理的使用公共资源. 一个计数信号量.从概念上讲,信号量维护了一个许可集.如 ...
- bug统计分析续(一)基于SQL的Bug统计方法
本文由 @lonelyrains 出品.转载请注明出处. 文章链接: http://blog.csdn.net/lonelyrains/article/details/44225533 上一篇为 bu ...
- win32gui.EnumWindows my.os.EnumWindows.py
import win32guidef _MyCallback(hwnd, extra): windows = extra temp = [] temp.append(hex(hwnd)) temp.a ...
- 用js采集网页数据并插入数据库最快的方法
今天教大家一个快速采集网站数据的方法,因为太晚了,直接上例子,这里以采集易车网的产品数据为例. 思路:利用js获取网页数据并生成sql命令,执行sql命令把采集的数据插入数据库. 1.用谷歌浏览器或者 ...
- 【Poj1017】Packets
http://poj.org/problem?id=1017 艰难啊 弄了很久咧 拍了几十万组,以后拍要多组数据 Solution 从大wangxiaofang 从大往小放,有空余的从大往小填 注意细 ...
- c# IP从192.168.1.1转成int类型
找了一些资料,总结如下: 方法1 .net提供的方法转换IP地址 //字符串转换为数字 System.Net.IPAddress ipaddress = System.Net.IPAddress.Pa ...
- 6 Workbook 对象
6.1 在奔跑之前先学会走路:打开和关闭工作薄 代码清单6.1:一个完整的工作薄批处理框架 '代码清单6.1:一个完整的工作薄批处理框架 Sub ProcessFileBatch() Dim nInd ...
- 杂项-Java:JeePlus
ylbtech-杂项-Java:JeePlus 一个集成了代码生成器的java快速开发框架 1. 介绍返回顶部 1. 响应式开发 JeePlus采用了目前极为流行的扁平化响应式的设计风格,UI框架使用 ...