jq Araç Kütüphanesi

mdui, hafif bir JavaScript yardımcı kütüphanesi içerir. jQuery benzeri bir API ve zincirleme çağrı yöntemi sunar, ancak boyutu jQuery'nin altıda biridir.

Bu yardımcı fonksiyonu ihtiyacınıza göre içe aktarabilirsiniz:

import { $ } from 'mdui/jq.js';

Temel

`$()`

Bu fonksiyonun çeşitli kullanımları vardır:

CSS seçici parametre olarak iletildiğinde, eşleşen öğeleri içeren bir JQ nesnesi döndürür.

$('.box');

DOM öğesi, herhangi bir dizi, NodeList veya JQ nesnesi parametre olarak iletildiğinde, belirtilen öğeleri içeren bir JQ nesnesi döndürür.

$(document);

HTML dizesi parametre olarak iletildiğinde, HTML'ye göre oluşturulmuş DOM'u içeren bir JQ nesnesi döndürür.

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

Bir fonksiyon parametre olarak iletildiğinde, DOM yüklendiğinde bu fonksiyon çağrılır.

$(function () {
  console.log('DOM Yüklendi');
});

Genişletme

`$.extend()`

Yalnızca bir nesne iletilirse, bu nesnedeki özellikler $ nesnesine birleştirilir, bu da $ ad alanına yeni işlevler eklemeye eşdeğerdir.

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

// Daha sonra özel yönteminizi şu şekilde çağırabilirsiniz:
$.customFunc();

İki veya daha fazla nesne iletilirse, tüm nesnelerin özellikleri ilk nesneye eklenir ve birleştirilmiş nesne döndürülür. Ancak değeri undefined olan özellikler birleştirilmez.

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

// İlk nesne ve dönüş değeri artık { key1: val1, key2: val2, key3: val3 } şeklindedir

`$.fn.extend()`

$'ın prototip zinciri üzerinde yöntemler genişletir.

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

// Daha sonra genişletilmiş yöntemi şu şekilde kullanabilirsiniz:
$(document).customFunc();

URL

`$.param()`

Bir diziyi veya nesneyi URL sorgu dizesine dönüştü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

İletilen parametre bir dizi ise, bu dizinin formatı .serializeArray() tarafından döndürülen formatla aynı olmalıdır.

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

Dizi ve Nesne İşlemleri

`$.each()`

Diziler veya nesneler üzerinde iterasyon yapar. İlk parametreyi, yani üzerinde iterasyon yapılan dizi veya nesneyi döndürür.

Geri çağırma fonksiyonunun ilk parametresi dizinin indeksi veya nesnenin anahtarıdır, ikinci parametresi ise dizinin veya nesnenin ilgili konumundaki değerdir.

Geri çağırma fonksiyonunda this, dizinin veya nesnenin ilgili konumundaki değeri işaret eder. Geri çağırma fonksiyonu false döndürürse, iterasyon durdurulur.

// Dizi üzerinde iterasyon
$.each(['a', 'b', 'c'], function (index, value) {
  console.log(index + ':' + value);
});

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

// Nesne üzerinde iterasyon
$.each({ name: 'mdui', lang: 'zh' }, function (key, value) {
  console.log(key + ':' + value);
});

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

`$.merge()`

İkinci dizinin elemanlarını birinci diziye ekler ve birleştirilmiş diziyi döndürür.

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

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

`$.unique()`

Dizideki tekrar eden elemanları kaldırır.

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

`$.map()`

Bir dizi veya nesne üzerinde iterasyon yapar ve geri çağırma fonksiyonunun dönüş değerlerinden oluşan yeni bir dizi döndürür.

Geri çağırma fonksiyonunun ilk parametresi dizinin veya nesnenin ilgili konumundaki değerdir, ikinci parametresi ise dizinin indeksi veya nesnenin anahtarıdır.

Geri çağırma fonksiyonu herhangi bir değer döndürebilir. Eğer bir dizi döndürürse, bu dizi açılır (flatten edilir). Eğer null veya undefined döndürürse, bu değer yoksayılır. Geri çağırma fonksiyonu içinde this, window nesnesini işaret eder.

// Dizi üzerinde iterasyon
const result = $.map(['a', 'b', 'c'], function (value, index) {
  return index + value;
});
console.log(result); // ['0a', '1b', '2c']

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

// Nesne üzerinde iterasyon
const result = $.map(
  { name: 'mdui', password: '123456' },
  function (value, key) {
    return key + ':' + value;
  },
);
console.log(result); // ['name:mdui', 'password:123456']

`$.contains()`

Bir düğümün başka bir düğümü içerip içermediğini kontrol eder. Ebeveyn düğüm, alt düğümü içeriyorsa true, aksi halde false döndürür.

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

Veri Türü Kontrolü

`.is()`

Koleksiyondaki en az bir öğenin parametreyle eşleşip eşleşmediğini kontrol eder. Eşleşme varsa true, yoksa false döndürür.

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

Parametre bir geri çağırma fonksiyonu ise, fonksiyonun ilk parametresi indeks, ikinci parametresi geçerli öğedir. Fonksiyon içinde this, geçerli öğeyi işaret eder. Fonksiyon true döndürürse, geçerli öğenin parametreyle eşleştiği anlamına gelir; false döndürürse, eşleşmediği anlamına gelir.

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

// Geri çağırma fonksiyonunun dönüş değeri ile eşleşme kontrolü
$(document).is(function (index, element) {
  return element === document;
});
// true

Nesne Erişimi

`.length`

Geçerli koleksiyondaki öğelerin sayısını döndürür.

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

`.each()`

Geçerli koleksiyon üzerinde iterasyon yapar, koleksiyondaki her öğe için bir fonksiyon çalıştırır. Fonksiyon false döndürürse, iterasyon durdurulur.

Fonksiyonun ilk parametresi öğenin indeks konumu, ikinci parametresi ise geçerli öğedir. Fonksiyon içinde this, geçerli öğeyi işaret eder.

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

`.map()`

Geçerli koleksiyon üzerinde iterasyon yapar, koleksiyondaki her öğe için bir fonksiyon çalıştırır ve fonksiyonun dönüş değerlerinden oluşan yeni bir koleksiyon döndürür.

Fonksiyon tek bir veri veya veri dizisi döndürebilir. Dizi döndürülürse, dizideki elemanlar sırayla yeni koleksiyona eklenir. Fonksiyon null veya undefined döndürürse, bu değer yeni koleksiyona eklenmez.

Fonksiyonun ilk parametresi öğenin indeks konumu, ikinci parametresi geçerli öğedir. Fonksiyon içinde this, geçerli öğeyi işaret eder.

const result = $('input.checked').map(function (i, element) {
  return element.value;
});

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

`.eq()`

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

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

`.first()`

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

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

`.last()`

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

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

`.get()`

