JQuery Öğrenimi

JQuery çok yaygın olan bir JavaScript kütüphanesi. Bu sayfada JQuery kütüphanesini en baştan başlayarak ele alacağız.

JQuery Nedir?

JQuery bir HTML kodu içinde özellikleri verilen elemanları bulup , bu elemanlar üzerinde stiller, olaylar, içerikler vs. üzerinde işlemler yapmayı kolaylaştırmayı hedefleyen bir JavaScript kütüphanesidir.

JQuery MIT lisanslı açık kaynak kodlu bir kütüphanedir ve dünyada yayınlanan web sitelerinin %70'inden fazlasında kullanılır.

JQuery şu prensipler ışığında tasarlanmıştır :

  • JavaScript ve HTML kodların ayrılması ile geliştiriciyi HTML ve JavaScript kodlarını ayrı düşünmeye zorlar.
  • Kısalık ve berraklık ile zincirleme fonksiyon kullanımı sağlayarak ve kısa fonksiyon isimleri kullanarak kodun berraklığı arttırılır.
  • Tarayıcı farklılıklarını elimine eder ile kodunuzu JQuery ile yazarak değişik tarayıcılarda nasıl çalışacak endişesi taşımazsınız.
  • Genişletilebilirlik ile JQuery fonksiyonlarına yenilerini ekleyerek kolayca plugin olarak kullanabilirsiniz.

JQuery Özellikleri

JQuery geliştiricilerin işlerini daha az kod yazarak yapmalarına yardımcı olacak şekilde tasarlanmıştır. Aşağıda bazı önemli temel JQuery özelliklerinin bir listesi var.

  • DOM manipülasyon - JQuery DOM elemanlarının seçilmesinde kolaylık sağlar. Sizzle adı verilen seçme prosedürü sayesinde kullanılan tarayıcıdan bağımsız olarak elemanlar seçilir ve içerikleri ve özellikleri değiştirilebilir.
  • Olay işleme - JQuery çok çeşitli olayları işlemek için etkili bir yöntem sunar. Örneğin kullanıcı bir linke tıkladığında yapılacakları HTML kodu içinde karmaşık ilaveler yapmadan script kodunda yapabilirsiniz.
  • AJAX desteği - JQuery duyarlı ve zengin özelliklere sahip web sayfalarını AJAX teknolojileri kullanarak geliştirmenize yardımcı olur.
  • Animasyonlar - JQuery web sitelerinizde kullanabileceğiniz birçok animasyon efektlerine sahiptir.
  • Hafiflik - JQuery yaklaşık 19kb boyutunda çok az hafıza kaplayan bir kütüphanedir.
  • Tarayıcıdan bağımsız çalışma - JQuery tarayıcıdan bağımsız olarak sağlıklı çalışır. IE 6.0+, FF 2.0+, Safari 3.0+, Chrome ve Opera 9.0+ tarayıcılarda sorunsuz çalışır.
  • Son teknoloji - JQuery CSS3 eleman seçicileri ve temel XPath deyimlerini kullanır.

JQuery Kurulumu

JQuery kurmak için 2 yöntem vardır.

  1. Yerel kurulum - JQuery kütüphanesini sitesinden bilgisayarınıza indirebilir ve sitenizin HTML kodunda kullanabilirsiniz.
  2. CDN temelli kurulum - JQuery kütüphanesini HTML kodunuzda CDN (Content Delivery Network) sürücüleri üzerinden başvuru yoluyla kullanabilirsiniz.

Yerel Kurulum

JQuery kütüphanesini web server'ınıza yükleyip yerel bir JavaScript dosya gibi web sitenizde kullanabilirsiniz. Daha iyi bir performans için sıkıştırılmış dosya kullanmanız tavsiye edilir.

  • https://jquery.com/download/ adresine gidin ve en son versiyonu indirin.
  • İndirdiğiniz örneğin jquery-3.6.0.min.js dosyasını web sitenizin kodunu barındırdığınız klasörde bir yere yerleştirinç Örneğin /jquery/jquery-3.6.0.js olarak bir alt klasör içine yerleştirin.
  • Son olarak bu dosyayı HTML kodunuz içinde aşağıda gösterildiği şekilde web sayfanıza dahil edin.

Örnek

<!doctype html>
<html>
<head>
<title>jQuery Örneği</title>
<script src="/jquery/jquery-3.7.1.min.js"></script>
<script>
   $(document).ready(function() {
      document.write("Merhaba, Dünya!");
   });
</script>
</head>
<body>
   <!-- HTML body içeriği buraya gelecek -->
</body>
</html>


CDN Temelli Kurulum

JQuery kütüphanesini CDN server'larından da kullanabilirsiniz. Bu sayede hem server'ınızda yer kaplamaz (ki oldukça küçük bir yer kaplıyor aslında), hem de eğer web sitenizi gösteren tarayıcı aynı dosyayı başka sitelerde gezerken indirmiş olabilir ve cash'inden daha hızlı kullanabilir. Aşağıdaki örnek Google CDN server kullanıyor.

Örnek

<!doctype html>
<html>
    <head>
        <title>jQuery Örneği</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                document.write("Merhaba, Dünya!");
            });
        </script>
    </head>
    <body>
    <!-- HTML body içeriği buraya gelecek -->
    </body>
</html>

Bu da aynı şekilde çalışacaktır.


JQuery Fonksiyonları Nasıl Kullanılır?

JQuery ile yapacağımız hemen her şey DOM elemanlarını okumak ve manipüle etmek üzerinedir. Bu yüzden bir işlem yapmadan önce DOM elemanlarının tamamen yüklenmiş olduğundan emin olmalıyız.

Eğer bir olayın sayfanızda çalışmasını istiyorsanız onu $(document).ready() fonksiyonu içinde çağırmalısınız. Buraya konan her kod DOM elemanları yüklendikten sonra çalışacaktır.

Aslında daha sonra ayrıntılarını öğreneceğimiz gibi bu kod document elemanının ready olayına bir işlem eklemek işini yapıyoruz burada. ready olayı da dökümanın tamamıyla tarayıcıya yüklendiği anda tetiklenen bir olaydır.

$(document).ready(function() {
   // DOM hazır olunca yapılacak işler
});

Bu doğrultuda bir JQuery fonksiyonunu çağırma şekli sayfa kodunuzda bu örnekte verildiği gibi olacaktır.

<!doctype html>
<html>
    <head>
        <title>jQuery Örneği</title>
        <script src="/jquery/jquery-3.7.1.min.js"></script>
        <script>
            $(document).ready(function() {
                $("div").click(function() {alert("Merhaba, dünya!");});
            });
        </script>
    </head>
    <body>
        <div>Diyalog kutusunu görmek için bu yazıya tıklayın.</div>
    </body>
</html>
Diyalog kutusunu görmek için bu yazıya tıklayın.

Kendi Scriptlerinizi Nereye Koymalısınız?

En iyisi kendi scriptlerinizi de ayrı bir .js dosyası içinde toplamak olur. Örneğin scriptimizi /jquery/custom.js adında bir dosyada saklayalım.

/* Dosya adı: custom.js */
$(document).ready(function() {
   $("div").click(function() {
      alert("Merhaba, dünya!");
   });
});

