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 相关文章推荐
jQuery操作select的实例代码
Jun 14 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
Mar 05 Javascript
js动态设置div的值下例子
Oct 29 Javascript
开发中可能会用到的jQuery小技巧
Mar 07 Javascript
JavaScript常用脚本汇总(三)
Mar 04 Javascript
JavaScript中操作字符串小结
May 04 Javascript
浅谈Node.js中的定时器
Jun 18 Javascript
举例说明JavaScript中的实例对象与原型对象
Mar 11 Javascript
JS实现点击事件统计的简单实例
Jul 10 Javascript
微信小程序  audio音频播放详解及实例
Nov 02 Javascript
Vue实现PopupWindow组件详解
Apr 28 Javascript
vue element upload实现图片本地预览
Aug 20 Javascript
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
PHP中读写文件实现代码
2011/10/20 PHP
php文件操作实例代码
2012/05/10 PHP
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
php随机取mysql记录方法小结
2014/12/27 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
PHP+Mysql+jQuery实现发布微博程序 php篇
2015/10/15 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
JavaScript 继承详解 第一篇
2009/08/30 Javascript
基于node.js的快速开发透明代理
2010/12/25 Javascript
js过滤HTML标签以及空格的思路及代码
2013/05/24 Javascript
AngularJS基础知识
2014/12/21 Javascript
jquery实现勾选复选框触发事件给input赋值
2015/02/01 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
python调用百度语音识别api
2018/08/30 Python
在PyCharm中三步完成PyPy解释器的配置的方法
2018/10/29 Python
浅谈Python批处理文件夹中的txt文件
2019/03/11 Python
Python列表的切片实例讲解
2019/08/20 Python
Python使用enumerate获取迭代元素下标
2020/02/03 Python
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
如何利用find命令查找文件
2016/11/18 面试题
如何用Java实现列出某个目录下的所有子目录
2015/07/20 面试题
财务会计专业毕业生自荐信
2013/10/02 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
店长岗位职责
2015/02/11 职场文书
英语辞职信怎么写
2015/02/28 职场文书
运动会广播稿300字
2015/08/19 职场文书
2016年国庆节宣传标语
2015/11/25 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
HashMap实现保存两个key相同的数据
2021/06/30 Java/Android