Rumah > hujung hadapan web > tutorial js > jQuery mentakrifkan kaedah pemalam_jquery

jQuery mentakrifkan kaedah pemalam_jquery

WBOY
Lepaskan: 2016-05-16 15:24:54
asal
1360 orang telah melayarinya

Sesetengah pembangun WEB akan merujuk perpustakaan kelas JQuery, dan kemudian menulis $("#"), $(".") pada halaman web Selepas menulis selama beberapa tahun, mereka akan memberitahu orang lain bahawa mereka sangat biasa dengan JQuery. Saya pernah menjadi orang seperti itu, tetapi tidak sampai pertukaran teknikal dalam syarikat saya mengubah pandangan saya terhadap diri saya sendiri.

Apabila memanjangkan jquery. Kaedah teras adalah dua berikut:

$.extend(objek) boleh difahami sebagai menambah kaedah statik pada jquery

$.fn.extend(objek) boleh difahami sebagai menambah kaedah pada contoh jquery

$.lanjutkan(objek)

Contoh:

/* $.extend 定义与调用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.extend({ fun: function () { alert("执行方法一"); } });//定义
$.fun();//调用
$.fn.extentd(object)
/* $.fn.extend 定义与调用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.fn.extend({ fun: function () { alert("执行方法"); } });
$(this).fun();
//等同于
$.fn.fun = function () { alert("执行方法三"); }
$(this).fun();
Salin selepas log masuk

Tentukan struktur asas pemalam jquery

1. Tentukan skop:

Tentukan skop peribadi untuk pemalam. Kod luaran tidak boleh mengakses terus bahagian dalam pemalam. Kod dalaman pemalam tidak tertakluk kepada gangguan luaran, dan ia juga tidak mencemarkan pembolehubah global.

  //step 定义JQuery的作用域
(function ($) {
})(jQuery);
Salin selepas log masuk

2. Tambahkan kaedah sambungan pada pemalam:

//step01 定义JQuery的作用域
(function ($) {
  //step02 插件的扩展方法名称
  $.fn.easySlider = function (options) {
    
  }
})(jQuery);
Salin selepas log masuk

3. Tetapkan nilai lalai:

//step 定义JQuery的作用域
(function ($) {
  //step-a 插件的默认值属性
  var defaults = {
    prevId: ‘prevBtn‘,
    prevText: ‘Previous‘,
    nextId: ‘nextBtn‘,
    nextText: ‘Next‘
    //……
  };
  //step 插件的扩展方法名称
  $.fn.easySlider = function (options) {
    //step-b 合并用户自定义属性,默认属性
    var options = $.extend(defaults, options);
  }
})(jQuery);
Salin selepas log masuk

Antaranya: var options = $.extend(defaults, options) means. Menunjukkan bahawa pilihan mengatasi nilai lalai dan memberikan nilai kepada pilihan.
Dalam persekitaran pemalam, ini bermakna nilai yang ditetapkan oleh pengguna mengatasi nilai lalai pemalam jika pengguna tidak menetapkan atribut dengan nilai lalai, nilai lalai pemalam masih dikekalkan .

4. Sokong pemilih jquery:

 //step 定义JQuery的作用域
(function ($) {
  //step-a 插件的默认值属性
  var defaults = {
    prevId: ‘prevBtn‘,
    prevText: ‘Previous‘,
    nextId: ‘nextBtn‘,
    nextText: ‘Next‘
    //……
  };
  //step 插件的扩展方法名称
  $.fn.easySlider = function (options) {
    //step-b 合并用户自定义属性,默认属性
    var options = $.extend(defaults, options);
    //step 支持JQuery选择器
    this.each(function () {
    });
  }
})(jQuery);
Salin selepas log masuk

5. Sokong panggilan pautan JQuery:

Untuk mencapai kesan panggilan pautan, setiap elemen gelung mesti dikembalikan

//step 定义JQuery的作用域
(function ($) {
  //step-a 插件的默认值属性
  var defaults = {
    prevId: ‘prevBtn‘,
    prevText: ‘Previous‘,
    nextId: ‘nextBtn‘,
    nextText: ‘Next‘
    //……
  };
  //step 插件的扩展方法名称
  $.fn.easySlider = function (options) {
    //step-b 合并用户自定义属性,默认属性
    var options = $.extend(defaults, options);
    //step 支持JQuery选择器
    //step 支持链式调用
    return this.each(function () {
    });
  }
})(jQuery);
Salin selepas log masuk

6 Kaedah dalam pemalam:

Kaedah yang ditakrifkan dalam pemalam tidak boleh dipanggil secara langsung oleh dunia luar Kaedah yang saya takrifkan dalam pemalam tidak mencemarkan persekitaran luaran.

//step01 定义JQuery的作用域
(function ($) {
  //step03-a 插件的默认值属性
  var defaults = {
    prevId: ‘prevBtn‘,
    prevText: ‘Previous‘,
    nextId: ‘nextBtn‘,
    nextText: ‘Next‘
    //……
  };
  //step06-a 在插件里定义方法
  var showLink = function (obj) {
    $(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
  }
  //step02 插件的扩展方法名称
  $.fn.easySlider = function (options) {
    //step03-b 合并用户自定义属性,默认属性
    var options = $.extend(defaults, options);
    //step4 支持JQuery选择器
    //step5 支持链式调用
    return this.each(function () {
      //step06-b 在插件里定义方法
      showLink(this);
    });
  }
})(jQuery);
Salin selepas log masuk

Kandungan di atas memperkenalkan anda kepada kaedah mentakrifkan pemalam dengan jQuery.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan