Contoh penggunaan fungsi global yang dibuat oleh jQuery plug-in

Contoh penggunaan fungsi global yang dibuat oleh jQuery plug-in_jquery

WBOY

Lepaskan： 2016-05-16 15:57:04

asal

1070 orang telah melayarinya

Contoh dalam artikel ini menerangkan penggunaan fungsi global dalam pengeluaran pemalam jQuery. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

1. Tambahkan fungsi global baharu

Apa yang dipanggil fungsi global sebenarnya adalah kaedah objek jQuery, tetapi dari sudut pandangan praktikal, ia adalah fungsi yang terletak di dalam ruang nama jQuery

(1) Untuk menambah fungsi, hanya nyatakan fungsi baharu sebagai sifat objek jQuery.

jQuery.five =function(){ 
 alert("直接继承方式不一样"); 
}

Salin selepas log masuk

Panggilan:

Salin kod Kod adalah seperti berikut:

$.five();

(2)Tambah berbilang fungsi

jQuery.five =function(){ 
 alert("直接继承方式不一样"); 
} 
jQuery.six =function(){ 
 alert("直接继承方式不一样2"); 
}

Salin selepas log masuk

Panggilan:

Salin kod Kod adalah seperti berikut:

$.five();$.six( );

Kaedah di atas akan menghadapi risiko konflik ruang nama Untuk mengelakkan masalah ini, sebaiknya masukkan semua fungsi global kepunyaan pemalam ini ke dalam objek, seperti berikut:

//命名空间继承
jQuery.myPlugin ={ 
 one : function(obj){ 
  var object = obj; 
  var id = object.attr("id"); 
  alert(id); 
 }, 
 two : function(){ 
  alert(22); 
 } 
}

Salin selepas log masuk

Ini sebenarnya mencipta ruang nama lain untuk fungsi global: jQuery.myPlugin.

2. Tambah kaedah objek jQuery

Kebanyakan fungsi terbina dalam jQuery disediakan melalui kaedah objeknya.

jQuery.fn.myMethod= function(){ 
 alert(11); 
}

Salin selepas log masuk

Panggilan:

Salin kod Kod adalah seperti berikut:

$.fn.myMethod();

Nota: jQuery.fn ialah alias bagi jQuery.prototype.

Contoh: Berikut ialah kaedah yang berkelakuan tidak betul

<ul> 
  <li>11111111111111111111111111</li> 
  <liclass="this">22222222222222222222</li> 
  <li>333333333333333</li> 
  <liclass="that">44444444444444444</li> 
  <liclass="this">55555555555555</li> 
  <li>6666666666666666</li> 
  <li>777777777777777777</li> 
  <liclass="that">777777777777777777</li> 
</ul> 
<inputtype="button" value="swap" id="swap" />

Salin selepas log masuk

jQuery.fn.swapClass= function(class1,class2){ 
 if(this.hasClass(class1)){ 
  this.removeClass(class1).addClass(class2); 
 } 
 if(this.hasClass(class2)){ 
  this.removeClass(class2).addClass(class1); 
 } 
} 
 $("#swap").click(function(){ 
  $("li").swapClass("this","that"); 
  return false; 
})

Salin selepas log masuk

Semua saya menggunakan gaya itu.

(1)Lelaran hermit

Untuk memastikan tingkah laku yang betul tanpa mengira padanan berbilang elemen, cara paling mudah ialah dengan sentiasa memanggil kaedah .each() pada persekitaran kaedah, supaya

Melakukan lelaran hermit dan melaksanakan lelaran hermit adalah penting untuk mengekalkan konsistensi antara pemalam dan kaedah terbina dalam Di dalam kaedah .each() yang dipanggil, ini

merujuk kepada setiap elemen DOM secara bergilir-gilir Kod di atas diubah suai kepada:

jQuery.fn.swapClass= function(class1,class2){ 
 this.each(function(){ 
  var $element = jQuery(this); 
  if($element.hasClass(class1)){ 
   $element.removeClass(class1).addClass(class2); 
  }else if($element.hasClass(class2)){ 
   $element.removeClass(class2).addClass(class1); 
  } 
 }) 
}

Salin selepas log masuk

Panggil:

Salin kod Kod adalah seperti berikut:

$("li").swapClass("this","that ")

(2) Penggabungjalinan kaedah

Untuk menggunakan penggabungan kaedah, objek jQuery mesti dikembalikan dalam semua kaedah pemalam. Objek jQuery yang dikembalikan biasanya objek yang dirujuk oleh ini.

jQuery.fn.swapClass= function(class1,class2){ 
 return this.each(function(){ 
  var $element = jQuery(this); 
  if($element.hasClass(class1)){ 
   $element.removeClass(class1).addClass(class2); 
  }else if($element.hasClass(class2)){ 
   $element.removeClass(class2).addClass(class1); 
  } 
 }) 
}

Salin selepas log masuk

Panggil:

Salin kod Kod adalah seperti berikut:

$("li").swapClass("this","that "). css("text-decoration","garis bawah");

3. Tambah kaedah singkatan baharu

//添加新的简写方法 
jQuery.fn.slideFadeOut= function(speed,callback){ 
 return this.animate({ 
  height : "hide", 
  opacity : "hide" 
 },speed,callback) 
} 
jQuery.fn.slideFadeIn= function(speed,callback){ 
 return this.animate({ 
  height : "show", 
  opacity : "show" 
 },speed,callback) 
} 
jQuery.fn.slideFadeToggle= function(speed,callback){ 
 return this.animate({ 
  height : "toggle", 
  opacity : "toggle" 
 },speed,callback) 
}

Salin selepas log masuk

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.