Belirtilen indeks konumundaki öğeyi döndürür. Parametre iletilmezse, koleksiyondaki tüm öğelerden oluşan bir dizi döndürür.

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

`.index()`

Parametre iletilmezse, geçerli koleksiyondaki ilk öğenin kardeş öğeleri arasındaki indeksini döndürür.

Bir CSS seçici iletilirse, geçerli koleksiyondaki ilk öğenin, CSS seçiciyle eşleşen öğeler arasındaki indeksini döndürür.

Bir DOM öğesi iletilirse, bu öğenin geçerli koleksiyondaki indeksini döndürür.

Bir JQ nesnesi iletilirse, nesnedeki ilk öğenin geçerli koleksiyondaki indeksini 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

`.slice()`

Geçerli koleksiyonun bir alt kümesini döndürür.

Alt kümenin başlangıç ve bitiş konumlarını belirtmek için iki parametre iletebilirsiniz (bitiş konumundaki öğe dahil değildir). İkinci parametre iletilmezse, başlangıç konumundan koleksiyonun sonuna kadar olan tüm öğeleri döndürür.

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

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

`.filter()`

Geçerli koleksiyondan belirtilen ifadeyle eşleşen öğeleri filtreler. Parametre bir CSS seçici, DOM öğesi, DOM öğeleri dizisi veya geri çağırma fonksiyonu olabilir.

Parametre bir geri çağırma fonksiyonu ise, fonksiyonun ilk parametresi öğenin indeks konumu, ikinci parametresi geçerli öğedir. Fonksiyon içinde this, geçerli öğeyi işaret eder. Fonksiyon true döndürürse, geçerli öğe korunur; false döndürürse, geçerli öğe kaldırılır.

// .box sınıfına sahip tüm div öğelerini filtreler
$('div').filter('.box');

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

`.not()`

Geçerli koleksiyondan belirtilen ifadeyle eşleşmeyen öğeleri filtreler.

Parametre bir CSS seçici, DOM öğesi, DOM öğeleri dizisi, JQ nesnesi veya boolean değer döndüren bir geri çağırma fonksiyonu olabilir.

Parametre bir geri çağırma fonksiyonu ise, fonksiyonun ilk parametresi öğenin indeks konumu, ikinci parametresi geçerli öğedir. Fonksiyon içinde this, geçerli öğeyi işaret eder. Fonksiyon true döndürürse, geçerli öğe kaldırılır; false döndürürse, geçerli öğe korunur.

// .box sınıfına sahip olmayan tüm div öğelerini filtreler
$('div').not('.box');

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

CSS Sınıfları

`.hasClass()`

Koleksiyondaki ilk öğenin belirtilen CSS sınıfına sahip olup olmadığını kontrol eder.

// İlk div öğesinin .item sınıfına sahip olup olmadığını kontrol eder
$('div').hasClass('item');

`.addClass()`

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

Parametre bir dize veya CSS sınıf adları döndüren bir geri çağırma fonksiyonu olabilir. Parametre bir geri çağırma fonksiyonu ise, fonksiyonun ilk parametresi öğenin indeks konumu, ikinci parametresi ise öğede bulunan mevcut CSS sınıf adlarıdır. Fonksiyon içinde this, geçerli öğeyi işaret eder.

// Tüm div öğelerine .item sınıfını ekler
$('div').addClass('item');

// Tüm div öğelerine .item1 ve .item2 sınıflarını ekler
$('div').addClass('item1 item2');

// Tüm div öğelerine geri çağırma fonksiyonunun döndürdüğü CSS sınıfını ekler
$('div').addClass(function (index, currentClassName) {
  return currentClassName + '-' + index;
});

`.removeClass()`

Koleksiyondaki her öğeden belirtilen CSS sınıf(lar)ını kaldırır. Birden fazla sınıf adı boşlukla ayrılabilir.

Parametre iletilmezse, bu yöntem doğrudan öğedeki class özniteliğini kaldırır.

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

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

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

`.toggleClass()`

Öğede belirtilen CSS sınıfı varsa kaldırır, yoksa ekler. Birden fazla sınıf adı boşlukla ayrılabilir.

// Tüm div öğelerindeki .item sınıfını açar/kapatır
$('div').toggleClass('item');

// Tüm div öğelerindeki .item1 ve .item2 sınıflarını açar/kapatır
$('div').toggleClass('item1 item2');

// Tüm div öğelerinde geri çağırma fonksiyonunun döndürdüğü CSS sınıfını açar/kapatır
$('div').toggleClass(function (index, currentClassName) {
  return 'item';
});

Düğüm Öznitelikleri

`.prop()`

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

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

İki parametre iletilirse, bu yöntem koleksiyondaki tüm öğelerin belirtilen JavaScript özellik değerini ayarlar.

Özellik değeri herhangi bir türde bir değer veya bir özellik değeri döndüren bir geri çağırma fonksiyonu olabilir. Parametre bir geri çağırma fonksiyonu ise, fonksiyonun ilk parametresi öğenin indeks konumu, ikinci parametresi ise öğede bulunan mevcut özellik değeridir. Fonksiyon içinde this, geçerli öğeyi işaret eder.

Özellik değeri veya geri çağırma fonksiyonunun dönüş değeri undefined ise, bu yöntem öğenin mevcut özelliğini değiştirmez.

// Tüm seçili öğelerin checked özellik değerini true olarak ayarlar
$('input').prop('checked', true);

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

Bir nesne ileterek birden fazla özelliği aynı anda ayarlayabilirsiniz.

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

`.removeProp()`

Koleksiyondaki tüm öğelerden belirtilen JavaScript özellik değerini siler.

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

`.attr()`

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

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

İki parametre iletilirse, bu yöntem koleksiyondaki tüm öğelerin belirtilen HTML öznitelik değerini ayarlar.

Öznitelik değeri bir dize veya sayı olabileceği gibi, bir öznitelik değeri döndüren bir geri çağırma fonksiyonu da olabilir. Parametre bir geri çağırma fonksiyonu ise, fonksiyonun ilk parametresi öğenin indeks konumu, ikinci parametresi ise öğede bulunan mevcut öznitelik değeridir. Fonksiyon içinde this, geçerli öğeyi işaret eder.

Öznitelik değeri veya geri çağırma fonksiyonunun dönüş değeri null ise, bu yöntem belirtilen özniteliği siler; undefined ise, öğenin mevcut özniteliğini değiştirmez.

// Tüm seçili öğelerin öznitelik değerini ayarlar
$('div').attr('username', 'mdui');

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

Bir nesne ileterek birden fazla özniteliği aynı anda ayarlayabilirsiniz.

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

`.removeAttr()`

Koleksiyondaki tüm öğelerden belirtilen HTML öznitelik(ler)ini kaldırır. Birden fazla öznitelik adı boşlukla ayrılabilir.

