Contoh penggunaan fungsi global yang dibuat oleh jQuery plug-in_jquery

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("直接继承方式不一样"); 
}

Panggilan:

Salin kod Kod adalah seperti berikut:

$.five();

(2)Tambah berbilang fungsi

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

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); 
 } 
}

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); 
}

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" />

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; 
})

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); 
  } 
 }) 
}

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); 
  } 
 }) 
}

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) 
}

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.