Jquery插件开发的方法总汇

时间: 2017-12-28阅读: 933标签: Jquery

jquery插件是用来扩展jquery对象的一种方法,它的使用方法是通过jquery对象$来调用。其中Jquery插件开发一共有三种方式:

$.extend()来扩展jQuery ,主要用于向jquery对象添加静态方法
$.fn 向jQuery添加新的方法 , 这里的fn等价于prototype,在jquery原型链上添加
$.widget()应用jQuery UI的部件工厂方式创建,改模式可以带很多jquery内建的属性,比如插件的状态信息自动保存等


1.使用$.extend()来扩展jQuery

通过$.extend()向jQuery添加了一个foo函数,然后可以通过$或者jQuery直接调用, 这种方式主要用来定义一些辅助方法是比较方便的。

jQuery.extend({       
  foo: function(name) {       
    console.log(name);       
 },
);

等级于:

jQuery.foo = function(name) {    
  console.log(name);
};


2.使用$.fn开发jquery插件

1、基本格式:

这是我们最常用的方式,它的基本格式如下:

$.fn.pluginName = function() {
    this.css('color', '#fff');
}

在$.fn上面添加一个方法,这个方法名字也就是插件名称 ,这里面的this指的是jQuery选中的元素($('#id‘)。调用如下:

$(function(){
        $('#id').myPlugin();
 })


2、支持链式调用

如何支持jquery的链式调用呢?我们只需要最后返回return this即可:

$.fn.pluginName = function() {
    this.css('color', '#fff');
    return this;
}


3、防止$符号污染的jQuery插件

有很多库可能都使用了$符号,为了防止它$被其它库给覆盖,所以我们可以使用立即执行函数通过传参的方式封装插件。形式如下:

(function($){
     $.fn.pluginName= function(color){
         this.css("color",color);        
         return this;
     }
}(jQuery));

 pluginName支持参数颜色,此时的$只属于这个立即执行函数的函数作用域,这样就可以避免$符号的污染。

 

4、可以接受参数的jQuery插件

我们可以通过定义一个对象,把插件的参数封装到对对象的,已对象的形式传递进去。
(function($){
     $.fn.pluginName= function(option){
         this.css("color",option.color).css("fontSize",option.fontSize+"px");    
         return this;
     }
}(jQuery));

把参数放到一个对象中传给插件还有一个好处就是我们可以在插件内部为一些参数定义一些缺省值 :

(function($){
     $.fn.pluginName= function(option){
         var default = { color:"green",fontSize:12};
         var opt= $.extend(default ,option);
         this.css("color",opt.color).css("fontSize",opt.fontSize+"px");    
         return this;
     }
}(jQuery));

注意:在为插件定义默认参数时,一定要把默认参数写在插件方法内部,这样默认参数的作用域就在插件内部。 

 

jQuery UI有四大功能

jQuery UI (译:jQuery用户界面) 是:以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件

jQuery常用知识总结

jQuery是一个轻量级的、兼容多浏览器的JavaScript库。jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程

两种方法使vue实现jQuery调用

vue是前端工程化使用较多的骨架,那么JavaScript就是我们的前端的细胞。MVVM模式让我们体验到前端开发的便携,无需再过多的考虑DOM的操作。而jQuery需要记忆的内容颇多

时隔一年,jQuery 发布 3.4.0 版本

jQuery 团队的核心开发者 Timmy Willison 今天在官网宣布了 jQuery 3.4.0,这距离上个版本 3.3.x 系列的推出已过去了一年多。Timmy 表示这可能是 3.x 分支的最后一个小版本更新,接下来的工作重心将是 jQuery 4.0 大版本的更新。

基于jQuery实现简单的js模块化

在多人合作完成网页,经常遇到大家的js代码相互影响的问题。现在有许多模块化的前端框架,应该是可以解决这个问题。但本人并非前端开发人员,那些框架都没用过,只对jQuery相对熟悉,就想用jQuery来解决这个问题

jquery实现点击控制div的显示和隐藏

我们使用点击显示、点击隐藏的时候,一般有两种可选方案,toggle() 的作用就是当对象是显示的就隐藏,当是隐藏的则显示

JQuery的ajax函数执行失败,alert函数弹框一闪而过

原因其实非常简单,把form表单里最后提交按钮的type=submit换为type=button,因为这个原因浪费了挺久时间,甚至把代码又从头到尾写了一遍(感觉自己好蠢啊!),总结了一下调试过程。

jQuery中页面返回顶部的方法总结

当页面过长时,通常会在页面下方有一个返回顶部的button,总结一下,大概三种实现方法,下面说下各方法及优缺点。三个方法各有优劣,不过总体来讲,jQuery的方法更适合大多数场景。

关于jquery中ready()方法的几种写法总结

ready()方法作用:在页面加载完成后,立即执行指定的函数。这么做的好处是可以减少页面渲染的时间,加快页面加载,提升用户体验。ready()相比onload事件绑定函数的优势:具有较高优先级,只需等到html结构加载完成后即可执行;

jquery自定义组件开发

jquery的组件已经有很多,但是有可能找不到符合我们需求的组件,所以我们可以动手自己封装一个jquery组件。第一步要知道封装jquery组件的基本语法;第二步调用自定义的组件

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全