// Koleksiyondaki tüm öğelerden bir özniteliği kaldırır
$('div').removeAttr('username');

// Koleksiyondaki tüm öğelerden birden fazla özniteliği kaldırır
$('div').removeAttr('username lastname');

`.val()`

Koleksiyondaki ilk öğenin değerini döndürür.

Öğe <select multiple="multiple"> ise, tüm seçili seçenekleri içeren bir dizi döndürür.

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

Parametre iletilirse, bu yöntem koleksiyondaki tüm öğelerin değerini ayarlar.

Değer bir dize, sayı, dize dizisi veya bir değer döndüren bir geri çağırma fonksiyonu olabilir. Parametre bir geri çağırma fonksiyonu ise, fonksiyonun ilk parametresi öğenin indeks konumu, ikinci parametresi ise öğenin mevcut değeridir. Fonksiyon içinde this, geçerli öğeyi işaret eder.

Öğe <input type="checkbox">, <input type="radio"> veya <option> ise, değer veya geri çağırma fonksiyonunun dönüş değeri bir dizi olabilir. Bu durumda, dizideki değerler seçilir ve dizide olmayan değerlerin seçimi kaldırılır.

Değer veya geri çağırma fonksiyonunun dönüş değeri undefined ise, öğenin değeri boş olarak ayarlanır.

// Seçili öğenin değerini ayarlar
$('#input').val('mdui');

// Geri çağırma fonksiyonunun dönüş değeri ile öğenin değerini ayarlar
$('#input').val(function (index, oldValue) {
  return 'mdui';
});

`.text()`

Koleksiyondaki tüm öğelerin (ve onların alt öğelerinin) metin içeriğini döndürür.

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

Parametre iletilirse, bu yöntem koleksiyondaki tüm öğelerin metin içeriğini ayarlar.

Değer bir dize, sayı, boolean veya bir metin içeriği döndüren bir geri çağırma fonksiyonu olabilir. Parametre bir geri çağırma fonksiyonu ise, fonksiyonun ilk parametresi öğenin indeks konumu, ikinci parametresi ise öğenin mevcut metin içeriğidir. Fonksiyon içinde this, geçerli öğeyi işaret eder.

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

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

// Geri çağırma fonksiyonunun dönüş değeri ile öğelerin metin içeriğini ayarlar
$('.box').text(function (index, oldTextContent) {
  return 'yeni metin içeriği';
});

`.html()`

Koleksiyondaki ilk öğenin HTML içeriğini döndürür.

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

Parametre iletilirse, bu yöntem koleksiyondaki tüm öğelerin HTML içeriğini ayarlar.

Değer bir HTML dizesi, DOM öğesi veya bir HTML dizesi veya DOM öğesi döndüren bir geri çağırma fonksiyonu olabilir. Parametre bir geri çağırma fonksiyonu ise, fonksiyonun ilk parametresi öğenin indeks konumu, ikinci parametresi ise öğenin mevcut HTML içeriğidir. Fonksiyon içinde this, geçerli öğeyi işaret eder.

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

// Seçili öğelerin HTML'ini ayarlar
$('.box').html('<div>yeni html içeriği</div>');

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

Veri Depolama

`$.data()`

Belirtilen bir öğe üzerinde veri okur veya saklar.

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

Not: Bu yöntem, öğedeki data-* özniteliklerini almaz.

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

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

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

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

`$.removeData()`

Belirtilen öğe üzerinde saklanan verileri kaldırır.

Birden fazla anahtar adı belirtilebilir; boşlukla ayrılır veya bir dizi ile gösterilir. Anahtar adı belirtilmezse, öğedeki tüm veriler kaldırılır.

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

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

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

`.data()`

Geçerli koleksiyondaki öğeler üzerinde veri okur veya saklar.

Saklanan değer undefined ise, depolama yapılmaz.

Not: Bu yöntem tarafından alınan veriler, öğelerdeki data-* özniteliklerini içerir.

// Geçerli koleksiyondaki öğeler üzerinde veri saklar
$('.box').data('layout', 'dark');

// Geçerli koleksiyondaki öğeler üzerinde aynı anda birden fazla veri saklar
$('.box').data({
  primary: 'indigo',
  accent: 'pink',
});

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

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

`.removeData()`

Geçerli koleksiyondaki öğeler üzerinde saklanan verileri kaldırır.

Birden fazla anahtar adı belirtilebilir; boşlukla ayrılır veya bir dizi ile gösterilir. Anahtar adı belirtilmezse, öğedeki tüm veriler kaldırılır.

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

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

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

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

Stil

`.css()`

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

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

Parametre iletilirse, bu yöntem koleksiyondaki tüm öğelerin CSS özellik değerini ayarlar.

Özellik değeri bir dize, sayı veya bir dize veya sayı döndüren bir geri çağırma fonksiyonu olabilir. Parametre bir geri çağırma fonksiyonu ise, fonksiyonun ilk parametresi öğenin indeks konumu, ikinci parametresi ise öğenin mevcut CSS özellik değeridir. Fonksiyon içinde this, geçerli öğeyi işaret eder.

Değer veya geri çağırma fonksiyonunun dönüş değeri undefined ise, öğenin CSS özellik değeri değiştirilmez. Değer null ise, öğenin ilgili CSS özelliği kaldırılır. Değer sayısal ise, otomatik olarak px birimi eklenir; ancak bu özellik px birimini kullanamıyorsa, değer doğrudan dizeye dönüştürülür.

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

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

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

`.width()`

Koleksiyondaki ilk öğenin genişliğini alır (padding, border, margin hariç).

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

Parametre iletilirse, bu yöntem koleksiyondaki tüm öğelerin genişliğini ayarlar.

Değer birimli bir dize, sayı veya birimli bir dize veya sayı döndüren bir geri çağırma fonksiyonu olabilir. Parametre bir geri çağırma fonksiyonu ise, fonksiyonun ilk parametresi öğenin indeks konumu, ikinci parametresi ise öğenin mevcut genişliğidir. Fonksiyon içinde this, geçerli öğeyi işaret eder.

Değer veya geri çağırma fonksiyonunun dönüş değeri null veya undefined ise, öğenin genişliği değiştirilmez. Değer sayısal ise, otomatik olarak px birimi eklenir.

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

// Sayısal değerlerde varsayılan birim px'dir
$('.box').width(10);

// Geri çağırma fonksiyonunun dönüş değeri ile genişliği ayarlar
$('.box').width(function (index, oldWidth) {
  return 10;
});

`.height()`

Koleksiyondaki ilk öğenin yüksekliğini alır (padding, border, margin hariç).

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

Parametre iletilirse, bu yöntem koleksiyondaki tüm öğelerin yüksekliğini ayarlar.

