0

0

jQuery自定义函数应用以及解析

php中世界最好的语言

php中世界最好的语言

发布时间:2018-03-14 15:35:50

|

2920人浏览过

|

来源于php中文网

原创

这次给大家带来jQuery自定义函数应用以及解析,使用jQuery自定义函数的注意事项有哪些,下面就是实战案例,一起来看一下。

jQuery自定义函数
1.  如何扩展jQuery函数?
jQuery有两种自定义函数扩展:一种是类级别的函数开发,相当于将jQuery看做一个类,给类本身扩展函数,也叫作全局函数,。jQuery的全局函数是属于jQuery命名空间的函数,另一种是对象级别的函数开发,即给jQuery选择器产生的对象添加方法。下面就两种函数的开发做详细的说明。

1).全局函数开发:
类级别的插件开发最直接的理解就是给jQuery类添加类方法,可以理解为添加静态方法。典型的例子就是jQuery.AJAX()这个函数,将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展:
a. 添加一个新的全局函数
添加一个全局函数,我们只需如下定义:

   jQuery.test = function() { 
        alert(‘This is a test!!!’); 
     };

      然后通过调用$.test();即可运行。
b. 增加多个全局函数
添加多个全局函数,可采用如下定义:

  jQuery.test = function() { 
        alert(‘This is a test!!!’); 
     };  
     jQuery.test1 = function() { 
            alert(‘This is a test1!!!’); 
         };

调用方式跟上面一样。

c. 使用jQuery.extend(object) 

jQuery.extend({ 
         test:function() { 
                alert(‘This is a test!!!’); 
         }, 
         test1: function() { 
                alert(‘This is a test1!!!’); 
             },  
         add:function(a,b){ 
             return a+b; 
         } 
});

2).对象级别函数开发:
对象级别的函数开发可以有如下两种方式
a.  

(function(){
.fn.extend({ 
              sayHello:function(){ 
                    alert(‘sayHello’); 
            } 
            }) ; 
          })(jQuery);

说明:该方式也可以直接用jQuery.fn.extend定义,这样写是为了将美元符号限制在一个命名空间内,定义过程中可以继续使用该符号,防止与其他库的$符号冲突,没有其他作用。

b. 接受options参数以控制插件的行为
当自定义函数需要传递很多参数的时候,参数过多,可读性较差,我们可以考虑传递一个对象,比方说,我们要定义一个给p设置背景色和文字颜色的函数,可以这样写:

 $.fn.extend({ 
             setColor:function(options,callback){ 
               var defaults = { 
                               fontcolor: ‘red’, 
                               background: ‘yellow’ 
                             };
            $.extend(defaults, options); //这句话是将default和options合并成一个对象
            //设置样式
            console.log(this);
            $(this).css('background-color',defaults.background);
            $(this).css('color',defaults.fontcolor);
        }     
        }) ;

调用函数测试代码:

       var options={ 
                   fontcolor: ‘blue’, 
                   background: ‘red’  
                   }; 
       $(function(){
        $(".table").setColor(options);
    });

我们会看到table背景红色,字体都为蓝色。
这里写图片描述
2.  分析总结
jQuery的API手册中,我们看到,extend实际上是挂载在jQuery和jQuery.fn上的两个不同方法,尽管在jQuery内部jQuery.extend()和jQuery.fn.extend()是用相同的代码实现的,但是它们的功能却不太一样。官方的解释:

jQuery.extend(): Merge the contents of two or more objects together into the first object.(把两个或者更多的对象合并到第一个当中) 
jQuery.fn.extend():Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.(把对象挂载到jQuery的prototype属性,来扩展一个新的

jQuery实例方法)
可以看出,jQuery有静态方法和实例方法之分, 那么jQuery.extend()和jQuery.fn.extend()的区别就是一个用来扩展静态方法,一个用来扩展实例方法。
jQuery自定义部分源码如下:

jQuery.extend = jQuery.fn.extend = function(obj){ 
             //obj是传递过来扩展到this上的对象 
             var target=this; 
             for (var name in obj){ 
             //name为对象属性 
             //copy为属性值 
             copy=obj[name]; 
             //防止循环调用 
             if(target === copy) continue; 
             //防止附加未定义值 
             if(typeof copy === ‘undefined’) continue; 
             //赋值 
             target[name]=copy; 
             } 
             return target; 
            }

JavaScript方法也是对象,所以所谓的扩展函数,也即是给jQuery.extend, jQuery.fn.extend这两个对象扩展新的属性,形参就是我们自定义的函数,最后会被拷贝成为target对象返回,并合并到jQuery.extend对象,或者jQuery.fn.extend对象中,本质上就是相当于给jQuery类本身增加方法或者给jQuery对象的prototype对象增加方法。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

citySHOP 多用户商城
citySHOP 多用户商城

citySHOP是一款集CMS、网店、商品、系统,管理更加科学快速;全新Jquery前端引擎;智能缓存、图表化的数据分析,手机短信营销;各种礼包设置、搭配购买、关联等进一步加强用户体验;任何功能及设置都高度自定义;MVC架构模式,代码严禁、规范;商品推荐、促销、礼包、折扣、换购等多种设置模式;商品五级分类,可自由设置分类属性;商品展示页简介大方,清晰,图片自动放大,无需重开页面;商品评价、咨询分开

下载

如何使用jquery的分页插件

怎样做出京东商品详情的放大镜效果

javascript如何实现小球跳动效果

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

2

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

golang 循环遍历
golang 循环遍历

本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

0

2026.01.31

Golang人工智能合集
Golang人工智能合集

本专题整合了Golang人工智能相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

76

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

73

2026.01.31

无需付费的漫画app大全
无需付费的漫画app大全

想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

67

2026.01.31

漫画免费在线观看地址大全
漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

19

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
jQuery 教程
jQuery 教程

共42课时 | 5.2万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 10万人学习

tp6+adminlte搭建通用后台
tp6+adminlte搭建通用后台

共39课时 | 5.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号