jQuery prepend() Yöntemi

prepend() Yöntemi;

Eşleştiği element kümesindeki her elementin başına, parametresi tarafından belirtilen içeriği ekler. Yazı veya element olabilir.

Örnek

$("a").click(function(){
  $("p").prepend("<span>w3tr'ye</span> ");
});

Codepen Ön izleme

 

Kullanım şekilleri;

.prepend( content [, content ] )

.prepend( function )

jQuery position() Yöntemi

position() Yöntemi;

Seçili elementin poziyonunu öğrenmek için kullanılır. Bu yöntem sadece top ve left konumlarını öğrenmek için kullanılabilir.

Örnek

$("a").click(function(){
  var x = $("span").position();
  alert("üstten pozisyonu: " + x.top + " soldan pozisyonu: " + x.left);
});

Codepen Ön izleme

 

 

Kullanım şekilleri;

.position()

jQuery parentsUntil() Yöntemi

parentsUntil() Yöntemi;

parentsUntil() yöntemi, seçilen elementin tüm ata elementlerini seçmek için kullanılır.

Örnek

$("span").parentsUntil("span").css({"color": "blue", "border": "3px solid yellow"});

Codepen Ön izleme

Kullanım şekilleri;

.parentsUntil( [selector ] [, filter ] )

.parentsUntil( [element ] [, filter ] )

.parentsUntil( [selector ] [, stop] )

.parentsUntil( [element ] [, stop] )

jQuery parents() Yöntemi

parents() Yöntemi;

parents() yöntemi, seçilen elementin tüm ata elementlerini seçmek için kullanılır.

Örnek

$("span").parents().css({"color": "blue", "border": "3px solid yellow"});

Codepen Ön izleme

Kullanım şekilleri;

.parent( [selector ] )

.parent( filter)

jQuery outerWidth() Yöntemi

outerWidth() Yöntemi;

Seçilen elementin padding, border, margin değerleri varsa hepsini alarak width (genişlik) değerini eğer belirtilmemiş ise null olarak px cinsinden geri döndürür.

Örnek

$("a").click(function(){
  alert("Divin genişliği: " + $("div").outerWidth());
});

Codepen Ön izleme

Kullanım şekilleri;

.outerWidth( [includeMargin] )

jQuery outerHeight() Yöntemi

outerHeight() Yöntemi;

Seçilen elementin padding, border, margin değerleri varsa hepsini alarak height (yükseklik) değerini eğer belirtilmemiş ise null olarak px cinsinden geri döndürür.

Örnek

$("a").click(function(){
  alert("Divin yüksekliği: " + $("div").outerHeight());
});

Codepen Ön izleme

Kullanım şekilleri;

.outerHeight( [includeMargin] )

jQuery one() Yöntemi

one() Yöntemi;

Elemanlar için bir olay için bir işleyici ekleyebilirsiniz. .on() metodunun teklisi kabul edilebilir. Haliyle daha hızlı çalışır. Tekli eventler için kullanılırsa daha iyi performans gösterir.

Örnek

$("div").one("click", function(){
  $(this).animate({width: "+=100px"});
});

Codepen Ön izleme

Kullanım şekilleri;

.one( events [, data ], handler )

.one( events [, selector ] [, data ], handler )

.one( events [, selector ] [, data ] )

jQuery on() Yöntemi

on() Yöntemi;

jQuery 1.7 sürümü ile birlikte bütün gerekli olan işleyicileri oluşturmak için bu method yeterli olmuştur.  Live, bind, delegate metodları eski yöntemler olarak kalmıştır diyebiliriz. Click, submit olayları gibi gönderme tıklatma olayları bu metodla kolaylıkla uygulanmaktadır.

Örnek

$("span").on("click", function(){
  alert("Spana tıklandı");
});

Codepen Ön izleme

Kullanım şekilleri;

.on( events [, selector ] [, data ], handler. childSelector )

.on( events [, selector ] [, data ] )

jQuery offsetParent() Yöntemi

offsetParent() Yöntemi;

İç içe elementler göz önüne alındığında belirtilen elementten bir üst sarıcısını ya da bir üst elementini seçmeyi yarar. Böylelikle sayfadaki nesneleri yerleştirmek, uzaklıkları hesaplamak gibi işlevlerde kullanılabilir.

Örnek

$("a").click(function(){
  $("span").offsetParent().css("background-color", "red");
});

Codepen Ön izleme

Kullanım şekilleri;

.offsetParent()

jQuery offset() Yöntemi

offset() Yöntemi;

Bir elementin koordinatlarını almaya yarar. Bir veya birden çok eleman kümesinin koordinatlarını öğrenebilirsiniz.

Örnek

$("a").click(function(){
  var x = $("span").offset();
  alert("üst: " + x.top + " sol: " + x.left);
});

Codepen Ön izleme

Kullanım şekilleri;

.offset()

.offset( coordinates )

.offset( function )

.offset{top:value,left:value}