Değer birimli bir dize, sayı veya birimli bir dize veya sayı döndüren bir geri çağırma fonksiyonu olabilir. Parametre bir geri çağırma fonksiyonu ise, fonksiyonun ilk parametresi öğenin indeks konumu, ikinci parametresi ise öğenin mevcut yüksekliğidir. Fonksiyon içinde this, geçerli öğeyi işaret eder.

Değer veya geri çağırma fonksiyonunun dönüş değeri null veya undefined ise, öğenin yüksekliği değiştirilmez. Değer sayısal ise, otomatik olarak px birimi eklenir.

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

// Sayısal değerlerde varsayılan birim px'dir
$('.box').height(10);

// Geri çağırma fonksiyonunun dönüş değeri ile yüksekliği ayarlar
$('.box').height(function (index, oldHeight) {
  return 10;
});

`.innerWidth()`

Koleksiyondaki ilk öğenin genişliğini alır (padding dahil, border, margin hariç).

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

Parametre iletilirse, bu yöntem koleksiyondaki tüm öğelerin genişliğini ayarlar.

Değer veya geri çağırma fonksiyonunun dönüş değeri null veya undefined ise, öğenin genişliği değiştirilmez. Değer sayısal ise, otomatik olarak px birimi eklenir.

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

// Sayısal değerlerde varsayılan birim px'dir
$('.box').innerWidth(10);

// Geri çağırma fonksiyonunun dönüş değeri ile genişliği ayarlar
$('.box').innerWidth(function (index, oldWidth) {
  return 10;
});

`.innerHeight()`

Koleksiyondaki ilk öğenin yüksekliğini alır (padding dahil, border, margin hariç).

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

Parametre iletilirse, bu yöntem koleksiyondaki tüm öğelerin yüksekliğini ayarlar.

Değer birimli bir dize, sayı veya birimli bir dize veya sayı döndüren bir geri çağırma fonksiyonu olabilir. Parametre bir geri çağırma fonksiyonu ise, fonksiyonun ilk parametresi öğenin indeks konumu, ikinci parametresi ise öğenin mevcut yüksekliğidir. Fonksiyon içinde this, geçerli öğeyi işaret eder.

Değer veya geri çağırma fonksiyonunun dönüş değeri null veya undefined ise, öğenin yüksekliği değiştirilmez. Değer sayısal ise, otomatik olarak px birimi eklenir.

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

// Sayısal değerlerde varsayılan birim px'dir
$('.box').innerHeight(10);

// Geri çağırma fonksiyonunun dönüş değeri ile yüksekliği ayarlar
$('.box').innerHeight(function (index, oldHeight) {
  return 10;
});

`.outerWidth()`

Koleksiyondaki ilk öğenin genişliğini alır (padding, border dahil, margin hariç. true parametresi iletilerek genişliğin margin içermesi sağlanabilir).

// padding, border dahil genişlik
$('.box').outerWidth();

// padding, border, margin dahil genişlik
$('.box').outerWidth(true);

Bu yöntem ayrıca koleksiyondaki tüm öğelerin genişliğini ayarlamak için de kullanılabilir (padding, border dahil, margin hariç. İkinci parametrede true iletilerek genişliğin margin içermesi sağlanabilir).

İlk parametre birimli bir dize, sayı veya birimli bir dize veya sayı döndüren bir geri çağırma fonksiyonu olabilir. Parametre bir geri çağırma fonksiyonu ise, fonksiyonun ilk parametresi öğenin indeks konumu, ikinci parametresi ise öğenin mevcut genişliğidir. Fonksiyon içinde this, geçerli öğeyi işaret eder.

Değer veya geri çağırma fonksiyonunun dönüş değeri null veya undefined ise, öğenin genişliği değiştirilmez. Değer sayısal ise, otomatik olarak px birimi eklenir.

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

// Sayısal değerlerde varsayılan birim px'dir
$('.box').outerWidth(10);

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

// Geri çağırma fonksiyonunun dönüş değeri ile genişliği ayarlar
$('.box').outerWidth(function (index, oldWidth) {
  return 10;
});

`.outerHeight()`

Koleksiyondaki ilk öğenin yüksekliğini alır (padding, border dahil, margin hariç. true parametresi iletilerek yüksekliğin margin içermesi sağlanabilir).

// padding, border dahil yükseklik
$('.box').outerHeight();

// padding, border, margin dahil yükseklik
$('.box').outerHeight(true);

Bu yöntem ayrıca koleksiyondaki tüm öğelerin yüksekliğini ayarlamak için de kullanılabilir (padding, border dahil, margin hariç. İkinci parametrede true iletilerek yüksekliğin margin içermesi sağlanabilir).

İlk parametre birimli bir dize, sayı veya birimli bir dize veya sayı döndüren bir geri çağırma fonksiyonu olabilir. Parametre bir geri çağırma fonksiyonu ise, fonksiyonun ilk parametresi öğenin indeks konumu, ikinci parametresi ise öğenin mevcut yüksekliğidir. Fonksiyon içinde this, geçerli öğeyi işaret eder.

Değer veya geri çağırma fonksiyonunun dönüş değeri null veya undefined ise, öğenin yüksekliği değiştirilmez. Değer sayısal ise, otomatik olarak px birimi eklenir.

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

// Sayısal değerlerde varsayılan birim px'dir
$('.box').outerHeight(10);

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

// Geri çağırma fonksiyonunun dönüş değeri ile yüksekliği ayarlar
$('.box').outerHeight(function (index, oldHeight) {
  return 10;
});

`.hide()`

Koleksiyondaki tüm öğeleri gizler.

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

`.show()`

Koleksiyondaki tüm öğeleri gösterir.

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

`.toggle()`

Koleksiyondaki tüm öğelerin görünürlük durumunu açar/kapatır.

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

`.offset()`

Geçerli koleksiyondaki ilk öğenin document'e göre koordinatlarını alır.

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

Parametre iletilirse, bu yöntem koleksiyondaki tüm öğelerin document'e göre koordinatlarını ayarlar.

Parametre, top ve left özelliklerini içeren bir nesne veya bu formatta bir nesne döndüren bir geri çağırma fonksiyonu olabilir. Parametre bir geri çağırma fonksiyonu ise, fonksiyonun ilk parametresi öğenin indeks konumu, ikinci parametresi ise öğenin mevcut koordinatlarıdır. Fonksiyon içinde this, geçerli öğeyi işaret eder.

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

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

// Geri çağırma fonksiyonunun dönüş değeri ile öğelerin koordinatlarını ayarlar
$('.box').offset(function (index, oldOffset) {
  return { top: 20, left: 30 };
});

`.offsetParent()`

Koleksiyondaki ilk öğenin konumlandırılmış (positioned) ebeveynini alır. Yani, position özelliği relative veya absolute olan ilk ebeveyn öğeyi döndürür.

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

`.position()`

Koleksiyondaki ilk öğenin, konumlandırılmış ebeveynine göre offset'ini alır.

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

