Scribd
Upload
6 views108 pages

7 JQuery

Uploaded by

efege0906
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views108 pages

7 JQuery

Uploaded by

efege0906
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

12/23/2021 1

Js
 jQuery bir JavaScript Kitaplığıdır.
 jQuery, JavaScript programlamayı büyük ölçüde basitleştirir.
 jQuery'i öğrenmesi kolaydır.
 jQuery'nin amacı, web sitenizde JavaScript'i kullanmayı çok daha kolay hale getirmektir.

jQuery çalışmaya başlamadan önce, aşağıdakiler hakkında temel bilgilere sahip
olmalısınız:

 HTML
 CSS
 JavaScript

12/23/2021 2
Js
 jQuery nedir?
 jQuery, hafif, "daha az yaz, daha fazlasını yap", JavaScript kitaplığıdır.

 jQuery'nin amacı, web sitenizde JavaScript'i kullanmayı çok daha kolay hale getirmektir.

 jQuery, gerçekleştirmek için birçok JavaScript kodu satırı gerektiren birçok yaygın görevi üstlenir ve
bunları tek bir kod satırıyla çağırabileceğiniz yöntemlere sarar.

 jQuery, JavaScript'teki AJAX çağrıları ve DOM manipülasyonu gibi birçok karmaşık şeyi de
basitleştirir.

 jQuery kitaplığı aşağıdaki özellikleri içerir:

 HTML/DOM manipülasyonu
 CSS manipülasyonu
 HTML olay yöntemleri
 Efektler ve animasyonlar
 AJAX
 Araçlar
 İpucu: Ayrıca, jQuery'de hemen hemen her görev için eklentiler bulunur.

12/23/2021 3
Js
 Neden jQuery?
 Dışarıda birçok JavaScript kitaplığı var, ancak jQuery muhtemelen en popüler ve aynı
zamanda en genişletilebilir olanıdır.

 Web'deki en büyük şirketlerin çoğu jQuery kullanıyor, örneğin:

 Google
 Microsoft
 IBM
 Netflix
 jQuery tüm tarayıcılarda çalışır mı?

 jQuery ekibi, tarayıcılar arası sorunlar hakkında her şeyi bilir ve bu bilgiyi jQuery
kitaplığına yazmışlardır. jQuery, tüm büyük tarayıcılarda tam olarak aynı şekilde çalışır.

12/23/2021 4
Js
 Web Sayfalarınıza jQuery Ekleme
 Web sitenizde jQuery kullanmaya başlamanın birkaç yolu vardır. Yapabilirsiniz:

 jQuery kitaplığını [Link]'dan indirin


 Google gibi bir CDN'den jQuery ekleyin

jQuery indiriliyor
 İndirilebilecek iki jQuery sürümü vardır:

 Üretim versiyonu - bu, küçültülmüş ve sıkıştırılmış olduğundan canlı web siteniz içindir.
 Geliştirme sürümü - bu, test etme ve geliştirme içindir (sıkıştırılmamış ve okunabilir kod)
 Her iki sürüm de [Link]'dan indirilebilir.

 jQuery kitaplığı tek bir JavaScript dosyasıdır ve ona HTML <script> etiketiyle
başvurursunuz (<script> etiketinin <head> bölümünün içinde olması gerektiğine dikkat
edin):
İpucu: İndirilen dosyayı, kullanmak istediğiniz sayfalarla aynı dizine yerleştirin.

12/23/2021 5
Js
 jQuery CDN'si
 jQuery'yi kendiniz indirmek ve barındırmak istemiyorsanız, bunu bir CDN'den (İçerik
Dağıtım Ağı) ekleyebilirsiniz.

 Google, jQuery'yi barındıran birine bir örnektir:

12/23/2021 6
jQuery Syntax
 jQuery ile HTML öğelerini seçer (sorgular) ve bunlar üzerinde "eylemler" gerçekleştirirsiniz.

 jQuery sözdizimi, HTML öğelerini seçmek ve öğeler üzerinde bazı eylemler gerçekleştirmek
için özel olarak hazırlanmıştır.

 Temel sözdizimi: $(selector).action()


 jQuery'yi tanımlamak/erişmek için bir $ işareti
 HTML öğelerini "sorgulamak (veya bulmak)" için bir seçici (selector).
 Öğe(ler) üzerinde gerçekleştirilecek bir jQuery action()
Örnekler:

 $(this).hide() - geçerli öğeyi gizler.

 $("p").hide() - tüm <p> öğelerini gizler.

 $(".test").hide() - class="test" ile tüm öğeleri gizler.

 $("#test").hide() - id="test" ile öğeyi gizler.

12/23/2021 7
Js
 Belge Hazır Etkinliği
 Örneklerimizdeki tüm jQuery yöntemlerinin bir belgeye hazır olay içinde olduğunu fark
etmiş olabilirsiniz:

 Bu, herhangi bir jQuery kodunun belgenin yüklenmesi bitmeden (hazır olmadan)
çalışmasını önlemek içindir.

 Belgeyle çalışmadan önce belgenin tam olarak yüklenmesini ve hazır olmasını beklemek
iyi bir uygulamadır. Bu aynı zamanda JavaScript kodunuzu belgenizin gövdesinden önce,
başlık bölümünde bulundurmanıza da olanak tanır.

12/23/2021 8
Js
 Belge tamamen yüklenmeden önce yöntemler çalıştırılırsa başarısız olabilecek bazı eylem
örnekleri şunlardır:

 Henüz oluşturulmamış bir öğeyi gizlemeye çalışmak


 Henüz yüklenmemiş bir görüntünün boyutunu almaya çalışmak
 İpucu: jQuery ekibi ayrıca belgeye hazır olayı için daha da kısa bir yöntem oluşturdu:

 Tercih ettiğiniz sözdizimini kullanın. Belge hazır olayının kodu okurken anlaşılmasının
daha kolay olduğunu düşünüyoruz.

12/23/2021 9
jQuery Selectors
 jQuery seçicileri, jQuery kitaplığının en önemli parçalarından biridir.

 jQuery Seçiciler
 jQuery seçicileri, HTML öğelerini seçmenize ve değiştirmenize olanak tanır.

 jQuery seçicileri, adlarına, kimliklerine, sınıflarına, türlerine, özelliklerine, öznitelik


değerlerine ve çok daha fazlasına dayalı olarak HTML öğelerini "bulmak" (veya seçmek)
için kullanılır. Mevcut CSS Seçicileri temel alır ve ayrıca bazı özel seçicileri vardır.

 jQuery'deki tüm seçiciler dolar işareti ve parantez ile başlar: $().

12/23/2021 10
Js
 eleman Seçici
 jQuery öğe seçici, öğeleri öğe adına göre seçer.

 Aşağıdaki gibi bir sayfadaki tüm <p> öğelerini seçebilirsiniz:

 $("p")
 Örnek

 Bir kullanıcı bir düğmeye tıkladığında, tüm <p> öğeleri gizlenecektir:

12/23/2021 11
Js
 #id Seçici
 jQuery #id seçici, belirli öğeyi bulmak için bir HTML etiketinin id niteliğini kullanır.

 Bir sayfa içinde bir kimlik benzersiz olmalıdır, bu nedenle tek, benzersiz bir öğe bulmak
istediğinizde #id seçiciyi kullanmalısınız.

 Belirli bir kimliğe sahip bir öğe bulmak için, bir karma karakter ve ardından HTML
öğesinin kimliğini yazın:
 $("#test")
 Örnek
 Bir kullanıcı bir düğmeye tıkladığında, id="test" olan öğe gizlenir:

