Kategori arşivi: Javascript

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

Javascript Setinterval ile Belli Aralıklarla Fonksiyon veya Kod Çalıştırma

Javascript veya jquery kullanarak bir fonksiyon yazdığınızda bu fonksiyonun tarayıcıda belli aralıklarla tekrar çağırılıp çalıştırılmasını sağlamanız gerekebilir. bunun için yapmanız gereken setinterval metoduna çalıştırmak istediğiniz fonksiyonu ve parametrelerini verip hangi zaman aralıklarında çalışmasını istediğinizi girmek. Örnek kullanımı aşşağıdaki gibi olacak.

NOT:Buradaki 1000 değeri 1 saniyeyi temsil ediyor.Yani saniyede bir çalışacaktır.

Setinterval kullanımı


function selamla(){

alert("Selam");

}

setInterval(selamla,1000);

Peki ya fonksiyona parametre aktarmanız gerekirse ne olacak? Bu durumda setinterval fonksiyonumuza verdiğimiz parametrelerimizi tekrar gözden geçirmemiz ve girmek istediğimiz paramtereleri fonksiyonumuzda belirtmemiz gerekiyor. Bunun için bind fonksiyonunu kullanabiliriz.

Setinterval Parametreli Kullanımı

function selamla(isim){

alert("Selam " + isim);

}

setInterval(selamla.bind("Gökhan"),1000);

Fonksiyonunuzda birden fazla parametre varsa parametreleri virgülle girmeniz yeterli.

function selamla(isim,soyisim){

alert("Selam " + isim + " " + soyisim);

}

setInterval(selamla.bind("Gökhan","Çelebi"),1000);

 

Setinterval kullanımı bu şekilde sormak istediğiniz soruları yorum bölümünden sorabilirsiniz..

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

});