Sonra bu dosyayı HTML kodumuza dahil edelim

<!doctype html>
<html>
    <head>
        <title>jQuery Örneği</title>
        <script src="/jquery/jquery-3.7.1.min.js"></script>
        <script src="/jquery/custom.js"></script>
    </head>
    <body>
        <div>Diyalog kutusunu görmek için bu yazıya tıklayın.</div>
    </body>
</html>

Şimdi daha sade oldu. Yukarıdaki kodları anlamadıysanız merak etmeyin, yakında her birini tekrar tekrar görerek anlayacaksınız.



JQuery - Temel İşlemler

JQuery deyim yapısını görmeden önce JavaScript kodlamanın temellerini bir gözden geçirelim. Çünkü JQuery JavaScript kodları kullanan bir kütüphane, yani JQuery kütüphanesini kullanırken birçok JavaScript deyimler kullanacaksınız. JQuery'de çok kullanılan temel teknikleri bir gözden geçirerek başlayalım.


String

JavaScript'te bir string değer bir ya da birden çok karakterden oluşan bir yazı değeridir, ayrıca string'de hiç sayıda karakter de olabilir (null). Aşağıda geçerli JavaScript string değerlerine örnekler var.

"Bu bir JavaScript String"
'Bu bir JavaScript String'
'Bu "gerçekten" bir JavaScript String'
"Bu 'gerçekten' bir JavaScript String"


Sayılar

JavaScript'de sayılar 64-bit düzende double-precision IEEE 754 standardı değerlerdir. String gibi bunlar da sabit değerlerdir. Aşağıda JavaScript sayılara geçerli örnekler veriliyor.

5350
120.27
0.26


Boolean değerler

JavaScript'de boolean bir değer doğru-yanlış değerler olan true veya false değerlerinde olabilir. Bir sayı değeri sıfırsa buna karşılık boolean değer false olur. Boş bir string de boolean olarak false olur. Bunların dışındaki sayı ve stringler true olarak boolean değere karşılık gelirler. Aşağıda geçerli boolean değer örnekleri var.

true      // true
false     // false
0         // false
1         // true
""        // false
"hello"   // true


Nesneler (Object)

JavaScript (ve tabi ki JQuery) nesne yapısını çok etkili kullanır. Bir nesneyi aşağıdaki tanımlama tekniğiyle tanımlayabilirsiniz.

var çalışan = {
   isim: "Zara",
   yaş: 20
};

Nesnenizin özelliklerine noktalı kodlama ile erişebilirsiniz.

// Nesne özelliklerini okurken
çalışan.isim  // ==> Zara
çalışan.yaş   // ==> 20

// Nesne özelliklerini değiştirmek
çalışan.isim = "Daisy"  // <== Daisy
çalışan.yaş  =  22      // <== 22
console.log(çalışan.isim);


Array

Array'leri aşağıdki teknikle tanımlarsınız.

var x = [];
var y = [1, 2, 3, 4, 5];

Bir array'in length özelliğini kullanarak elemanları üzerinde iterasyon yapabilirsiniz.

var x = [1, 2, 3, 4, 5];

for (var i = 0; i < x.length; i++) {
   // x[i] elemanı üzerinde işlem
}


Fonksiyonlar

JavaScript'de (JQuery'de) bir fonksiyon isimlendirilmiş ya da anonim olarak tanımlanabilir. İsimlendirilmiş bir fonksiyon tanımlamak için aşağıdaki gibi function deyim yapısı kullanılır.

function isimli(){
   // fonksiyonun yapacağı işler
}

Anonim fonksiyonlar da aynı isimlendirilmiş fonksiyonlar gibi tanımlanır ancak bu sefer bir isim değeri girilmez.

Bir anonim fonksiyon aşağıdaki gibi bir değişkene değer olarak verilebilir ya da bir metoda parametre değeri olarak verilebilir.

var olay_işleyici = function (){
   // fonksiyonun yapacağı işler
}

JQuery anonim fonksiyonları aşağıda göründüğü gibi metod parametresi olarak oldukça yoğun kullanır.

$(document).ready(function(){
   // burada bir şey yap
});


Parametreler (arguments)

Parametreler ya da argümanlar JavaScript'de fonksiyona içinde kullanması için verilen değişken değerleridir. Aşağıdaki örnek bunu güzelce açıklıyor.

function func(x){
   console.log(typeof x, arguments.length);
}

func();                //==> "undefined", 0
func(1);               //==> "number", 1
func("1", "2", "3");   //==> "string", 3

arguments nesnesi içinde bulunulan fonksiyonun adını gösteren callee adında bir özelliğe sahiptir.

function fonk() {
   return arguments.callee;
}

fonk();                // ==> fonk


Bağlam (context)

Meşhur JavaScript kelimesi this her zaman içinde bulunulan bağlamı ifade eder. Bir fonksiyon içinde kullanılan this kelimesi fonksiyonun bağlandığı nesneyi ifade eder.

$(document).ready(function() {
   // this burada window.document nesnesini gösterir
});

$("div").click(function() {
   // this burada tıklanan div elemanıdır
});

Bir fonksiyonda geçerli bağlamı call() veya apply() metodları kullanarak değiştirilebilir.

Aralarındaki fark parametreleri nasıl verdiklerine göre değişir. call() parametreleri olduğu gibi fonksiyona geçirirken apply() parametreleri bir array içinde alır.

function bağlam() {
   console.log(this, arguments.length);
}

bağlam() // window, 0
bağlam.call("foobar", [1,2]);  //==> "foobar", 1
bağlam.call("foobar", [1,2], 3);  //==> "foobar", 2
bağlam.apply("foobar", [1,2]); //==> "foobar", 2
bağlam.apply("foobar", [1,2], 3, 4); //==> "foobar", 2


Kapsam (scope)

Bir değişkenin kapsamı yani geçerli olduğu bölge tanımlandığı yerdir. JavaScript değişkenlerin sadece 2 kapsamı olabilir.

  • Global değişkenler - global bir değişken JavaScript kodunuzun her yerinde geçerlidir.
  • Lokal (yerel) değişkenler - yerel değişken sadece tanımlandığı fonksiyon içinde geçerli olan değişkendir. Fonksiyonun tanımlanırken bildirilen parametreleri de yerel değişken olarak çalışır.

Bir fonksiyon içinde tanımlanan bir yerel değişken programda tanımlı bir global değişken ile aynı isme sahip olabilir. Bu durumda değişken yerel olarak çalışacaktır.

var myVar = "global";     // ==> Global değişken tanımı

function f( ) {
   var myVar = "local";   // ==> Aynı isimde yerel değişken
   document.write(myVar); // ==> Sayfaya "local" yazacaktır
}

f();


Callback

Callback adı verilen fonksiyonlar JavaScript metodlarına parametre olarak verilen anonim fonksiyonlardır. Bazı callback'ler bir olay oluştuğunda yapılacakları içeren olay işleme fonksiyonlarıdır.

JQuery'nin olay işleme yapısı bu callback'leri çok sıklıkla kullanır.

$("body").click(function(event) {
   console.log("tıklandı: " + event.target);
});

Yukarıdaki JQuery kodu body elemanı içinde herhangi bir yere tıklanınca click olayının içinde yapılacakları gösteriyor. click olayı bizden bir callback fonksiyonu parametre olarak girmemizi bekler. Eğer fonksiyon içinde çok fazla kod olacaksa fonksiyonu isimli bir şekilde tanımlayıp , aşağıdaki şekilde de kullanabilirsiniz.

function body_clicked(event){
   console.log("tıklandı: " + event.target);
}

$("body").click(body_clicked);

Dikkat ederseniz olay işleyiciye isimlendirilmiş bir fonksiyonu callback değeri olarak verirken sadece body_clicked şeklinde adını girdik. Bir fonksiyon çağırır gibi body_clicked() yazılmaz. Eğer böyle yazarsanız önce body_clicked fonksiyonu çalışır ve ondan dönen değer click metoduna parametre olarak verilir, halbuki biz fonksiyonun kendisinin parametre olmasını istiyoruz.

Bir ayrıntı da örnekteki event değişkeni. Olay işleme callback'lerinde fonksiyonun ilk parametresi olan event değişkeni aslında olayı ifade ediyor. Bu örnekte event.target denince tıklamanın hangi elemana yapıldığı gelir.

Bazı callback'lerin değer dönmesi istenebilir. Aşağıda bir formun gönderilmesinin başarısız olduğunu bildirmek için false değeri dönmesi sağlanıyor.

$("#myform").submit(function() {
   return false;
});


Closure

Bu konu aslında ağır bir konu ama örnekle açıklamaya çalışacağım. Closure bir fonksiyon içinde tanımlanan değişkene daha iç seviyede bir fonksiyondan erişildiğinde oluşur. Örneklerle açıklamaya çalışayım.

function create() {
   var counter = 0;

   return {
      increment: function() {
         counter++;
      },
      print: function() {
         console.log(counter);
      }
   }
}

var c = create();
c.increment();
c.increment();
c.print();     // ==> 2

Bu örneği incelediğimizde dönüş değeri olarak fonksiyonlar dönen bir fonksiyon var. Ana gövde olan create() içinde tanımlanan counter değişkenine iç fonksiyonlar olan increment() ve print() fonksiyonlarından erişilebiliyor. Ama fonksiyon dışından direk bu değişkene erişilemez, sadece ana fonksiyondan geri dönen nesnenin metodları yardımıyla erişilebilir.

var c = create(); satırında c nesnesine sadece create() fonksiyonunun dönen (return) değeri olan 2 fonksiyon yüklenmiyor, counter değeri de aslında c nesnesi içinde ama dışarıdan c.counter şekliyle erişilemez. create() fonksiyonu sadece bir kere çalıştırıldığı için var counter = 0; satırı sadece bir kez çalışıyor ve c nesnesi içindeki counter değeri ilk çalıştırmada sıfırlanıyor. Daha sonra c.increment() metodu her kullanıldığında counter değeri bir artıyor. c nesnesinin içini görmek için konsola yazdırırsanız.

....
var c = create();
console.log(c);
c.increment();
c.increment();
c.print();     // ==> 2


Gördüğünüz gibi closure kelimesi tarayıcının konsolunda da karşımıza çıktı. Değişkenler kapsamında counter değişkeni iç fonksiyonlarda closure oarak görünüyor.

Biraz daha karmaşık bir örnek verelim.

var add = (function () {
  let counter = 0;
  return function () {counter += 1; return counter}
})();

add();
add();
console.log(add());

Burada add değişkeni parantez içindeki fonksiyonun çalışması sonucu geri dönen fonksiyon. Yani (function(){...})() notasyonu o fonksiyondan dönen fonksiyonu add değişkenine veriyor. Bu durumda add() şeklinde bu değişkenin fonksiyon olarak çalıştırılması counter closure değerini arttırıp geri dönen değer olarak veriyor. Artık ortada c nesnesi gibi nesne de yok ama counter değeri hala bir yerlerde duruyor ama sadece metodlarla ulaşılabiliyor.



Dahili Fonksiyonlar

JavaScript birçok yararlı fonksiyona sahiptir. Bunlar String , Sayı veya Tarih değerleri işlemek için kullanılırlar.

Aşağıda yararlı bazı JavaScript fonksiyonları hakkında kısa bilgilendirme görülüyor.

  1. charAt()
    Belirtilen indexteki karakteri döner.
  2. concat()
    İki string içeriğindeki yazıyı birleştirip yeni bir string olarak döner.
  3. forEach()
    Bir array'in her elemanı üzerinde iterasyon yaparak bir fonksiyon çağırır.
  4. indexOf()
    Bir string içinde verilen değerin ilk bulunduğu index numarasını geri döner. Aranan değer bulunamazsa -1 değeri döner.
  5. length()
    Bir string değerin karakter olarak uzunluğunu verir.
  6. pop()
    Bir array'in son elemanını siler ve o elemanı dönen değer olarak verir.
  7. push()
    Verilen değeri bir array'in sonuna eleman olarak ekler ve array yeni uzunluğunu geri döner.
  8. reverse()
    Bir array içindeki eleman sıralamasını ters çevirir. İlk eleman en sona , en sondaki eleman başa gelir vs.
  9. sort()
    Bir array içindeki elemanların değerlerine göre küçükten büyüğe doğru sıralar.
  10. substr()
    String içinden belirtilen indexteki karakterden başlayıp, belirtilen sayıa karakterden oluşan alt string'i döner.
  11. toLowerCase()
    Stringin tamamının küçük harf olan şeklini geri döner.
  12. toString()
    Bir sayının string olarak gösterimini geri döner.
  13. toUpperCase()
    Stringin tamamının büyük harf olan şeklini geri döner.


Document Object Model (DOM)

DOM web sayfamızın HTML kodunda yer alan elemanların yerleşim ağacıdır. Aşağıdaki basit HTML kodu ele alalım.

<html>
    <head>
        <title>DOM Örneği</title>
    </head>
    <body>
        <div>
            <p>Bu bir paragraph.</p>
            <p>Bu ikinci paragraph.</p>
            <p>Bu üçüncü paragraph.</p>
        </div>
    </body>
</html>

DOM ağacını esasen bir soy ağacına benzetebiliriz. Yukarıdaki ağacın önemli noktaları şunlardır.

  • <html> elemanı diğer tüm elemanların kapsayıcısıdır yani herkesin atasıdır.
  • <head> ve <body> elemanları <html> elemanının mirasçılarıdır. Ama bir alt eleman oldukları için özel bir isimlendirmeleri vardır. Bunlar <html> elemanınınn çocuklarıdır ve child eleman olarak adlandırılır.
  • Benzer şekilde <html> elemanı <head> ve <body> elemanlarının atası olmakla beraber bir üst eleman olduğu için velisi yani parent olarak isimlendirilir.
  • <p> elemanları <div> elemanının çocuklarıdır (yani child eleman). Aynı zamanda <html> ve <body> elemanlarının da torunlarıdır. Aynı zamanda da birbirlerinin kardeşleridirler.

JQuery konseptlerini öğrenirken DOM ağacı yapısını çok iyi anlamak işleri çok kolaylaştıracaktır.




JQuery Deyim Yapısı

JQuery bir HTML dökümandan herhangi bir HTML elemanı bulup onun üzerinde işlemler yapmak için kullanılır. Bir HTML elemanını bulmak için JQuery seçicileri kullanılır. Bu seçicileri bir sonraki bölümde ayrıntılı inceleyeceğiz. Öncelikle JQuery ile bir elemanı bulup onun üzerinde işlemler yapmak için kullanılan deyim yapısını görelim.



Document Ready Olayı

JQuery deyim yapısına girmeden önce Document Ready Olayını açıklayalım. gerçekte bir JQuery kodunu çalıştırmadan önce HTML dökümanın tamamen yüklendiğinden emin olmalıyız. Elemanları bulup üzerinde işlem yapacağız ya, yüklenmemiş bir elemanı bulamayız di mi? Bu amaçla JQuery kodlarımızı Document Ready olayını işleyen blok içine yazmalıyız.

Temel olarak Document Ready olayını işleyen deyim yapısı şöyledir.

$(document).ready(function(){

  // jQuery kod buraya yazılır...

});

Alternatif olarak JQuery tarafından sağlanan kestirme bir yazım da kullanabilirsiniz.

$(function(){

  // jQuery kod buraya yazılır...

});

Not : Eğer JQuery kodunuzu HTML kodu içinde gömülü kullanacaksanız. Document Ready olay kodunu mutlaka <script>...</script> tag içine yazmalısınız ve ya <head>...</head> bölümü içine ya da en altta <body> tag'ini kapatmadan hemen önce yani dökümanın son yüklenen kısmına koymalısınız.



JQuery Deyimler

Aşağıda bir elemanı bulup onun üzerinde işlem yapan temel JQuery deyim yapısı gösteriliyor.

$(function(){
    $(seçici).işlem();
});

Herhangi bir JQuery satırı bir $ sembolü ile başlar. Sonrasında parantez içinde bir seçici ifade girersiniz. Bu $(seçici) deyimi bulmak istediğimiz eleman ya da elemanları bize geri dönecektir. Fakat elemanlar üzerinde bir işlem yapmak isterseniz işlem() kısmını da eklemelisiniz.

Not : ana yapının en önemli taşı $(), aynı zamanda jQuery() fonksiyonu ile aynı anlamda. Yani başka bir JavaScript kütüphanesi ile birlikte kullanırken eğer $ işareti orada başka anlamlar taşıyorsa , jQuery kodlarınız ile karışmaması için jQuery() olarak kullanabilirsiniz.

En dıştaki $(document).ready(...) de aslında dikkat ederseniz aynı deyim yapısına sahip. Burada seçici olarak kullanılan document kelimesi içinde bulunulan sayfayı bulup geri dönüyor. Sonra elemanın ready() metodunu kullanarak sayfa tamamen yüklendikten sonra çalışacak kodlarımızı yazıyoruz.



Örnekler

Aşağıda temel jQuery deyim yapısını gösteren birkaç örnek görülüyor. İlk örnek bir HTML döküman içindeki tüm <p> elemanları bulur ve onları görünmez yapar.

<!doctype html>
<html>
    <head>
        <title>jQuery Örneği</title>
        <script src="/jquery/jquery-3.7.1.min.js"></script>
        <!-- script src="/jquery/custom.js"></script -->
        <script>
            $(document).ready(function() {
                $("p").hide()
            });
        </script>
    </head>
    <body>
        <h1>jQuery Deyim Yapısı</h1>

        <p>Bu bir p tag</p>
        <p>Bu diğer bir p tag</p>
        <span>Bu bir span tag</span>
        <div>Bu bir div tag</div>
    </body>
</html>

Bu örneği $() yerine jQuery() kullanarak yazalım ve aynı şekilde çalıştığını test edelim.

....
        <script>
            $(document).ready(function() {
                jQuery("p").hide()
            });
        </script>
....

Bu da aynı şekilde sayfadaki <p> elemanlarını görünmez yapacaktır. Görünmez diyorum çünkü tarayıcınızın Geliştirici Araçları ile incelerseniz <p> elemanlarının hala HTML elemanlar içinde olduğunu ama <p style="display: none;"> şeklinde stili değiştirilerek görünmez olmalarının sağlandığını göreceksiniz.


Aşağıdaki örnek <h1> elemanlarının rengini kırmızıya döndürür.

<!doctype html>
<html>
    <head>
        <title>jQuery Örneği</title>
        <script src="/jquery/jquery-3.7.1.min.js"></script>
        <!-- script src="/jquery/custom.js"></script -->
        <script>
            $(document).ready(function() {
                $("h1").css("color", "red");
            });
        </script>
    </head>
    <body>
        <h1>jQuery Deyim Yapısı</h1>

        <p>Bu bir p tag</p>
        <span>Bu bir span tag</span>
        <div>Bu bir div tag</div>
    </body>
</html>

jQuery Deyim Yapısı

Bu bir p tag

Bu bir span tag
Bu bir div tag

Benzer bir teknikle tüme .red sınıfına sahip elemanların rengini kırmızıya döndürmek için şu kodu kullanırsınız.

<!doctype html>
<html>
    <head>
        <title>jQuery Örneği</title>
        <script src="/jquery/jquery-3.7.1.min.js"></script>
        <!-- script src="/jquery/custom.js"></script -->
        <script>
            $(document).ready(function() {
                $(".red").css("color", "red");
            });
        </script>
    </head>
    <body>
        <h1 class="red">jQuery Deyim Yapısı</h1>

        <p>Bu bir p tag</p>
        <span>Bu bir span tag</span>
        <div class="red">Bu bir div tag</div>
    </body>
</html>

jQuery Deyim Yapısı

Bu bir p tag

Bu bir span tag
Bu bir div tag

Bu bölümde de jQuery deyim yapısının temellerini gördük. Örneklerdeki değerleri değiştirerek değişik çalışmaları test ederek anlamanızı geliştirebilirsiniz.



Seçici İfadeler (selectors)

JQuery'nin en önemli işlevi olan elemanları bulma işi için seçici adı verilen ifadeler kullanılır. Bu bölümde 3 değişik jQuery seçici türüne ait basit örnekleri yaparak anlamaya çalışalım.



JQuery Seçicileri

JQuery seçiciler bir HTML döküman içerisinde istenen kritere uygun elemanları bulmaya yarar. Örneğin bir HTML döküman içerisindeki tüm <div> elemanları bulmak istiyorsanız jQuery seçicileri kullanacaksınız demektir.

JQuery seçiciler aşağıdaki kriterlere göre HTML elemanları bulurlar.

  • HTML eleman adı
  • Eleman ID değeri
  • Eleman Class değeri
  • Eleman özelliği adı
  • Eleman özelliği değeri
  • Başka birçok kriter

JQuery kütüphanesi stillerde kullandığımız CSS seçicileri kullanır. Böylece DOM elemanlarını bilinen yöntemlerle bulabilirsiniz.



JQuery Seçici Deyimler

Aşağıdaki kod HTML elemanları bulup getirmeye yarayan JQuery Seçici Deyimi gösteriyor.

$(document).ready(function(){
    $(seçici)
});

Bir jQuery seçici $ sembolü ile başlar ve seçici ifadeyi parantez içine yazarız. Burada $() kodu standart fonksiyondur ve bize 3 yöntemle HTML elemanları bulma imkanı sunar.

Seçici Adı Açıklama
Eleman
seçici		 DOM içinde aranan elemanın adı verilir. Örneğin $("p") sayfadaki tüm <p> (paragraf) elemanlarını bulur.
#id
seçicisi		 Belirtilen ID değerine sahip elemanları DOM içinde bulur. Örneğin $("#id-değer") ile id="id-değer" özelliğine sahip elemanlar bulunur.
.class
seçicisi		 Belirtilen class değerine sahip elemanları DOM içinde bulur. Örneğin $(".bir-class") ile class="bir-class" özelliğine sahip elemanlar bulunur.

Tüm yukarıdaki seçici ifadeler tek başlarına ya da birbirleri ile kombinasyon yaparak kullanılabilir.



Eleman Seçicisi

JQuery eleman seçicisi aranan HTML elemanı adına göre arar. Aşağıda temel eleman seçici deyim yapısı görülüyor.

$(function(){
    $("Html Eleman Adı")
});

JQuery'de eleman adına göre arama yaparken elemanın adını açılı braketler olmadan tırnak içinde yazmalısınız. Yani "<p>" şeklinde değil sadece "p" şeklinde.


Örnekler

Aşağıdaki örnekte bir HTML kodu içindeki tüm paragrafları bulup bunların arkaplan rengini değiştiriyoruz.

<!doctype html>
<html>
    <head>
        <title>jQuery Örneği</title>
        <script src="/jquery/jquery-3.7.1.min.js"></script>
        <!-- script src="/jquery/custom.js"></script -->
        <script>
            $(function() {
                $("p").css("background-color", "yellow");
            });
        </script>
    </head>
    <body>
        <h1>jQuery Eleman</h1>

        <p>Bu bir p tag</p>
        <span>Bu bir span tag</span>
        <div>Bu bir div tag</div>
    </body>
</html>

jQuery Eleman

Bu bir p tag

Bu bir span tag
Bu bir div tag


#id Seçicisi

JQuery #id seçicisi HTML elemanını id özelliğine verilen değere göre bulur. Aşağıda temel #id seçici deyim yapısı görülüyor.

$(function(){
    $("#eleman id değeri")
});

Örnek

Aşağıdaki örnek id değeri foo olan paragrafı bulur ve arkaplan rengini değiştirir. Kodu diğer id değerine sahip elemanlar için de test edebilirsiniz.

<!doctype html>
<html>
    <head>
        <title>jQuery Örneği</title>
        <script src="/jquery/jquery-3.7.1.min.js"></script>
        <!-- script src="/jquery/custom.js"></script -->
        <script>
            $(function() {
                $("#foo").css("background-color", "yellow");
            });
        </script>
    </head>
    <body>
        <h1>jQuery #id Seçicisi</h1>

        <p id="foo">Bu "foo" id değere sahip p tag</p>
        <span id="bar">Bu "bar" id değere sahip span tag</span>
        <div id="bill">Bu "bill" id değere sahip div tag</div>
    </body>
</html>

jQuery #id Seçicisi

Bu "foo" id değere sahip p tag

Bu "bar" id değere sahip span tag
Bu "bill" id değere sahip div tag


.class Seçicisi

JQuery .class seçicisi HTML elemanları class özelliğine verilen değere göre arar. Aşağıda temel deyim yapısı görünüyor.

$(function(){
    $(".eleman class değeri")
});

Aynı CSS seçicilerde olduğu gibi id değer ifade ederken # işareti ile başlarken , class değeri ifade edilirken de . ile başlanır. HTML içinde aynı class değerine sahip birden fazla eleman olabileceğinden bu seçici kullanıldığında verilen class değerine sahip tüm elemanlar gelir.


Örnek

Aşağıda foo sınıfına sahip tüm elemanların arkaplan rengini değiştiren kod görülüyor.

<!doctype html>
<html>
    <head>
        <title>jQuery Örneği</title>
        <script src="/jquery/jquery-3.7.1.min.js"></script>
        <!-- script src="/jquery/custom.js"></script -->
        <script>
            $(function() {
                $(".foo").css("background-color", "yellow");
            });
        </script>
    </head>
    <body>
        <h1>jQuery .class Seçicisi</h1>

        <p class="foo">Bu "foo" class değere sahip p tag</p>
        <p class="foo">Bu "foo" class değere sahip başka bir p tag</p>
        <span class="bar">Bu "bar" class değere sahip span tag</span>
        <div class="bill">Bu "bill" class değere sahip div tag</div>
    </body>
</html>

jQuery .class Seçicisi

Bu "foo" class değere sahip p tag

Bu "foo" class değere sahip başka bir p tag

Bu "bar" class değere sahip span tag
Bu "bill" class değere sahip div tag



JQuery Olay İşlemeleri

Modern bir web uygulaması değişik olaylara göre davranışlara sahip olacaktır. Olaylar etkileşimli web sayfaları yapmanın mekanizmasıdır. JQuery bir HTML sayfasında oluşan olayları işlemekte çok başarılıdır. İlk önce olay kelimesinin anlamını bir kavrayalım.


JQuery Olayları Nedir?

JavaScript'de ya da JQuery'de olay , bir aksiyonun sonucunda oluşur. Bu olaylar tetiklendiğinde kendi fonksiyonunuzla olaya ait işlerinizi yapabilirsiniz. Bu kendi fonksiyonlarınıza olay işleyici adı verilir.

JQuery kütüphanesi DOM olaylarını işlemek için birçok yararlı metodlara sahiptir. Böylece olay işleme rutinleri JavaScript'e nazaran çok daha kolay yazılailir.

Aşağıda bazı çok kullanılan olay türleri sıralanıyor.

  • Mouse tıklaması
  • Web sayfasının yüklenmesi
  • Bir eleman üzerine mouse gelmesi
  • Bir HTML formun gönderilmesi
  • Tuş takımında bir tuşa basılması vs.

Aşağıdaki tabloda bazı önemli DOM olaylarının bir listesi görülüyor.

Mouse
Olayları		 Tuş Takımı
Olayları		 Form
Olayları		 Document
Olayları
clickkeypresssubmitload
dblclickkeydownchangeresize
hoverkeyupselectscroll
mousedownblurunload
mouseupfocusinready

Bu bölümde bu olayların bir kısmını örneklerle göreceğiz



JQuery Olay Bağlama Deyim Yapısı

Örneğin HTML döküman içindeki bir <div> elemanına tıklandığında bir şeyler olmasını istiyorsunuz. Bunu elde edebilmek için jQuery yardımıyla <div> elemanına bir olay işleyici fonksiyonu bağlamanız gerekir.

Aşağıda bir HTML döküman içindeki herhangi bir <div> elemanına tıklanınca çalışmasını istediğiniz fonksiyonu click olayına bağlamak için kullanılan deyim yapısı görünüyor.

$("div").click();

Sonraki adım click olayına karşı gelen fonksiyonu tanımlamak. Bu fonksiyon tanımı click() metodu parametresi olarak direk yerinde yapılabilir. Bu fonksiyona Jquery Olay İşleyici adı verilir.

$("div").click(function(){
   // jQuery işleme kodu buraya yazılır..
});

Başka bir olay işleyici bağlama yöntemi de bind() metodunu kullanmaktır.

$("div").bind("click", function(){
   // jQuery işleme kodu buraya yazılır..
});

bind() metoduna 2 parametre verilir. İlk parametre olay adının bir string değer olarak verilmesi, ikinci parametre ise aynı yukarıdaki gibi olay işleyici fonksiyonun tanımlamasıdır. Fonksiyon tanımlama içeriği çok uzun olacaksa fonksiyon başka yerde tanımlanıp parametrede sadece adı da verilebilir.

function div_click(){
   // jQuery işleme kodu buraya yazılır..
}

$("div").click(div_click);

gibi. Dikkat ediniz burada sadece fonksiyonun adını yazıyoruz. div_click() yazarsak yanlış olacaktır. Çünkü o durumda fonksiyon çalıştırılır ve geri dönen değer parametre olarak verilir. Halbuki biz fonksiyonun kendisinin parametrede olmasını istiyoruz. Bu durumda parantezler olmadan sadece fonksiyon adı yazılır.



JQuery Olay Örnekleri

JQuery click Olayı

Aşağıda <div> elemanlarından birine tıklayınca alarm popup'ı gösteren kod örneği var.

<!doctype html>
<html>
    <head>
        <title>jQuery Örneği</title>
        <script src="/jquery/jquery-3.7.1.min.js"></script>
        <!-- script src="/jquery/custom.js"></script -->
        <script>
            $(function() {
                $("div").click(function(){
                    alert('Merhabalar!');
                });
            });
        </script>
        <style>
            div{ margin:10px; padding:12px; border:2px solid #666;
                width:60px; cursor:pointer}
        </style>
    </head>
    <body>
        <p>Herhangi bir kutuya tıklayın ve mesajı görün.</p>

        <div>Bir</div>
        <div>İki</div>
        <div>Üç</div>
    </body>
</html>

Herhangi bir kutuya tıklayın ve mesajı görün.

Bir
İki
Üç

Aynısının çift tıklama ile çalışmasını istiyorsanız sadece olay adını dblclick yaparsınız

....
        <script>
            $(function() {
                $("div").dblclick(function(){
                    alert('Merhabalar!');
                });
            });
        </script>
....

Herhangi bir kutuya çift tıklayın ve mesajı görün.

Bir
İki
Üç

JQuery mouseenter ve mouseleave Olayları

mouseenter olayı mouse işaretçisi eleman üzerine geldiğinde oluşur. mouseleave olayı da mouse pointer eleman dışına çıkınca oluşur.

<!doctype html>
<html>
    <head>
        <title>jQuery Örneği</title>
        <script src="/jquery/jquery-3.7.1.min.js"></script>
        <!-- script src="/jquery/custom.js"></script -->
        <script>
            $(function() {
                $("div").mouseenter(function(){
                    $(this).css("background-color", "yellow");
                });
                $("div").mouseleave(function(){
                    $(this).css("background-color", "");
                });
            });
        </script>
        <style>
            div{ margin:10px; padding:12px; border:2px solid #666;
                width:60px; cursor:pointer}
        </style>
    </head>
    <body>
        <p>Herhangi bir kutu üzerine gidin.</p>

        <div>Bir</div>
        <div>İki</div>
        <div>Üç</div>
    </body>
</html>

Herhangi bir kutu üzerine gidin.

Bir
İki
Üç

JQuery mousedown ve mouseup Olayları

mousedown olayı eleman üzerinde mouse butonuna bastığımız anda oluşur. mouseup olayı eleman üzerindeyken basılı olan mouse butonunu bırakınca oluşur.

<!doctype html>
<html>
    <head>
        <title>jQuery Örneği</title>
        <script src="/jquery/jquery-3.7.1.min.js"></script>
        <!-- script src="/jquery/custom.js"></script -->
        <script>
            $(function() {
                $("div").mousedown(function(){
                    $(this).css("background-color", "yellow");
                });
                $("div").mouseup(function(){
                    $(this).css("background-color", "lime");
                });
            });
        </script>
    </head>
    <body>
        <p>Herhangi bir satır üzerinde buton basın ya da bırakın.</p>

        <div>Bir</div>
        <div>İki</div>
        <div>Üç</div>
    </body>
</html>

Herhangi bir satır üzerinde buton basın ya da bırakın.

Bir
İki
Üç


JQuery event Nesnesi

Bir jQuery olayı ateşlendiğinde jQuery olay işleyici fonksiyona bir event nesnesi gönderir. Bu nesne gerçekleşen olayla ilgili bir çok yararlı bilgiyi içinde bulundurur.

Event nesnesi olay işleyici fonksiyona parametre olarak verilir. Daha önceki örneklerimizde bu nesneyi kullanmadığımız için bu parametreyi hep boş bıraktık, ama eğer kullanacaksak ona bir isim verir ve sonra aynı isimle fonksiyon içinde kullanarak içerdiği bilgilere erişebiliriz.

Aşağıda bu olay nesnesinin içerdiği bazı bilgilerin bir listesi görülüyor.

ÖzellikAçıklaması
altKey Olay tetiklendiği anda eğer Alt tuşu basılıysa true değeri alır, değilse false. Alt tuşunun Mac sistemde karşılığı Option tuşudur.
ctrlKey Olay tetiklendiği anda eğer Ctrl tuşu basılıysa true değeri alır, değilse false.
data Eğer olay işleme fonksiyonunu çağırırken başka değerler de göndermek isterseniz, bind() metodunda olay isminden sonra ve fonksiyon tanımından önce ikinci bir parametreyi nesne şeklinde verirsiniz ve o nesne bu data özelliğine gelir.
keyCode keyup ve keydown olaylarını işlerken bu özellik basılan tuşun kodunu verir.
metaKey Olay tetiklendiğinde Meta tuşu basılıysa true değer alır. PClerde Meta tuşu Ctrl tuşudur. Mac'lerde Command tuşudur.
pageX Mouse olayları için olayın gerçekleştiği pozisyonun sayfa orjinine göre yatay koordinatını verir.
pageY Mouse olayları için olayın gerçekleştiği pozisyonun sayfa orjinine göre dikey koordinatını verir.
relatedTarget Bazı mouse olaylarında olay tetiklendiğinde mouse işaretçinin girdiği ya da terkettiği elemandır.
screenX Mouse olayları için olayın gerçekleştiği pozisyonun ekran orjinine göre yatay koordinatını verir.
screenY Mouse olayları için olayın gerçekleştiği pozisyonun ekran orjinine göre dikey koordinatını verir.
target Olayın tetiklendiği eleman değerini içerir.
timeStamp Olayın gerçekleştiği anın milisaniye olarak değeridir.
type Tüm olaylar için , tetiklenen olayın tipidir. Örneğin click.
which Tuş takımı olayları için olaya sebep olan tuşun kodudur. Mouse olayları için hangi butonun tıklandığıdır. (sol için 1, orta için 2, sağ için 3).

Örnek

Aşağıdaki örnekte farklı koordinatlarda kutulara tıklanınca olanlar işleniyor.

<!doctype html>
<html>
    <head>
        <title>jQuery Örneği</title>
        <script src="/jquery/jquery-3.7.1.min.js"></script>
        <!-- script src="/jquery/custom.js"></script -->
        <script>
            $(function() {
                $("div").click(function(olayNesnesi){
                    alert('Olay tipi ' + olayNesnesi.type);
                    alert('pageX : ' + olayNesnesi.pageX);
                    alert('pageY : ' + olayNesnesi.pageY);
                    alert('target : ' + olayNesnesi.target.innerHTML);
                });
            });
        </script>
    <style>
        div{ margin:10px; padding:12px; border:2px solid #666;
            width:60px; cursor:pointer}
    </style>
    </head>
    <body>
        <p>Herhangi bir kutuya tıklayın.</p>

        <div>Bir</div>
        <div>İki</div>
        <div>Üç</div>
    </body>
</html>

Herhangi bir kutuya tıklayın.

Bir
İki
Üç


Olay İşleyicideki this Kelimesi

Birçok seferinde olay işleyici fonksiyonu içinde this kelimesini kullanmak işleri kolaylaştırır. Bu değişken olayı tetikleyen DOM elemanı içerir.

Aşağıdaki örnek tıklanan <div> elemanı içinde yazanı gösterir.

<!doctype html>
<html>
    <head>
        <title>jQuery Örneği</title>
        <script src="/jquery/jquery-3.7.1.min.js"></script>
        <!-- script src="/jquery/custom.js"></script -->
        <script>
            $(function() {
                $("div").click(function(){
                    alert($(this).text());
                });
            });
        </script>
    <style>
        div{ margin:10px; padding:12px; border:2px solid #666;
            width:60px; cursor:pointer}
    </style>
    </head>
    <body>
        <p>Herhangi bir kutuya tıklayın.</p>

        <div>Bir</div>
        <div>İki</div>
        <div>Üç</div>
    </body>
</html>

Herhangi bir kutuya tıklayın.

Bir
İki
Üç


Olay İşleyicinin Kaldırılması

Normalde bir olay işleyici bir kere bağlandı mı sayfa yaşadığı müddetçe geçerlidir ve çalışır. Ama bazen olay işleyiciyi iptal etmek gerekebilir.

JQuery unbind() metodu mevcut bir olay işleyiciyi iptal etmek için kullanılır. unbind() metodunun kullanımı aşağıda görülüyor.

seçici.unbind(eventType, handler);

ya da

seçici.unbind(eventType);

Parametrelerin açıklaması şöyle :

  • eventType - JavaScript olay tipini barındıran string değer (submit ya da click gibi).
  • handler - Eğer verilmişse kaldırılacak olan olay işleyici fonksiyon adını içerir.



Eleman Özelliklerinin Manipülasyonu

JQuery , HTML elemanlarının bağlı özellik değerlerini değiştirmek için sıklıkla kullanılır. Her HTML elemanın değişik standart ya da kendine has özellikleri olabilir. Bunlar elemanın karakteristiğini belirler.

JQuery bize eleman özelliklerini okumak ya da değiştirmek için kolay yöntemler sunar. Öncelikle standart ve kendine has özellikler nelerdir, onlara bakalım.



Standart Özellikler

Çok kullanılan standart özeeliklerden bazıları :

  • className
  • tagName
  • id
  • href
  • title
  • rel
  • src
  • style


Örnek

Aşağıdaki resim elemanının özelliklerine bir bakalım.

<img id="id" src="image.gif" alt="Resim"
     class="class" title="Bu bir resim"/>

Bu elemanın kodlamasında tag ismi img, id, src, alt, class ve title elemanın standart özellikleridir. Her birinin bir adı ve bir değeri olur.



Elemana özel data-* Özellikler

HTML bize DOM elemanlarına isteğimize göre değişik özellik değerleri vermemiz için bir deyim yapısı sunuyor. Bu özelliklerin isimleri data- ile başlamalıdır.


Örnek

Aşağıdaki örnekte elemana özel değer olarak data-copyright özelliği kullanılmış.

<img data-copyright="UJK" id="imageid" src="image.gif" alt="Image"/>



JQuery - Standart Özelliğin Okunması

JQuery attr() metodu, bir HTML elemana ait standart özelliğin değerini okumak için kullanılır. JQuery seçici kullanarak eleman(lar) seçilir ve arkasından attr() metodu, parametresinde istenen özelliğin adı string olarak verilerek, istenen özellik okunur.

Eğer seçilen elemanlar birden çoksa bu method, jQuery Array iterasyonları ile işlenebilecek bir değer dönecektir.


Örnek

Aşağıda bir <a> elemanının href ve title özelliklerini okuyan bir örnek görülüyor.

<!doctype html>
<html>
    <head>
        <title>jQuery Örneği</title>
        <script src="/jquery/jquery-3.7.1.min.js"></script>
        <!-- script src="/jquery/custom.js"></script -->
        <script>
            $(function() {
                $("button").click(function(){
                    alert( "Href = " + $("#home").attr("href"));
                    alert( "Title = " + $("#home").attr("title"));
                });
            });
        </script>
    </head>
    <body>
        <p>Sonucu görmek için aşağıdaki butona tıklayın :</p>
       
        <p><a id="home" href="index.htm" title="JQuery Başlangıç">Home</a></p>
        <button>Özellikleri Oku</button>
    </body>
</html>

Sonucu görmek için aşağıdaki butona tıklayın :

Home




JQuery - Data-* Özellikleri Okumak

JQuery data() metodu elemana has özellikleri okumak amaçlı kullanılır. JQuery seçiler ile eleman(lar) seçilir ve data() metodu ile özellik okunur.


Örnek

Aşağıda bir <div> elemanından data-author-name özelliğinin değerinin nasıl okunacağı gösteriliyor.

<!doctype html>
<html>
    <head>
        <title>jQuery Örneği</title>
        <script src="/jquery/jquery-3.7.1.min.js"></script>
        <!-- script src="/jquery/custom.js"></script -->
        <script>
            $(function() {
                $("button").click(function(){
                    alert( "Yazar = " + $("#home").data("author-name"));
                    alert( "Yıl = " + $("#home").data("year"));
                });
            });
        </script>
    </head>
    <body>
        <p>Sonucu görmek için butona tıklayın :</p>
       
        <div id="home" data-author-name="Ümit Kayacık" data-year="2024">
            Örnek olarak bir içerik.
        </div>
        <br>
        <button>Özelliği Oku</button>
    </body>
</html>

Sonucu görmek için butona tıklayın :

Örnek olarak bir içerik.




JQuery - Standart Özellik Değerini Değiştirmek

JQuery attr(isim, değer) metodu ile elemanın ya da elemanların istenen değeri değiştirilir. JQuery seçiciler ile eleman(lar) seçilir ve attr(isim, değer) ile değer değiştirilir.

Eğer seçici ile birden fazla eleman bulunduysa , tüm bulunan elemanların ismi verilen özelliği verilen değere değiştirilir.


Örnek

Aşağıda bir <a> elemanının title değerinin değiştirilmesi gösteriliyor.