12/23/2021 12
Js
 .class Seçici
 jQuery .class seçicisi, belirli bir sınıfa sahip öğeleri bulur.

 Belirli bir sınıfa sahip öğeleri bulmak için, bir nokta karakteri ve ardından sınıfın adını
yazın:
 $(".test")
 Örnek
 Bir kullanıcı bir düğmeye tıkladığında, class="test" olan öğeler gizlenir:

12/23/2021 13
Daha Fazla jQuery Seçici Örneği
 $("*") Tüm öğeleri seçer
 $(this) Geçerli HTML öğesini seçer
 $("[Link]") class="intro" ile tüm <p> öğelerini seçer
 $("p:first") İlk <p> öğesini seçer
 $("ul li:first") İlk <ul> öğesinin ilk <li> öğesini seçer
 $("ul li:first-child") Her <ul> öğesinin ilk <li> öğesini seçer
 $("[href]") Bir href niteliğine sahip tüm öğeleri seçer
 $("a[target='_blank']") "_blank" hedef öznitelik değerine eşit olan tüm <a> öğelerini seçer
 $("a[target!='_blank']") "_blank" değerine eşit OLMAYAN bir hedef öznitelik değerine
sahip tüm <a> öğelerini seçer
 $(":button") type="button" öğesinin tüm <button> öğelerini ve <input> öğelerini seçer
 $("tr:even") Tüm çift <tr> öğelerini seçer
 $("tr:odd") Tüm tek <tr> öğelerini seçer

12/23/2021 14
Js
 Ayrı Bir Dosyadaki İşlevler
 Web siteniz çok sayıda sayfa içeriyorsa ve jQuery işlevlerinizin bakımının kolay olmasını
istiyorsanız, jQuery işlevlerinizi ayrı bir .js dosyasına koyabilirsiniz.

 Bu öğreticide jQuery'yi gösterdiğimizde, işlevler doğrudan <head> bölümüne eklenir.


Ancak bazen bunları aşağıdaki gibi ayrı bir dosyaya yerleştirmek tercih edilir (.js
dosyasına atıfta bulunmak için src niteliğini kullanın):

12/23/2021 15
jQuery Event Methods
 jQuery, bir HTML sayfasındaki olaylara yanıt vermek için özel olarak yapılmıştır.

 Olaylar nedir?
 Bir web sayfasının yanıt verebileceği tüm farklı ziyaretçilerin eylemlerine olay denir.

 Bir olay, bir şeyin olduğu kesin anı temsil eder.

 Örnekler:

 bir öğenin üzerinde fareyi hareket ettirmek


 radyo düğmesi seçme
 bir öğeye tıklamak
 "Yangınlar/ateşler" terimi genellikle olaylarla birlikte kullanılır. Örnek: "Bir tuşa
bastığınız anda tuşa basma olayı tetiklenir".

12/23/2021 16
Js
 İşte bazı yaygın DOM olayları:

Olay Yöntemleri için jQuery Sözdizimi


 jQuery'de çoğu DOM olayının eşdeğer bir jQuery yöntemi vardır.

 Bir sayfadaki tüm paragraflara bir tıklama olayı atamak için şunu yapabilirsiniz:

 $("p").click();
 Bir sonraki adım, olay başladığında ne olacağını tanımlamaktır. Olaya bir işlev
iletmelisiniz:

 $("p").click(function(){
 // eylem buraya geliyor!!
 });

12/23/2021 17
Js
 Yaygın Olarak Kullanılan jQuery Olay Yöntemleri
 $(document).ready()

 $(document).ready() yöntemi, belge tamamen yüklendiğinde bir işlevi yürütmemize izin


verir. Bu olay, jQuery Syntax bölümünde zaten açıklanmıştır.

 click()

 click() yöntemi, bir HTML öğesine bir olay işleyici işlevi ekler.

 İşlev, kullanıcı HTML öğesine tıkladığında yürütülür.

 Aşağıdaki örnek şöyle diyor: Bir <p> öğesinde bir click olayı tetiklendiğinde; geçerli <p>
öğesini gizle:

12/23/2021 18
Js
 dblclick()
 dblclick() yöntemi, bir HTML öğesine bir olay işleyici işlevi ekler.
 İşlev, kullanıcı HTML öğesine çift tıkladığında yürütülür:

 mouseenter()
 mouseenter() yöntemi, bir HTML öğesine bir olay işleyici işlevi ekler.
 İşlev, fare işaretçisi HTML öğesine girdiğinde yürütülür:

 mouseleave()
 mouseleave() yöntemi, bir HTML öğesine bir olay işleyici işlevi ekler.
 İşlev, fare işaretçisi HTML öğesinden ayrıldığında yürütülür:

12/23/2021 19
 mousedown()
 mousedown() yöntemi, bir HTML öğesine bir olay işleyici işlevi ekler.
 İşlev, fare HTML öğesinin üzerindeyken sol, orta veya sağ fare düğmesine basıldığında
yürütülür:

 mouseup()
 mouseup() yöntemi, bir HTML öğesine bir olay işleyici işlevi ekler.
 İşlev, fare HTML öğesinin üzerindeyken sol, orta veya sağ fare düğmesi bırakıldığında
yürütülür:

 hover()
 hover() yöntemi iki işlev alır ve mouseenter() ve mouseleave() yöntemlerinin bir
birleşimidir. İlk işlev, fare HTML öğesine girdiğinde yürütülür ve ikinci işlev, fare HTML
öğesinden ayrıldığında yürütülür:

12/23/2021 20
 Focus()
 Focus() yöntemi, bir HTML form alanına bir olay işleyici işlevi ekler.
 İşlev, form alanı odaklandığında yürütülür:

 blur()
 blur() yöntemi, bir HTML form alanına bir olay işleyici işlevi ekler.
 İşlev, form alanı odağı kaybettiğinde yürütülür:

on() Yöntemi
 on() yöntemi, seçilen öğeler için bir veya daha fazla olay işleyicisi ekler.
 Bir <p> öğesine bir tıklama olayı ekleyin:

12/23/2021 21
Js
 Bir <p> öğesine birden çok olay işleyici ekleyin:

12/23/2021 22
jQuery Effects - Hide and Show
 Gizle, Göster, Değiştir, Kaydır, Soldur ve Canlandır.
Örnekler
 jQuery hide()
Basit bir jQuery hide() yöntemini gösterir.

 jQuery hide()
Başka bir hide() gösterimi. Metnin bölümleri nasıl gizlenir.

jQuery gizle() ve göster()


 jQuery ile, hide() ve show() yöntemleriyle HTML öğelerini gizleyebilir ve
gösterebilirsiniz:

12/23/2021 23
 İsteğe bağlı hız parametresi gizleme/gösterme hızını belirtir ve şu değerleri alabilir:
"yavaş", "hızlı" veya milisaniye.

 İsteğe bağlı geri arama parametresi, hide() veya show() yöntemi tamamlandıktan sonra
yürütülecek bir işlevdir (geri arama işlevleri hakkında daha sonraki bir bölümde daha
fazla bilgi edineceksiniz).

 Aşağıdaki örnek, hide() ile hız parametresini göstermektedir:

 Örnek

12/23/2021 24
 jQuery toggle()- jQuery geçişi()
 Ayrıca toggle() yöntemiyle bir öğeyi gizleme ve gösterme arasında geçiş yapabilirsiniz.
 Gösterilen öğeler gizlidir ve gizli öğeler gösterilir:

 İsteğe bağlı hız parametresi şu değerleri alabilir: "yavaş", "hızlı" veya milisaniye.

 İsteğe bağlı geri çağırma parametresi, toggle() tamamlandıktan sonra yürütülecek bir
