Jquery Web Tasarım

JQuery ile Paragraf Gizleme – Gösterme Örneği

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.

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.

Sayfamızı çalıştırıp butonlara tıkladığımızda aşağıdaki görüntü oluşacaktır.

Yorum yap

Web Tasarım & Programlama sitesinden daha fazla şey keşfedin

Okumaya devam etmek ve tüm arşive erişim kazanmak için hemen abone olun.

Okumaya devam et