8.1 jQuery'yi Bağlama

Sonunda jQuery kütüphanesine geldik. Bu makale yazıldığı zaman, zaten geçerliliğini yitirmiştir ve yeni projelerde neredeyse hiç kullanılmamaktadır . Ancak bir zamanlar çok popülerdi, çok iyi belgelenmişti ve kullanımıyla ilgili internette pek çok örnek var .

Bu nedenle, küçük bir web projesi yazıyorsanız ve modern çerçeveleri öğrenmek için aylar harcamak istemiyorsanız, jQuery kitaplığını kullanmanızı tavsiye ederim.

Binlerce jQuery fonksiyonunu kullanabilmek için sayfanıza eklemeniz yeterlidir. Bunu şu şekilde yapabilirsiniz:


   <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   </head>

jQuery ile çalışmak iki türe ayrılabilir.

İlk olarak, özel bir jQuery nesnesine sarılmış normal bir HTML öğesi olan bir jQuery kitaplığı nesnesi elde edebilirsiniz.

İkincisi, jQuery, HTML öğelerine bağlı olmayan birkaç genel nesneye sahiptir. Ayrıca kullanılmaları gerekir.

İlki ile başlayalım.

8.2 Seçicilerle çalışma

jQuery, nesnelerle çalışmak için seçicileri kullanır (CSS'yi ve sınıflarını hatırlıyor musunuz?). Bu nedenle, jQuery'de, bir nesneyi veya nesne grubunu seçmek istiyorsanız, bunların seçicisini ayarlamanız gerekir.

Örnekler:

kod Tanım Not
1 $("div") DIV etiketli tüm nesneleri seçer birçok nesne
2 $("img.#resim123") IMG etiketi ve kimliği olan tüm nesneleri seçer == image123 bir nesne
3 $("#resim123") ID == image123 olan tüm nesneleri seçer bir nesne
4 $("div.article") DIV etiketli, sınıf makalesi olan tüm nesneleri seçer birçok nesne

Diyelim ki tüm bağlantılara olay işleme eklemek istiyoruz onclick, bunu jQuery ile şu şekilde yapabiliriz:


  $("a").click(function() {
    alert("Click");
  });

Burada üç adım atılır:

  1. Seçici ile eşleşen nesneleri alır "a".
  2. çağıran anonim bir işlev yaratıyoruz alert().
  3. clickBu işlevi, 1. noktadan itibaren tüm nesneler için bir olay işleyicisi olarak ayarladık .

jQuery ile ilgili bir başka güzel şey de kodunun kolay okunabilmesidir. Her şeyin nasıl çalıştığını anlamak çok zaman almaz. Çalışan bir kod varsa, ne işe yaradığını anlamak yeterince kolaydır.

8.3 Belge öğeleriyle çalışma

JQuery kullanarak bir belgeyle çalışmak için birkaç senaryoya bakalım.

Bir öğenin değerini alın (değerleri olan öğeler için):

var result = $ ("selector").value();

Öğe değerini ayarla (değerleri olan öğeler için):

$ ("selector").value(newValue);

Bazı öğelerin içine HTML nasıl eklenir?

$ ("selector").html(newHTML);

Ve öğenin içindeki HTML'yi nasıl edinebilirim?

var html = $ ("selector").html();

HTML değil, düz metin almak/eklemek istersem ne olur? Burada da sürpriz yok.

var html = $ ("selector").text();

Bir öğenin rengini almak/değiştirmek istersem ne olur?

$ ("selector").color("red");

Stillerle çalışmanız gerekiyorsa, bunu yapmak da kolaydır:

$ ("selector").css("color", "red");

Yeni bir eleman nasıl eklenir?

$ (".container").append($("h3"));
Java university