işlevdir.

12/23/2021 25
jQuery Effects - Fading
 jQuery ile öğeleri görünürlükte ve görünürlükten uzaklaştırabilirsiniz.
Örnekler
 jQuery fadeIn()
 jQuery fadeIn() yöntemini gösterir.

 jQuery fadeOut()
 jQuery fadeOut() yöntemini gösterir.

 jQuery fadeToggle()
 jQuery fadeToggle() yöntemini gösterir.

 jQuery fadeTo()
 jQuery fadeTo() yöntemini gösterir.

12/23/2021 26
Js
 jQuery fadeIn() Yöntemi
 jQuery fadeIn() yöntemi, gizli bir öğede soldurmak için kullanılır.

 Sözdizimi:

 $(selector).fadeIn(speed,callback);
İsteğe bağlı hız parametresi, etkinin süresini belirtir. Şu değerleri alabilir: "slow", "fast", or milliseconds.

 İsteğe bağlı geri çağırma parametresi, sönümleme tamamlandıktan sonra yürütülecek bir işlevdir.

 Aşağıdaki örnek, fadeIn() yöntemini farklı parametrelerle göstermektedir:

12/23/2021 27
Js
 fadeOut() Yöntemini Sorgula
 jQuery fadeOut() yöntemi, görünür bir öğeyi karartmak için kullanılır.

 Sözdizimi:
 $(selector).fadeOut(speed,callback);
İsteğe bağlı hız parametresi, etkinin süresini belirtir. Şu değerleri alabilir: "slow", "fast", or
milliseconds.

 İsteğe bağlı geri çağırma parametresi, sönümleme tamamlandıktan sonra yürütülecek bir
işlevdir.
 Aşağıdaki örnek, farklı parametrelerle fadeOut() yöntemini gösterir:

12/23/2021 28
Js
 jQuery fadeToggle() Yöntemi
 jQuery fadeToggle() yöntemi, fadeIn() ve fadeOut() yöntemleri arasında geçiş yapar.

 Sözdizimi:

 $(selector).fadeToggle(speed,callback);
İsteğe bağlı hız parametresi, etkinin süresini belirtir. Şu değerleri alabilir: "slow", "fast", or
milliseconds.

 İsteğe bağlı geri çağırma parametresi, sönümleme tamamlandıktan sonra yürütülecek bir
işlevdir.
 Aşağıdaki örnek, farklı parametrelerle fadeToggle() yöntemini gösterir:

12/23/2021 29
Js
 jQuery fadeTo() Yöntemi
 jQuery fadeTo() yöntemi, belirli bir opaklığa (0 ile 1 arasındaki değer) solmaya izin verir.

 Sözdizimi:
 $(selector).fadeTo(speed,opacity,callback);
Gerekli hız parametresi, etkinin süresini belirtir. Şu değerleri alabilir: "slow", "fast", or
milliseconds.
 fadeTo() yöntemindeki gerekli opaklık parametresi, belirli bir opaklığa (0 ile 1 arasındaki
değer) geçişi belirtir.
 İsteğe bağlı geri arama parametresi, işlev tamamlandıktan sonra yürütülecek bir işlevdir.
 Aşağıdaki örnek, fadeTo() yöntemini farklı parametrelerle gösterir:

12/23/2021 30
jQuery Effects - Sliding
 jQuery slayt yöntemleri, öğeleri yukarı ve aşağı kaydırır.
jQuery ile öğeler üzerinde kayan bir efekt oluşturabilirsiniz.

Örnekler
 jQuery slaytDown()
 jQuery slideDown() yöntemini gösterir.

 jQuery slideUp()
 jQuery slideUp() yöntemini gösterir.

 jQuery slaytToggle()
 jQuery slideToggle() yöntemini gösterir.

12/23/2021 31
Js
 jQuery slideDown() Yöntemi
 jQuery slideDown() yöntemi, bir öğeyi aşağı kaydırmak için kullanılır.

 Sözdizimi:

 $(selector).slideDown(speed,callback);
İsteğe bağlı hız parametresi, etkinin süresini belirtir. Şu değerleri alabilir: "slow", "fast", or
milliseconds.
 İsteğe bağlı geri çağırma parametresi, kaydırma tamamlandıktan sonra yürütülecek bir
işlevdir.
 Aşağıdaki örnek, slideDown() yöntemini gösterir:

12/23/2021 32
Js
 jQuery slideUp() Yöntemi
 jQuery slideUp() yöntemi, bir öğeyi yukarı kaydırmak için kullanılır.

 Sözdizimi:

 $(selector).slideUp(speed,callback);
İsteğe bağlı hız parametresi, etkinin süresini belirtir. Şu değerleri alabilir: "slow", "fast",
or milliseconds.

 İsteğe bağlı geri çağırma parametresi, kaydırma tamamlandıktan sonra yürütülecek bir
işlevdir.

 Aşağıdaki örnek, slideUp() yöntemini gösterir:

12/23/2021 33
Js
 jQuery slideToggle() Yöntemi
 jQuery slideToggle() yöntemi, slideDown() ve slideUp() yöntemleri arasında geçiş yapar.

 Öğeler aşağı kaydırıldıysa, slideToggle() onları yukarı kaydırır.

 Öğeler yukarı kaydırıldıysa, slideToggle() onları aşağı kaydırır.

 $(selector).slideToggle(speed,callback);
İsteğe bağlı hız parametresi şu değerleri alabilir: "slow", "fast", milliseconds.

 İsteğe bağlı geri çağırma parametresi, kaydırma tamamlandıktan sonra yürütülecek bir
işlevdir.
 Aşağıdaki örnek, slideToggle() yöntemini gösterir:

12/23/2021 34
jQuery Effects - Animation
 jQuery ile özel animasyonlar oluşturabilirsiniz.
jQuery Animations - The animate() Method
jQuery animate() yöntemi, özel animasyonlar oluşturmak için kullanılır.

 Sözdizimi:
 $(selector).animate({params},speed,callback);
Gerekli params parametresi, canlandırılacak CSS özelliklerini tanımlar.
 İsteğe bağlı hız parametresi, etkinin süresini belirtir. Şu değerleri alabilir: "slow", "fast", or
milliseconds.
 İsteğe bağlı geri arama parametresi, animasyon tamamlandıktan sonra yürütülecek bir
işlevdir.
 Aşağıdaki örnek, animate() yönteminin basit bir kullanımını gösterir; 250 piksellik bir sol
özelliğe ulaşana kadar bir <div> öğesini sağa hareket ettirir:

12/23/2021 35
Js
 jQuery animate() - Birden Çok Özelliği Değiştir
 Birden çok özelliğin aynı anda canlandırılabileceğine dikkat edin:

 animate() yöntemiyle TÜM CSS özelliklerini değiştirmek mümkün müdür?

 Evet neredeyse! Ancak hatırlanması gereken önemli bir şey var: animate() yöntemiyle
kullanıldığında tüm özellik adları büyük harfle yazılmalıdır: padding-left yerine
paddingLeft, margin-right yerine marginRight vb. yazmanız gerekir.

 Ayrıca, renk animasyonu çekirdek jQuery kitaplığına dahil değildir.

12/23/2021 36
jQuery animate() - Using
Relative Values
 jQuery animate() - Göreli Değerleri Kullanma
 Göreceli değerler tanımlamak da mümkündür (bu durumda değer, elemanın mevcut
değerine göredir). Bu, değerin önüne += veya -= koyarak yapılır:

12/23/2021 37
jQuery animate() –
Using Relative Values
 jQuery animate() - Önceden Tanımlanmış Değerleri Kullanma

 Hatta bir özelliğin animasyon değerini "göster", "gizle" veya "değiştir" olarak
belirleyebilirsiniz:

jQuery animate() - Kuyruk İşlevini kullanır


 Varsayılan olarak jQuery, animasyonlar için kuyruk işleviyle birlikte gelir.

 Bu, birbiri ardına birden fazla animate() çağrısı yazarsanız, jQuery'nin bu yöntem
çağrılarıyla bir "dahili" kuyruk oluşturduğu anlamına gelir. Ardından, ONE by ONE
animate çağrılarını çalıştırır.

 Bu nedenle, birbiri ardına farklı animasyonlar yapmak istiyorsanız, sıra işlevinden


yararlanıyoruz:

12/23/2021 38
Js


Aşağıdaki örnek önce <div> öğesini sağa taşır ve ardından metnin yazı tipi boyutunu
artırır:

12/23/2021 39
Js
 jQuery Durdurma Animasyonları
jQuery stop() yöntemi, animasyonları veya efektleri bitmeden durdurmak için kullanılır.
jQuery stop() kayması
 jQuery stop() yöntemini gösterir.

 jQuery stop() animasyonu (parametrelerle)


 jQuery stop() yöntemini gösterir.

 jQuery stop() Yöntemi


 jQuery stop() yöntemi, bir animasyonu veya efekti bitmeden durdurmak için kullanılır.

 stop() yöntemi, kaydırma, solma ve özel animasyonlar dahil tüm jQuery efekt işlevleri
için çalışır.

12/23/2021 40
Js
 İsteğe bağlı stopAll parametresi, animasyon kuyruğunun da temizlenip
temizlenmeyeceğini belirtir. Varsayılan yanlıştır; bu, yalnızca etkin animasyonun
durdurulacağı ve daha sonra sıraya alınmış animasyonların gerçekleştirilmesine izin
verileceği anlamına gelir.

 İsteğe bağlı goToEnd parametresi, mevcut animasyonun hemen tamamlanıp


tamamlanmayacağını belirtir. Varsayılan yanlıştır.

 Bu nedenle, varsayılan olarak stop() yöntemi, seçili öğe üzerinde gerçekleştirilen geçerli
animasyonu öldürür.

 Aşağıdaki örnek, parametresiz stop() yöntemini gösterir:

12/23/2021 41
jQuery Callback Functions
 Geçerli efekt %100 tamamlandıktan sonra bir geri arama işlevi yürütülür.

 jQuery Geri Çağırma İşlevleri


 JavaScript ifadeleri satır satır yürütülür. Ancak efektlerle, efekt bitmese bile sonraki kod
satırı çalıştırılabilir. Bu hatalar oluşturabilir.

 Bunu önlemek için bir geri arama işlevi oluşturabilirsiniz.

 Geçerli efekt bittikten sonra bir geri arama işlevi yürütülür.

 Tipik sözdizimi: $(selector).hide(speed,callback);


 Örnekler

 Aşağıdaki örnekte, hide efekti tamamlandıktan


sonra yürütülecek bir işlev olan bir geri çağırma parametresi vardır:

12/23/2021 42
Js
 Aşağıdaki örnekte geri arama parametresi yoktur ve gizleme efekti tamamlanmadan önce
uyarı kutusu görüntülenecektir:

12/23/2021 43
jQuery - Chaining
 jQuery ile eylemleri/yöntemleri birbirine zincirleyebilirsiniz.

 Zincirleme, tek bir ifade içinde birden çok jQuery yöntemini (aynı öğe üzerinde)
çalıştırmamıza olanak tanır.

 jQuery Yöntem Zincirleme


 Şimdiye kadar jQuery deyimlerini teker teker (birbiri ardına) yazıyorduk.

 Ancak, aynı eleman(lar) üzerinde birbiri ardına birden fazla jQuery komutu çalıştırmamıza
izin veren zincirleme adı verilen bir teknik vardır.

 İpucu: Bu şekilde, tarayıcıların aynı öğeyi/elemanları bir kereden fazla bulması gerekmez.

 Bir eylemi zincirlemek için, eylemi önceki eyleme eklemeniz yeterlidir.

 Aşağıdaki örnek, css(), slideUp() ve slideDown() yöntemlerini birbirine zincirler. "p1" öğesi
önce kırmızıya döner, sonra yukarı kayar ve ardından aşağı kayar:

12/23/2021 44
jQuery
 Gerekirse daha fazla yöntem çağrısı ekleyebilirdik.

 İpucu: Zincirleme yaparken kod satırı oldukça uzun olabilir. Ancak, jQuery sözdizimi
konusunda çok katı değildir; satır sonları ve girintiler dahil olmak üzere istediğiniz gibi
biçimlendirebilirsiniz.

 Bu da gayet iyi çalışıyor:

 jQuery fazladan boşlukları atar ve yukarıdaki satırları uzun bir kod satırı olarak yürütür.

12/23/2021 45
jQuery - Get Content and
Attributes
 jQuery, HTML öğelerini ve niteliklerini değiştirmek ve işlemek için güçlü yöntemler
içerir.

 jQuery DOM Manipülasyonu


 JQuery'nin çok önemli bir parçası, DOM'yi manipüle etme olasılığıdır.

 jQuery, öğelere ve niteliklere erişmeyi ve bunları değiştirmeyi kolaylaştıran bir dizi DOM
ile ilgili yöntemle birlikte gelir.

 DOM = Belge Nesne Modeli

 DOM, HTML ve XML belgelerine erişim için bir standart tanımlar:

 "W3C Belge Nesne Modeli (DOM), programların ve komut dosyalarının bir belgenin
içeriğine, yapısına ve stiline dinamik olarak erişmesine ve bunları güncellemesine olanak
tanıyan, platform ve dilden bağımsız bir arabirimdir."

12/23/2021 46
Get Content - text(), html(), and
val()
 Get Content - text(), html(), and val()

DOM manipülasyonu için üç basit ama kullanışlı jQuery yöntemi:

 text() - Seçili öğelerin metin içeriğini ayarlar veya döndürür


 html() - Seçili öğelerin içeriğini ayarlar veya döndürür (HTML işaretlemesi dahil)
 val() - Form alanlarının değerini ayarlar veya döndürür
 Aşağıdaki örnek, jQuery text() ve html() yöntemleriyle nasıl içerik alınacağını gösterir:

12/23/2021 47
jQuery
 Aşağıdaki örnek, jQuery val() yöntemiyle bir giriş alanının değerinin nasıl alınacağını
gösterir:

12/23/2021 48
Get Attributes - attr()
 Öznitelik değerlerini almak için jQuery attr() yöntemi kullanılır.

 Aşağıdaki örnek, bir bağlantıdaki href özniteliğinin değerinin nasıl alınacağını gösterir:

12/23/2021 49
jQuery - Set Content and
Attributes
 İçeriği Ayarla - text(), html() ve val()
 İçeriği ayarlamak için önceki sayfadaki aynı üç yöntemi kullanacağız:

 text() - Seçili öğelerin metin içeriğini ayarlar veya döndürür


 html() - Seçili öğelerin içeriğini ayarlar veya döndürür (HTML işaretlemesi dahil)
 val() - Form alanlarının değerini ayarlar veya döndürür
 Aşağıdaki örnek, jQuery text(), html() ve val() yöntemleriyle içeriğin nasıl ayarlanacağını
gösterir:

