jQuery插件制作之全局函数用法实例


Posted in Javascript onJune 01, 2015

本文实例讲述了jQuery插件制作之全局函数用法。分享给大家供大家参考。具体分析如下:

1、添加新的全局函数

所谓的全局函数,实际上就是jQuery对象的方法,但从实践的角度上看,他们是位于jQuery命名空间内部的函数

(1)添加一个函数,只需要将新函数指定为jQuery对象的一个属性。

jQuery.five =function(){ 
 alert("直接继承方式不一样"); 
}

调用:

$.five();

(2)添加多个函数

jQuery.five =function(){ 
 alert("直接继承方式不一样"); 
} 
jQuery.six =function(){ 
 alert("直接继承方式不一样2"); 
}

调用:

$.five();$.six();

以上的方法会面临命名空间冲突的风险,为避免这个问题,最好把属于这个插件的所有全局函数,都封装到一个对象中,如下:

//命名空间继承
jQuery.myPlugin ={ 
 one : function(obj){ 
  var object = obj; 
  var id = object.attr("id"); 
  alert(id); 
 }, 
 two : function(){ 
  alert(22); 
 } 
}

这样其实是为全局函数创建了另一个命名空间:jQuery.myPlugin.

2、添加jQuery对象方法

jQuery中大多数内置的功能都是通过其对象的方法提供的。

jQuery.fn.myMethod= function(){ 
 alert(11); 
}

调用:

$.fn.myMethod();

注意:jQuery.fn是jQuery.prototype的别名。

实例:以下是行为不正确的方法

<ul> 
  <li>11111111111111111111111111</li> 
  <liclass="this">22222222222222222222</li> 
  <li>333333333333333</li> 
  <liclass="that">44444444444444444</li> 
  <liclass="this">55555555555555</li> 
  <li>6666666666666666</li> 
  <li>777777777777777777</li> 
  <liclass="that">777777777777777777</li> 
</ul> 
<inputtype="button" value="swap" id="swap" />
jQuery.fn.swapClass= function(class1,class2){ 
 if(this.hasClass(class1)){ 
  this.removeClass(class1).addClass(class2); 
 } 
 if(this.hasClass(class2)){ 
  this.removeClass(class2).addClass(class1); 
 } 
} 
 $("#swap").click(function(){ 
  $("li").swapClass("this","that"); 
  return false; 
})

全部li都是用了that样式。

(1)隐士迭代

要在无论匹配多个元素的情况下都保证行为的正确,最简单的方法是始终在方法的环境上调用.each()方法,这样就会

执行隐士迭代,而执行隐士迭代对于维护插件和内置方法的一致性是至关重要的,在调用的.each()方法内部,this

依次引用的是每个DOM元素.以上代码修改为:

jQuery.fn.swapClass= function(class1,class2){ 
 this.each(function(){ 
  var $element = jQuery(this); 
  if($element.hasClass(class1)){ 
   $element.removeClass(class1).addClass(class2); 
  }else if($element.hasClass(class2)){ 
   $element.removeClass(class2).addClass(class1); 
  } 
 }) 
}

调用:

$("li").swapClass("this","that")

(2)方法的连缀

要使用方法的连缀,必须在所有的插件方法中返回一个jQuery对象。返回的jQuery对象通常就是this所引用的对象。

jQuery.fn.swapClass= function(class1,class2){ 
 return this.each(function(){ 
  var $element = jQuery(this); 
  if($element.hasClass(class1)){ 
   $element.removeClass(class1).addClass(class2); 
  }else if($element.hasClass(class2)){ 
   $element.removeClass(class2).addClass(class1); 
  } 
 }) 
}

调用:

$("li").swapClass("this","that").css("text-decoration","underline");

3、添加新的简写方法

//添加新的简写方法 
jQuery.fn.slideFadeOut= function(speed,callback){ 
 return this.animate({ 
  height : "hide", 
  opacity : "hide" 
 },speed,callback) 
} 
jQuery.fn.slideFadeIn= function(speed,callback){ 
 return this.animate({ 
  height : "show", 
  opacity : "show" 
 },speed,callback) 
} 
jQuery.fn.slideFadeToggle= function(speed,callback){ 
 return this.animate({ 
  height : "toggle", 
  opacity : "toggle" 
 },speed,callback) 
}

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
基于JQuery的动态删除Table表格的行和列的代码
May 12 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
Feb 11 Javascript
jquery+css实现动感的图片切换效果
Nov 25 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 Javascript
利用NPM淘宝的node.js镜像加速nvm
Mar 27 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 Javascript
vue mint-ui学习笔记之picker的使用
Oct 11 Javascript
Vue实现类似Spring官网图片滑动效果方法
Mar 01 Javascript
原生js实现瀑布流效果
Mar 09 Javascript
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
javascript实现设置、获取和删除Cookie的方法
Jun 01 #Javascript
jQuery解析XML文件同时动态增加js文件的方法
Jun 01 #Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 #Javascript
javascript判断并获取注册表中可信任站点的方法
Jun 01 #Javascript
js事件监听器用法实例详解
Jun 01 #Javascript
JavaScript中isPrototypeOf函数作用和使用实例
Jun 01 #Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
Jun 01 #Javascript
You might like
Codeigniter中mkdir创建目录遇到权限问题和解决方法
2014/07/25 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
学习YUI.Ext 第七天--关于View&amp;JSONView
2007/03/10 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
JavaScript中数据结构与算法(三):链表
2015/06/19 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
JS基于面向对象实现的拖拽库实例
2015/09/24 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
微信小程序 聊天室简单实现
2017/04/19 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
python selenium 获取接口数据的实现
2020/12/07 Python
CSS3 绘制BMW logo实的现代码
2013/04/25 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
2013/01/07 HTML / CSS
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
命名空间(namespace)和程序集(Assembly)有什么区别
2015/09/25 面试题
秋季运动会广播稿
2014/02/22 职场文书
党员干部形式主义个人整改措施
2014/09/17 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
PyQt5实现多张图片显示并滚动
2021/06/11 Python
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS