jQuery 플러그인 예제 공유

jquery 플러그인 분류

UI 클래스, jQuery 플러그인이 있습니다. code/81.html " target="_blank">양식 유효성 검사, 입력 클래스, 특수 효과 클래스, Ajax 클래스, 슬라이딩 클래스, 탐색 클래스, 도구 클래스, 애니메이션 클래스 등 jQuery插件有很多，有UI类，表单验证，输入类，特效类，Ajax类，滑动类，导航类，工具类，动画类等等。

jQuery的插件主要分为三类：

1、封装对象方法的插件：也就是基于某个DOM元素的jQuery对象，局部性
2、封装全局函数的插件：将独立的函数添加到jquery的命名空间之下。jquery.trim()就是jquery内部作为全局函数的插件添加到内核上去的。
3、选择器插件：扩充自己喜欢的一些选择器。类似于.toggle()

插件的基本要点

 1. 插件的文件名推荐为 jquery.[插件名].js，例如jquery.validate.js
 2. 所有的对象方法都应当附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身上
 3. 在插件内部，this指向的是当前通过选择器获取的jQuery对象，而不像一般的方法那样，例如click()方法，内部的this指向的是DOM元素
 4. 可以通过this.each来遍历所有元素
 5. 所有的方法或函数插件，都应当以分号结尾，否则压缩时可能出问题，有的为了更加稳妥些，在插件的开始处加上一个分号
 6. 插件应该返回一个jQuery对象，这样可以保证插件的可链式操作。除非插件需要返回的是一些需要获取的量，例如字符串或者数组等
 7. 尽量利用闭包技巧历来避免变量名的冲突
 8. 引入的自定义插件必须在jQuery库后面

插件开发方式

jQuery插件开发方式主要有三种：

通过$.extend()来扩展jQuery
通过$.fn 向jQuery添加新的方法
通过$.widget()应用jquery ui的部件工厂方式创建

通常我们使用第二种方法来进行简单插件开发，而第一种方法是在jQuery命名空间上添加了一个静态方法，并不能让我们选中DOM元素，然后再调用该方法。而第三种并不常用，也较为复杂

插件的结构

在开始编写jQuery插件时，我们有必要了解一下插件的基本结构，所有的jQuery插件都声明为jQuery.fn对象的方法：

jQuery.fn.showPlugin = function () {
      //code here
};

我们使用如下代码使用插件：

$("#plugin").showPlugin();

这里，我并没有使用$，这是为了避免命名冲突，如果要用 $ 的话，可以像下面这样把插件代码封装在一个自执行的匿名函数中，然后传入参数jQuery

(function($){
    jQuery.fn.showPlugin = function () {
        //code here
    };
})(jQUery);

$.extend

.extend()允许你使用一个或多个对象扩展基准对象，扩展的方式是依序将右边的对象合并到基准对象（左边第一个对象）。

;(function($){
    $.extend({
        'nav' : function () {

        }
    })
})(jQuery);

我们通过如下方法使用该全局方法：

$.nav();

前面（见：浅析jQuery整体框架与实现（上））我们说过，$.extend是全局性的，而$.fn.extend是局部性的，前面之所以要加分号是因为为了防止在此之前引入的js文件没有加分号

$.fn.myPlugin = function() {
    //在这里面,this指的是用jQuery选中的元素
    //example :$('a'),则this=$('a')
    this.css('color', 'red');
}

this指代jQuery选择器返回的集合。在插件里的this，经过了一些封装处理，this就是表示jQuery对象。而不需要再次使用$()进行包装了

链式调用

要让插件实现链式调用只需要return该对象即可：

$.fn.myPlugin = function() {
    this.css('color', 'red');
    return this.each(function() {
        //对每个元素进行操作
        $(this).append(' ' + $(this).attr('href'));
    }))
}

使用return this.each(function () {}

jQuery 플러그인은 크게 3가지로 분류됩니다.

$.fn.myPlugin = function(options) {    //经常用options表示有多个参数。
    var defaults = {
        'color': 'red',
        'fontSize': '12px'
    };
    var settings = $.extend(defaults, options);
    return this.css({
        'color': settings.color,
        'fontSize': settings.fontSize
    });
}

플러그인의 기본 포인트

$('a').myPlugin({
    'color': '#2C9929'
});

플러그인 개발 방법🎜🎜jQuery 3가지가 있습니다 주요 플러그인 개발 방법:🎜rrreee 🎜보통 우리는 간단한 플러그인 개발을 위해 두 번째 방법을 사용하고, 첫 번째 방법은 jQuery 네임스페이스에 정적 메서드를 추가하는 것인데, 이는 우리를 허용하지 않습니다. DOM 요소를 선택한 다음 메서드를 호출합니다. 세 번째 유형은 일반적으로 사용되지 않으며 더 복잡합니다🎜🎜플러그인의 구조🎜🎜 jQuery 플러그인 작성을 시작할 때 플러그인의 기본 구조를 이해해야 합니다. in. 모든 jQuery 코드>플러그인은 jQuery.fn 객체의 메서드로 선언됩니다. 🎜rrreee🎜플러그인을 사용하려면 다음 코드를 사용합니다. 🎜rrreee🎜 여기서는 $를 사용하지 않았습니다. 이름 충돌을 피하기 위해 $를 사용하려면 플러그인 코드를 자체적으로 캡슐화하면 됩니다. 다음과 같이 익명 함수를 실행한 다음 jQuery매개변수를 전달합니다. >🎜rrreee🎜$.extend🎜🎜.extend()를 사용하면 하나 이상의 개체를 사용할 수 있습니다. 오른쪽 개체를 기본 개체(왼쪽의 첫 번째 개체)에 병합하여 기본 개체를 확장합니다. ) 순서대로. 🎜rrreee🎜우리는 이 전역 메소드를 다음과 같이 사용합니다: 🎜rrreee🎜이전(참조: 전체 jQuery 프레임워크 및 구현에 대한 간략한 분석(1부)) 우리는 $.extend가 전역적이라고 말했습니다. $.fn.extend는 로컬입니다. 세미콜론을 추가한 이유는 이전에 소개한 js 파일에 세미콜론이 없는 것을 방지하기 위함입니다🎜rrreee🎜이는 jQuery 선택기가 반환한 컬렉션을 나타냅니다. 플러그인의 this는 일부 캡슐화 처리를 거쳤습니다. this는 jQuery 개체를 나타냅니다. 패키징을 위해 $()를 다시 사용할 필요가 없습니다🎜🎜체인 호출🎜🎜플러그인 구현 체인 호출을 수행하려면 객체를 반환하기만 하면 됩니다. 🎜rrreee🎜 return this.each(function () {} 사용 이는 체인 작업을 구현합니다. 🎜🎜여러 매개변수를 받습니다🎜rrreee🎜호출되면 글꼴 크기가 변경됩니다. 플러그인에서 기본값 사용: 🎜rrreee

위 내용은 jQuery 플러그인 예제 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!