Bu yazımızda JQuery ile Html elementlerine nasıl erişilebileceğini gösteren basit bir örnek oluşturacağız. Örneğimizde sayfamıza 2 adet button ve bir paragraf ekleyeceğiz. Butonlardan biri tıklandığında paragrafı gizleyecek, diğeri de tekrar görüntülenmesini sağlayacak. Örneğimize geçmeden önce JQuery‘ de kod yapısını inceleyelim.
$(seçilen nesne).işlem()
yukarıdaki yapıda seçilen nesne etkilenecek olan Html elementini belirtmektedir. Bu element seçili element olabileceği gibi kullanılan etiketler veya bu etiketlere verilmiş id veya class olabilir.
$(this).hide() – seçili elementi gizler.
$(“p”).hide() – tüm p elementlerini gizler.
$(“.test”).hide() – class=”test” olan tüm elementleri gizler.
$(“#test”).hide() – id‘ si”test” olan tüm elementleri gizler.
Örneğimize geçelim.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!DOCTYPE html> <html> <head> <title>www.yazilimkodlama.com</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <button id="btn1">Gizle</button> <button id="btn2">Göster</button> <p>JQuery www.yazilimkodlama.com JQuery www.yazilimkodlama.com JQuery www.yazilimkodlama.com JQuery www.yazilimkodlama.com JQuery www.yazilimkodlama.com JQuery www.yazilimkodlama.com JQuery www.yazilimkodlama.com JQuery www.yazilimkodlama.com JQuery www.yazilimkodlama.com JQuery www.yazilimkodlama.com JQuery www.yazilimkodlama.com JQuery www.yazilimkodlama.com JQuery www.yazilimkodlama.com JQuery www.yazilimkodlama.com JQuery www.yazilimkodlama.com JQuery www.yazilimkodlama.com JQuery www.yazilimkodlama.com JQuery www.yazilimkodlama.com </p> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("p").hide(); }); $("#btn2").click(function(){ $("p").show(); }); }); </script> </body> </html> |
Sayfamızın Html kısmında oluşturduğumuz button ve paragrafları görüyoruz. Jquery kodlarını ise <script>..</script> etiketleri arasına yazmamız gerekiyor.
Örneğimizi uzaktan yükleyerek çalıştırma yöntemini kullanacağız. Bunu açıklamak gerekirse;
Bazı siteler jQuery’yi uzaktan çağırmanıza izin verir. Google API bunlardan biridir. Yukarıdaki kodlarını verdiğim örnekte <head>..</head> etiketleri arasına yazmış olduğumuz satır bu işi yapmaktadır.
1 2 3 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
Sayfamızı çalıştırıp butonlara tıkladığımızda aşağıdaki görüntü oluşacaktır.