12/23/2021 50
A Callback Function for text(),
html(), and val()
 text(), html() ve val() için bir Geri Çağırma İşlevi
 Yukarıdaki üç jQuery yönteminin tümü: text(), html() ve val(), ayrıca bir geri arama
işleviyle birlikte gelir. Geri arama işlevinin iki parametresi vardır: seçilen öğeler
listesindeki geçerli öğenin dizini ve orijinal (eski) değer. Ardından, işlevden yeni değer
olarak kullanmak istediğiniz dizeyi döndürürsünüz.
 Aşağıdaki örnek, bir geri arama işleviyle text() ve html()'yi gösterir:

12/23/2021 51
Set Attributes - attr()
 jQuery attr() yöntemi, öznitelik değerlerini ayarlamak/değiştirmek için de kullanılır.
 Aşağıdaki örnek, bir bağlantıdaki href özniteliğinin değerinin nasıl değiştirileceğini
(ayarlanacağını) gösterir:

 attr() yöntemi, aynı anda birden çok özniteliği ayarlamanıza da olanak tanır.
 Aşağıdaki örnek, hem href hem de başlık özniteliklerinin aynı anda nasıl ayarlanacağını
gösterir:

12/23/2021 52
A Callback Function for attr()
 jQuery yöntemi attr() ayrıca bir geri arama işleviyle birlikte gelir. Geri arama işlevinin iki
parametresi vardır: seçilen öğeler listesindeki geçerli öğenin dizini ve orijinal (eski)
öznitelik değeri. Ardından, işlevden yeni öznitelik değeri olarak kullanmak istediğiniz
dizeyi döndürürsünüz.

 Aşağıdaki örnek, bir geri arama işleviyle attr() öğesini gösterir:

12/23/2021 53
jQuery - Add Elements
 jQuery ile yeni öğeler/içerik eklemek kolaydır.

 Yeni HTML İçeriği Ekle


 Yeni içerik eklemek için kullanılan dört jQuery yöntemine bakacağız:

 append() - Seçili öğelerin sonuna içerik ekler


 prepend() - Seçili öğelerin başına içerik ekler
 after() - İçeriği seçilen öğelerden sonra ekler
 önce() - İçeriği seçilen öğelerden önce ekler

 jQuery append() Yöntemi


 jQuery append() yöntemi, seçilen HTML öğelerinin SONUNA içerik ekler.

12/23/2021 54
jQuery
 jQuery prepend() Yöntem
 jQuery prepend() yöntemi, içeriği seçilen HTML öğelerinin BAŞLANGIÇINDA ekler.

 Append() ve prepend() ile Birkaç Yeni Öğe Ekleme

 Yukarıdaki her iki örnekte de, seçilen HTML öğelerinin başına/sonuna yalnızca bir
miktar metin/HTML ekledik.

 Ancak, hem append() hem de prepend() yöntemleri, parametre olarak sonsuz sayıda yeni
öğe alabilir. Yeni öğeler, metin/HTML ile (yukarıdaki örneklerde yaptığımız gibi), jQuery
ile veya JavaScript kodu ve DOM öğeleriyle oluşturulabilir.

 Aşağıdaki örnekte, birkaç yeni öğe oluşturuyoruz. Öğeler metin/HTML, jQuery ve


JavaScript/DOM ile oluşturulur. Ardından, append() yöntemiyle metne yeni öğeleri
ekleriz (bu, prepend() için de işe yarardı):

12/23/2021 55
jQuery

 jQuery after() ve Before() Yöntemleri


 jQuery after() yöntemi, içeriği seçilen HTML öğelerinden SONRA ekler.
 jQuery Before() yöntemi, içeriği seçilen HTML öğelerinden ÖNCE ekler.

12/23/2021 56
jQuery
 after() ve Before() ile Birkaç Yeni Öğe Ekleme
 Ayrıca, hem after() hem de Before() yöntemleri, parametre olarak sonsuz sayıda yeni öğe
alabilir. Yeni öğeler, metin/HTML ile (yukarıdaki örnekte yaptığımız gibi), jQuery ile veya
JavaScript kodu ve DOM öğeleriyle oluşturulabilir.

 Aşağıdaki örnekte, birkaç yeni öğe oluşturuyoruz. Öğeler metin/HTML, jQuery ve


JavaScript/DOM ile oluşturulur. Sonra metne after() yöntemiyle yeni öğeleri ekleriz (bu,
Before() için de işe yarardı):

12/23/2021 57
jQuery - Remove Elements
 jQuery ile mevcut HTML öğelerini kaldırmak kolaydır.

 Öğeleri/İçeriği Kaldır
 Öğeleri ve içeriği kaldırmak için başlıca iki jQuery yöntemi vardır:

 remove() - Seçili öğeyi (ve onun alt öğelerini) kaldırır


 empty() - Seçili öğeden alt öğeleri kaldırır
 jQuery remove() Yöntemi
 jQuery remove() yöntemi, seçili öğeleri ve alt öğelerini kaldırır.

 jQuery boş() Yöntem


 jQuery empty() yöntemi, seçilen öğelerin alt öğelerini kaldırır.

12/23/2021 58
jQuery
 Kaldırılacak Öğeleri Filtreleyin
 jQuery remove() yöntemi, kaldırılacak öğeleri filtrelemenize olanak tanıyan bir
parametreyi de kabul eder.

 Parametre, jQuery seçici sözdizimlerinden herhangi biri olabilir.


 Aşağıdaki örnek, class="test" içeren tüm <p> öğelerini kaldırır:

 Bu örnek, class="test" ve class="demo" içeren tüm <p> öğelerini kaldırır:

12/23/2021 59
jQuery - Get and Set CSS
Classes
 jQuery ile öğelerin stilini değiştirmek kolaydır.

 jQuery CSS Manipülasyonu


 jQuery, CSS manipülasyonu için çeşitli yöntemlere sahiptir. Aşağıdaki yöntemlere
bakacağız:

 addClass() - Seçili öğelere bir veya daha fazla sınıf ekler


 removeClass() - Seçili öğelerden bir veya daha fazla sınıfı kaldırır
 toggleClass() - Seçili elemanlardan sınıf ekleme/çıkarma arasında geçiş yapar
 css() - Stil niteliğini ayarlar veya döndürür

12/23/2021 60
jQuery
 Örnek Stil Sayfası
 Bu sayfadaki tüm örnekler için aşağıdaki stil sayfası kullanılacaktır:

12/23/2021 61
jQuery
 jQuery addClass() Yöntemi
 Aşağıdaki örnek, farklı öğelere sınıf niteliklerinin nasıl ekleneceğini gösterir. Elbette,
sınıf eklerken birden fazla öğe seçebilirsiniz:

 addClass() yöntemi içinde birden çok sınıf da belirtebilirsiniz:

12/23/2021 62
jQuery
 jQuery removeClass() Yöntemi
 Aşağıdaki örnek, belirli bir sınıf niteliğinin farklı öğelerden nasıl kaldırılacağını gösterir:

 jQuery toggleClass() Yöntemi


 Aşağıdaki örnek, jQuery toggleClass() yönteminin nasıl kullanılacağını gösterecektir. Bu
yöntem, seçili öğelerden sınıf ekleme/çıkarma arasında geçiş yapar:

12/23/2021 63
jQuery - css() Method
 css() yöntemi, seçilen öğeler için bir veya daha fazla stil özelliğini ayarlar veya döndürür.

 Bir CSS Özelliği Döndür


 Belirtilen bir CSS özelliğinin değerini döndürmek için aşağıdaki sözdizimini kullanın:

 css("propertyname");
 Aşağıdaki örnek, İLK eşleşen öğenin arka plan rengi değerini döndürür:

 Bir CSS Özelliği Ayarlayın


 Belirtilen bir CSS özelliğini ayarlamak için aşağıdaki sözdizimini kullanın:
 css (" propertyname ", "value");
 Aşağıdaki örnek, TÜM eşleşen öğeler için arka plan rengi değerini ayarlayacaktır:

12/23/2021 64
jQuery
 Birden Çok CSS Özelliği Ayarla
 Birden çok CSS özelliği ayarlamak için aşağıdaki sözdizimini kullanın:

 css({"özellikadı":"değer","özellikadı":"değer",...});
 Aşağıdaki örnek, eşleşen TÜM öğeler için bir arka plan rengi ve bir yazı tipi boyutu
ayarlayacaktır:

12/23/2021 65
jQuery
 jQuery ile elementlerin boyutları ve tarayıcı penceresi ile çalışmak kolaydır.

 jQuery Boyut Yöntemleri


 jQuery, boyutlarla çalışmak için birkaç önemli yönteme sahiptir:

 Genişlik()
 yükseklik()
 iç Genişlik()
 içYükseklik()
 dış Genişlik()
 dış Yükseklik()

12/23/2021 66
jQuery

12/23/2021 67
jQuery
 jQuery genişlik() ve yükseklik() Yöntemleri
 width() yöntemi, bir öğenin genişliğini ayarlar veya döndürür (dolgu, kenarlık ve kenar
boşluğu hariç).
 height() yöntemi, bir öğenin yüksekliğini ayarlar veya döndürür (dolgu, kenarlık ve kenar
boşluğu hariç).
 Aşağıdaki örnek, belirtilen bir <div> öğesinin genişliğini ve yüksekliğini döndürür:

12/23/2021 68
jQuery
 jQuery innerWidth() ve innerHeight() Yöntemleri
 innerWidth() yöntemi, bir öğenin genişliğini döndürür (dolgu içerir).

 innerHeight() yöntemi, bir öğenin yüksekliğini döndürür (dolgu içerir).

 Aşağıdaki örnek, belirtilen bir <div> öğesinin iç genişliğini/yüksekliğini döndürür:

12/23/2021 69
jQuery
 jQuery outerWidth() ve outerHeight() Yöntemleri
 outerWidth() yöntemi, bir öğenin genişliğini döndürür (dolgu ve kenarlık içerir).

 outerHeight() yöntemi, bir öğenin yüksekliğini döndürür (dolgu ve kenarlık içerir).

 Aşağıdaki örnek, belirtilen bir <div> öğesinin dış genişliğini/yüksekliğini döndürür:

12/23/2021 70
jQuery
 outerWidth(true) yöntemi, bir öğenin genişliğini döndürür (dolgu, kenarlık ve kenar boşluğu
içerir).

 outerHeight(true) yöntemi, bir öğenin yüksekliğini döndürür (dolgu, kenarlık ve kenar


boşluğu içerir).

12/23/2021 71
jQuery
 jQuery Daha fazla genişlik() ve yükseklik() - width() and height()
 Aşağıdaki örnek, belgenin (HTML belgesi) ve pencerenin (tarayıcı görünüm alanı)
genişliğini ve yüksekliğini döndürür:

 Aşağıdaki örnek, belirtilen bir <div> öğesinin genişliğini ve yüksekliğini ayarlar:

12/23/2021 72
jQuery Traversing
 Geçiş nedir?
 "Geçiş" anlamına gelen jQuery çapraz geçişi, HTML öğelerini diğer öğelerle olan
ilişkilerine göre "bulmak" (veya seçmek) için kullanılır. Tek bir seçimle başlayın ve
istediğiniz öğelere ulaşana kadar bu seçimde ilerleyin.

 Aşağıdaki resim, bir HTML sayfasını bir ağaç (DOM ağacı) olarak göstermektedir. jQuery
traversing ile, seçilen (geçerli) öğeden başlayarak ağaçta kolayca yukarı (atalar), aşağı
(torunlar) ve yana doğru (kardeşler) hareket edebilirsiniz. Bu harekete DOM ağacını
çaprazlama - veya içinden geçme - denir.

12/23/2021 73
jQuery
 İllüstrasyon açıkladığı üzere:

 <div> öğesi, <ul> öğesinin ebeveynidir ve içindeki her şeyin atasıdır.


 <ul> öğesi, hem <li> öğelerinin ebeveyni hem de <div> öğesinin alt öğesidir.
 Soldaki <li> öğesi, <span> öğesinin ebeveyni, <ul> öğesinin alt öğesi ve <div> öğesinin
soyundan gelen öğedir.
 <span> öğesi, soldaki <li> öğesinin alt öğesidir ve <ul> ile <div> öğesinin soyundan gelir.
 İki <li> öğesi kardeştir (aynı ebeveyni paylaşırlar)
 Sağdaki <li> öğesi, <b> öğesinin ebeveyni, <ul> öğesinin alt öğesi ve <div> öğesinin
soyundan gelen öğedir.
 <b> öğesi, sağ <li> öğesinin alt öğesidir ve <ul> ile <div> öğesinin soyundan gelir.
 Ata, ebeveyn, büyükanne ve büyükbaba, büyük büyükanne ve büyükbaba vb.
 Torun, bir çocuk, torun, büyük torun vb.
 Kardeşler aynı ebeveyni paylaşır.

12/23/2021 74
jQuery
 DOM'da gezinme
 jQuery, DOM'yi geçmemize izin veren çeşitli yöntemler sunar.

 Geçiş yöntemlerinin en büyük kategorisi ağaç geçişidir.

 Sonraki bölümler bize DOM ağacında nasıl yukarı, aşağı ve yanlara doğru hareket
edeceğimizi gösterecek.

 jQuery Geçiş Referansı


 Tüm jQuery Traversing yöntemlerine tam bir genel bakış için lütfen jQuery Traversing
Referansımıza gidin.

12/23/2021 75
jQuery Traversing - Ancestors
 jQuery ile bir öğenin atalarını bulmak için DOM ağacında gezinebilirsiniz.

 Ata, ebeveyn, büyükanne ve büyükbaba, büyük büyükanne ve büyükbaba vb.

 DOM Ağacında Yukarı Geçiş


 DOM ağacında geçiş yapmak için üç kullanışlı jQuery yöntemi şunlardır:
 parent()
 parents()
 parentsUntil()
 jQuery parent() Method

parent() yöntemi, seçilen öğenin doğrudan üst öğesini döndürür.

 Bu yöntem, DOM ağacında yalnızca tek bir seviyeyi geçer.

 Yukarıdaki örnek, her <span> öğesinin doğrudan üst öğesini döndürür:

12/23/2021 76
jQuery
 jQuery parents() Yöntemi
 parents() yöntemi, belgenin kök öğesine (<html>) kadar seçili öğenin tüm üst öğelerini
döndürür.
 Aşağıdaki örnek, tüm <span> öğelerinin tüm atalarını döndürür:

 Atalar için aramayı filtrelemek için isteğe bağlı bir parametre de kullanabilirsiniz.
 Aşağıdaki örnek, <ul> öğeleri olan tüm <span> öğelerinin tüm atalarını döndürür:

12/23/2021 77
jQuery
 jQuery parentUntil() Yöntemi
 parentUntil() yöntemi, verilen iki bağımsız değişken arasındaki tüm üst öğeleri
döndürür.
 Aşağıdaki örnek, bir <span> ve bir <div> öğesi arasındaki tüm üst öğeleri döndürür:

12/23/2021 78
jQuery Traversing - Descendants
 jQuery ile bir öğenin torunlarını bulmak için DOM ağacında aşağı doğru hareket