Düğüm Bulma

`.find()`

Geçerli koleksiyonda, bir CSS seçiciye göre eşleşen alt düğüm koleksiyonunu bulur.

// #box'un alt düğümleri arasında .box sınıfını içeren düğüm koleksiyonunu bulur
$('#box').find('.box');

`.children()`

Geçerli koleksiyonda, doğrudan alt öğelerden oluşan bir koleksiyon alır. Alt öğeleri filtrelemek için bir CSS seçici parametre olarak iletilebilir.

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

// #box'un doğrudan alt öğeleri arasında .box sınıfını içerenleri bulur
$('#box').children('.box');

`.has()`

Geçerli koleksiyonda, belirtilen alt öğeyi içeren öğeleri filtreler. Parametre bir CSS seçici veya DOM öğesi olabilir.

// ul içeren li öğelerine arka plan rengi ekler
$('li').has('ul').css('background-color', 'red');

`.parent()`

Geçerli koleksiyondaki tüm öğelerin doğrudan ebeveyn öğelerinin koleksiyonunu alır. Parametre olarak bir CSS seçici iletilebilir; yalnızca bu seçiciyle eşleşen ebeveyn öğelerin koleksiyonunu döndürür.

// .box öğelerinin doğrudan ebeveynini döndürür
$('.box').parent();

// .box öğelerinin doğrudan ebeveynleri arasında .parent sınıfını içerenleri döndürür
$('.box').parent('.parent');

`.parents()`

Geçerli koleksiyondaki tüm öğelerin ata (ebeveyn, büyük ebeveyn vb.) öğelerinin koleksiyonunu alır. Parametre olarak bir CSS seçici iletilebilir; yalnızca bu seçiciyle eşleşen ata öğelerin koleksiyonunu döndürür.

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

// span öğesinin ata öğeleri arasında p olanları döndürür
$('span').parents('p');

`.parentsUntil()`

Geçerli koleksiyondaki her öğenin, ilk parametreyle eşleşen öğeye (eşleşen öğe hariç) kadar olan tüm ebeveyn öğelerinin koleksiyonunu alır.

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

İkinci parametre olarak bir CSS seçici iletilebilir; yalnızca bu seçiciyle eşleşen öğeleri döndürür.

Parametre belirtilmezse, tüm ata öğeler eşleşir, yani .parents() ile aynı etkiyi gösterir.

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

// .item öğesinin .parent öğesine kadar olan tüm ebeveyn öğelerini bulur
$('.item').parentsUntil('.parent');

// .item öğesinin .parent öğesine kadar olan ata öğeleri arasında div olanları alır
$('.item').parentsUntil('.parent', 'div');

`.prev()`

Geçerli koleksiyondaki her öğenin bir önceki kardeş öğesinden oluşan koleksiyonu alır. Parametre olarak bir CSS seçici iletilebilir; yalnızca bu seçiciyle eşleşen kardeş öğelerin koleksiyonunu döndürür.

// .box öğesinin bir önceki kardeş öğesinin koleksiyonunu alır
$('.box').prev();

// .box öğesinin bir önceki ve div olan kardeş öğesinin koleksiyonunu alır
$('.box').prev('div');

`.prevAll()`

Geçerli koleksiyondaki her öğenin önündeki tüm kardeş öğelerinden oluşan koleksiyonu alır. Parametre olarak bir CSS seçici iletilebilir; yalnızca bu seçiciyle eşleşen kardeş öğelerin koleksiyonunu döndürür.

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

// .box öğesinin önündeki kardeş öğeleri arasında .selected sınıfını içerenleri alır
$('.box').prevAll('.selected');

`.prevUntil()`

Geçerli koleksiyondaki her öğenin önündeki, ilk parametreyle eşleşen öğeye (eşleşen öğe hariç) kadar olan tüm kardeş öğelerinin koleksiyonunu alır.

İlk parametre bir CSS seçici, DOM öğesi veya JQ nesnesi olabilir. İkinci parametre olarak bir CSS seçici iletilebilir; yalnızca bu seçiciyle eşleşen öğeleri döndürür.

Parametre belirtilmezse, öndeki tüm kardeş öğeleri döndürür, yani .prevAll() yöntemiyle aynı etkiye sahiptir.

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

// .box öğesinin .until öğesine kadar olan öndeki tüm kardeş öğelerini alır
$('.box').prevUntil('.until');

// .box öğesinin .until öğesine kadar olan öndeki kardeş öğeleri arasında div olanları alır
$('.box').prevUntil('.until', 'div');

`.next()`

Geçerli koleksiyondaki her öğenin bir sonraki kardeş öğesinden oluşan koleksiyonu alır. Parametre olarak bir CSS seçici iletilebilir; yalnızca bu seçiciyle eşleşen kardeş öğelerin koleksiyonunu döndürür.

// .box öğesinin bir sonraki kardeş öğesinin koleksiyonunu alır
$('.box').next();

// .box öğesinin bir sonraki ve div olan kardeş öğesinin koleksiyonunu alır
$('.box').next('div');

`.nextAll()`

Geçerli koleksiyondaki her öğenin arkasındaki tüm kardeş öğelerinden oluşan koleksiyonu alır. Parametre olarak bir CSS seçici iletilebilir; yalnızca bu seçiciyle eşleşen kardeş öğelerin koleksiyonunu döndürür.

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

// .box öğesinin arkasındaki kardeş öğeleri arasında .selected sınıfını içerenleri alır
$('.box').nextAll('.selected');

`.nextUntil()`

Geçerli koleksiyondaki her öğenin arkasındaki, ilk parametreyle eşleşen öğeye (eşleşen öğe hariç) kadar olan tüm kardeş öğelerinin koleksiyonunu alır.

İlk parametre bir CSS seçici, DOM öğesi veya JQ nesnesi olabilir. İkinci parametre olarak bir CSS seçici iletilebilir; yalnızca bu seçiciyle eşleşen öğeleri döndürür.

Parametre belirtilmezse, arkadaki tüm kardeş öğeleri döndürür, yani .nextAll() yöntemiyle aynı etkiye sahiptir.

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

// .box öğesinin .until öğesine kadar olan arkadaki tüm kardeş öğelerini alır
$('.box').nextUntil('.until');

// .box öğesinin .until öğesine kadar olan arkadaki kardeş öğeleri arasında div olanları alır
$('.box').nextUntil('.until', 'div');

`.closest()`

Geçerli öğeden başlayarak yukarı doğru (kendisi dahil) ilerler ve eşleşen ilk öğeyi döndürür. Parametre bir CSS seçici, DOM öğesi veya JQ nesnesi olabilir.

// .box öğesinin ebeveynleri arasında en yakın .parent öğesini alır
$('.box').closest('.parent');

`.siblings()`

