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)概念:懒加 ...
随机推荐
- Jafka源码分析——LogManager
在Kafka中,LogManager负责管理broker上全部的Log(每个topic-partition为一个Log). 通过阅读源码可知其详细完毕的功能例如以下: 1. 依照预设规则对消息队列进行 ...
- 工作总结 js for 循环遍历 json 数据
[{"Branch":"Bangkok","2017-01|Replenishment":"0","2017- ...
- influxdb常用命令
创建数据库 create database DBName 删除数据库 drop database DBName 使用指定数据库 use DBName 显示所有表 SHOW MEASUREMENTS 删 ...
- WebSocket服务端
http://blog.csdn.net/qq_20282263/article/details/54310737 C# 实现WebSocket服务端 原创 2017年01月10日 09:22:50 ...
- SSL和SSH的差别
有人说,SSH通常是用来提供安全的登录用的.SSL仅仅是一个在协议层中增加的一层用来提供安全. SSH工作在TCP之上,能够在启动一个SSH应用后.在其通道里执行其他协议的应用.如邮件. ...
- jQuery通过地址获取经纬度demo
在开始之前,首先需要登录百度地图API控制台申请密钥ak. 1.登录百度地图开放平台http://lbsyun.baidu.com 注册账号,完善信息,点击网站右上角的“API控制台”,点击,创建应用 ...
- Dagger2----一个最简单的Dagger2依赖的实现
Dagger2是首个使用生成代码实现完整依赖注入的框架,极大降低了使用者的编码负担.Dagger2分析全部依赖并生成代码将这些依赖组织在一起,关于很多其它的Dagger2理论介绍请移步具体解释Dagg ...
- ‘CONFIG_ENV_SIZE’未声明(不在函数内【转】
本文转载自: http://bbs.csdn.net/topics/390678466 见论坛讨论.可以临时修复.
- YTU 2508: 武功秘籍
2508: 武功秘籍 时间限制: 1 Sec 内存限制: 128 MB 提交: 1384 解决: 438 题目描述 小明到X山洞探险,捡到一本有破损的武功秘籍(2000多页!当然是伪造的). 他 ...
- android获取手机的IMSI码
android--获取手机的IMSI码,并判断是中国移动\中国联通\中国电信转载 TelephonyManager telManager = (TelephonyManager) getSystemS ...