Jquery Div veya Farklı Element İçeriği Değiştirme ve Değere erişme

Html sayfalarını dinamik hale getirmek, iyi bi kullanıcı deneyimi yaratmak için gerekli bir özellik. Örneğin kullanıcının yaptığı seçime göre bir div içerisinde yazan yazıyı başarılı veya başarısız olarak değiştirmek istediğimizi varsayalım. Bunu yapmak için javascriptte uzunva bir dom erişimi kodu yazmamız gerekicek fakat jquery de seçici arac ile bu işlemi kısa bir kodla gerçekleştirebiliriz.
Aşşağıda bununla ilgili örnekler bulunmaktadır.

Görselin açıklamaları alttadır.

Element bilgisi yazan gere elementin adı, id veya class adı gelebilir.

Örnek element bilgisi:
body // element örneği
.sutun // class seçici örneği
#makale // id seçici örneği

Kısaca Jquery ile elementin içeriğini 3 şekilde değiştirebiliriz.

Element içerisindeki html kodunu değiştirme veya elde etme:

Değiştirme:

$("elementbilgisi").html("html kodları");

Elde Etme:

var element_icerigi = $("elementbilgisi").html();

Element içerisindeki text(yazı)’yı değiştirme veya elde etme:

Değiştirme:

$("elementbilgisi").text("text metin");

Elde Etme:

var element_icerigi = $("elementbilgisi").text();

Element içerisindeki value(değer) bilgisini değiştirme veya elde etme:

Değiştirme:

$("elementbilgisi").text("text metin");

Elde Etme:

var element_icerigi = $("elementbilgisi").text();

Bu işlemler kısaca bu şekilde gerçekleştirilebiliyor.

Jquery ve javascript seçici karşılaştırması ile jquery’nin bize ne kadar kod tasarrufu sağladığını görmüş olacağız.

JQUERY ile element seçme işlemi için gereken kod:

$("elementbilgisi");

Javascript ile element seçme işlemi için gereken kod:

document.getElementByID("elementbilgisi");

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir