この記事では、jquery プラグインを作成する方法について説明します。 jqueryプラグインの作成方法は参考になると思います。
1. $.extend() を使用して jQuery を拡張します
2. $.widget() を使用して新しいメソッドを追加します。 ) jQuery UI のウィジェット ファクトリ メソッドを作成する
メソッド 1 は、作成後に $.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 }); }
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 plugin_jquery
以上がjqueryプラグインを作成するにはどのような方法がありますか? jqueryプラグインの作成方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。