大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
JQuery全局函数定义
创新互联专注为客户提供全方位的互联网综合服务,包含不限于网站制作、成都网站制作、庐山网络推广、微信平台小程序开发、庐山网络营销、庐山企业策划、庐山品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联为所有大学生创业者提供庐山建站搭建服务,24小时服务热线:18982081108,官方网址:www.cdcxhl.com
下面为JQuery定义一个全局函数globalfunction用于弹出一个对话框:
- jQuery.globalfunction=function(){
- alert("myplugin");
- }
在页面上我们可以通过$.glabalfunction来调用
JQuery还允许我们同时定义多个全局函数,这可以通过JQuery的extend方法或者通过扩展JQuery全局对象的方式来实现。由于使用extend方法有可能会出现函数重名的问题,这里以扩展全局对象为例:
下面为JQuery扩展全局对象myPlugin,在myPlugin中定义两个函数
- jQuery.myPlugin={
- functionOne:function(){
- alert("functionOne");
- },
- functionTwo:function(param){
- alert("functionTwo and param"+param);
- }
- }
在页面上我们可以通过$.myPlugin.functionOne()来调用函数1,
通过$.myPlugin.functionTwo(param)来调用函数2
JQuery对象函数定义
JQuery对象函数的强大在于在JQuery插件方法的内部,this引用的都是当前的JQuery对象,因而可以在this上面调用任何内置的JQuery方法,或者提取它包含的DOM节点并操作该节点。
通过上一篇日志我们知道JQuery实例对象继承的是JQuery对象的原型,因此扩展JQuery对象函数需要在JQuery.fn上进行操作。下面我们为JQuery实例对象添加方法myMethod弹出对话框。
- jQuery.fn.myMethod=function(){
- alert("myMethod");
- }
我们可以通过$("#id").myMethod来进行调用。
下面演示在JQuery对象函数内部this的作用。首先在页面上我们添加如下组件:
- 标题
- 样式1
- 样式2
添加样式
- .this{
- font-style: normal;
- }
- .that{
- font-style: italic;
- }
我们需要的效果是点击改变样式后将使用this样式的元素样式改为that,使用that样式的元素样式改为this。
现在我们通过添加JQuery对象函数来实现
添加JQuery对象函数
- 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);
- }
- });
- }
为按钮绑定此方法
这样就可以实现此效果了。
需要注意的是在定义插件的方法中this的运用,this.each中的this为实例化的JQuery对象,在此处即为所有的"li"标签,而在每一次this.each方法体中的this则是一个DOM元素。
在网上我们经常能够看到这样的定义JQuery对象函数的方法:
- (function($) {
- $.fn.myPluginName = function() {
- // your plugin logic
- };
- })(jQuery);
通过这种方式在自定义插件方法内部可以使用$关键字来代替JQuery关键字。那么这种写法会不会有人觉得比较陌生呢,下篇日志将插入一段题外话介绍一下JavaScript的匿名函数和闭包。