<!doctype html>
<html>
    <head>
        <title>jQuery Örneği</title>
        <script src="/jquery/jquery-3.7.1.min.js"></script>
        <!-- script src="/jquery/custom.js"></script -->
        <script>
            $(function() {
                $("button").click(function(){
                    $("#home").attr("title", "Yeni Anchor Title");
                   
                    /* Let's get and display changed title */
                    alert( "Değişen Title = " + $("#home").attr("title"));
                });
            });
        </script>
    </head>
    <body>
        <p>Sonucu görmek için aşağıdaki butona tıklayın :</p>
       
        <p><a id="home" href="index.htm" title="Eski Anchor Title">Home</a></p>
        <button>Özelliği Değiştir</button>
        <p>Yukarıdaki Home linkinin üzerine butonu tıklamadan önce ve sonra mouse
            işaretçisini getirip ipucu yazısına bakın.</p>
    </body>
</html>

Sonucu görmek için aşağıdaki butona tıklayın :

Home

Yukarıdaki Home linkinin üzerine butonu tıklamadan önce ve sonra mouse işaretçisini getirip ipucu yazısına bakın.




JQuery - Elemana Has Özellik Değerini Değiştirmek

JQuery data(isim, değer) metodu elemanın kendine has data-* özelliklerinin değerini değiştirmek için kullanılır.

Eğer seçici ile birden fazla eleman bulunduysa , tüm bulunan elemanların ismi verilen özelliği verilen değere değiştirilir.


Örnek

Aşağıdaki jQuery program bir <div> elemanının data-author-name adı verilen özelliğini değiştiriyor.

<!doctype html>
<html>
    <head>
        <title>jQuery Örneği</title>
        <script src="/jquery/jquery-3.7.1.min.js"></script>
        <!-- script src="/jquery/custom.js"></script -->
        <script>
            $(function() {
                $("button").click(function(){
                    $("#home").data("author-name", "Ümit Kayacık");

                    /* Değişen değeri okuyup gösterelim */
                    alert( "Değişen isim = " + $("#home").data("author-name"));
                });
            });
        </script>
    </head>
    <body>
        <p>Sonucu görmek için aşağıdaki butona tıklayın :</p>
       
        <div id="home" data-author-name="UJK" data-year="2024">
            Örnek bir içerik
        </div>
        <br>
        <button>Özelliği Değiştir</button>
    </body>
</html>

Sonucu görmek için aşağıdaki butona tıklayın :

Örnek bir içerik


Kısa bir not ekleyelim. Standart özelliklerden birinin değerini değiştirince , tarayıcınızın geliştirici araçlarında elemanlar listesinde direk görebilirsiniz. Ancak data-* özellikleri aynı yerde canlı değişimini görmeyebilirsiniz, ama JavaScript kodlarında yeni değer çalışacaktır.



JQuery - Ajax

AJAX kelimesi Asynchronous JavaScript and XML cümlesi başharflerinden oluşur. Bu teknik bize syfayı yeniden yüklemeden server'dan verileri okuma fırsatı verir.

AJAX teknolojisinde yeniyseniz, başlamadan önce temellerini öğrenmenizi tavsiye ederiz.

JQuery yeni jenerasyon web uygulamaları geliştirmenizi kolaylaştıracak birçok AJAX araçlarına sahiptir.



Basit Veri Yükleme

JQuery load() metodu ile statik ya da dinamik verileri kolayca jQuery AJAX kullanarak okuyabilirsiniz.


Deyim yapısı

load() metodunun temel deyim yapısı şöyle :

[seçici].load( URL, [veri], [callback] );

Parametrelerin açıklaması şöyle :

  • URL - AJAX veri isteğinin gönderileceği server'daki dosyanın URL değeri. Bu bir CGI, ASP, JSP veya PHP script yardımıyla üretilen dinamik veri olabileceği gibi statik bir dosya içeriği de okunabilir.
  • veri - eğer istenen verinin özelliklerini belirtmek üzere server'a bilgi gönderilecekse bu opsiyonel parametrede bu değer(ler) server'a gönderilir. Bu parametre verilmişse server'a istek POST olarak yapılır, parametre yoksa istek GET isteği olarak yapılır.
  • callback - Yükleme işlemi tamamlandığında yapılmasını istediklerimizi tanımladığımız olay işleme fonksiyonudur. Bu fonksiyona verilen ilk parametrede yapılan isteğe server'dan dönülen cevap vardır, ikinci parametre ise isteğin durum kodudur.

Örnek

Aşağıdaki örnekte bir HTML elemanın içeriğini server'daki başka bir dosyadan okuduğu değere değiştiren bir kod görülüyor.

<!doctype html>
<html>
    <head>
        <title>jQuery Örneği</title>
        <script src="/jquery/jquery-3.7.1.min.js"></script>
        <!-- script src="/jquery/custom.js"></script -->
        <script>
            $(function() {
                $("#driver").click(function(event){
                $('#stage').load('/jquery/result.html');
                });
            });
        </script>
    </head>
    <body>
        <p>Butona tıklayarak /jquery/result.html dosyasından içerik yükleyin −</p>
           
        <div id = "stage" style = "background-color:#cc0;">
            STAGE
        </div>
           
        <input type = "button" id = "driver" value = "Veri Yükle" />
    </body>
</html>

Server'da /jquery/result.html dosya içeriği de şöyle olsun

<h1>Server Cevabı</h1>

Butona tıklayarak /jquery/result.html dosyasından içerik yükleyin −

STAGE

Burada load() metodu belirtilen URL adresindeki /jquery/result.html dosyası için bir AJAX isteği başlatır. Yükleme tamamlanınca server'dan dönen cevap id değeri stage olan <div> elemanına içerik olarak yüklenir.



JSON Veri Getirmek

Eğer server'da veriyi JSON formatında bir text dosyada saklıyorsak, veriyi daha kolay işlemek için jQuery'nin getJSON() metodunu kullanarak veriyi okumak çok daha avantajlı olacaktır. getJSON() metodu load() metodu ile aynı parametreleri alır ama bir farkla. Olay işleme fonksiyonuna verilen ilk parametre sadece bir string olarak değil, geri dönen JSON değerin bir JavaScript nesne olmasını sağlar.


Örnek

Öncelikle veri dosyamızdan başlayalım. /jquery/result.json dosyamızın içinde şunlar olsun :

{
   "isim": "Ümit Kayacık",
   "yaş" : "58",
   "cinsiyet": "Erkek"
}

Şimdi de bir önceki örnekteki <div> elemanı içeriğini bu JSON veriye göre olay işleme fonksiyonu içinde değiştirelim.

<!doctype html>
<html>
    <head>
        <title>jQuery Örneği</title>
        <script src="/jquery/jquery-3.7.1.min.js"></script>
        <!-- script src="/jquery/custom.js"></script -->
        <script>
            $(function() {
                $("#driver").click(function(){
                    $.getJSON('/jquery/result.json', function(jd) {
                        $('#stage').html('<p> İsim: ' + jd.isim + '</p>');
                        $('#stage').append('<p> Yaş : ' + jd.yaş+ '</p>');
                        $('#stage').append('<p> Cinsiyet: ' + jd.cinsiyet+ '</p>');
                    });
                })
            });
        </script>
    </head>
    <body>
        <p>Butona tıklayarak /jquery/result.json dosyasından içerik yükleyin −</p>
           
        <div id = "stage" style = "background-color:#cc0;">
            STAGE
        </div>
           
        <input type = "button" id = "driver" value = "Veri Yükle" />
    </body>
</html>

Butona tıklayarak /jquery/result.json dosyasından içerik yükleyin −

STAGE

.

.