jquery 플러그인을 만드는 방법은 무엇입니까? Jquery 플러그인을 만드는 방법

이 기사에서는 jquery 플러그인을 만드는 방법에 대해 설명합니다. jquery 플러그인을 만드는 방법은 특정 참조 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. jQuery 플러그인을 만드는 방법에는 세 가지가 있습니다.

1. $.extend()를 통해 jQuery를 확장합니다

2. $.fn

을 통해 jQuery에 새 메서드를 추가합니다. )

메서드 1을 생성하는 jQuery UI의 위젯 팩토리 메소드는 생성 후 $.myfunction()을 통해 호출되며 지정된 요소에서 호출할 수 없습니다.

방법 3은 방법 2에 비해 너무 복잡합니다.

방법 2는 JQ 플러그인을 만드는 데 일반적으로 사용되는 방법입니다. 지정된 요소에 대해 작동할 수 있습니다. 예를 들어 $('#title').myfunction();

2. jQuery 플러그인 생성 형식

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

체인 호출을 지원하려면 반환하면 됩니다.

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

3. jquery 플러그인이 매개변수를 허용하고 $.extend 메소드를 사용하도록 합니다.

$.fn.myPlugin = function(options) {
    var defaults = {//设置默认值
        'color': 'red',
        'fontSize': '12px'
    };
    var settings = $.extend(defaults, options);//这种方法会使第一个参数会被修改，为了保持变量defaults的值不变应该使用以下代码
    //var settings = $.extend({},defaults, options);//在extend方法的第一个参数添加一个空对象。
    return this.css({
        'color': settings.color,
        'fontSize': settings.fontSize
    });
}

4. 객체 지향 jquery 플러그인 개발

향후 코드 유지 관리 및 가독성을 위해 다음을 사용하여 플러그인을 개발할 수 있습니다. 객체 지향 방법.

var Beautifier = function(ele, opt) {
    this.$element = ele,  //获取当前选中的jq对象。
    this.defaults = {
        'color': 'red',
        'fontSize': '12px'
    },
    this.options = $.extend({}, this.defaults, opt)
}
//定义Beautifier的方法
Beautifier.prototype = {
    beautify: function() {
        return this.$element.css({
            'color': this.options.color,
            'fontSize': this.options.fontSize
        });
    }
}
//在插件中使用Beautifier对象
$.fn.myPlugin = function(options) {
    //创建Beautifier的实体
    var beautifier = new Beautifier(this, options);
    //调用其方法
    return beautifier.beautify();
}

： 관련 추천:

jquery 단순 롤링 플러그인

JQUERY 플러그인 코드 분석 생성 jQuery 플러그인_jquery

위 내용은 jquery 플러그인을 만드는 방법은 무엇입니까? Jquery 플러그인을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!