이 기사에서는 jquery 플러그인을 만드는 방법에 대해 설명합니다. jquery 플러그인을 만드는 방법은 특정 참조 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
1. $.extend()를 통해 jQuery를 확장합니다
2. $.fn
을 통해 jQuery에 새 메서드를 추가합니다. )
메서드 1을 생성하는 jQuery UI의 위젯 팩토리 메소드는 생성 후 $.myfunction()을 통해 호출되며 지정된 요소에서 호출할 수 없습니다.
방법 3은 방법 2에 비해 너무 복잡합니다.
방법 2는 JQ 플러그인을 만드는 데 일반적으로 사용되는 방법입니다. 지정된 요소에 대해 작동할 수 있습니다. 예를 들어 $('#title').myfunction();
$.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'); }
$.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 }); }
향후 코드 유지 관리 및 가독성을 위해 다음을 사용하여 플러그인을 개발할 수 있습니다. 객체 지향 방법.
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 플러그인을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!