JavaScript Araç Kütüphanesi

Bu metodun birden fazla kullanımı vardır:

Parametre olarak bir CSS seçicisi geçirilebilir ve eşleşen öğeleri içeren bir JQ nesnesi döndürür. Bu metot querySelectorAll aracılığıyla gerçekleştirilir.

$('.box')

DOM öğeleri, herhangi bir dizi, NodeList veya JQ nesnesi geçirilebilir ve belirtilen öğeleri içeren bir JQ nesnesi döndürür.

$(document)

HTML dizesi geçirilebilir ve HTML'den oluşturulan DOM'u içeren bir JQ nesnesi döndürür.

$('<div id="wrapper">
  <span id="inner"></span>
</div>')

DOM yüklendikten sonra çağrılacak bir fonksiyon geçirilebilir.

$(function () { console.log('DOM Loaded') })

Yalnızca bir nesne geçirilirse, bu nesnedeki özellikler JQ nesnesine birleştirilir; bu, JQ ad alanına yeni işlevler eklemeye eşdeğerdir.

$.extend({
  customFunc: function () {}
})

// Ardından özel metot şu şekilde çağrılabilir:
$.customFunc()

İki veya daha fazla nesne geçirilirse, tüm nesnelerin özellikleri ilk nesneye eklenir ve birleştirilmiş nesne döndürülür.

var object = $.extend(
  { key1: val1 },
  { key2: val2 },
  { key3: val3 }
);

// Bu durumda hem ilk nesne hem de dönüş değeri { key1: val1, key2: val2, key3: val3 } olur.

JQ prototip zinciri üzerindeki metotları genişletin.

$.fn.extend({
  customFunc: function () {}
})

// Ardından genişletilmiş metot şu şekilde kullanılabilir:
$(document).customFunc()

Bir nesneyi veya diziyi serileştirir ve URL parametreleri için kullanılabilecek bir dize döndürür.

$.param({ width: 1680, height: 1050 })
// width=1680&height=1050

$.param({ foo: { one: 1, two: 2 } })
// foo[one]=1&foo[two]=2

$.param({ ids: [1, 2, 3] })
// ids[]=1&ids[]=2&ids[]=3

Geçirilen parametre bir diziyse, dizi formatı .serializeArray() dönüş formatıyla aynı olmalıdır:

$.param([
  { "name": "name", "value": "mdui" },
  { "name": "password", "value": "123456" }
])
// name=mdui&password=123456

Bir diziyi veya nesneyi yineler. Dönüş değeri ilk parametredir, yani yinelenen dizi veya nesnedir.

Fonksiyonun ilk parametresi dizinin indeksidir veya nesnenin anahtarıdır; ikinci parametre ise dizi veya nesnenin karşılık gelen konumundaki değerdir.

Geri çağırma fonksiyonundaki this, dizi veya nesnenin karşılık gelen konumundaki değeri gösterir. Geri çağırma fonksiyonu false döndürürse yineleme durur.

// Bir diziyi yinele
$.each(['a', 'b', 'c'], function (index, value) {
  console.log(index + ':' + value);
})

// Sonuç:
// 0:a
// 1:b
// 2:c

// Bir nesneyi yinele
$.each({'name': 'mdui', 'lang': 'zh'}, function (key, value) {
  console.log(key + ':' + value);
})

// Sonuç:
// name:mdui
// lang:zh

İkinci dizinin öğelerini birinci diziye ekler ve birleştirilmiş diziyi döndürür.

var first = ['a', 'b', 'c'];
var second = ['c', 'd', 'e'];
var result = $.merge(first, second);

console.log(first); // ['a', 'b', 'c', 'c', 'd', 'e']
console.log(result); // ['a', 'b', 'c', 'c', 'd', 'e']

Dizideki yinelenen öğeleri filtreler.

var result = $.unique([1, 2, 12, 3, 2, 1, 2, 1, 1, 1, 1]);
console.log(result); // [1, 2, 12, 3]

Bir diziyi veya nesneyi yineler ve fonksiyonun dönüş değerlerinden oluşan yeni bir dizi döndürür.

Fonksiyonun ilk parametresi dizi veya nesnenin karşılık gelen konumundaki değerdir, ikinci parametre ise dizinin indeksi veya nesnenin anahtarıdır.

Fonksiyon herhangi bir değer döndürebilir; fonksiyon bir dizi döndürürse genişletilir; null veya undefined döndürürse yoksayılır. Fonksiyonun içindeki this, window nesnesini gösterir.

// Diziyi yinele
var result = $.map(['a', 'b', 'c'], function (value, index) {
  return index + value;
});
console.log(result); // ['0a', '1b', '2c']

// Geri çağırma fonksiyonu bir dizi döndürdüğünde genişletilir
var result = $.map([1, 2, 3], function (value, index) {
  return [value, value + 1];
});
console.log(result); // [1, 2, 2, 3, 3, 4]

// Nesneyi yinele
var result = $.map({ name: 'mdui', password: '123456' }, function (value, key) {
  return key + ':' + value;
});
console.log(result); // ['name:mdui', 'password:123456']

Üst düğümün alt düğümü içerip içermediğini belirler, bir boolean değeri döndürür.

$.contains(document, document.body); // true
$.contains(document.body, document); // false

Koleksiyondaki en az bir öğe parametreyle eşleşirse true, aksi takdirde false döndürür.

Parametre bir CSS seçicisi, DOM öğesi, DOM öğesi dizisi, JQ nesnesi veya geri çağırma fonksiyonu olabilir.

Parametre bir geri çağırma fonksiyonu olduğunda, fonksiyonun ilk parametresi indeks konumu, ikinci parametresi mevcut öğedir ve this mevcut öğeyi gösterir. Fonksiyon true döndürürse eşleşme var demektir; false döndürürse eşleşme yok demektir.

$('.box').is('.box'); // true
$('.box').is('.boxss'); // false
$('.box').is($('.box')[0]); // true

// Geri çağırma fonksiyonunun dönüş değerine göre belirle
$(document).is(function (index, element) {
  return element === document;
});
// true

Mevcut koleksiyondaki öğelerin sayısını döndürür.

$('body').length; // 1

Mevcut koleksiyonu yineler ve koleksiyondaki her öğe için bir fonksiyon çalıştırır. Fonksiyon false döndürürse yineleme sona erer.

Fonksiyonun ilk parametresi öğenin indeks konumu, ikinci parametresi mevcut öğedir. Fonksiyondaki this mevcut öğeyi gösterir.

$('img').each(function(index, element) {
  this.src = 'test' + index + '.jpg';
});

Mevcut koleksiyonu yineler, koleksiyondaki her öğe için bir fonksiyon çalıştırır ve fonksiyon dönüş değerlerinden oluşan yeni bir koleksiyon döndürür. Fonksiyon null veya undefined döndürürse filtrelenir.

Fonksiyonun ilk parametresi öğenin indeks konumu, ikinci parametresi mevcut öğedir. Fonksiyonun this'i mevcut öğeyi gösterir.

var result = $('input.checked').map(function (index, element) {
  return $(this).val();
});

// result, eşleşen öğelerin değerlerinden oluşan bir JQ nesnesidir

Yalnızca belirtilen indeks konumundaki öğeleri içeren bir koleksiyon döndürür.

$('div').eq(0); // Yalnızca ilk öğeyi içeren bir JQ nesnesi döndürür
$('div').eq(-1); // Yalnızca son öğeyi içeren bir JQ nesnesi döndürür
$('div').eq(-2); // Yalnızca sondan ikinci öğeyi içeren bir JQ nesnesi döndürür

Yalnızca ilk öğeyi içeren bir koleksiyon döndürür.

$('div').first(); // Yalnızca ilk div'i içeren bir JQ nesnesi döndürür

Yalnızca son öğeyi içeren bir koleksiyon döndürür.

$('div').last(); // Yalnızca son div'i içeren bir JQ nesnesi döndürür

Belirtilen indeks konumundaki öğeyi döndürür. Hiçbir parametre geçirilmezse, koleksiyondaki tüm öğelerden oluşan bir dizi döndürür.

$('div').get(); // Tüm div öğelerinden oluşan diziyi döndürür
$('div').get(0); // İlk div öğesini döndürür
$('div').get(-1); // Son div öğesini döndürür

Hiçbir parametre geçirilmezse, koleksiyondaki ilk öğenin kardeş öğelerine göre indeks konumunu döndürür.

Parametre olarak bir CSS seçicisi geçirilirse, koleksiyondaki ilk öğenin CSS seçicisiyle eşleşen öğelere göre indeks konumunu döndürür.

Bir DOM öğesi geçirilirse, o DOM öğesinin koleksiyondaki indeks değerini döndürür.

Bir JQ nesnesi geçirilirse, nesnedeki ilk öğenin mevcut koleksiyondaki indeks konumunu döndürür.

<div id="child">
  <div id="child1"></div>
  <div id="child2"></div>
  <div id="child3"></div>
  <div id="child4"></div>
</div>

$('#child3').index(); // 2
$('#child3').index('#child div'); // 2
$('#child div').index($('#child3').get(0)); // 2

Mevcut koleksiyonun bir alt kümesini döndürür.

İlk parametre alt kümenin başlangıç konumu, ikinci parametre alt kümenin bitiş konumudur; ikinci parametre geçirilmezse, başlangıç konumundan sona kadar olan tüm öğeleri içerdiği anlamına gelir.

// Koleksiyondaki üçüncü öğeden (üçüncü dahil) sonraki tüm öğeleri döndürür
$('div').slice(3);

// Koleksiyondaki üçüncü ile beşinci (üçüncü dahil, beşinci hariç) arasındaki öğeleri döndürür
$('div').slice(3, 5);

Mevcut koleksiyondan belirtilen ifadeyle eşleşen öğeleri seçer. Parametre bir CSS seçicisi, DOM öğesi, DOM öğesi dizisi veya geri çağırma fonksiyonu olabilir.

Parametre bir fonksiyon olduğunda, fonksiyonun ilk parametresi indeks konumu, ikinci parametresi mevcut öğedir ve fonksiyondaki this mevcut öğeyi gösterir. Fonksiyon true döndürdüğünde mevcut öğe tutulur, false döndürdüğünde mevcut öğe kaldırılır.

// .box içeren tüm div öğelerini seçer
$('div').filter('.box');

// Seçili olan tüm seçenekleri seçer
$('#select option').filter(function (index, element) {
  return element.selected;
});

Mevcut koleksiyondan belirtilen ifadeyle eşleşmeyen öğeleri seçer. Parametre bir CSS seçicisi, DOM öğesi, DOM öğesi dizisi veya geri çağırma fonksiyonu olabilir.

Parametre bir fonksiyon olduğunda, fonksiyonun ilk parametresi indeks konumu, ikinci parametresi mevcut öğedir ve fonksiyondaki this mevcut öğeyi gösterir. Fonksiyon true döndürdüğünde mevcut öğe kaldırılır, false döndürdüğünde mevcut öğe tutulur.

// .box sınıfını içermeyen tüm div öğelerini seçer
$('div').not('.box');

// Seçili olmayan tüm seçenekleri seçer
$('#select option').not(function (index, element) {
  return element.selected;
});

Koleksiyondaki ilk öğenin belirtilen CSS sınıfını içerip içermediğini belirler.

// İlk div öğesinin .item içerip içermediğini belirle
$('div').hasClass('item')

Koleksiyondaki her öğeye CSS sınıfları ekler; birden fazla sınıf adı boşlukla ayrılabilir.

CSS sınıf adlarını döndüren bir geri çağırma fonksiyonu da geçirilebilir. Fonksiyonun ilk parametresi indeks konumu, ikinci parametresi o öğedeki orijinal CSS sınıf adıdır ve fonksiyondaki this mevcut öğeyi gösterir.

// Tüm div öğelerine .item ekle
$('div').addClass('item')

// Tüm div öğelerine .item1 ve .item2 ekle
$('div').addClass('item1 item2')

// Tüm div öğelerine geri çağırma fonksiyonu tarafından döndürülen CSS sınıflarını ekle
$('div').addClass(function (index, currentClassName) {
  return currentClassName + '-' + index;
})

Koleksiyondaki öğelerden CSS sınıflarını kaldırır; birden fazla sınıf adı boşlukla ayrılabilir.

CSS sınıf adlarını döndüren bir geri çağırma fonksiyonu da geçirilebilir. Fonksiyonun ilk parametresi indeks konumu, ikinci parametresi o öğedeki orijinal CSS sınıf adıdır ve fonksiyondaki this mevcut öğeyi gösterir.

Hiçbir parametre geçirilmezse, öğelerdeki class özniteliği doğrudan kaldırılır.

// Tüm div öğelerinden .item kaldır
$('div').removeClass('item')

// Tüm div öğelerinden .item1 ve .item2 kaldır
$('div').removeClass('item1 item2')

// Tüm div öğelerinden geri çağırma fonksiyonu tarafından döndürülen CSS sınıflarını kaldır
$('div').removeClass(function (index, currentClassName) {
  return 'item';
})

// class özniteliğini doğrudan kaldır
$('div').removeClass()

Öğe üzerindeki CSS sınıfı varsa silinir, yoksa eklenir. Birden fazla sınıf adı boşlukla ayrılabilir.

CSS sınıf adlarını döndüren bir geri çağırma fonksiyonu da geçirilebilir. Fonksiyonun ilk parametresi indeks konumu, ikinci parametresi o öğedeki orijinal CSS sınıf adıdır ve fonksiyondaki this mevcut öğeyi gösterir.

// Tüm div öğelerinde .item sınıfını değiştir
$('div').toggleClass('item')

// Tüm div öğelerinde .item1 ve .item2 sınıflarını değiştir
$('div').toggleClass('item1 item2')

// Tüm div öğelerinde geri çağırma fonksiyonu tarafından döndürülen CSS sınıflarını değiştir
$('div').toggleClass(function (index, currentClassName) {
  return 'item';
})

Koleksiyondaki ilk öğenin öznitelik değerini alır.

// İlk öğenin öznitelik değerini al
$('input').prop('checked');

Koleksiyondaki tüm öğelerin öznitelik değerlerini ayarlamak için de kullanılabilir.

Ayarlanan öznitelik değeri bir geri çağırma fonksiyonunun dönüş değeri olabilir. Geri çağırma fonksiyonunun ilk parametresi öğenin indeks konumu, ikinci parametresi o öğedeki orijinal öznitelik değeridir ve fonksiyon içindeki this mevcut öğeyi gösterir.

Öznitelik değeri veya geri çağırma fonksiyonunun dönüş değeri void veya undefined ise, orijinal öznitelik değiştirilmez.

Aynı anda birden fazla öznitelik ayarlamak için bir nesne de geçirilebilir.

// Tüm seçili öğelerin öznitelik değerlerini ayarla
$('input').prop('checked', true);

// Geri çağırma fonksiyonunun dönüş değeri aracılığıyla öznitelik değerini ayarla
$('input').prop('checked', function (index, oldPropValue) {
  return true;
});

// Öğenin birden fazla öznitelik değerini aynı anda ayarla
$('input').prop({
  checked: false,
  disabled: function (index, oldPropValue) {
    return true;
  }
});

Koleksiyondaki tüm öğelerden belirtilen öznitelik değerlerini siler.

$('input').removeProp('disabled');

Koleksiyondaki ilk öğenin özellik değerini alır.

// İlk öğenin özellik değerini al
$('div').attr('username');

Koleksiyondaki tüm öğelerin özellik değerlerini ayarlamak için de kullanılabilir.

Ayarlanan özellik değeri bir geri çağırma fonksiyonunun dönüş değeri olabilir. Geri çağırma fonksiyonunun ilk parametresi öğenin indeks konumu, ikinci parametresi o öğedeki orijinal özellik değeridir ve fonksiyon içindeki this mevcut öğeyi gösterir.

Özellik değeri veya geri çağırma fonksiyonunun dönüş değeri void veya undefined ise, orijinal özellik değiştirilmez. Özellik değeri veya geri çağırma fonksiyonunun dönüş değeri null ise, belirtilen özellik silinir.

Aynı anda birden fazla özellik ayarlamak için bir nesne de geçirilebilir.

// Tüm seçili öğelerin özellik değerlerini ayarla
$('div').attr('username', 'mdui');

// Geri çağırma fonksiyonunun dönüş değeri aracılığıyla özellik değerini ayarla
$('div').attr('username', function (index, oldAttrValue) {
  return 'mdui';
});

// Öğenin birden fazla özellik değerini aynı anda ayarla
$('div').attr({
  username: 'mdui',
  lastname: function (index, oldAttrValue) {
    return 'test';
  }
});

Koleksiyondaki tüm öğelerden belirtilen özellik değerlerini siler; birden fazla özellik adı boşlukla ayrılabilir.

// Koleksiyondaki tüm öğelerden bir özelliği sil
$('div').removeAttr('username');

// Koleksiyondaki tüm öğelerden birden fazla özelliği sil
$('div').removeAttr('username lastname');

Koleksiyondaki ilk öğenin değerini alır.

Öğe <select multiple="multiple"> ise, her seçim öğesini içeren bir dizi döndürülür.

// Seçili olan ilk öğenin değerini al
$('#input').val();

Koleksiyondaki tüm öğelerin değerlerini ayarlamak için de kullanılabilir.

Ayarlanan değer bir dize, sayı, dize dizisi veya geri çağırma fonksiyonu olabilir.

Değer bir geri çağırma fonksiyonuysa, ilk parametre öğenin indeks konumu, ikinci parametre öğenin orijinal değeridir ve fonksiyondaki this mevcut öğeyi gösterir.

Öğe <input type="checkbox">, <input type="radio"> veya <option> ise, öğe değeri veya fonksiyonun dönüş değeri bir dizi olabilir; bu durumda değeri dizide olan öğeler seçilir ve değeri dizide olmayan öğelerin seçimi kaldırılır.

Değer veya fonksiyonun dönüş değeri undefined ise, öğe değeri boş olarak ayarlanır.

// Seçili öğelerin değerini ayarla
$('#input').val('input value');

// Geri çağırma fonksiyonunun dönüş değeri aracılığıyla öğe değerini ayarla
$('#input').val(function (index, oldValue) {
  return 'new value';
});

Koleksiyondaki tüm öğelerin (alt öğeleri dahil) metin içeriğini alır.

// Tüm .box öğelerinin metnini al
$('.box').text();

Koleksiyondaki tüm öğelerin metnini ayarlamak için de kullanılabilir.

Ayarlanan değer bir dize, sayı, boolean veya geri çağırma fonksiyonu olabilir.

Geri çağırma fonksiyonuysa, ilk parametre öğenin indeks konumu, ikinci parametre öğenin orijinal metin içeriğidir ve fonksiyon içindeki this mevcut öğeyi gösterir.

Ayarlanan değer veya geri çağırma fonksiyonunun dönüş değeri undefined ise, ilgili öğenin metni değiştirilmez.

// Seçili öğelerin metin içeriğini ayarla
$('.box').text('text content');

// Geri çağırma fonksiyonunun dönüş değeri aracılığıyla öğelerin metin içeriğini ayarla
$('.box').text(function (index, oldTextContent) {
  return 'new text content';
});

Koleksiyondaki ilk öğenin HTML içeriğini alır.

// İlk .box öğesinin HTML içeriğini al
$('.box').html();

Koleksiyondaki tüm öğelerin HTML içeriğini ayarlamak için de kullanılabilir.

Ayarlanan değer bir HTML dizesi, DOM öğesi veya geri çağırma fonksiyonu olabilir.

Geri çağırma fonksiyonuysa, ilk parametre öğenin indeks konumu, ikinci parametre öğenin orijinal HTML içeriğidir ve fonksiyon içindeki this mevcut öğeyi gösterir.

Ayarlanan değer veya fonksiyonun dönüş değeri undefined ise, ilgili öğenin HTML'i değiştirilmez.

// Seçili öğelerin HTML'ini ayarla
$('.box').html('<div>new html content</div>');

// Geri çağırma fonksiyonunun dönüş değeri aracılığıyla öğelerin HTML içeriğini ayarla
$('.box').html(function (index, oldHTMLContent) {
  return '<div>new html content</div>';
});

Belirtilen öğede veri okur veya saklar.

Veri saklarken değer undefined ise, öğedeki ilgili veriyi okumaya eşdeğerdir. Yani $.data(element, 'key', undefined) ve $.data(element, 'key') eşdeğerdir.

Not: Bu metot öğedeki data-* özniteliklerini almaz.

// Belirtilen öğede veri saklar ve saklanan değeri döndürür
$.data(document.body, 'layout', 'dark'); // dark döndürür

// Belirtilen öğede aynı anda birden fazla veri saklar
$.data(document.body, {
  primary: 'indigo',
  accent: 'pink',
});

// Belirtilen öğede saklanan veriyi alır
$.data(document.body, 'layout'); // dark döndürür

// Belirtilen öğede saklanan tüm verileri alır
$.data(document.body); // { layout: 'dark', primary: 'indigo', accent: 'pink' } döndürür

Belirtilen öğede saklanan veriyi kaldırır.

Birden fazla anahtar adı boşlukla ayrılabilir veya birden fazla anahtar adı diziyle temsil edilebilir. Anahtar adı belirtilmediğinde, öğedeki tüm veriler kaldırılır.

// Öğeden anahtar adı name olan veriyi kaldır
$.removeData(document.body, 'name');

// Öğeden anahtar adı name1 ve name2 olan verileri kaldır. Aşağıdaki iki metot eşdeğerdir:
$.removeData(document.body, 'name1 name2');
$.removeData(document.body, ['name1', 'name2']);

// Öğede saklanan tüm verileri kaldır
$.removeData(document.body);

Mevcut koleksiyonun öğelerinde veri okur veya saklar.

Veri saklarken değer undefined ise saklama işlemi yapılmaz.

Not: Bu metodun aldığı veriler öğedeki data-* özniteliklerini içerecektir.

// Mevcut koleksiyondaki öğelerde veri sakla
$('.box').data('layout', 'dark');

// Mevcut koleksiyondaki öğelerde aynı anda birden fazla veri sakla
$('.box').data({
  primary: 'indigo',
  accent: 'pink',
});

// Mevcut koleksiyondaki ilk öğede saklanan belirtilen veriyi alır
$('.box').data('layout'); // dark döndürür

// Mevcut koleksiyondaki ilk öğede saklanan tüm verileri alır
$('.box').data(); // { layout: 'dark', primary: 'indigo', accent: 'pink' } döndürür

Mevcut koleksiyonun öğelerinde saklanan veriyi kaldırır.

Birden fazla anahtar adı boşlukla ayrılabilir veya birden fazla anahtar adı diziyle temsil edilebilir. Anahtar adı belirtilmediğinde, öğedeki tüm veriler kaldırılır.

Not: Bu metot yalnızca .data() metoduyla ayarlanan verileri kaldırır, data-* özniteliklerindeki verileri kaldırmaz.

// Anahtar adı name olan veriyi kaldır
$('.box').removeData('name');

// Anahtar adı name1 ve name2 olan verileri kaldır. Aşağıdaki iki metot eşdeğerdir:
$('.box').removeData('name1 name2');
$('.box').removeData(['name1', 'name2']);

// Öğede saklanan tüm verileri kaldır
$('.box').removeData();

Koleksiyondaki ilk öğenin CSS özellik değerini alır.

$('.box').css('color')

Koleksiyondaki tüm öğelerin CSS özellik değerlerini ayarlamak için de kullanılabilir.

Özellik değeri bir dize, sayı veya dize ya da sayı döndüren bir geri çağırma fonksiyonu olabilir.

Özellik değeri bir geri çağırma fonksiyonuysa, ilk parametre öğenin indeks konumu, ikinci parametre öğenin orijinal CSS özellik değeridir ve fonksiyondaki this mevcut öğeyi gösterir.

Özellik değeri veya geri çağırma fonksiyonu void, undefined veya null döndürürse, mevcut öğenin CSS özellik değeri değiştirilmez.

Özellik değeri veya geri çağırma fonksiyonu sayı döndürürse, birim olarak px eklenir. Bu özellik birim olarak px kullanamıyorsa, değer doğrudan dizeye dönüştürülür.

Aynı anda birden fazla CSS özelliği ayarlamak için bir anahtar-değer nesnesi de geçirilebilir.

// Koleksiyondaki tüm öğelerin stil değerlerini ayarla
$('.box').css('color', 'red')

// Geri çağırma fonksiyonunun dönüş değeri aracılığıyla tüm öğelerin stil değerlerini ayarla
$('.box').css('color', function (index, oldCSSValue) {
  return 'green';
});

// Bir nesne geçirerek birden fazla stili aynı anda ayarla
$('.box').css({
  'background-color': 'white',
  color: function (index, oldCSSValue) {
    return 'blue';
  },
});

Koleksiyondaki ilk öğenin genişliğini (piksel cinsinden) alır; padding, border ve margin genişliğini içermez.

$('.box').width();

Koleksiyondaki tüm öğelerin genişliğini (padding, border ve margin genişliğini içermez) ayarlamak için de kullanılabilir.

Değer, birimli bir dize, sayı veya birimli bir dize ya da sayı döndüren bir geri çağırma fonksiyonu olabilir.

Geri çağırma fonksiyonunun ilk parametresi öğenin indeks konumu, ikinci parametresi öğenin orijinal genişlik değeridir ve fonksiyondaki this mevcut öğeyi gösterir.

Değer veya geri çağırma fonksiyonunun dönüş değeri sayısal ise, birim olarak otomatik olarak px eklenir.

Değer veya geri çağırma fonksiyonunun dönüş değeri null veya undefined ise, öğenin genişliği değiştirilmez.

// Koleksiyondaki tüm öğelerin genişliğini ayarla
$('.box').width('20%');

// Değer sayısal olduğunda, varsayılan birim px'dir
$('.box').width(10);

// Yüksekliği geri çağırma fonksiyonunun dönüş değeriyle ayarla
$('.box').width(function (index, oldWidth) {
  return 10;
});

Koleksiyondaki ilk öğenin yüksekliğini (piksel cinsinden) alır; padding, border ve margin yüksekliğini içermez.

$('.box').height();

Koleksiyondaki tüm öğelerin yüksekliğini (padding, border ve margin yüksekliğini içermez) ayarlamak için de kullanılabilir.

Değer, birimli bir dize, sayı veya birimli bir dize ya da sayı döndüren bir geri çağırma fonksiyonu olabilir.

Geri çağırma fonksiyonunun ilk parametresi öğenin indeks konumu, ikinci parametresi öğenin orijinal yükseklik değeridir ve fonksiyondaki this mevcut öğeyi gösterir.

Değer veya geri çağırma fonksiyonunun dönüş değeri sayısal ise, birim olarak otomatik olarak px eklenir.

Değer veya geri çağırma fonksiyonunun dönüş değeri null veya undefined ise, öğenin yüksekliği değiştirilmez.

// Koleksiyondaki tüm öğelerin yüksekliğini ayarla
$('.box').height('20%');

// Değer sayısal olduğunda, varsayılan birim px'dir
$('.box').height(10);

// Yüksekliği geri çağırma fonksiyonunun dönüş değeriyle ayarla
$('.box').height(function (index, oldHeight) {
  return 10;
});

Koleksiyondaki ilk öğenin genişliğini (piksel cinsinden) alır; padding içerir, border ve margin genişliğini içermez.

$('.box').innerWidth();

Koleksiyondaki tüm öğelerin genişliğini (padding içerir, border ve margin genişliğini içermez) ayarlamak için de kullanılabilir.

Değer, birimli bir dize, sayı veya birimli bir dize ya da sayı döndüren bir geri çağırma fonksiyonu olabilir.

Geri çağırma fonksiyonunun ilk parametresi öğenin indeks konumu, ikinci parametresi öğenin orijinal genişlik değeridir ve fonksiyondaki this mevcut öğeyi gösterir.

Değer veya geri çağırma fonksiyonunun dönüş değeri sayısal ise, birim olarak otomatik olarak px eklenir.

Değer veya geri çağırma fonksiyonunun dönüş değeri null veya undefined ise, öğenin genişliği değiştirilmez.

// Koleksiyondaki tüm öğelerin genişliğini ayarla
$('.box').innerWidth('20%');

// Değer sayısal olduğunda, varsayılan birim px'dir
$('.box').innerWidth(10);

// Genişliği geri çağırma fonksiyonunun dönüş değeriyle ayarla
$('.box').innerWidth(function (index, oldWidth) {
  return 10;
});

Koleksiyondaki ilk öğenin yüksekliğini (piksel cinsinden) alır; padding içerir, border ve margin yüksekliğini içermez.

$('.box').innerHeight();

Koleksiyondaki tüm öğelerin yüksekliğini (padding içerir, border ve margin yüksekliğini içermez) ayarlamak için de kullanılabilir.

Değer, birimli bir dize, sayı veya birimli bir dize ya da sayı döndüren bir geri çağırma fonksiyonu olabilir.

Geri çağırma fonksiyonunun ilk parametresi öğenin indeks konumu, ikinci parametresi öğenin orijinal yükseklik değeridir ve fonksiyondaki this mevcut öğeyi gösterir.

Değer veya geri çağırma fonksiyonunun dönüş değeri sayısal ise, birim olarak otomatik olarak px eklenir.

Değer veya geri çağırma fonksiyonunun dönüş değeri null veya undefined ise, öğenin yüksekliği değiştirilmez.

// Koleksiyondaki tüm öğelerin yüksekliğini ayarla
$('.box').innerHeight('20%');

// Değer sayısal olduğunda, varsayılan birim px'dir
$('.box').innerHeight(10);

// Yüksekliği geri çağırma fonksiyonunun dönüş değeriyle ayarla
$('.box').innerHeight(function (index, oldHeight) {
  return 10;
});

Koleksiyondaki ilk öğenin genişliğini (piksel cinsinden) alır; padding ve border genişliğini içerir, margin genişliğini içermez; true parametresi geçirilebilir, genişlik margin genişliğini içerecektir.

// Padding ve border genişliğini içerir
$('.box').outerWidth();

// Padding, border ve margin genişliğini içerir
$('.box').outerWidth(true);

Koleksiyondaki tüm öğelerin genişliğini (padding ve border içerir, margin genişliğini içermez, ikinci parametrede true geçirilebilir, genişlik margin genişliğini içerecektir) ayarlamak için de kullanılabilir.

İlk parametre, birimli bir dize, sayı veya birimli bir dize ya da sayı döndüren bir geri çağırma fonksiyonu olabilir.

Geri çağırma fonksiyonunun ilk parametresi öğenin indeks konumu, ikinci parametresi öğenin orijinal genişliğidir ve fonksiyondaki this mevcut öğeyi gösterir.

Değer veya geri çağırma fonksiyonunun dönüş değeri sayısal ise, birim olarak otomatik olarak px eklenir.

Değer veya geri çağırma fonksiyonunun dönüş değeri null veya undefined ise, öğenin genişliği değiştirilmez.

// Koleksiyondaki tüm öğelerin genişliğini ayarla
$('.box').outerWidth('20%');

// Değer sayısal olduğunda, varsayılan birim px'dir
$('.box').outerWidth(10);

// İkinci parametre true olduğunda, genişlik margin içerecektir
$('.box').outerWidth(10, true);

// Genişliği geri çağırma fonksiyonunun dönüş değeriyle ayarla
$('.box').outerWidth(function (index, oldWidth) {
  return 10;
});

Koleksiyondaki ilk öğenin yüksekliğini (piksel cinsinden) alır; padding ve border yüksekliğini içerir, margin yüksekliğini içermez; true parametresi geçirilebilir, yükseklik margin yüksekliğini içerecektir.

// Padding ve border yüksekliğini içerir
$('.box').outerHeight();

// Padding, border ve margin yüksekliğini içerir
$('.box').outerHeight(true);

Koleksiyondaki tüm öğelerin yüksekliğini (padding ve border içerir, margin yüksekliğini içermez, ikinci parametrede true geçirilebilir, yükseklik margin yüksekliğini içerecektir) ayarlamak için de kullanılabilir.

İlk parametre, birimli bir dize, sayı veya birimli bir dize ya da sayı döndüren bir geri çağırma fonksiyonu olabilir.

Geri çağırma fonksiyonunun ilk parametresi öğenin indeks konumu, ikinci parametresi öğenin orijinal yüksekliğidir ve fonksiyondaki this mevcut öğeyi gösterir.

Değer veya geri çağırma fonksiyonunun dönüş değeri sayısal ise, birim olarak otomatik olarak px eklenir.

Değer veya geri çağırma fonksiyonunun dönüş değeri null veya undefined ise, öğenin yüksekliği değiştirilmez.

// Koleksiyondaki tüm öğelerin yüksekliğini ayarla
$('.box').outerHeight('20%');

// Değer sayısal olduğunda, varsayılan birim px'dir
$('.box').outerHeight(10);

// İkinci parametre true olduğunda, yükseklik margin içerecektir
$('.box').outerHeight(10, true);

// Yüksekliği geri çağırma fonksiyonunun dönüş değeriyle ayarla
$('.box').outerHeight(function (index, oldWidth) {
  return 10;
});

Koleksiyondaki tüm öğeleri gizle.

$('.box').hide();

Koleksiyondaki tüm öğeleri göster.

$('.box').show();

Koleksiyondaki tüm öğelerin görüntü durumunu değiştir.

$('.box').toggle();

Koleksiyondaki ilk öğenin document öğesine göre koordinatını alır.

$('.box').offset(); // { top: 20, left: 30 }

Koleksiyondaki tüm öğelerin document öğesine göre koordinatını ayarlamak için de kullanılabilir.

Parametre top ve left özelliklerini içeren bir nesne veya bu format nesnesini döndüren bir geri çağırma fonksiyonudur.

Parametre bir geri çağırma fonksiyonuysa, ilk parametre öğenin indeks konumu, ikinci parametre öğenin orijinal koordinatıdır ve fonksiyondaki this mevcut öğeyi gösterir.

Parametrede top veya left değeri undefined ise, ilgili değer değiştirilmez.

// Koleksiyondaki tüm öğelerin koordinatını ayarla
$('.box').offset({ top: 20, left: 30 });

// Geri çağırma fonksiyonunun dönüş değeriyle öğenin koordinatını ayarla
$('.box').offset(function (index, oldOffset) {
  return { top: 20, left: 30 };
});

Koleksiyondaki ilk öğenin konumlandırılmış üst öğesini döndürür. Yani position değeri relative veya absolute olan ilk üst öğeyi döndürür.

$('.box').offsetParent();

Koleksiyondaki ilk öğenin üst öğesine göre kaydırmasını alır.

$('.box').position(); // { top: 20, left: 30 }

Geçerli koleksiyondaki tüm öğelerde, CSS seçicisine göre belirtilen alt düğümlerin koleksiyonunu bulur.

// #box elementinin alt düğümlerinde, .box içeren düğümleri bulur
$('#box').find('.box')

Geçerli koleksiyondaki tüm öğelerde, doğrudan alt öğelerin koleksiyonunu alır.

Bir CSS seçicisini parametre olarak iletebilir ve alt öğeleri filtreleyebilirsiniz.

// #box elementinin tüm doğrudan alt öğelerini bulur
$('#box').children();

// #box elementinin doğrudan alt öğeleri arasında, .box içeren element koleksiyonunu bulur
$('#box').children('.box')

Geçerli koleksiyondaki tüm öğelerde, belirtilen alt öğeyi içeren öğeleri filtreler.

Parametre CSS seçicisi veya DOM öğesi olabilir.

// ul içeren li elementlerine arka plan rengini ekle
$('li').has('ul').css('background-color', 'red');

Geçerli koleksiyondaki tüm öğelerin doğrudan üst öğelerinin koleksiyonunu alır.

Bir CSS seçicisini parametre olarak iletebilir, yalnızca parametreyle eşleşen üst öğelerin koleksiyonunu döndürür.

// .box elementinin doğrudan üst öğesini döndürür
$('.box').parent();

// .box elementinin doğrudan üst öğeleri arasında, .parent sınıfı içeren elementi döndürür
$('.box').parent('.parent');

Geçerli koleksiyondaki tüm öğelerin ata öğelerinin koleksiyonunu alır.

Bir CSS seçicisini parametre olarak iletebilir, yalnızca parametreyle eşleşen ata öğelerin koleksiyonunu döndürür.

// span elementinin tüm ata öğelerini döndürür
$('span').parents();

// span elementinin p elementi olan tüm ata öğelerini döndürür
$('span').parents('p');

Geçerli koleksiyondaki her öğenin tüm üst seviye öğelerini alır ve ilk parametreyle eşleşen öğeyi bulana kadar devam eder (eşleşen öğe dahil değildir).

İlk parametre CSS seçicisi, DOM öğesi veya JQ nesnesi olabilir.

İkinci bir parametre geçirilebilir ve CSS seçicisi olmalı, yalnızca parametreyle eşleşen öğelerin döndürüleceğini gösterir.

Parametre belirtilmezse, tüm ata öğeler eşleştirilecektir; bu, .parents() ile aynı etkiye sahiptir.

// .item elementinin tüm ata öğelerini alır
$('.item').parentsUntil();

// .item elementinin tüm üst seviye öğelerini ara, .parent elementi bulana kadar
$('.item').parentsUntil('.parent');

// .item elementinin p elementi olan tüm ata öğelerini al, .parent elementi bulana kadar
$('.item').parentsUntil('.parent', 'div');

Geçerli koleksiyondaki tüm öğelerin önceki kardeş öğesinin koleksiyonunu alır.

Bir CSS seçicisini parametre olarak iletebilir, yalnızca parametreyle eşleşen kardeş öğelerin koleksiyonunu alır.

// .box elementinin önceki elementinin koleksiyonunu alır
$('.box').prev();

// .box elementinin önceki div elementinin koleksiyonunu alır
$('.box').prev('div');

Geçerli koleksiyondaki tüm öğelerin ön tarafındaki tüm kardeş öğelerin koleksiyonunu alır.

Bir CSS seçicisini parametre olarak iletebilir, yalnızca parametreyle eşleşen kardeş öğelerin koleksiyonunu alır.

// .box elementinin ön tarafındaki tüm kardeş öğeleri alır
$('.box').prevAll();

// .box elementinin ön tarafındaki .selected içeren tüm kardeş öğeleri alır
$('.box').prevAll('.selected');

Geçerli koleksiyondaki her öğenin ön tarafındaki tüm kardeş öğelerini alır ve ilk parametreyle eşleşen öğeyi bulana kadar devam eder (eşleşen öğe dahil değildir).

İlk parametre CSS seçicisi, DOM öğesi veya JQ nesnesi olabilir.

İkinci bir parametre geçirilebilir ve CSS seçicisi olmalı, yalnızca parametreyle eşleşen öğelerin döndürüleceğini gösterir.

// .box elementinin ön tarafındaki tüm kardeş öğeleri alır
$('.box').prevUntil();

// .box elementinin ön tarafındaki tüm kardeş öğelerini al, .until elementi bulana kadar
$('.box').prevUntil('.until');

// .box elementinin ön tarafındaki div öğelerini al, .until elementi bulana kadar
$('.box').prevUntil('.until', 'div');

Geçerli koleksiyondaki tüm öğelerin sonraki kardeş öğesinin koleksiyonunu alır.

Bir CSS seçicisini parametre olarak iletebilir, yalnızca parametreyle eşleşen kardeş öğelerin koleksiyonunu alır.

// .box elementinin sonraki elementinin koleksiyonunu alır
$('.box').next();

// .box elementinin sonraki div elementinin koleksiyonunu alır
$('.box').next('div');

Geçerli koleksiyondaki tüm öğelerin arkasındaki tüm kardeş öğelerin koleksiyonunu alır.

Bir CSS seçicisini parametre olarak iletebilir, yalnızca parametreyle eşleşen kardeş öğelerin koleksiyonunu alır.

// .box elementinin arkasındaki tüm kardeş öğeleri alır
$('.box').nextAll();

// .box elementinin arkasındaki .selected içeren tüm kardeş öğeleri alır
$('.box').nextAll('.selected');

Geçerli koleksiyondaki her öğenin arkasındaki tüm kardeş öğelerini alır ve ilk parametreyle eşleşen öğeyi bulana kadar devam eder (eşleşen öğe dahil değildir).

İlk parametre CSS seçicisi, DOM öğesi veya JQ nesnesi olabilir.

İkinci bir parametre geçirilebilir ve CSS seçicisi olmalı, yalnızca parametreyle eşleşen öğelerin döndürüleceğini gösterir.

// .box elementinin arkasındaki tüm kardeş öğeleri alır
$('.box').nextUntil();

// .box elementinin arkasındaki tüm kardeş öğelerini al, .until elementi bulana kadar
$('.box').nextUntil('.until');

// .box elementinin arkasındaki div öğelerini al, .until elementi bulana kadar
$('.box').nextUntil('.until', 'div');

Geçerli öğeden yukarıya doğru adım adım eşleştir ve ilk eşleşen öğeyi döndür.

Parametre CSS seçicisi, DOM öğesi veya JQ nesnesi olabilir.

// .box elementinin üst öğesinde en yakın .parent elementi alır
$('.box').closest('.parent');

Geçerli koleksiyondaki her öğenin kardeş öğelerini alır.

Bir CSS seçicisini parametre olarak iletebilir, yalnızca parametreyle eşleşen kardeş öğeleri alır.

// .box elementinin tüm kardeş öğelerini alır
$('.box').siblings();

// .box elementinin tüm kardeş öğeleri arasında, .selected içeren elementi alır
$('.box').siblings('.selected');

Geçerli koleksiyona öğe ekle.

Parametre HTML dizesi, CSS seçicisi, JQ nesnesi, DOM öğesi, DOM öğesi dizisi veya NodeList olabilir.

// .selected içeren öğeleri geçerli koleksiyona ekle
$('.box').add('.selected');

Geçerli öğedeki tüm alt öğeleri kaldır.

$('.box').empty();

DOM'dan geçerli koleksiyondaki öğeleri kaldır.

Bir CSS seçicisini parametre olarak iletebilir, yalnızca parametreyle eşleşen öğeleri kaldırır.

// Tüm p öğelerini kaldır
$('p').remove();

// Tüm .box içeren p öğelerini kaldır
$('p').remove('.box');

Geçerli koleksiyondaki öğelerin içinin ön tarafına belirtilen içeriği ekle.

Parametre türü HTML dizesi, DOM öğesi, DOM öğesi dizisi veya JQ nesnesi olabilir. Birden fazla parametre iletmeyi destekler.

HTML dizesi, DOM öğesi, DOM öğesi dizisi veya JQ nesnesi döndüren bir geri çağırma fonksiyonunu da iletebilir. Fonksiyonun ilk parametresi mevcut öğenin indeks konumu, ikinci parametresi öğenin orijinal HTML'i ve fonksiyondaki this mevcut öğeyi gösterir.

Bu metot orijinal koleksiyonu döndürür.

// Bir öğe ekle
$('<p>I would like to say: </p>').prepend('<b>Hello</b>');
// Sonuç:<p><b>Hello</b>I would like to say: </p>

// Birden fazla öğe ekle
$('<p>I would like to say: </p>').prepend('<b>Hello</b>', '<b>World</b>');
// Sonuç:<p><b>Hello</b><b>World</b>I would like to say: </p>

// Geri çağırma fonksiyonuyla bir öğe ekle
$('<p>Hello</p>').prepend(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Sonuç:<p><b>Hello0</b>Hello</p>

Geçerli koleksiyondaki öğeleri belirtilen öğenin içinin ön tarafına ekle.

Parametre CSS seçicisi, HTML dizesi, DOM öğesi, DOM öğesi dizisi veya JQ nesnesi olabilir.

Bu metot orijinal koleksiyonu döndürür.

$('<div>Hello</div>').prependTo('<div>I would like to say: </div>');

// Sonuç:[ <div><div>Hello</div>I would like to say: </div> ]

Geçerli koleksiyondaki öğelerin içinin arkasına belirtilen içeriği ekle.

Parametre türü HTML dizesi, DOM öğesi, DOM öğesi dizisi veya JQ nesnesi olabilir. Birden fazla parametre iletmeyi destekler.

HTML dizesi, DOM öğesi, DOM öğesi dizisi veya JQ nesnesi döndüren bir geri çağırma fonksiyonunu da iletebilir. Fonksiyonun ilk parametresi mevcut öğenin indeks konumu, ikinci parametresi öğenin orijinal HTML'i ve fonksiyondaki this mevcut öğeyi gösterir.

Bu metot orijinal koleksiyonu döndürür.

// Bir öğe ekle
$('<p>I would like to say: </p>').append('<b>Hello</b>');
// Sonuç:<p>I would like to say: <b>Hello</b></p>

// Birden fazla öğe ekle
$('<p>I would like to say: </p>').append('<b>Hello</b>', '<b>World</b>');
// Sonuç:<p>I would like to say: <b>Hello</b><b>World</b></p>

// Geri çağırma fonksiyonuyla bir öğe ekle
$('<p>Hello</p>').append(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Sonuç:<p>Hello<b>Hello0</b></p>

Geçerli koleksiyondaki öğeleri belirtilen öğenin içinin arkasına ekle.

Parametre CSS seçicisi, HTML dizesi, DOM öğesi, DOM öğesi dizisi veya JQ nesnesi olabilir.

Bu metot orijinal koleksiyonu döndürür.

$('<div>Hello</div>').appendTo('<div>I would like to say: </div>')
// Sonuç:<div>I would like to say: <div>Hello</div></div>

Geçerli koleksiyondaki öğelerin arkasına belirtilen içeriği ekle, kardeş düğüm olarak.

Parametre türü HTML dizesi, DOM öğesi, DOM öğesi dizisi veya JQ nesnesi olabilir. Birden fazla parametre iletmeyi destekler.

HTML dizesi, DOM öğesi, DOM öğesi dizisi veya JQ nesnesi döndüren bir geri çağırma fonksiyonunu da iletebilir. Fonksiyonun ilk parametresi mevcut öğenin indeks konumu, ikinci parametresi öğenin orijinal HTML'i ve fonksiyondaki this mevcut öğeyi gösterir.

Bu metot orijinal koleksiyonu döndürür.

// Bir öğe ekle
$('<p>I would like to say: </p>').after('<b>Hello</b>')
// Sonuç:<p>I would like to say: </p><b>Hello</b>

// Birden fazla öğe ekle
$('<p>I would like to say: </p>').after('<b>Hello</b>', '<b>World</b>')
// Sonuç:<p>I would like to say: </p><b>Hello</b><b>World</b>

// Geri çağırma fonksiyonuyla bir öğe ekle
$('<p>Hello</p>').after(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Sonuç:<p>Hello</p><b>Hello0</b>

Geçerli koleksiyondaki öğeleri hedef öğenin arkasına ekle, kardeş öğe olarak.

Geçerli koleksiyondaki öğe sayfada zaten varsa, öğeyi kopyalamak yerine taşıyacaktır. Birden fazla hedef varsa, geçerli koleksiyondaki öğeleri klonla ve her hedef öğenin arkasına ekle.

Hedef öğeyi belirtmek için HTML dizesi, CSS seçicisi, DOM öğesi, DOM öğesi dizisi veya JQ nesnesi parametresini iletebilir.

$('<b>Hello</b>').insertAfter('<p>I would like to say: </p>');
// Sonuç:<p>I would like to say: </p><b>Hello</b>

Geçerli koleksiyondaki öğelerin ön tarafına belirtilen içeriği ekle, kardeş düğüm olarak.

Parametre türü HTML dizesi, DOM öğesi, DOM öğesi dizisi veya JQ nesnesi olabilir. Birden fazla parametre iletmeyi destekler.

HTML dizesi, DOM öğesi, DOM öğesi dizisi veya JQ nesnesi döndüren bir geri çağırma fonksiyonunu da iletebilir. Fonksiyonun ilk parametresi mevcut öğenin indeks konumu, ikinci parametresi öğenin orijinal HTML'i ve fonksiyondaki this mevcut öğeyi gösterir.

Bu metot orijinal koleksiyonu döndürür.

// Bir öğe ekle
$('<p>I would like to say: </p>').before('<b>Hello</b>')
// Sonuç:<b>Hello</b><p>I would like to say: </p>

// Birden fazla öğe ekle
$('<p>I would like to say: </p>').before('<b>Hello</b>', '<b>World</b>')
// Sonuç:<b>Hello</b><b>World</b><p>I would like to say: </p>

// Geri çağırma fonksiyonuyla bir öğe ekle
$('<p>Hello</p>').before(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Sonuç:<b>Hello0</b><p>Hello</p>

Geçerli koleksiyondaki öğeleri hedef öğenin ön tarafına ekle, kardeş öğe olarak.

Geçerli koleksiyondaki öğe sayfada zaten varsa, öğeyi kopyalamak yerine taşıyacaktır. Birden fazla hedef varsa, geçerli koleksiyondaki öğeleri klonla ve her hedef öğenin arkasına ekle.

Hedef öğeyi belirtmek için HTML dizesi, CSS seçicisi, DOM öğesi, DOM öğesi dizisi veya JQ nesnesi parametresini iletebilir.

$('<p>I would like to say: </p>').insertBefore('<b>Hello</b>');
// Sonuç:<p>I would like to say: </p><b>Hello</b>

Geçerli koleksiyondaki öğeleri belirtilen öğeyle değiştir.

Parametre HTML dizesi, DOM öğesi, DOM öğesi dizisi veya JQ nesnesi olabilir.

HTML dizesi, DOM öğesi, DOM öğesi dizisi veya JQ nesnesi döndüren bir geri çağırma fonksiyonunu da iletebilir. Fonksiyonun ilk parametresi mevcut öğenin indeks konumu, ikinci parametresi öğenin orijinal HTML'i ve fonksiyondaki this mevcut öğeyi gösterir.

Bu metot orijinal koleksiyonu (değiştirilen koleksiyon) döndürür.

// Tüm .box öğelerini <p>Hello</p> ile değiştir
$('.box').replaceWith('<p>Hello</p>');

// Tüm .box öğelerini geri çağırma fonksiyonunun dönüş değeriyle değiştir
$('.box').replaceWith(function (index, oldHTML) {
  return oldHTML + index;
});

Geçerli koleksiyondaki öğeleri belirtilen öğeyi değiştirecek şekilde kullan.

Parametre CSS seçicisi, DOM öğesi, DOM öğesi dizisi veya JQ nesnesi olabilir.

Bu metot orijinal koleksiyonu (öğeleri değiştirecek öğelerin koleksiyonu) döndürür.

// ${$t().a379}
$('.new').replaceAll('.box');

Derin klonlama yoluyla koleksiyondaki tüm öğeleri kopyala.

Orijinal cloneNode metoduyla derin klonlama yoluyla koleksiyondaki tüm öğeleri kopyala. Bu metot veri ve olay işleyicilerini yeni öğeye kopyalamaz. Bu, jQuery'den farklıdır; jQuery parametreyle verileri ve olay işleyicilerini kopyalayıp kopyalamayacağını belirler.

$('body').append($("#box").clone())

Form öğelerinin değerlerini name ve value anahtar-değer çiftinden oluşan bir diziye birleştir.

Bu metot bireysel form öğeleri üzerinde çalışabilir veya <form> formunun tamamı üzerinde çalışabilir

$('form').serializeArray();
// [
//   { "name": "golang", "value":"456" },
//   { "name": "name", "value": "mdui" },
//   { "name": "password", "value": "" }
// ]

Form öğelerinin değerini serileştir.

$('form').serialize();
// golang=456&name=mdui&password=

Koleksiyondaki her öğenin belirli olayına olay işleyici bağla. Belirli kullanım aşağıdaki örneklere bakınız:

// Tıklama olayını bağla
$('.box').on('click', function (e) {
  console.log('.box öğesine tıklandı');
});

// Birden fazla olayı bağla
$('.box').on('click focus', function (e) {
  console.log('click ve focus olayları bu işlevi tetikler');
});

// Olay delegasyonu
$(document).on('click', '.box', function (e) {
  console.log('.box'a tıklandığında bu işlev tetiklenir');
});

// Aynı anda birden fazla olay ve olay işleyicisini bağla
$('.box').on({
  'click': function (e) {
    console.log('click olayı tetiklendi');
  },
  'focus': function (e) {
    console.log('focus olayı tetiklendi');
  }
});

// Parametre iletme
$('.box').on('click', { key1: 'value1', key2: 'value2' }, function (e) {
  console.log('.box öğesine tıklandı ve olay işleyicisine parametre iletildi');
  // e._data { key1: 'value1', key2: 'value2' } öğesidir
});

// Aynı anda birden fazla olay ve olay işleyicisini bağla ve parametre ilet
$('.box').on({
  'click': function (e) {
    console.log('click olayı tetiklendi');
    // e._data { key1: 'value1', key2: 'value2' } öğesidir
  },
  'focus': function (e) {
    console.log('focus olayı tetiklendi');
    // e._data { key1: 'value1', key2: 'value2' } öğesidir
  }
}, { key1: 'value1', key2: 'value2' });

// Olay delegasyonu yoluyla olay bağla ve parametre ilet
$(document).on('click', '.box', { key1: 'value1', key2: 'value2' }, function (e) {
  console.log('.box öğesine tıklandı ve olay işleyicisine parametre iletildi');
  // e._data { key1: 'value1', key2: 'value2' } öğesidir
});

// Olay delegasyonu yoluyla aynı anda birden fazla olay ve olay işleyicisini bağla
$(document).on({
  'click': function (e) {
    console.log('click olayı tetiklendi');
  },
  'focus': function (e) {
    console.log('focus olayı tetiklendi');
  }
}, '.box');

// Olay delegasyonu yoluyla aynı anda birden fazla olay ve olay işleyicisini bağla ve parametre ilet
$(document).on({
  'click': function (e) {
    console.log('click olayı tetiklendi');
    // e._data { key1: 'value1', key2: 'value2' } öğesidir
  },
  'focus': function (e) {
    console.log('focus olayı tetiklendi');
    // e._data { key1: 'value1', key2: 'value2' } öğesidir
  }
}, '.box', { key1: 'value1', key2: 'value2' });

// Olay parametresini al
$('.box').on('click', function (e, data) {
  // veri e._detail öğesine eşittir
});

// Olay adı ad alanı kullanmayı destekler
$('.box').on('click.myPlugin', function () {
  console.log('.box öğesine tıklandı');
});

Her eşleşen öğenin belirli olayına olay işleyici bağla. Ancak olay yalnızca bir kez tetiklenir.

Bu metodun kullanımı .on() ile aynı olduğundan burada örnek verilmeyecektir.

Koleksiyondaki her öğeden bağlanan olayı çözü. Belirli kullanım aşağıdaki örneklere bakınız:

// Tüm bağlanan olay işleyicilerini çözü
$('.box').off();

// Bağlanan belirtilen olayı çözü
$('.box').off('click');

// Aynı anda birden fazla bağlanan olayı çözü
$('.box').off('click focus');

// Bağlanan belirtilen olay işleyicisini çözü
$('.box').off('click', callback);

// Olay delegasyonu yoluyla bağlanan olayı çözü
$(document).off('click', '.box');

// Olay delegasyonu yoluyla bağlanan belirtilen olay işleyicisini çözü
$(document).off('click', '.box', callback);

// Aynı anda birden fazla olay işleyicisini çöz
$('.box').off({
  'click': callback1,
  'focus': callback2,
});

// Aynı anda olay delegasyonu yoluyla birden fazla bağlanan olay işleyicisini çöz
$(document).off({
  'click': callback1,
  'focus': callback2,
}, '.box');

// Olay adı ad alanı kullanmayı destekler; aşağıdaki kullanım .myPlugin ile biten tüm olayları çözecektir
$(document).off('.myPlugin');

Belirtilen olayı tetikle. Belirli kullanım aşağıdaki örneklere bakınız:

// Belirtilen olayı tetikle
$('.box').trigger('click');

// Olay tetiklenirken parametre ilet
$('.box').trigger('click', { key1: 'value1', key2: 'value2' });

Ajax isteği için genel yapılandırma parametreleri ayarla.

$.ajaxSetup({
  // Varsayılan olarak global AJAX olaylarını tetikleme devre dışı bırak
  global: false,

  // Varsayılan olarak POST isteği kullan
  method: 'POST'
});

Ayrıntılı parametre listesi aşağıdaki AJAX Parametreleri bölümüne bakınız.

Ajax isteği gönder, Promise döndür.

$.ajax({
  method: 'POST',
  url: './test.php',
  data: {
    key1: 'val1',
    key2: 'val2'
  },
  success: function (data) {
    console.log(data);
  }
});

Ayrıntılı parametre listesi aşağıdaki AJAX Parametreleri bölümüne bakınız.

Global AJAX olayları.

Ajax isteği başladığında işlev çalıştır.

$(document).ajaxStart(function (event, xhr, options) {
  // xhr: XMLHttpRequest nesnesi
  // options: AJAX isteğinin yapılandırma parametreleri
});

Global AJAX olayları.

Ajax isteği başarılı olduğunda işlev çalıştır.

$(document).ajaxSuccess(function (event, xhr, options, data) {
  // xhr: XMLHttpRequest nesnesi
  // options: AJAX isteğinin yapılandırma parametreleri
  // veri: AJAX isteğinin döndürdüğü veriler
});

Global AJAX olayları.

Ajax isteği hata oluşturduğunda işlev çalıştır.

$(document).ajaxError(function (event, xhr, options) {
  // xhr: XMLHttpRequest nesnesi
  // options: AJAX isteğinin yapılandırma parametreleri
});

Global AJAX olayları.

Ajax isteği tamamlandığında işlev çalıştır.

$(document).ajaxComplete(function (event, xhr, options) {
  // xhr: XMLHttpRequest nesnesi
  // options: AJAX isteğinin yapılandırma parametreleri
});

İstek yöntemi.

Aşağıdakileri içerir: GET, POST, PUT, PATCH, HEAD, OPTIONS, DELETE

Headers'a eklenen veriler. Bu değer beforeSend geri çağırma fonksiyonunda yeniden yazılabilir.

Değeri dize veya null olan alanlar gönderilecek, değeri undefined olan alanlar kaldırılacaktır.

XMLHttpRequest nesnesi üzerinde ayarlanan veriler.

$.ajax({
  url: 'Bir etki alanı dışı URL',
  xhrFields: {
    withCredentials: true
  }
});

HTTP durum kodu ve fonksiyondan oluşan bir nesne.

$.ajax({
  statusCode: {
    404: function (xhr, textStatus) {
      alert('Durum kodu 404 döndürüldüğünde çağrıl');
    },
    200: function (data, textStatus, xhr) {
      alert('Durum kodu 200 döndürüldüğünde çağrıl');
    }
  }
});

Durum kodu 200-299 arasında veya 304 olduğunda, istek başarılı olup fonksiyon parametreleri success geri çağırmasında olduğu gibi aynıdır; aksi takdirde istek başarısız olup fonksiyon parametreleri error geri çağırmasında olduğu gibi aynıdır.

Sunucu tarafından döndürülen verilerin türü.

Aşağıdakileri içerir: text, json

İstek gönderilmeden önce çağrıl. false döndürdüğünde AJAX isteği iptal edilecektir.

$.ajax({
  beforeSend: function (xhr) {
    // xhr: XMLHttpRequest nesnesi
  }
});

İstek başarılı olduktan sonra çağrıl.

$.ajax({
  success: function (data, textStatus, xhr) {
    // veri: AJAX isteğinin döndürdüğü veriler
    // textStatus: başarı kodunu içeren dize
    // xhr: XMLHttpRequest nesnesi
  }
});

İstek hatası oluştuğunda çağrıl.

$.ajax({
  error: function (xhr, textStatus) {
    // xhr: XMLHttpRequest nesnesi
    // textStatus: başarı kodunu içeren dize
  }
});

İstek tamamlandıktan sonra çağrıl.

$.ajax({
  complete: function (xhr, textStatus) {
    // xhr: XMLHttpRequest nesnesi
    // textStatus: başarı kodunu içeren dize
  }
});

Geçerli öğeyi yeniden çiz.

$('.box').reflow();

Geçerli öğenin transition-duration özelliğini ayarla.

Birimli bir zaman değeri olabilir veya birim olmadan olabilir. Birim olmadan ise, ms otomatik olarak birim olarak eklenir.

$('.box').transition(100);

Geçerli öğeye transitionend olay geri çağırması ekle.

Geri çağırma fonksiyonunun parametresi transitionend olay nesnesidir ve fonksiyondaki this geçerli öğeyi gösterir.

$('.box').transitionEnd(function () {
  console.log('.box öğesinin transitionend olayı tetiklendi');
})

Geçerli öğenin transform özelliğini ayarla.

$('.box').transform('rotate(90deg)')

Geçerli öğenin transform-origin özelliğini ayarla.

$('.box').transformOrigin('top center')

Geçerli öğede ve alt öğelerinde kaydedilen başlatma işlevini çalıştır.

$('[mdui-collapse]').mutation()

Maskeyi oluştur ve göster, maskeleme katmanının JQ nesnesini döndür.

Maskeleme katmanının z-index stilini belirtmek için bir tamsayı parametresi geçirilebilir, varsayılan 2000'dir.

$.showOverlay();

Maskeleme katmanını gizle.

Maskeleme katmanını göstermek için $.showOverlay() birden fazla kez çağrıldıysa, maskeleme katmanını gizlemek için aynı sayıda $.hideOverlay() çağırılması gerekir. Maskeleme katmanını zorla gizlemek için true parametresi geçirilebilir.

$.hideOverlay();

Sayfayı kilitle, sayfa kaydırılmasını yasakla.

$.lockScreen();

Sayfa kilidini aç.

Sayfayı kilitlemek için $.lockScreen() birden fazla kez çağrıldıysa, sayfa kilidini açmak için aynı sayıda $.unlockScreen() çağırılması gerekir. Sayfa kilidini zorla açmak için true parametresi geçirilebilir.

$.unlockScreen();

Fonksiyon throttle'ı.

Bir işlev parametresi olarak girin, işlevin ilk parametresi yürütülecek işlev, ikinci parametresi gecikme süresi (milisaniye cinsinden).

$.throttle(function () {
  console.log('Bu işlev en fazla 100ms'de bir çalıştırılır');
}, 100)

Genel olarak benzersiz bir ID oluştur.

$.guid();

Parametre iletebilirsiniz. Parametre değerine karşılık gelen guid yoksa, yeni bir guid oluşturulup döndürülür; parametre güncelleme süresi adına karşılık gelen guid zaten varsa, mevcut guid doğrudan döndürülür.

// Aşağıdaki iki kod satırı aynı dönüş değerini döndürür
$.guid('test');
$.guid('test');