JQUERY DOM NESNELERİNİ DEĞİŞTİRME

Tarhi : 16-06-2017 06:35:35 | Yazar : ÇAĞLAR BOSTANCI

DOM NESNELERİNİ DEĞİŞTİRME

DOM NESNELERİNİ DEĞİŞTİRME

.html() : Belirtilen nesnenin html içeriğini elde etmeye ve değiştirmeye yarar.
.text() : Belirtilen nesnenin test içeriğini elde etmeye ve değiştirmeye yarar.
.val() : Belirtilen nesnenin varsa value değerini alır ve değiştirir.

.html() KULLANIMI

Belirlenen elementin html içeriğini almamıza yarar. Bu sayede elementin sahip olduğu html içeriği değiştirebiliriz.

$('#baslat').click(function(){
	var degeri=$('.icerik1').html();
	$('.icerik1').html(degeri+" <b>HELLO WORLD</b>")
});

$('#baslat').click(function(){

var degeri=$('.icerik1').html();

$('.icerik1').html(degeri+" <b>HELLO WORLD</b>")

});

.icerik1 adlı class’ın metin içeriği ve html yapısı değişecek.

.text() KULLANIMI

Belirtilen elementin metin içeriğini elde etmeye yarar

$('#baslat').click(function(){
	var degeri=$('p:first').text();
	alert(degeri);
	$('p:last').text("Alert çalıştı");
});

$('#baslat').click(function(){

var degeri=$('p:first').text();

alert(degeri);

$('p:last').text("Alert çalıştı");

});

.val() KULLANIMI

Belirlenen elementin value() değerini alır.

$('#baslat').click(function(){
	var deger=$('select').val();//Seçilen optionun value değerini alır.
	alert(deger);
	$('select:even').val("35");//option grubunda ikinci indeksin değerini select verir.
});

$('#baslat').click(function(){

var deger=$('select').val();//Seçilen optionun value değerini alır.

alert(deger);

$('select:even').val("35");//option grubunda ikinci indeksin değerini select verir.

});

$('#baslat').click(function(){
	$('input[type="text"]').val(function (index,value){
		return value*10;
	});
	$('input[type="text"]').prop("disabled",true);
});

$('#baslat').click(function(){

$('input[type="text"]').val(function (index,value){

return value*10;

});

$('input[type="text"]').prop("disabled",true);

});

Butona tıklandığında değeri alıp on ile çarpacak ve tekrar textin value değerine yazacak.

DOM NESNELERİNE EKLEME YAPMA

.append() : Seçilen elementin içeriğinin ardına ekleme yapar
.appendTo() : Belirtilen nesneyi seçilen nesnelerin ardına ekler
.prepend() : Seçilen elementin içeriğinin önüne ekleme yapar.
.prepenTo() : Belirtilen nesneyi, belirtilen nesne veya nesnelerin önüne ekler.
.after() : Seçilen nesnenin arkasına girilen içeriği ekler.
.before() : Seçilen nesnenin önüne girilen içeriği ekler.
.insertAfter() : Belirtilen nesnenin arkasına girilen içeriği ekler.
.insertBefore() : Belirtilen nesnenin önüne girilen içeriği ekler.

.append() KULLANIMI

 $('#baslat').click(function(){
	$('p:first').append("HELLO WORLD");	
 });
 	
 $('#baslat').click(function(){
	$('select').append('<option value="48">MUĞLA</option>');
	$('select').val(48);	
 });

$('#baslat').click(function(){

$('p:first').append("HELLO WORLD");

});

$('#baslat').click(function(){

$('select').append('<option value="48">MUĞLA</option>');

$('select').val(48);

});

.appendTo() KULLANIMI

$('#baslat').click(function(){
	$('#tex').appendTo("p");//p elementlerinin sonuna id text olan elementi ekleyecek
 });

$('#baslat').click(function(){

$('#tex').appendTo("p");//p elementlerinin sonuna id text olan elementi ekleyecek

});

.prepend() KULLANIMI

 $('#baslat').hover(function(){
 	$('p').prepend("HEY");//p elementlerinin başına HEY ekleyecek
 	});
 	
 $('#baslat').hover(function(){
 	var deger=$("<h3>*</h3>");
 	$('p').prepend(deger);//p elementinin başına h3 elementi içerisinde * ekleyecek
 	});

$('#baslat').hover(function(){

$('p').prepend("HEY");//p elementlerinin başına HEY ekleyecek

});

$('#baslat').hover(function(){

var deger=$("<h3>*</h3>");

$('p').prepend(deger);//p elementinin başına h3 elementi içerisinde * ekleyecek

});

.appendTo() KULLANIMI

 $('#baslat').click(function(){
 	$('#tex').prependTo("p");//p elementlerinin başına id text olan elementi ekleyecek
 });

