jQuery ile İlk Adımlar
jQuery ile İlk Adımlar
jQuery ile İlk Adımlar, CoddyKit'te ücretsiz bir jQuery Academy dersidir. Bu, 1 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, jQuery Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. jQuery Academy kursu toplamda 1 dersten oluşur.
Giriş
Merhaba,
jQuery kitaplığını kullanmak için öncelikle onu HTML belgesine eklememiz gerekir.
Aşağıdaki örnekte jQuery kitaplığının adresi, head etiketleri arasındaki src özniteliğinin değeri olarak eklenmiştir.
Artık jQuery kitaplığı projemizde kullanılmaya hazırdır.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.slim.js"></script>
</head>
<body>
</body>
</html>jQuery Seçimi
HTML öğeleri (bundan sonra bunlara DOM diyeceğiz) üzerinde işlem yapabilmek için önce öğeyi seçmemiz gerekir.
jQuery'de seçim yapmak için $() veya jQuery() yöntemi kullanılır.
Yazılım geliştiricileri $() yöntemini daha çok tercih eder.
Bu yönteme göndereceğimiz parametreyle hangi öğeyi seçmek istediğimize karar veririz.
Xpath
$ yöntemine gönderdiğimiz ifade, CSS'ten de bildiğimiz XPath seçicisidir.
Başka bir deyişle, jQuery'de HTML öğelerini CSS'te seçtiğimiz şekilde seçeriz.
Xpath Örnekleri
HTML kodumuzun aşağıdaki gibi olduğunu varsayalım.
<div id="my-box" class="my-box">
<p class="my-p">
<span class="my-text">Hello jQuery</span>
</p>
</div>
jQuery kullanarak HTML öğelerini seçelim
// Dummy $ to demonstrate jQuery selectors in Node.js
function $(selector) {
console.log("Selector:", selector);
return [];
}
// Selects the element with the id of my-box.
$('#my-box')
// Selects the element with the my-box class.
$('.my-box')
// Selects all p elements that are descendants of the element with my-box id
$('#my-box p')
// Select the element with the .my-p class that is the child of the element with my-box class.
$('.my-box > .my-p')jQuery, kodlarımızı daha kısa yazmamızı sağladı
Aynı işlemi Vanilla (Saf) JavaScript ile yapmak isteseydik daha fazla kod satırı yazmamız gerekirdi.
jQuery, kendi yöntemleri sayesinde kodlarımızı daha kısa ve öz yazmamızı sağladı.
Uyarı
jQuery yalnızca bir kitaplıktır ve aslında web geliştirmeyi Vanilla JavaScript'e göre daha kolay hâle getirir.
Bilgi
jQuery'nin bir başka avantajı da yazdığımız kodların tüm modern tarayıcılar tarafından desteklenmesidir.
VanillaJS ile yazdığımız bazı kodlar bazı tarayıcılarda yan etkilere neden olabilir; jQuery ise sağladığı soyutlama sayesinde her tarayıcıda aynı şekilde çalışacağını garanti eder.
jQuery, kod yazarken tarayıcıya özgü düşünme gereksiniminden bizi kurtarır.
$(document).ready
jQuery temellerine geçmeden önce $(document).ready yöntemini öğrenelim.
HTML hakkında hatırlayacağınız üzere, JavaScript kodlarının HTML içinde head etiketi veya body etiketleri arasına yerleştirilebileceğini söylemiştik.
$(document).ready 2
Aşağıdaki gibi bir HTML kodumuz olduğunu varsayalım.
Tarayıcımız kodumuzu <!DOCTYPE html> etiketinden </html> kapanış etiketine kadar yorumlar.
<script src = "https://code.jquery.com/jquery-3.5.1.slim.js"> </script> ifadesi, kitaplığı code.jquery.com üzerinden indirmeye başlayacaktır.
Bir sonraki satırda jQuery'nin $ yöntemiyle DOM'u seçti. Ancak burada bir sorun var. $ ('# test') yöntemi çağrıldığında HTML belgesi tamamen yüklenmemişse JS kodumuz başarısız olur.
Bu durumda, belgenin tamamen yüklenmesini sağlamak için $(document).ready yöntemi kullanılır.
<div id="test">Hello Coddy</div>
<script>
$('#test').text('Hello Coddy')
</script>
$(document).ready 3
Yukarıdaki tanımdan sonra
Yapmamız gereken tek şey $(document).ready() yöntemini kullanmaktır. Bu yöntem tüm içeriğin yüklenmesini bekler ve ardından çalışır.
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<div id="test">Hello Coddy</div>
<script>
$(document).ready(function(){
$('#test').text('Hello Coddy')
})
</script>
</body>
</html>Soru
Haydi, soruyu cevaplayın!
Tebrikler
Tebrikler 🎉
Bu bölümde jQuery kitaplığını ve $(document).ready() yöntemini öğrenmeye başladık.
Bir sonraki bölümde jQuery Seçicilerini öğreneceğiz.
Sıkça Sorulan Sorular
“jQuery ile İlk Adımlar” dersi ücretsiz mi?
Evet — “jQuery ile İlk Adımlar” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve jQuery Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. jQuery Academy kursu toplamda 1 dersten oluşur.
“jQuery ile İlk Adımlar” dersinde ne öğreneceğim?
jQuery ile İlk Adımlar jQuery Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
jQuery Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te jQuery Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 1 dersinin 1. dersidir.
“jQuery ile İlk Adımlar” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu jQuery Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her jQuery Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.