Bu yazımızda, JQuery ile nesneleri kopyalama ve değiştirme fonksiyonlarını inceleyeceğiz ve basit bir uygulama yapacağız.
Dom Nesnelerini Kopyalama ve Değiştirme Fonksiyonları:
- .clone() ://Belirtilen nesneyi kopyalar.
- .replaceWith(): //Belirtilen nesnenin yerine verilen içerik yerleştirilir.
- .replaceAll() ://.replaceWith() komutu ile aynıdır. Nesne seçim şekli farklıdır.
Uygulama:
Bu uygulamamızda "p" değeri kopyalanacak, "p" nin değeri "span" değeri ile değiştirilecek falan flan...
<span>
</span>
Bu paragraf değerimiz bunun içinde değişiklikler yapılabilir...
CSS yapısı:
#area_product{
position:relative;
border:1px dashed #ff0000;
width:600px;
height:140px;
padding:5px;
clear:both;
}
#area_product span{
background-color:yellow;
color:black;
}
HTML yapısı:
<div id="area_product">
<span><input type="text" id="span_value" value="span içinde bu değer ile değişecek..." size="50"/></span><br />
<p class="change_par">Bu paragraf değerimiz bunun içinde değişiklikler yapılabilir...</p>
</div>
<button id="clone" onclick="start_clone(this.id)">clone</button>
<button id="replaceWith" onclick="start_clone(this.id)">replaceWith</button>
<button id="replaceAll" onclick="start_clone(this.id)">replaceAll</button>
JQuery Kodları:
<script type="text/javascript">
function start_clone(id){
//kutu değerini elde ediyoruz
var box_value=$("#span_value").val();
//varsayılan değer olarak ilk paragraflar dışındakileri siliyoruz
//(clone ile çoğaltılabileceği için)
$(".change_par:not(:first)").remove();
//tıklama sonrası gelen 'id' bilgisine göre kontrol edip işlemi yapıyoruz
switch (id){
case "clone":
alert("Paragraf kopyalanacak ve ilk paragrafın sonuna (sibling olarak) eklenecek");
//.change_par sınıflı paragraf kopyalanıyor(.clone())
//ve bu paragrafın sonuna ekleniyor(.insertAfter())
$(".change_par").clone().insertAfter(".change_par");
break;
case "replaceWith":
alert("Paragraf değeri,span içindeki kutu değeri ile değiştirilecek ve arkaplan rengi sarı olacak");
//.change_par sınıflı paragraflar span içinde olan içerikle değiştiriliyor
$(".change_par").replaceWith('<span>'+box_value+'</span>');
break;
case "replaceAll":
alert("Paragraf değerleri,span içindeki kutu değeri ile değiştirilecek ve arkaplan rengi sarı olacak");
//.change_par sınıflı paragraflar span içinde olan içerikle değiştiriliyor
//ilk önce değişim nesnesi seçiliyor, sonra değişecek nesne seçiliyor
$('<span>'+box_value+'</span>').replaceAll(".change_par");
break;
}
}
</script>
Açıklamalar:
Kodları ayrıntılı olarak açıklamayacağım. Sadece, değişim yapılırken seçilen nesnelerin yerine dikkat etmenizi istiyorum. Şöyleki: ".replaceWith()" fonksiyonunda, ilk olarak değişecek nesneyi seçip, sonra hangi nesne ile değişecekse o nesneyi belirtiyoruz, "replaceAll()" fonksiyonunda ise ilk olarak değişim nesnesini seçip, sonra yerine kullanılacağı nesneyi seçiyoruz.
Kolay gelsin, görüşmek üzere...