edebilirsiniz.

 Torun, bir çocuk, torun, büyük torun vb.

 DOM Ağacından Aşağı Geçiş


 DOM ağacında aşağı doğru geçiş yapmak için iki kullanışlı jQuery yöntemi şunlardır:
 children()
 find()
jQuery Children() Yöntemi
 Children() yöntemi, seçilen öğenin tüm doğrudan alt öğelerini döndürür.
 Bu yöntem, DOM ağacında yalnızca tek bir düzeyden geçer.

12/23/2021 79
jQuery
 Aşağıdaki örnek, her <div> öğesinin doğrudan çocukları olan tüm öğeleri döndürür:

 Çocuk aramasını filtrelemek için isteğe bağlı bir parametre de kullanabilirsiniz.


 Aşağıdaki örnek, <div> öğesinin doğrudan çocukları olan "first" sınıf adına sahip tüm
<p> öğelerini döndürür:

12/23/2021 80
jQuery
 jQuery find() Yöntemi
 find() yöntemi, seçili öğenin alt öğelerini en son alt öğeye kadar döndürür.
 Aşağıdaki örnek, <div> öğesinin soyundan gelen tüm <span> öğelerini döndürür:

 Aşağıdaki örnek, <div> öğesinin tüm torunlarını döndürür:

12/23/2021 81
jQuery Traversing - Siblings
 jQuery ile bir öğenin kardeşlerini bulmak için DOM ağacında yanlara doğru hareket
edebilirsiniz.

 Kardeşler aynı ebeveyni paylaşır.

 DOM Ağacında Yan Yana Geçiş


 DOM ağacında yanlara geçiş yapmak için birçok yararlı jQuery yöntemi vardır:

12/23/2021 82
jQuery
 jQuery siblings() Method
 siblings() yöntemi, seçilen öğenin tüm kardeş öğelerini döndürür.
 Aşağıdaki örnek, <h2> öğesinin tüm kardeş öğelerini döndürür:

 Kardeş aramasını filtrelemek için isteğe bağlı bir parametre de kullanabilirsiniz.


 Aşağıdaki örnek, <h2> öğesinin <p> öğeleri olan tüm kardeş öğelerini döndürür:

12/23/2021 83
jQuery
 jQuery next() Yöntemi
 next() yöntemi, seçilen öğenin sonraki kardeş öğesini döndürür.
 Aşağıdaki örnek, <h2> öğesinin sonraki kardeşini döndürür:

 jQuery nextAll() Method


nextAll() yöntemi, seçilen öğenin sonraki tüm kardeş öğelerini döndürür.
 Aşağıdaki örnek, <h2> öğesinin sonraki tüm kardeş öğelerini döndürür:

12/23/2021 84
jQuery
 jQuery nextUntil() Yöntemi
 nextUntil() yöntemi, verilen iki bağımsız değişken arasındaki sonraki tüm kardeş öğeleri
döndürür.
 Aşağıdaki örnek, bir <h2> ve bir <h6> öğesi arasındaki tüm kardeş öğeleri döndürür:

 sorgu prev(), prevAll() & prevUntil() Yöntemleri


 prev(), prevAll() ve prevUntil() yöntemleri, tıpkı yukarıdaki yöntemler gibi çalışır, ancak
ters işlevselliğe sahiptir: önceki kardeş öğeleri döndürürler (DOM ağacındaki kardeş
öğeler boyunca ileri yerine geriye doğru hareket ederler).

12/23/2021 85
jQuery Traversing - Filtering
 first(), last(), eq(), filter() ve not() Yöntemleri
 En temel filtreleme yöntemleri, bir öğe grubundaki konumuna göre belirli bir öğeyi
seçmenize olanak tanıyan first(), last() ve eq()'dir.

 filter() ve not() gibi diğer filtreleme yöntemleri, belirli bir ölçütle eşleşen veya eşleşmeyen
öğeleri seçmenize olanak tanır.

 jQuery first() Yöntemi


 first() yöntemi, belirtilen öğelerin ilk öğesini döndürür.

 Aşağıdaki örnek, ilk <div> öğesini seçer:

12/23/2021 86
jQuery
 jQuery last() Yöntemi
 last() yöntemi, belirtilen öğelerin son öğesini döndürür.
 Aşağıdaki örnek, son <div> öğesini seçer:

 jQuery eq() yöntemi


 eq() yöntemi, seçili öğelerin belirli bir dizin numarasına sahip bir öğe döndürür.
 Dizin numaraları 0'dan başlar, bu nedenle ilk öğe 1 değil 0 dizin numarasına sahip
olacaktır. Aşağıdaki örnek ikinci <p> öğesini seçmektedir (dizin numarası 1):

12/23/2021 87
jQuery
 jQuery filter() Method
filter() yöntemi, bir ölçüt belirlemenizi sağlar. Kriterlere uymayan öğeler seçimden
çıkarılır ve eşleşen öğeler döndürülür.
 Aşağıdaki örnek, "intro" sınıf adına sahip tüm <p> öğelerini döndürür:

 jQuery not() Yöntemi


 not() yöntemi, ölçütlerle eşleşmeyen tüm öğeleri döndürür.
 İpucu: not() yöntemi, filter() yönteminin tersidir.
 Aşağıdaki örnek, "intro" sınıf adına sahip olmayan tüm <p> öğelerini döndürür:

12/23/2021 88
jQuery - AJAX Introduction
 AJAX, tüm sayfayı yeniden yüklemeden bir sunucuyla veri alışverişi yapma ve bir web
sayfasının bölümlerini güncelleme sanatıdır.

12/23/2021 89
jQuery - AJAX
 AJAX nedir?
 AJAX = Eşzamansız JavaScript ve XML.
 Kısacası; AJAX, arka planda veri yüklemek ve tüm sayfayı yeniden yüklemeden web
sayfasında görüntülemekle ilgilidir.
 AJAX kullanan uygulama örnekleri: Gmail, Google Haritalar, Youtube ve Facebook
sekmeleri.

Peki ya jQuery ve AJAX?


 jQuery, AJAX işlevselliği için çeşitli yöntemler sunar.

 jQuery AJAX yöntemleriyle hem HTTP Get hem de HTTP Post kullanarak uzak bir
sunucudan metin, HTML, XML veya JSON talep edebilirsiniz - Ve harici verileri
doğrudan web sayfanızın seçilen HTML öğelerine yükleyebilirsiniz!

12/23/2021 90
jQuery - AJAX
 jQuery olmadan, AJAX kodlaması biraz zor olabilir!

 Normal AJAX kodu yazmak biraz zor olabilir çünkü farklı tarayıcıların AJAX uygulaması
için farklı sözdizimi vardır. Bu, farklı tarayıcıları test etmek için fazladan kod yazmanız
gerekeceği anlamına gelir. Ancak, jQuery ekibi bunu bizim için halletti, böylece AJAX
işlevselliğini yalnızca tek bir kod satırı ile yazabiliriz.

 jQuery AJAX Yöntemleri


 Sonraki bölümlerde en önemli jQuery AJAX yöntemlerine bakacağız.

12/23/2021 91
jQuery - AJAX load() Method
 jQuery load() Yöntemi
 jQuery load() yöntemi, basit ama güçlü bir AJAX yöntemidir.
 load() yöntemi, bir sunucudan veri yükler ve döndürülen verileri seçilen öğeye yerleştirir.

 Gerekli URL parametresi, yüklemek istediğiniz URL'yi belirtir.

 İsteğe bağlı veri parametresi, istekle birlikte gönderilecek bir dizi sorgu dizisi
