jQuery - Genel Bakış

JQuery nedir?

jQuery, 2006 yılında John Resig tarafından güzel bir sloganla oluşturulmuş hızlı ve özlü bir JavaScript Kitaplığıdır: Write less, do more. jQuery, hızlı web geliştirme için HTML belgesi geçişini, olay işlemeyi, canlandırmayı ve Ajax etkileşimlerini basitleştirir. jQuery, daha az kod yazarak çeşitli görevleri basitleştirmek için tasarlanmış bir JavaScript araç setidir. İşte jQuery tarafından desteklenen önemli temel özelliklerin listesi -

DOM manipulation - jQuery, DOM öğelerini seçmeyi, onlarla görüşmeyi ve içeriklerini değiştirmeyi tarayıcılar arası açık kaynak seçici motor adı verilen kullanarak kolaylaştırdı. Sizzle.
Event handling - jQuery, HTML kodunu olay işleyicileriyle karıştırmaya gerek kalmadan, bir kullanıcının bir bağlantıya tıklaması gibi çok çeşitli olayları yakalamanın zarif bir yolunu sunar.
AJAX Support - jQuery, AJAX teknolojisini kullanarak duyarlı ve özellikli bir site geliştirmenize çok yardımcı olur.
Animations - jQuery, web sitelerinizde kullanabileceğiniz birçok yerleşik animasyon efektiyle birlikte gelir.
Lightweight - jQuery çok hafif bir kitaplıktır - boyut olarak yaklaşık 19KB (Küçültülmüş ve gzip ile sıkıştırılmış).
Cross Browser Support - jQuery tarayıcılar arası desteğe sahiptir ve IE 6.0+, FF 2.0+, Safari 3.0+, Chrome ve Opera 9.0+ ile iyi çalışır
Latest Technology - jQuery, CSS3 seçicilerini ve temel XPath sözdizimini destekler.

JQuery nasıl kullanılır?

JQuery'yi kullanmanın iki yolu vardır.

Local Installation - jQuery kitaplığını yerel makinenize indirebilir ve HTML kodunuza ekleyebilirsiniz.
CDN Based Version - jQuery kitaplığını HTML kodunuza doğrudan İçerik Dağıtım Ağı'ndan (CDN) dahil edebilirsiniz.

Yerel Kurulum

Şuraya git https://jquery.com/download/ mevcut en son sürümü indirmek için.
Şimdi indirildi jquery-2.1.3.min.js dosya, web sitenizin bir dizininde, örneğin / jquery.

Misal

Artık jquery kitaplığını HTML dosyanıza aşağıdaki gibi ekleyebilirsiniz -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" src = "/jquery/jquery-2.1.3.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

Bu, aşağıdaki sonucu verecektir -

CDN Tabanlı Sürüm

JQuery kitaplığını HTML kodunuza doğrudan İçerik Dağıtım Ağı'ndan (CDN) dahil edebilirsiniz. Google ve Microsoft, en son sürüm için içerik teslimi sağlar.

Bu eğitimde kitaplığın Google CDN sürümünü kullanıyoruz.

Misal

Şimdi Google CDN'deki jQuery kitaplığını kullanarak yukarıdaki örneği yeniden yazalım.

<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 type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

Bu, aşağıdaki sonucu verecektir -

JQuery Kitaplığı İşlevleri Nasıl Çağırılır?

Hemen hemen her şeyde olduğu gibi, jQuery belge nesne modelini (DOM) okurken veya işlerken yaptığımız gibi, DOM hazır olur olmaz olaylar vb. Eklemeye başladığımızdan emin olmalıyız.

Sayfanızda bir etkinliğin çalışmasını istiyorsanız, onu $ (document) .ready () işlevi içinde çağırmalısınız. İçindeki her şey, DOM yüklenir yüklenmez ve sayfa içeriği yüklenmeden önce yüklenecektir.

Bunu yapmak için, aşağıdaki gibi belge için hazır bir etkinlik kaydediyoruz -

$(document).ready(function() {
   // do stuff when DOM is ready
});

Herhangi bir jQuery kitaplık işlevini çağırmak için, aşağıda gösterildiği gibi HTML komut dosyası etiketlerini kullanın -

<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 type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function() {alert("Hello, world!");});
         });
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

Bu, aşağıdaki sonucu verecektir -

Özel Komut Dosyaları Nasıl Kullanılır?

Özel kodumuzu özel JavaScript dosyasına yazmak daha iyidir: custom.js, aşağıdaki gibi -

/* Filename: custom.js */
$(document).ready(function() {

   $("div").click(function() {
      alert("Hello, world!");
   });
});

Şimdi ekleyebiliriz custom.js HTML dosyamızda aşağıdaki gibi bir dosya -

<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 type = "text/javascript" src = "/jquery/custom.js">
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

Bu, aşağıdaki sonucu verecektir -

Birden Çok Kitaplığı Kullanma

Birden çok kitaplığı birbiriyle çakışmadan birlikte kullanabilirsiniz. Örneğin, jQuery ve MooTool javascript kitaplıklarını birlikte kullanabilirsiniz. Daha fazla ayrıntı için jQuery noConflict Yöntemi'ne bakabilirsiniz .

Sırada ne var ?

Yukarıdaki örnekleri anlamadıysanız çok fazla endişelenmeyin. Onları çok yakında sonraki bölümlerde kavrayacaksınız.

Sonraki bölüm, geleneksel JavaScript'ten gelen birkaç temel kavramı kapsamaya çalışacaktır.