$('#baslat').click(function(){

$('#tex').prependTo("p");//p elementlerinin başına id text olan elementi ekleyecek

});

.after() KULLANIMI

 $('#baslat').click(function(){
 	$('p').after("<h3>Mehmet Akif ERSOY</h3>");//p elementin sonuna ekleyecek
 	$('p').after("Ne ibretti kızarmak bilmeyen çehren, bırak kardeşim tahsili; git önce edep, haya öğren!");//p elementin sonuna ekleyecek
 	$('option:last').after('<option value="48">MUĞLA</option>');//option elementin sonuna ekleyecek

 });

$('#baslat').click(function(){

$('p').after("<h3>Mehmet Akif ERSOY</h3>");//p elementin sonuna ekleyecek

$('p').after("Ne ibretti kızarmak bilmeyen çehren, bırak kardeşim tahsili; git önce edep, haya öğren!");//p elementin sonuna ekleyecek

$('option:last').after('<option value="48">MUĞLA</option>');//option elementin sonuna ekleyecek

});

.before() KULLANIMI

  $('#baslat').click(function(){
 	$('p').before("merhaba dünya");//p elementinden önce merhaba dünya ekler.

 });

$('#baslat').click(function(){

$('p').before("merhaba dünya");//p elementinden önce merhaba dünya ekler.

});

.insertAfter() KULLANIMI

 $('#baslat').click(function(){
 	$('p').insertAfter("select");//sayfas içerisindeki select elementini p elementinin önüne alacak.
 });

$('#baslat').click(function(){

$('p').insertAfter("select");//sayfas içerisindeki select elementini p elementinin önüne alacak.

});

.insertBefore() KULLANIMI

$('#baslat').click(function(){
 	$('p').insertBefore("input");//sayfas içerisindeki select elementini p elementinin önüne alacak.
 });

$('#baslat').click(function(){

$('p').insertBefore("input");//sayfas içerisindeki select elementini p elementinin önüne alacak.

});

DOM NESNELERİNİN ETRAFINA NESNE EKLEME

.wrap() : İstenilen elementin etrafına girilen nesne ayrı ayrı eklenir.
.wrapAll() : Tek bir nesne ile girilen seçicinin etrafını çevreler.
.wrampInner() : İstenilen nesnelerin içindeki veriyi html olarak content ile çevreler.
.unwrap() : Nesne etrafına ayrı ayrı eklenen etki kaldırılır.

.wrap() KULLANIMI

$('#baslat').click(function(){
	$('input').wrap('<div class="merhaba"></div>');	
});

$('#baslat').click(function(){

$('input').wrap('<div class="merhaba"></div>');

});

İnput elementlerinin etrafı div ile çevrelenir.

.wrapAll() KULLANIMI

$('#baslat').click(function(){
	$('input').wrapAll('<div class="merhaba"></div>');//input elementleri merhaba divi içerisine alındı.
});

$('#baslat').click(function(){

$('input').wrapAll('<div class="merhaba"></div>');//input elementleri merhaba divi içerisine alındı.

});

.wrapInner() KULLANIMI

$('#baslat').click(function(){
	$('p').wrapInner('<u><b></b></u>');
});

$('#baslat').click(function(){

$('p').wrapInner('<u><b></b></u>');

});

p elementi içerisindeki element hem kalın hem altı çizili olacak.

.unWrap() KULLANIMI

$('#baslat').click(function(){
	$('p').toggle(function(){$('p').wrap('<a></a>');},function(){$('p').unwrap("<a></a>");});
	//$('p').unWrap();
});

$('#baslat').click(function(){

$('p').toggle(function(){$('p').wrap('<a></a>');},function(){$('p').unwrap("<a></a>");});

//$('p').unWrap();

});

p elementi içerisindeki element hem kalın hem altı çizili olacak.

DOM NESNELERİNİ KALDIRMA

.empty() : Belirlenen nesnenin içeriğini temizler.
.remove() : Belirtilen nesne veya nesneleri tamamen sayfadan kaldırır.
.detach() : Belirtilen nesne veya nesneleri tamamen sayfadan kaldırır.

.empty() KULLANIMI

	$('#baslat').click(function(){
		$("p").empty();
	});

$('#baslat').click(function(){

$("p").empty();

});

.remove() KULLANIMI

$('#baslat').click(function(){
		$("p").remove();
	});

$('#baslat').click(function(){

$("p").remove();

});

.detach() KULLANIMI

$('#baslat').click(function(){
		$("p").detach();
	});

$('#baslat').click(function(){

$("p").detach();

});

İlgili

JQUERY

JQUERY DOM NESNELERİNİ DEĞİŞTİRME

Hemen Başla

Konu ile ilgili olarak mail gönderebilirsiniz.

Çağlar Bostancı

JQUERY DOM NESNELERİNİ DEĞİŞTİRME