jQuery - Eklentiler

Eklenti, standart bir JavaScript dosyasında yazılan kod parçasıdır. Bu dosyalar, jQuery kitaplık yöntemleriyle birlikte kullanılabilen yararlı jQuery yöntemleri sağlar.

Depo bağlantısından indirebileceğiniz birçok jQuery eklentisi mevcuttur. https://jquery.com/plugins.

Eklentiler nasıl kullanılır

Bir eklentinin yöntemlerini kullanabilmemiz için, belgenin <head> bölümüne jQuery kitaplık dosyasına çok benzer bir eklenti dosyası ekliyoruz.

Ana jQuery kaynak dosyasından sonra ve özel JavaScript kodumuzdan önce göründüğünden emin olmalıyız.

Aşağıdaki örnek, nasıl ekleneceğini gösterir jquery.plug-in.js eklenti -

<html>
   <head>
      <title>The jQuery Example</title>
		
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script src = "jquery.plug-in.js" type = "text/javascript"></script>
      <script src = "custom.js" type = "text/javascript"></script>
      
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            .......your custom code.....
         });
      </script>
   </head>
	
   <body>
      .............................
   </body>
</html>

Eklenti nasıl geliştirilir

Kendi eklentinizi yazmak çok basit. Aşağıda aa yöntemi oluşturmak için sözdizimi verilmiştir -

jQuery.fn.methodName = methodDefinition;

Burada methodNameM yeni yöntemin adıdır ve methodDefinition gerçek yöntem tanımıdır.

JQuery ekibi tarafından önerilen kılavuz aşağıdaki gibidir -

Eklediğiniz yöntem veya işlevlerin sonunda noktalı virgül (;) olmalıdır.
Aksi belirtilmediği sürece yönteminiz jQuery nesnesini döndürmelidir.
Bunu her birini mevcut eşleşen öğeler kümesi üzerinde yinelemek için kullanmalısınız - bu şekilde temiz ve uyumlu kod üretir.
Dosya adının önüne jquery koyun, bunu eklentinin adıyla takip edin ve .js ile bitirin.
Eklentiyi her zaman $ yerine doğrudan jQuery'ye ekleyin, böylece kullanıcılar noConflict () yöntemi aracılığıyla özel bir takma ad kullanabilir.

Örneğin, hata ayıklama olarak adlandırmak istediğimiz bir eklenti yazarsak , bu eklenti için JavaScript dosya adımız -

jquery.debug.js

Kullanımı jquery. önek, diğer kitaplıklarla kullanılması amaçlanan dosyalarla olası ad çakışmalarını ortadan kaldırır.

Misal

Aşağıda, hata ayıklama amacıyla uyarı yöntemine sahip küçük bir eklenti verilmiştir. Bu kodu jquery.debug.js dosyasında saklayın -

jQuery.fn.warning = function() {
   return this.each(function() {
      alert('Tag Name:"' + $(this).prop("tagName") + '".');
   });
};

Warning () yönteminin kullanımını gösteren örnek aşağıdadır. Jquery.debug.js dosyasını html sayfasının aynı dizinine koyduğumuzu varsayarsak .

<html>
   <head>
      <title>The jQuery Example</title>
		
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script src = "jquery.debug.js" type = "text/javascript">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").warning();
            $("p").warning();
         });
      </script>	
   </head>
	
   <body>
      <p>This is paragraph</p>
      <div>This is division</div>
   </body>
</html>

Bu sizi aşağıdaki sonuçla uyarır -

This is paragraph
This is division