jQuery Dersleri Ders 3 – jQuery Sözdizimi

0
548
görüntülenme

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ı;

jQuery Dersleri Ders 3 – jQuery Sözdizimi Resim 1
jQuery Dersleri Ders 3 – jQuery Sözdizimi Resim 1

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ı;

 

jQuery Dersleri Ders 3 – jQuery Sözdizimi Resim 2
jQuery Dersleri Ders 3 – jQuery Sözdizimi Resim 2

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.

 

Önceki İçerikjQuery Dersleri Ders 2 – jQuery’i Sayfaya Dahil Etme
Sonraki İçerikEn iyi yabancı diziler
Merhaba bu alanda kısaca kendimden bahsedeceğim. Adım Tuğra, 19 yaşındayım. Ticaret lisesi mezunuyum şuan Afyon Kocatepe Üniversitesinde İşletme bölümü okuyorum. Aslen Konyalıyım Afyonkarahisar'da ailemle birlikte yaşıyorum. Yaklaşık 11 senedir bilgisayarlarla içli dışlıyım son 6 senedir kendimi internete 2 yıldır ise Web Programlamaya verdim ileri derece PHP ve HTML biliyorum CSS Javascript Jquery için kendimi geliştirmeye devam ediyorum.. Yakında yayına çıkaracağım yyazilim.com için projeler geliştiriyorum. İş çözümleriniz için mail (iletisim@tugrayaldiz.com) atabilirsiniz. Şimdilik benden bu kadar eğer sende aramıza gelmek istersen mail listemize katılman yeterli kendine iyi bak. :) Not: Web programlama dersleri için https://www.w3schools.com adresini kaynak alıyorum.
Paylaş

CEVAP VER

Lütfen yorum alanını boş bırakma.
Lütfen adını gir.

This site uses Akismet to reduce spam. Learn how your comment data is processed.