Merhaba, jQuery derslerinin 3. dersine hoşgeldiniz bu dersimizde jQuery’i nasıl kullanacağımıza ve ilk kodumuzu yazmaya çalışacağız.
jQuery ile çok kısa bir kodla html öğelerini seçip eylemler yazabilirsiniz.
jQuery Sözdizimi
jQuery sözdizimi, HTML öğelerini seçmek ve öğeler üzerinde bazı işlemleri gerçekleştirmek için özel olarak tasarlanmıştır.
Temel Sözdizimi;
$(öğe).eylem()
Yukarıdaki kodda anlamadığınız yerler olabilir hemen açıklayalım.
- $ işareti ile jQuery kullanacağımızı söyledim.
- (öğe) yazan yeri html öğelerini seçmek için kullanacağız.
- son olarak eylem() yazan yere herhangi bir jQuery eylemini yazacağız.
Örneklerle daha hızlı pekiştireceğinize inanıyorum.
Örnekler
- $(this).hide() –> Geçerli öğeyi gizler.
- $(“p”).hide() –> Tüm p etiketlerini gizler.
- $(“.yazi”).hide() –> Class’ı yazi olan öğeleri gizler
- $(“#yazi”).hide() –> Id’si yazi olan öğeleri gizler.
İlk jQuery Kodumuz
jQuery ile ilk kodumuza başlamadan önce size birşey daha göstermem gerekiyor o da jQuery kullanmak için gerekli olan jQuery’in ready fonksiyonu.
$(document).ready(function(){
// Kodlar buraya
});
Yukarıdaki kodun işlevi sayfa tam olarak yüklendiğinde içindeki kodları çalıştırmasını sağlamaktır.
İlk Kodumuz
Bu örnekte bir html sayfası içindeki class’ı yazi olan elementleri gizleyeceğiz.
HTML Kodları
<!DOCTYPE html> <html lang="tr"> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <h1 class="baslik">H1 Başlık</h1> Curabitur fermentum dui sit amet elementum efficitur. Phasellus massa nisl, auctor at ornare in, consectetur a lacus. Cras pulvinar felis tortor, eu varius orci pulvinar at. Aenean arcu mi, fermentum in nisl sit amet, pharetra fermentum sem. Donec facilisis tortor velit, vitae placerat magna pulvinar sed. Sed at mauris sapien. Mauris tincidunt eros nec mi fringilla blandit. <h2 class="baslik">H2 Başlık</h2> Curabitur fermentum dui sit amet elementum efficitur. Phasellus massa nisl, auctor at ornare in, consectetur a lacus. Cras pulvinar felis tortor, eu varius orci pulvinar at. Aenean arcu mi, fermentum in nisl sit amet, pharetra fermentum sem. Donec facilisis tortor velit, vitae placerat magna pulvinar sed. Sed at mauris sapien. Mauris tincidunt eros nec mi fringilla blandit. Curabitur fermentum dui sit amet elementum efficitur. Phasellus massa nisl, auctor at ornare in, consectetur a lacus. Cras pulvinar felis tortor, eu varius orci pulvinar at. Aenean arcu mi, fermentum in nisl sit amet, pharetra fermentum sem. Donec facilisis tortor velit, vitae placerat magna pulvinar sed. Sed at mauris sapien. Mauris tincidunt eros nec mi fringilla blandit. <h3 class="baslik">H3 Başlık</h3> Curabitur fermentum dui sit amet elementum efficitur. Phasellus massa nisl, auctor at ornare in, consectetur a lacus. Cras pulvinar felis tortor, eu varius orci pulvinar at. Aenean arcu mi, fermentum in nisl sit amet, pharetra fermentum sem. Donec facilisis tortor velit, vitae placerat magna pulvinar sed. Sed at mauris sapien. Mauris tincidunt eros nec mi fringilla blandit. </body> </html>
Çıktı;
Yukarıdaki html kodunda sayfaya sadece jQuery’i dahil ettik, kullanmadık. Aşağıdaki jQuery kodlarını sayfanın head etiketleri arasına ekledikten sayfayı yenileyin. Class’ları yazi olan etiketler gizleniyor değil mi?
jQuery Kodları
<script>
$(document).ready(function(){
$(".yazi").hide();
});
</script>
jQuery Kodlarını ekledikten sonra Çıktı;
Gördüğünüz gibi classlari yazi olan etiketler gizlendi sadece class’ları baslik olan etiketler görünüyor.
Bu dersimizinde sonuna geldik arkadaşlar başka bir derste görüşmek üzere kendinize iyi bakın. Tüm jQuery derslerine bu linkten ulaşabilirsiniz.