anahtar/değer çiftini belirtir.

 İsteğe bağlı geri çağırma parametresi, load() yöntemi tamamlandıktan sonra yürütülecek
bir işlevin adıdır.

12/23/2021 92
jQuery
 Örnek dosyamızın içeriği: "demo_test.txt":

 Aşağıdaki örnek, "demo_test.txt" dosyasının içeriğini belirli bir <div> öğesine yükler:

 URL parametresine bir jQuery seçici eklemek de mümkündür.


 Aşağıdaki örnek, "demo_test.txt" dosyasının içindeki id="p1" öğesinin içeriğini belirli bir
<div> öğesine yükler:

12/23/2021 93
jQuery
 İsteğe bağlı geri arama parametresi, load() yöntemi tamamlandığında çalıştırılacak bir
geri arama işlevini belirtir. Geri arama işlevi farklı parametrelere sahip olabilir:

 answerTxt - çağrı başarılı olursa ortaya çıkan içeriği içerir


 statusTxt - aramanın durumunu içerir
 xhr - XMLHttpRequest nesnesini içerir

 Aşağıdaki örnek, load() yöntemi tamamlandıktan sonra bir uyarı kutusu görüntüler.
load() yöntemi başarılı olduysa, "Harici içerik başarıyla yüklendi!" mesajını görüntüler ve
başarısız olursa bir hata mesajı görüntüler:

12/23/2021 94
jQuery - AJAX get() and post()
Methods
 jQuery get() ve post() yöntemleri, bir HTTP GET veya POST isteğiyle sunucudan veri
istemek için kullanılır.

 HTTP İsteği: GET ve POST karşılaştırması


 İstemci ve sunucu arasında istek-yanıt için yaygın olarak kullanılan iki yöntem şunlardır:
GET ve POST.

 GET - Belirtilen bir kaynaktan veri ister


 POST - Belirli bir kaynağa işlenecek verileri gönderir
 GET temel olarak sunucudan bazı verileri almak (almak) için kullanılır. Not: GET
yöntemi, önbelleğe alınmış verileri döndürebilir.

 POST, sunucudan bazı verileri almak için de kullanılabilir. Ancak, POST yöntemi ASLA
verileri önbelleğe almaz ve genellikle istekle birlikte veri göndermek için kullanılır.

12/23/2021 95
jQuery $.get() Method
 $.get() yöntemi, bir HTTP GET isteği ile sunucudan veri ister.

 Gerekli URL parametresi, talep etmek istediğiniz URL'yi belirtir.


 İsteğe bağlı geri arama parametresi, istek başarılı olursa yürütülecek işlevin adıdır.
 Aşağıdaki örnek, sunucudaki bir dosyadan veri almak için $.get() yöntemini kullanır:

12/23/2021 96
jQuery
 $.get() öğesinin ilk parametresi, istemek istediğimiz URL'dir ("demo_test.asp").

 İkinci parametre bir geri arama işlevidir. İlk geri arama parametresi, istenen sayfanın
içeriğini tutar ve ikinci geri arama parametresi, isteğin durumunu tutar.

 İpucu: ASP dosyasının nasıl göründüğü ("demo_test.asp"):

12/23/2021 97
jQuery
 jQuery $.post() Yöntemi
 $.post() yöntemi, bir HTTP POST isteği kullanarak sunucudan veri ister.

 Gerekli URL parametresi, talep etmek istediğiniz URL'yi belirtir.


 İsteğe bağlı veri parametresi, istekle birlikte gönderilecek bazı verileri belirtir.
 İsteğe bağlı geri arama parametresi, istek başarılı olursa yürütülecek işlevin adıdır.
 Aşağıdaki örnek, istekle birlikte bazı verileri göndermek için $.post() yöntemini kullanır:

12/23/2021 98
jQuery
 $.post() öğesinin ilk parametresi, istemek istediğimiz URL'dir ("demo_test_post.asp").
 Ardından istekle birlikte gönderilecek bazı verileri iletiyoruz (isim ve şehir).
 "demo_test_post.asp" içindeki ASP betiği parametreleri okur, işler ve bir sonuç döndürür.
 Üçüncü parametre bir geri arama işlevidir. İlk geri arama parametresi, istenen sayfanın
içeriğini tutar ve ikinci geri arama parametresi, isteğin durumunu tutar.
 İpucu: ASP dosyasının nasıl göründüğü ("demo_test_post.asp"):

12/23/2021 99
jQuery Misc
 jQuery - noConflict() Yöntemi

JQuery kullanırken sayfalarınızda başka çerçeveler kullanmak isterseniz ne olur?

 jQuery ve Diğer JavaScript Çerçeveleri


 Bildiğin üzere; jQuery, $ işaretini jQuery için kısayol olarak kullanır.

 Angular, Backbone, Ember, Knockout ve daha fazlası gibi birçok popüler JavaScript
çerçevesi vardır.

 Ya diğer JavaScript çerçeveleri de kısayol olarak $ işaretini kullanıyorsa?

 İki farklı çerçeve aynı kısayolu kullanıyorsa, bunlardan biri çalışmayı durdurabilir.

 jQuery ekibi bunu zaten düşünmüş ve noConflict() yöntemini uygulamıştır.

12/23/2021 100
jQuery
 jQuery noConflict() Yöntemi
 noConflict() yöntemi, diğer komut dosyalarının kullanabilmesi için $ kısayol
tanımlayıcısındaki tutmayı serbest bırakır.
 Elbette, kısayol yerine tam adı yazarak jQuery'yi kullanmaya devam edebilirsiniz:

12/23/2021 101
jQuery
 Kendi kısayolunuzu da çok kolay bir şekilde oluşturabilirsiniz. noConflict() yöntemi,
daha sonra kullanmak üzere bir değişkene kaydedebileceğiniz jQuery'ye bir başvuru
döndürür. İşte bir örnek:

12/23/2021 102
jQuery
 $ kısayolunu kullanan bir jQuery kod bloğunuz varsa ve hepsini değiştirmek
istemiyorsanız, $ girişini parametre olarak ready yöntemine iletebilirsiniz. Bu, bu işlevin
içinde $ kullanarak jQuery'ye erişmenizi sağlar - bunun dışında "jQuery" kullanmanız
gerekir:

12/23/2021 103
jQuery - Filters
 jQuery Filtreleri
 Belirli öğeleri filtrelemek/aramak için jQuery kullanın.

 Tabloları Filtrele
 Tablodaki öğeler için büyük/küçük harfe duyarsız arama yapın:

12/23/2021 104
jQuery

 Açıklanan örnek: Giriş alanının değeriyle eşleşen herhangi bir metin değeri olup
olmadığını kontrol etmek için her tablo satırında döngü yapmak için jQuery
kullanıyoruz. toggle() yöntemi, aramayla eşleşmeyen satırı (display:none) gizler. Metni
küçük harfe dönüştürmek için toLowerCase() DOM yöntemini kullanıyoruz, bu da
aramanın büyük/küçük harfe duyarlı olmamasını sağlar (aramada "john", "John" ve hatta
"JOHN" kullanımına izin verir).

12/23/2021 105
jQuery
 Listeleri Filtrele
 Listedeki öğeler için büyük/küçük harfe duyarlı olmayan bir arama yapın:

12/23/2021 106
jQuery
 Her Şeyi Filtrele
 Bir div öğesi içindeki metin için büyük/küçük harfe duyarsız bir arama yapın:

12/23/2021 107
Diğer Metotlar.
 Diğer kısımları [Link] üzerinden çalışın ve uygulayın.

12/23/2021 108

You might also like