Yazar: Samed GÖZÜTOK

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 ] )

Posted on by Samed GÖZÜTOK 0

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()

Posted on by Samed GÖZÜTOK 0

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}

Posted on by Samed GÖZÜTOK 0

jQuery off() Yöntemi

off() Yöntemi;

Bir elemente bağlı olayları kaldırmayı sağlar. Birden fazla argüman verildiğinde, verilen argümanlar tüm olay işleyicisi kaldırılması için aynı olmalıdır.

Örnek

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

Codepen Ön izleme

Kullanım şekilleri;

.off( events [, selector ] [, handler ] )

.off( events [, selector ] )

.off( event )

.off()

.off(map)

.off(function)

Posted on by Samed GÖZÜTOK 0

jQuery not() Yöntemi

not() Yöntemi;

Belirtilen seçici hariç tutularak işleminizi uygulamaya devam eder.

Örnek

 $("span").not(".w3tr").css("background-color", "red");

Codepen Ön izleme

Kullanım şekilleri;

.not( selector )

.not( function )

.not( selection )

.not( criteria )

Posted on by Samed GÖZÜTOK 0

jQuery nextUntil() Yöntemi

nextUntil() Yöntemi;

Belirli bir seçiciden başlayıp nextUntil’de belirtilen seçiciye kadar seçer ve istediğiniz işlemi uygular. nextUntil deki seçici dahil değildir.

Örnek

$("li.w3tr").nextUntil("li.stop").css({"color": "blue", "border": "3px solid yellow"});

Codepen Ön izleme

Kullanım şekilleri;

.nextUntil( [selector ] [, filter ] )

.nextUntil( [element ] [, filter ] )

.nextUntil( [selector ] [, stop] )

.nextUntil( [element ] [, stop] )

Posted on by Samed GÖZÜTOK 0

jQuery nextAll() Yöntemi

nextAll() Yöntemi;

Öncesinden belirtilen bir seçiciden başlayıp nextAll da belirtilen seçici ile uyuşan bütün elementleri seçmek için kullanılır.

Örnek

$("li.w3tr").nextAll().css({"color": "blue", "border": "3px solid yellow"});

Codepen Ön izleme

Kullanım şekilleri;

.nextAll([selector]):

.nextAll([filter]):

Posted on by Samed GÖZÜTOK 0

jQuery next() Yöntemi

next() Yöntemi;

next () yöntemi, seçilen elementten sonraki kardeş elementi seçmek için kullanılır.

Örnek

$("li.w3tr").next().css({"color": "blue", "border": "3px solid yellow"});

Codepen Ön izleme

Kullanım şekilleri;

.next([selector]):

Posted on by Samed GÖZÜTOK 0

jQuery mouseup() Yöntemi

mouseup() Yöntemi;

sol fare düğmesi seçili öğenin üstündeyken bırakıldığında mouseup olayı oluşur.

Örnek

$("span").mouseup(function(){
  $(this).after("<p style='color:green;'>Fare düğmesi serbest.</p>");
});
$("span").mousedown(function(){
  $(this).after("<p style='color:purple;'>Fare düğmesine basıldı.</p>");
});

Codepen Ön izleme

Kullanım şekilleri;

mouseup(handler):

mouseup([eventData], handler):

mouseup():

mouseup(funtion):

Posted on by Samed GÖZÜTOK 0

jQuery mouseover() Yöntemi

mouseover() Yöntemi;

Fare işaretçisi seçilen elementin üzerinde olduğunda mouseover olayı oluşur.  Bir mouseover olayı gerçekleştiğinde çalıştırılacak bir işlev eklemek için kullanılır.

Örnek

$("span").mouseover(function(){
  $("span").css("background-color", "red");
});
$("span").mouseout(function(){
  $("span").css("background-color", "pink");
});

Codepen Ön izleme

Kullanım şekilleri;

.mouseover(handler):

. mouseover([eventData], handler):

. mouseover():

. mouseover(function):

Posted on by Samed GÖZÜTOK 0