jQuery Örnekleri

jQuery Örnekleri

jQuery Örnekleri : jQuery Html Web sitesi içindeki nesneler üzerinde dinamik bir şekilde sayfa yenilenmeden işlem yapmayı sağlayan gelişmiş bir platformdur. Bu platform’un bizlere sunduğu sayısız özellik vardır. Bu yazımda sizlere jQuery özelliklerini anlatıp örneklerini yapacağım. Yapılan jQuery kodlarının nasıl çalışması gerektiğini ne işe yaradıklarını sizlerle paylaşacağım.

jQuery kodlarının çalışması için yazılan jQuery kodundan önce mutlaka aşağıdaki kütüphanenin bir kereye mahsus yazılması gerekmektedir. Yazılan kodların çalışabilmesi için bunu yazmamız şarttır. Bu işleme de kütüphane çağırmak denilmektedir. Kullanılan kodların hangi sürüm kütüphanelerde çalışıp çalışmadığını destekleyip desteklemediğini öğrenmek için kütüphane sürümüne bakmanız gerekmektedir.

Örnek Kütüphane Sürümü:

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

Açıklama: Aşağıdaki örnekleri yazmadan önce yukarıdaki kodu yazmalısınız!

jQuery On Click Kullanımı

Html nesnelere tıklandıktan sonra işlemlerin gerçekleşmesi için kullanılan fonksiyondur. Tıklama işlemini algılamak için kullanılmaktadır.

Kod:

<script>
	$( ".buton" ).on( "click", function() {
		alert("Buton tıklama işlemi tamamladı.");
	});
</script>

jQuery Css Kullanımı

jQuery içinde HTML etiketlerindeki stillerin (renk, genişlik, yükseklik vb..) değiştirilmesi için kullanılan bu kod için aşağıda örnek paylaşıyorum.

Kod:

<script>
	$(".kutubir").css({"background-color": "#f00", "font-size": "20px"});
        $(".kutuiki").css({"background-color": "grey"});
</script>

jQuery Append Kullanımı

jQuery içinde her hangi bir HTML nesnenin yanına bir komuta bağlı olarak bir nesne veya başka bir şey eklemek için jQuery append fonksiyonu kullanılmaktadır.

Kod:

<script>
     $( ".ekle" ).on( "click", function() {
          $(".kutubir").append("yeni yazı eklendi");
     });
</script>

jQuery Html Kullanımı

jQuery ile Html nesnelerinin içersinde doğrudan Html olarak değiştirme veya ekleme işlemi yapmak için kullanılmaktadır. Bir olaya bağlı veya bağlı olmaksızın yapılır.

Kod:

<script>
	$( ".kutubir" ).html("Kutunun içindeki yazılar bununla değişecek.");
</script>

jQuery Toggle Kullanımı

jQuery ile bir Html nesnenin görünüm özelliğini gizliyse görünür, görünür ise gizli yapmak için kullanılan özellik’dir. Parametre olarak; slow veya fast kullanılabilir.

Kod:

<script>
	$( ".gizlegoster" ).on( "click", function() {
		$( ".kutubir" ).toggle("slow");
	});
</script>

jQuery Alert Kullanımı

Basit kullanımı ile ekrana mesaj kutusu çıkarmak için kullanılmaktadır.

<script>
	alert("Bu bir uyarı mesajıdır.");
</script>

jQuery Length Kullanımı

Bir nesnenin içindeki karakter sayısını sayma işlemini yapmaktadır. Aşağıdaki örnek içinde sayfamızda kaç tane div etiketi olduğunu saymak için kullanalım.

<script>
	alert($("div").length);
</script>

jQuery Hide Kullanımı

Html bir görünür nesnenin gizlenmesi için kullanılmaktadır.

Kod:

<script>
	$('.kutu').hide();
</script>

jQuery Show Kullanımı

Html bir gizli nesneyi görünür hale getirmek için kullanılmaktadır.

Kod:

<script>
	$('.kutu').show();
</script>

jQuery Örnekleri Nedir?

Sizlere yukarda çeşitli örneklerle jQuery nedir? anlatmaya çalışırken uygulamalı olarak da göstermeye çalıştım. jQuery Fonksiyonları arasında en çok kullanılanlardan olan bu fonksiyonları kullanmanız mutlaka sizin açınızda olumlu olacaktır.

Bu konularla alakalı sormak istediğiniz tüm soruları aşağıdaki form üzerinden bana ulaştırabilirsiniz. Sizlere en kısa süre içinde geri dönüş sağlamaya çalışacağım. Hepinize iyi çalışmalar.