Kategori arşivi: Jquery

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");

Jquery ile fare üzerine geldiğinde işlem yapma – .hover()

Merhaba Javascript veya jquery de en çok kullanılan fonksiyonlardan biri de .hover’dir. Bu fonksiyon ile fare bir elemanın (div,class veya etiket) üzerine geldiğinde ve üzerinden ayrıldığında iki ayrı fonksiyon kullanarak yakalayabilir ve işlemler yapabilirsiniz.

#sectigimizid yazan yere seçmek istediğiniz elementi yada id yi yazın.

$( "#sectigimizid").hover(function(){

   // Üzerine gelindiğinde yapılacak işlemler

},function(){

   //üzerinden ayrıldığında yapılacak işlemler

});