jQuery Kopya Kağıdı
Aranabilir, yazdırılabilir jQuery başvurusu — seçiciler, DOM manipülasyonu, olaylar, efektler, gezinme, AJAX ve form yardımcıları. Ücretsiz.
Seçiciler
14$('#id')
Bir öğeyi id'siyle seç
$('.class')
Bir sınıfa sahip tüm öğeleri seç
$('div')
Bir etiket adındaki tüm öğeleri seç
$('*')
Sayfadaki her öğeyi seç
$('[name="email"]')
Bir öznitelik değeriyle seç
$('a[href^="https"]')
Öznitelik ile-başlar seçici
$('ul li:first')
İlk eşleşen öğe
$('ul li:last')
Son eşleşen öğe
$('tr:eq(2)')
Sıfır tabanlı indeksteki öğe
$('li:not(.done)')
Bir seçiciyle eşleşen öğeleri hariç tut
$(':checked')
Tüm işaretli onay/radyo kutuları
$('div:visible')
Yalnızca şu anda görünür öğeler
$('ul li')
Alt öğe birleştiricisi
$('ul > li')
Doğrudan alt öğe birleştiricisi
Belge hazır ve DOM
10$(function () { /* ... */ });
DOM hazır olunca kodu çalıştır
$(document).ready(fn)
Açık belge-hazır işleyicisi
$(window).on('load', fn)
Tüm varlıklar yüklendikten sonra çalıştır
$(this)
Mevcut bağlam öğesini sarmala
$(el)
Ham bir DOM düğümünü jQuery'ye sarmala
$('<div class="box"></div>')
HTML'den yeni öğe oluştur
$('#box')[0]
Alttaki DOM düğümünü al
$('#box').get(0)
.get() ile DOM düğümünü al
$('.item').length
Eşleşen öğeleri say
$('#box').is(':visible')
Bir seçiciyi küme üzerinde test et
DOM manipülasyonu
12$('#box').html('<b>Hi</b>')
İç HTML'i ayarla
$('#box').text('Hello')
Metin içeriğini ayarla (kaçışlı)
$('#name').val('Ada')
Bir form alanı değerini ayarla
$('#list').append('<li>x</li>')
İçeriği sona ekle
$('#list').prepend('<li>x</li>')
İçeriği başa ekle
$('#box').before('<hr>')
İçeriği öğeden önce ekle
$('#box').after('<hr>')
İçeriği öğeden sonra ekle
$('#box').remove()
Öğeyi DOM'dan kaldır
$('#box').empty()
Tüm alt düğümleri kaldır
$('#box').clone()
Öğenin bir kopyasını oluştur
$('#box').wrap('<div>')
Öğeyi yeni HTML ile sarmala
$('#box').replaceWith('<p>')
Öğeyi tamamen değiştir
Öznitelikler ve CSS
13$('#img').attr('src')
Bir öznitelik değeri al
$('#img').attr('alt', 'Logo')
Bir öznitelik değeri ayarla
$('#cb').prop('checked')
Bir DOM özelliği al (checked/disabled)
$('#cb').prop('checked', true)
Bir DOM özelliği ayarla
$('#img').removeAttr('title')
Bir özniteliği kaldır
$('.box').addClass('active')
Bir CSS sınıfı ekle
$('.box').removeClass('active')
Bir CSS sınıfı kaldır
$('.box').toggleClass('open')
Bir CSS sınıfını aç/kapat
$('.box').hasClass('active')
Bir sınıfın var olup olmadığını test et
$('#box').css('color', 'red')
Tek bir CSS özelliği ayarla
$('#box').css({top: 0, left: 0})
Birden çok CSS özelliği ayarla
$('#box').width()
Hesaplanan genişliği piksel olarak al
$('#box').height()
Hesaplanan yüksekliği piksel olarak al
Olaylar
12$('#btn').on('click', fn)
Bir olay işleyici ekle
$('#btn').off('click')
Olay işleyicilerini kaldır
$('#btn').click(fn)
Kısa yol tıklama işleyicisi
$('#form').submit(fn)
Form gönderimini işle
$('#sel').change(fn)
Değer değişikliklerini işle
$('#in').keyup(fn)
Bir alanda tuş-bırakmayı işle
$('#list').on('click', '.item', fn)
Dinamik alt öğeler için devredilen olay
$('#btn').trigger('click')
Bir olayı programatik tetikle
$('#btn').one('click', fn)
Bir işleyiciyi en fazla bir kez çalıştır
e.preventDefault()
Varsayılan tarayıcı eylemini durdur
e.stopPropagation()
Olayın yayılmasını durdur
e.target
Olayı tetikleyen öğe
Efektler ve animasyon
12$('#box').show()
Gizli bir öğeyi göster
$('#box').hide()
Bir öğeyi gizle
$('#box').toggle()
Görünürlüğü aç/kapat
$('#box').fadeIn(300)
Bir öğeyi belirginleştir
$('#box').fadeOut(300)
Bir öğeyi soldur
$('#box').fadeTo(300, 0.5)
Belirli bir saydamlığa solukla
$('#box').slideUp()
Bir öğeyi yukarı kaydır (daralt)
$('#box').slideDown()
Bir öğeyi aşağı kaydır (genişlet)
$('#box').slideToggle()
Kaydırma animasyonunu aç/kapat
$('#box').animate({left: 100})
CSS özelliklerini canlandır
$('#box').stop()
Mevcut animasyonu durdur
$('#box').delay(500).fadeIn()
Sıradaki efekti geciktir
Gezinme
12$('#box').find('.item')
Bir seçiciyle eşleşen alt öğeleri bul
$('#box').parent()
Doğrudan ebeveyni al
$('#box').parents('.row')
Bir seçiciyle eşleşen tüm üst öğeleri al
$('#box').closest('.row')
En yakın eşleşen üst öğe (veya kendisi)
$('#box').children()
Doğrudan alt öğeleri al
$('#box').siblings()
Kardeş öğeleri al
$('#box').next()
Sonraki kardeşi al
$('#box').prev()
Önceki kardeşi al
$('.item').each(fn)
Her eşleşen öğe üzerinde yinele
$('.item').filter('.on')
Kümeyi bir seçiciyle daralt
$('.item').first()
Kümeyi ilk öğeye daralt
$('.item').eq(1)
Kümeyi tek indekse daralt
AJAX
11$.ajax({url: '/api', method: 'GET'})
Tam denetimli AJAX isteği
$.get('/api', fn)
Kısa yol HTTP GET isteği
$.post('/api', data, fn)
Kısa yol HTTP POST isteği
$.getJSON('/api.json', fn)
JSON bekleyen GET isteği
$('#box').load('/part.html')
Bir öğeye HTML yükle
$.ajax({dataType: 'json'})
Beklenen yanıt türünü ayarla
$.ajax({data: {q: 'x'}})
İstek parametreleri gönder
.done(function (res) {})
Başarıda bir geri çağrı çalıştır
.fail(function (err) {})
Başarısızlıkta bir geri çağrı çalıştır
.always(function () {})
Tamamlandıktan sonra bir geri çağrı çalıştır
$.ajaxSetup({headers: {}})
Tüm istekler için varsayılanları ayarla
Formlar
10$('#form').serialize()
Form verisini sorgu dizgisi olarak kodla
$('#form').serializeArray()
Form verisini dizi olarak kodla
$('#name').val()
Bir alan değeri oku
$('#name').val('Ada')
Bir alan değeri yaz
$(':input')
Tüm form giriş öğelerini seç
$('#cb').is(':checked')
Bir onay kutusunun işaretli olup olmadığını test et
$('#sel option:selected')
Seçili seçeneği al
$('#in').focus()
Odağı bir alana taşı
$('#form').on('submit', fn)
Form gönderim olayını işle
$('#in').prop('disabled', true)
Bir form denetimini devre dışı bırak
Yardımcılar
11$.each(arr, fn)
Bir dizi veya nesne üzerinde yinele
$.map(arr, fn)
Her öğeden yeni bir dizi oluştur
$.grep(arr, fn)
Bir diziyi yüklem ile filtrele
$.extend({}, a, b)
Nesneleri bir hedefe birleştir
$.trim(' hi ')
Baştaki/sondaki boşluğu kırp
$.inArray(2, arr)
Bir dizide öğe indeksi bul
$.isArray(x)
Bir değerin dizi olup olmadığını test et
$.isFunction(x)
Bir değerin fonksiyon olup olmadığını test et
$.parseJSON(str)
Bir JSON dizgisini nesneye ayrıştır
$.now()
Milisaniye cinsinden mevcut zaman damgası
$.type(x)
Bir değerin dahili türünü al
“:q” ile eşleşen bir girdi yok.
Yardıma mı ihtiyacınız var?
Bu araçta bir sorun mu buldunuz? Ekibimize bildirin.