Geçerli koleksiyondaki her öğenin tüm kardeş öğelerinin koleksiyonunu alır. Parametre olarak bir CSS seçici iletilebilir; yalnızca bu seçiciyle eşleşen kardeş öğelerin koleksiyonunu döndürür.

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

// .box öğesinin kardeş öğeleri arasında .selected sınıfını içerenleri alır
$('.box').siblings('.selected');

`.add()`

Öğeleri geçerli koleksiyona ekler. Parametre bir HTML dizesi, CSS seçici, JQ nesnesi, DOM öğesi, DOM öğeleri dizisi veya NodeList olabilir.

// .selected sınıfını içeren öğeleri geçerli koleksiyona ekler
$('.box').add('.selected');

Düğüm İşlemleri

`.empty()`

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

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

`.remove()`

Geçerli koleksiyondaki öğeleri DOM'dan kaldırır. Parametre olarak bir CSS seçici iletilebilir; yalnızca bu seçiciyle eşleşen öğeleri kaldırır.

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

// .box sınıfını içeren p öğelerini kaldırır
$('p').remove('.box');

`.prepend()`

Geçerli koleksiyondaki öğelerin iç kısmının önüne belirtilen içeriği ekler. Parametre bir HTML dizesi, DOM öğesi, DOM öğeleri dizisi veya JQ nesnesi olabilir. Birden fazla parametre iletilebilir.

Ayrıca, bir HTML dizesi, DOM öğesi, DOM öğeleri dizisi veya JQ nesnesi döndüren bir geri çağırma fonksiyonu da iletilebilir. Fonksiyonun ilk parametresi geçerli öğenin indeks konumu, ikinci parametresi ise öğenin orijinal HTML'idir. Fonksiyon içinde this, geçerli öğeyi işaret eder.

Bu yöntem, orijinal koleksiyonu döndürür.

// Bir öğe ekler
$('<p>Şunu söylemek isterim: </p>').prepend('<b>Merhaba</b>');
// Sonuç: <p><b>Merhaba</b>Şunu söylemek isterim: </p>

// Birden fazla öğe ekler
$('<p>Şunu söylemek isterim: </p>').prepend('<b>Merhaba</b>', '<b>Dünya</b>');
// Sonuç: <p><b>Merhaba</b><b>Dünya</b>Şunu söylemek isterim: </p>

// Geri çağırma fonksiyonu ile bir öğe ekler
$('<p>Merhaba</p>').prepend(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Sonuç: <p><b>Merhaba0</b>Merhaba</p>

`.prependTo()`

Geçerli koleksiyondaki öğeleri, belirtilen öğelerin iç kısmının önüne ekler. Parametre bir CSS seçici, HTML dizesi, DOM öğesi, DOM öğeleri dizisi veya JQ nesnesi olabilir.

Bu yöntem, orijinal koleksiyonu döndürür.

$('<p>Merhaba</p>').prependTo('<p>Şunu söylemek isterim: </p>');
// Sonuç: [ <p><p>Merhaba</p>Şunu söylemek isterim: </p> ]

`.append()`

Geçerli öğelerin iç kısmının arkasına belirtilen içeriği ekler. Parametre bir HTML dizesi, DOM öğesi, DOM öğeleri dizisi veya JQ nesnesi olabilir. Birden fazla parametre iletilebilir.

Bu yöntem, orijinal koleksiyonu döndürür.

// Bir öğe ekler
$('<p>Şunu söylemek isterim: </p>').append('<b>Merhaba</b>');
// Sonuç: <p>Şunu söylemek isterim: <b>Merhaba</b></p>

// Birden fazla öğe ekler
$('<p>Şunu söylemek isterim: </p>').append('<b>Merhaba</b>', '<b>Dünya</b>');
// Sonuç: <p>Şunu söylemek isterim: <b>Merhaba</b><b>Dünya</b></p>

// Geri çağırma fonksiyonu ile bir öğe ekler
$('<p>Merhaba</p>').append(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Sonuç: <p>Merhaba<b>Merhaba0</b></p>

`.appendTo()`

Geçerli koleksiyondaki öğeleri, belirtilen öğelerin iç kısmının arkasına ekler. Parametre bir CSS seçici, HTML dizesi, DOM öğesi, DOM öğeleri dizisi veya JQ nesnesi olabilir.

Bu yöntem, orijinal koleksiyonu döndürür.

$('<p>Merhaba</p>').appendTo('<p>Şunu söylemek isterim: </p>');
// Sonuç: <p>Şunu söylemek isterim: <p>Merhaba</p></p>

`.after()`

Geçerli koleksiyondaki öğelerin arkasına, onların kardeş öğeleri olarak belirtilen içeriği ekler. Parametre bir HTML dizesi, DOM öğesi, DOM öğeleri dizisi veya JQ nesnesi olabilir. Birden fazla parametre iletilebilir.

Bu yöntem, orijinal koleksiyonu döndürür.

// Bir öğe ekler
$('<p>Şunu söylemek isterim: </p>').after('<b>Merhaba</b>');
// Sonuç: <p>Şunu söylemek isterim: </p><b>Merhaba</b>

// Birden fazla öğe ekler
$('<p>Şunu söylemek isterim: </p>').after('<b>Merhaba</b>', '<b>Dünya</b>');
// Sonuç: <p>Şunu söylemek isterim: </p><b>Merhaba</b><b>Dünya</b>

// Geri çağırma fonksiyonu ile bir öğe ekler
$('<p>Merhaba</p>').after(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Sonuç: <p>Merhaba</p><b>Merhaba0</b>

`.insertAfter()`

Geçerli koleksiyondaki öğeleri, hedef öğelerin arkasına, onların kardeş öğeleri olarak ekler.

Geçerli koleksiyondaki öğeler sayfada zaten mevcutsa, bu öğeler kopyalanmak yerine taşınır. Birden fazla hedef varsa, geçerli koleksiyondaki öğeler kopyalanır ve her hedef öğenin arkasına eklenir.

Hedef öğeleri belirtmek için bir HTML dizesi, CSS seçici, DOM öğesi, DOM öğeleri dizisi veya JQ nesnesi parametre olarak iletilebilir.

$('<b>Merhaba</b>').insertAfter('<p>Şunu söylemek isterim: </p>');
// Sonuç: <p>Şunu söylemek isterim: </p><b>Merhaba</b>

`.before()`

Geçerli koleksiyondaki öğelerin önüne, onların kardeş öğeleri olarak belirtilen içeriği ekler. Parametre bir HTML dizesi, DOM öğesi, DOM öğeleri dizisi veya JQ nesnesi olabilir. Birden fazla parametre iletilebilir.

Bu yöntem, orijinal koleksiyonu döndürür.

// Bir öğe ekler
$('<p>Şunu söylemek isterim: </p>').before('<b>Merhaba</b>');
// Sonuç: <b>Merhaba</b><p>Şunu söylemek isterim: </p>

// Birden fazla öğe ekler
$('<p>Şunu söylemek isterim: </p>').before('<b>Merhaba</b>', '<b>Dünya</b>');
// Sonuç: <b>Merhaba</b><b>Dünya</b><p>Şunu söylemek isterim: </p>

// Geri çağırma fonksiyonu ile bir öğe ekler
$('<p>Merhaba</p>').before(function (index, oldHTML) {
  return '<b>' + oldHTML + index + '</b>';
});
// Sonuç: <b>Merhaba0</b><p>Merhaba</p>

`.insertBefore()`

Geçerli koleksiyondaki öğeleri, hedef öğelerin önüne, onların kardeş öğeleri olarak ekler.

Hedef öğeleri belirtmek için bir HTML dizesi, CSS seçici, DOM öğesi, DOM öğeleri dizisi veya JQ nesnesi parametre olarak iletilebilir.

$('<p>Şunu söylemek isterim: </p>').insertBefore('<b>Merhaba</b>');
// Sonuç: <p>Şunu söylemek isterim: </p><b>Merhaba</b>

`.replaceWith()`

Geçerli koleksiyondaki öğeleri belirtilen öğelerle değiştirir.

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

Bu yöntem, değiştirilen orijinal koleksiyonu döndürür.

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

// Geri çağırma fonksiyonunun dönüş değeri ile tüm .box öğelerini değiştirir
$('.box').replaceWith(function (index, oldHTML) {
  return oldHTML + index;
});

`.replaceAll()`

Geçerli koleksiyondaki öğeleri, belirtilen öğeleri değiştirmek için kullanır.

Parametre, değiştirilecek öğelerdir; bir CSS seçici, DOM öğesi, DOM öğeleri dizisi veya JQ nesnesi olabilir.

Bu yöntem, değiştirme işlemi için kullanılan (yani geçerli koleksiyondaki) öğelerin koleksiyonunu döndürür.

// .new öğelerini kullanarak tüm .box öğelerini değiştirir
$('.new').replaceAll('.box');

`.clone()`

Koleksiyondaki tüm öğeleri derin bir kopyalama (deep clone) ile kopyalar.

Bu yöntem, kopyalama için yerel cloneNode yöntemini kullanır, ancak verileri ve olay işleyicilerini yeni öğelere kopyalamaz. Bu noktada, jQuery'de bir parametre kullanarak verilerin ve olayların kopyalanıp kopyalanmayacağını belirlemeden farklıdır.

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

Formlar

`.serializeArray()`

Form öğelerinin değerlerini, name ve value anahtar-değer çiftlerinden oluşan bir diziye dönüştürür.

Bu yöntem, tek bir form öğesi üzerinde veya tüm <form> üzerinde çalışabilir.

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

`.serializeObject()`

Form öğelerinin değerlerini bir nesneye dönüştürür.

Aynı anahtar adı birden fazla kez geçerse, karşılık gelen değerler bir diziye dönüştürülür.

Bu yöntem, tek bir form öğesi üzerinde veya tüm <form> üzerinde çalışabilir.

$('form').serializeObject();
// { name: mdui, password: 123456 }

`.serialize()`

Form öğelerinin değerlerini URL kodlamalı bir dizeye dönüştürür.

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

Olaylar

`.on()`

Koleksiyondaki her öğenin belirli bir olayına olay işleme fonksiyonu bağlar. Kullanım detayları için aşağıdaki örneklere bakın:

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

// Birden fazla olay bağlama
$('.box').on('click focus', function (e) {
  console.log('click ve focus olayları bu fonksiyonu tetikleyecektir');
});

// Olay temsilciliği (event delegation)
$(document).on('click', '.box', function (e) {
  console.log(".box'a tıklandığında bu fonksiyon tetiklenir");
});

// Aynı anda birden fazla olay ve olay işleme fonksiyonu bağlama
$('.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şleme fonksiyonuna parametreler iletildi',
  );
  // e._data, {key1: 'value1', key2: 'value2'} şeklindedir
});

// Aynı anda birden fazla olay ve olay işleme fonksiyonu bağlama ve parametre iletme
$('.box').on(
  {
    click: function (e) {
      console.log('click olayı tetiklendi');
      // e._data, {key1: 'value1', key2: 'value2'} şeklindedir
    },
    focus: function (e) {
      console.log('focus olayı tetiklendi');
      // e._data, {key1: 'value1', key2: 'value2'} şeklindedir
    },
  },
  { key1: 'value1', key2: 'value2' },
);

// Olay temsilciliği ile olay bağlama ve parametre iletme
$(document).on(
  'click',
  '.box',
  { key1: 'value1', keys: 'value2' },
  function (e) {
    console.log(
      '.box öğesine tıklandı ve olay işleme fonksiyonuna parametreler iletildi',
    );
    // e._data, {key1: 'value1', key2: 'value2'} şeklindedir
  },
);

// Olay temsilciliği ile aynı anda birden fazla olay ve olay işleme fonksiyonu bağlama
$(document).on(
  {
    click: function (e) {
      console.log('click olayı tetiklendi');
    },
    focus: function (e) {
      console.log('focus olayı tetiklendi');
    },
  },
  '.box',
);

// Olay temsilciliği ile aynı anda birden fazla olay ve olay işleme fonksiyonu bağlama ve parametre iletme
$(document).on(
  {
    click: function (e) {
      console.log('click olayı tetiklendi');
      // e._data, {key1: 'value1', key2: 'value2'} şeklindedir
    },
    focus: function (e) {
      console.log('focus olayı tetiklendi');
      // e._data, {key1: 'value1', key2: 'value2'} şeklindedir
    },
  },
  '.box',
  { key1: 'value1', key2: 'value2' },
);

// Olay parametrelerini alma
$('.box').on('click', function (e, data) {
  // data, e.detail'e eşittir
});

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

`.one()`

Her eşleşen öğenin belirli bir olayına bir olay işleme fonksiyonu bağlar, ancak olay yalnızca bir kez tetiklenir.

Bu yöntemin kullanımı .on() ile aynıdır, bu nedenle ek örnek verilmeyecektir.

`.off()`

Koleksiyondaki öğelere bağlı olayları kaldırır. Kullanım detayları için aşağıdaki örneklere bakın:

// Bağlı tüm olay işleme fonksiyonlarını kaldırır
$('.box').off();

// Belirtilen olaya bağlı olay işleme fonksiyonlarını kaldırır
$('.box').off('click');

// Aynı anda birden fazla bağlı olayı kaldırır
$('.box').off('click focus');

// Belirtilen olaya bağlı belirli bir olay işleme fonksiyonunu kaldırır
$('.box').off('click', callback);

// Olay temsilciliği ile bağlanmış olayları kaldırır
$(document).off('click', '.box');

// Olay temsilciliği ile bağlanmış belirli bir olay işleme fonksiyonunu kaldırır
$(document).off('click', '.box', callback);

// Aynı anda birden fazla olay işleme fonksiyonunu kaldırır
$('.box').off({
  click: callback1,
  focus: callback2,
});

// Aynı anda birden fazla olay temsilciliği ile bağlanmış olay işleme fonksiyonunu kaldırır
$(document).off(
  {
    click: callback1,
    focus: callback2,
  },
  '.box',
);

// Olay adları ad alanı (namespace) kullanımını destekler. Aşağıdaki kullanım .myPlugin ile biten tüm olayları kaldırır
$(document).off('.myPlugin');

`.trigger()`

Belirtilen olayı tetikler. Kullanım detayları için aşağıdaki örneklere bakın:

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

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

// Olay adları ad alanı (namespace) kullanımını destekler
$('.box').trigger('click.myPlugin');

// CustomEvent parametrelerini iletir
$('.box').trigger('click', undefined, {
  bubbles: true,
  cancelable: true,
  composed: true,
});

AJAX

`$.ajaxSetup()`

Genel AJAX istek parametrelerini ayarlar.

$.ajaxSetup({
  // Varsayılan olarak global AJAX olaylarını tetikleme
  global: false,

  // Varsayılan olarak istekleri POST yöntemiyle gönder
  method: 'POST',
});

Ayrıntılı parametre listesi için aşağıdaki AJAX parametreleri bölümüne bakın.

`$.ajax()`

Bir AJAX isteği gönderir ve bir Promise nesnesi döndürür.

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

promise
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

Ayrıntılı parametre listesi için aşağıdaki AJAX parametreleri bölümüne bakın.

AJAX'ın global olaylarını dinlemek için .on() yöntemini de kullanabilirsiniz.

// Bir AJAX isteği başladığında bu olay tetiklenir
$(document).on('ajaxStart', function (e, { xhr, options }) {
  // xhr: XMLHttpRequest nesnesi
  // options: $.ajax() yönteminin parametreleri
});

// Bir AJAX isteği başarılı olduğunda bu olay tetiklenir
$(document).on('ajaxSuccess', function (e, { xhr, options, response }) {
  // xhr: XMLHttpRequest nesnesi
  // options: $.ajax() yönteminin parametreleri
  // response: İsteğin yanıtı
});

// Bir AJAX isteği başarısız olduğunda bu olay tetiklenir
$(document).on('ajaxError', function (e, { xhr, options }) {
  // xhr: XMLHttpRequest nesnesi
  // options: $.ajax() yönteminin parametreleri
});

// Bir AJAX isteği tamamlandığında (başarılı veya başarısız) bu olay tetiklenir
$(document).on('ajaxComplete', function (e, { xhr, options }) {
  // xhr: XMLHttpRequest nesnesi
  // options: $.ajax() yönteminin parametreleri
});

AJAX Parametreleri

Öznitelik Adı	Tür	Varsayılan Değer
`url`	`string`	Geçerli sayfa URL'si
İsteğin URL adresi.
`method`	`string`	`GET`
İsteğin HTTP yöntemi. Olası değerler: `GET`, `POST`, `PUT`, `PATCH`, `HEAD`, `OPTIONS`, `DELETE`.
`data`	`any`	`''`
Sunucuya gönderilecek veri.
`processData`	`boolean`	`true`
İletilen verilerin bir sorgu dizesine dönüştürülüp dönüştürülmeyeceği.
`async`	`boolean`	`true`
İsteğin asenkron olup olmadığı.
`cache`	`boolean`	`true`
Verilerin önbellekten okunup okunmayacağı. Yalnızca `GET`, `HEAD` istekleri için geçerlidir.
`username`	`string`	`''`
HTTP erişim kimlik doğrulaması için kullanıcı adı.
`password`	`string`	`''`
HTTP erişim kimlik doğrulaması için parola.
`headers`	`object`	`{}`
HTTP istek başlıklarına eklenecek veri. Bu değer `beforeSend` geri çağırma fonksiyonunda geçersiz kılınabilir. Değeri dize veya `null` olan alanlar gönderilir, değeri `undefined` olan alanlar yoksayılır.
`xhrFields`	`object`	`{}`
`XMLHttpRequest` nesnesi üzerinde ayarlanacak veri. `$.ajax({ url: 'bir çapraz kaynak URL', xhrFields: { withCredentials: true } });`
`statusCode`	`object`	`{}`
HTTP durum kodları ve bunlara karşılık gelen işleme fonksiyonlarının eşlemesi. `$.ajax({ statusCode: { 404: function (xhr, textStatus) { alert('Dönüş durum kodu 404 olduğunda çağrılır'); }, 200: function (data, textStatus, xhr) { alert('Dönüş durum kodu 200 olduğunda çağrılır'); } } });` Durum kodu 200-299 aralığında veya 304 ise, istek başarılı demektir; fonksiyon parametreleri `success` geri çağırma fonksiyonunun parametreleriyle aynıdır. Aksi halde istek başarısız demektir; fonksiyon parametreleri `error` geri çağırma fonksiyonunun parametreleriyle aynıdır.
`dataType`	`string`	`text`
Sunucudan beklenen veri türü. Seçenekler: `text`, `json`
`contentType`	`string`	`application/x-www-form-urlencoded`
İstek içeriğinin MIME türü. `false` olarak ayarlanırsa, `Content-Type` ayarlanmaz.
`timeout`	`number`	`0`
İstek zaman aşımı süresi (milisaniye). `0` olarak ayarlanırsa, zaman aşımı yoktur.
`global`	`boolean`	`true`
Global AJAX olaylarının tetiklenip tetiklenmeyeceği.
`beforeSend`	`function`	-
İstek gönderilmeden önce çağrılır. `false` döndürürse, AJAX isteğini iptal eder. `$.ajax({ beforeSend: function (xhr) { // xhr, XMLHttpRequest nesnesidir } });`
`success`	`function`	-
İstek başarılı olduktan sonra çağrılır. `$.ajax({ success: function (data, textStatus, xhr) { // data, AJAX isteğinden dönen veridir // textStatus, başarı kodunu içeren bir dizedir // xhr, XMLHttpRequest nesnesidir } });`
`error`	`function`	-
İstek sırasında hata oluştuğunda çağrılır. `$.ajax({ error: function (xhr, textStatus) { // xhr, XMLHttpRequest nesnesidir // textStatus, hata kodunu içeren bir dizedir } });`
`complete`	`function`	-
İstek başarılı veya başarısız olsun, tamamlandığında çağrılır. `$.ajax({ complete: function (xhr, textStatus) { // xhr, XMLHttpRequest nesnesidir // textStatus, başarı veya hata kodunu içeren bir dizedir } });`

Önceki Bölüm

TopAppBar Üst Uygulama Çubuğu

Sonraki Bölüm

dialog