2020-04-12 18:21:45 +00:00
---
2021-03-10 03:43:53 +00:00
category: framework
2024-10-20 21:46:35 +00:00
framework: jQuery
2020-04-12 18:21:45 +00:00
contributors:
- ["Seçkin KÜKRER", "https://github.com/leavenha"]
2024-05-17 06:10:51 +00:00
filename: jquery-tr.js
2020-04-12 18:21:45 +00:00
lang: tr-tr
---
# Tanı
jQuery, (IPA: ˈ ɪ ɪ ː
j + Query, olarak isimlendirilmiş, çünkü çoğunlukla HTML elementlerini sorgulamak ve onları ı ı
jQuery, 2006 yı ı ı ı ı ı ı ı ı ı ı ı ı ı
Genel kullanı ı ı ı ı ı ı ı ı
Resmi sitesinden ([jQuery][jquery-official-website]) indirip web sitenize yükleyebilirsiniz. jQuery günümüz JavaScript kütüphaneleri gibi, küçültülmüş boyutlarda bulut tabanlı ı ı ı ı ı
Kütüphanenin kullanı ı
Fakat, jQuery'ye giriş yapmadan önce elbetteki bu kütüphanenin üzerine kurulduğu teknoloji olan [JavaScript'i öğrenmelisiniz][javascript-learnxinyminutes-page].
```js
// Bu belgedeki değişken isimleri Türkçe,
// ve [Lower Camel Case] notasyonu uygulamaktadı
// Bu belgedeki kod parçaları ı ı ı ı
// onları ı ı ı ı ı
// Döküman boyunca, aşağı
// Kod - Çı ı ı ı ı
// kolaylaştı ı ı ı ı
// ornek_kod_parcasi();
// => "ÖRNEK ÇIKTI"
// *. Konsept
// jQuery DOM nesnelerini seçmek için inovatif bir yol sunar.
// `$` değişkeni, `jQuery` kütüphanesine işaret eder.
// Fonksiyon notasyonu ile DOM nesnelerini elde eder
// ve üzerinde işlemler gerçekleştirirsiniz.
$(window)
// => jQuery [Window] (1)
// Bize tarayı ı ı
// 1. Seçiciler
// Tüm nesneleri seçmek için `*` çağı ı ı ı ı
const hepsi = $('*');
// => jQuery [< html > , < head > , < meta > ,
// .... < meta > , < title > , < meta > , < meta > ,
// .... < meta > , < link > , < link > , …] (1134) = $1
// Seçiciler, jQuery'de bir nesne seçmek için kullanı ı
const sayfa = $(window);
// => jQuery [window] (1)
// Sayfa, açı
// Elementler, kendileri için seçicidirler.
const tumParagraflar = $('p');
// => jQuery [< p > , < p > , < p > ] (3)
// Seçiciler aynı
const mavi = $('.mavi');
// => jQuery [< p class = 'mavi' ] ( 1 )
// Aynı ı
const maviParagraf = $('p.mavi');
// => jQuery [< p class = 'mavi' > ] (1)
// Özellik seçicileri de mevcuttur,
// Elementin özelliği için seçim yaparlar.
const isimSecicisi = $('input[name*="kayit.form"]');
// => jQuery [< input name = 'kayit.form.sifre' > ,
// < input name = 'kayit.form.dogumtarihi' > ...] (10)
// Diğer özellik seçiciler;
/*
- Özelliğin içinde arayan; *=
- Özelliğin içinde verilen kelimeleri arayan; ~=
|-(kelimeler boşlukla ayrı ı ı
- Özelliğin başlangı
- Özelliğin bitiş verisini arayan; $=
- Özelliği tamamen karşı ı
- Özelliğin eşitsizlik durumunu karşı ı
Diğer tüm seçiciler için resmi siteyi kontrol ediniz.
*/
// 2. Olaylar ve Efektler
// - Olaylar
// jQuery kullanı ı ı ı ı ı
// En yaygı ı ı ı ı ı ı ı
// $.ready fonksiyonu, argüman olarak aldı ı
// seçilen eleman tamamen yüklendiğinde çağı ı
$(document).ready(function(){
// Dökümanı ı ı ı ı ı
console.info('Döküman yüklendi!');
})
// => jQuery [#document] (1)
// Bir dökümanı ı ı
// herhangi bir iş mantı ı ı ı ı
// neden kötü bir fikir olduğunu merak ediyorsanı
// ileri okuma kı ı ı
// Önce Olay tanı ı
// Tı ı `$.click` olay tetikleyicisi kullanı ı
$('.mavi').click(function(){
// Unutmayı ı ı
// bir fonksiyonu da argüman olarak verebilirsiniz.
console.info('Mavi butona tı ı
})
// => jQuery [< button > , < button > , < button > , < button > , < button > , …] (365)
// Çift Tı ı `$.dblclick` olay tetikleyicisi kullanı ı
$('.mavi').dblclick(function(){
console.info('Mavi butona çift tı ı
})
// => jQuery [< button > , < button > , < button > , < button > , < button > , …] (365)
// Seçilen Elemente birden fazla tetiklenecek fonksiyon tanı
// istersek, Olayları ı ı ı
// Objeleri kullanarak da çağı
// => tetiklenecekFonksiyon
$('.mor').on({
click: () => console.info('Tek tı
dblclick: () => console.info('Çift tı
// ...
});
// => jQuery [< button > , < button > , < button > , < button > , < button > , …] (365)
// Diğer olay tetikleyicileri;
/*
Elemente,
- Fokus/Odaklanma; $.focus
- Fokus/Odaklanmanı
- Farenin alanı
- Farenin alanı ı ı
Diğer tüm olay tetikleyicileri için resmi siteyi kontrol ediniz.
*/
// Tanı ı
// Kullanı ı ı ı ı
// Tanı ı ı ı ı
// Argümansı ı ı ı
// Tı ı ı
$('.mavi').click();
// => Mavi butona tı ı
// => jQuery [< button > ] (1)
// Çift Tı ı ı
$('.mavi').dblclick();
// => Mavi butona çift tı ı
// => jQuery [< button > ] (1)
// - Efektler
// jQuery bir çok ön-tanı ı
// Bu efektler, belirli parametlerle, farklı ı ı ı
// gerçeklemenize izin verebilir.
// Önce parametresiz işlevlere göz atalı
// Elementleri saklayabilir,
$('#slaytresmi').hide();
// => jQuery [< img id = 'slaytresmi' > ] (1)
// Gizlenen elementleri tekrar görünür yapabilir,
$('#slaytresmi').show();
// => jQuery [< img id = 'slaytresmi' > ] (1)
// Yada dilediğiniz CSS niteliğini anime edebilirsiniz,
// Bu parametre, anime etmek istediğiniz CSS özelliklerini
// belirleyen Obje bilgisidir.
// Yükseklik ve Genişlik bilgileri için değerler belirliyoruz.
const animeEdilecekCSSOzellikleri =
{
weight: "300px",
height: "300px"
};
// Diğer anime edilebilir CSS özellikleri;
/*
Elementin,
- Opaklı
- Dı
- Çerçeve yüksekliği; borderWidth
- Satı
Diğer tüm özellikler için resmi siteyi kontrol ediniz.
*/
// Bu parametre animasyonun süresini belirler.
const milisaniyeCinsindenAnimasyonSuresi =
1200;
// Bu parametre, 'linear' yada 'swing' metin
// bilgilerinden birini alı
// akı ı ı ı ı
// x ∈ {'linear', 'swing'}
const animasyonAkiciligi = 'linear';
// Bu parametre, bir fonksiyondur ve
// animasyondan sonra çağı ı ı
// Bir geri-çağı ı
const animasyonGeriCagirimFonksiyonu = function(){
console.info('Animasyon bitti!');
};
// Şimdi tanı ı ı
$('#slaytresmi').animate(animeEdilecekCSSOzellikleri,
milisaniyeCinsindenAnimasyonSuresi,
animasyonAkiciligi,
animasyonGeriCagirimFonksiyonu);
// => jQuery [< img id = 'slaytresmi' > ] (1)
// Kütüphane `$.animate` fonksiyonu için, anime edeceğiniz
// CSS özellikleri dı ı
// ön tanı ı ı
// Bu değerler için resmi siteyi kontrol ediniz.
// Diğer ön tanı ı
/*
Elementi,
- Yukarı ı ı
- Verilen saydamlı
- Görünür yada görünmez yapar (geçerli durumuna bağlı
Diğer tüm efektler için resmi siteyi kontrol ediniz.
*/
// 3. Manipülasyon
// jQuery'de, HTML elementlerinin isteğiniz doğrultusunda
// değiştirilmesi için araçlar sunulmakta.
// Bir ön-tanı ı ı ı ı ı
// Bu sı ı ı
$('#slaytresmi').addClass('inanilmaz-bir-cerceve-sinifi');
// => jQuery [< img id = 'slaytresmi' class = 'inanilmaz-bir-cerceve-sinifi' > ] (1)
// Bu CSS sı ı ı ı
$('#slaytresmi').removeClass('inanilmaz-bir-cerceve-sinifi');
// => jQuery [< img id = 'slaytresmi' > ] (1)
// Bu HTML elementini, istediğimiz başka bir element ile çevreleyebiliriz,
$('#slaytresmi').wrap('< div class = "farkli-bir-cerceve" > < / div > ');
// => jQuery [< img id = 'slaytresmi' > ] (1)
// Sonucun gözlemlenebilmesi için, elementin çevreleme işlemi sonrası
// döküman üzerindeki yapı ı ı
$('.farli-bir-cerceve')
// => jQuery [< div class = 'farkli-bir-cerceve > ] (1)
// => < div class = "farkli-bir-cerceve" >
// < img id = 'slaytresmi' >
// < / div >
// Elemente içerik ekleyebiliriz,
// Eklemeler döküman içeriğinin sonuna yapı ı
// Bu süreci daha iyi gözlemleyebilmek için içeriğine bakmamı
// Ekleme öncesinde;
$('.farkli-bir-cerceve');
// => jQuery [< div class = 'farkli-bir-cerceve > ] (1)
// => < div class = "farkli-bir-cerceve" >
// < img id = 'slaytresmi' >
// < / div >
// `$.append` fonksiyonu ile ekleme işlemini yapı
$('.farkli-bir-cerceve').append('< h1 > Bu çerçeve farklı < / h1 > ');
// => jQuery [< div class = 'farkli-bir-cerceve > ] (1)
// => < div class = "farkli-bir-cerceve" >
// < img id = 'slaytresmi' >
// < h1 > Bu çerçeve farklı < / h1 >
// < / div >
// Dökümandan element silebiliriz,
$('.farkli-bir-cerceve > h1').remove();
// => jQuery [< h1 > ] (1)
// Dökümanı ı ı
$('.farkli-bir-cerceve');
// => jQuery [< div class = 'farkli-bir-cerceve > ] (1**
// => < div class = "farkli-bir-cerceve" >
// < img id = 'slaytresmi' >
// < / div >
// Elementlerin özniteliklerini değiştirebilir yada
// silebiliriz.
// Öznitelik erişici ve değiştiricisi,
// Bir fonksiyon notasyonuyla yapı ı
// Eğer bir öznitelik bilgisini almak istiyorsak, ilgili öznitelik
// ismini;
$('.farkli-bir-cerceve > img').attr('id');
// => 'slaytresmi'
// Eğer bir öznitelik bilgisini güncellemek istiyorsak,
// ilgili öznitelik ismi ve sonrası
// olarak $.attr fonksiyonuna iletiyoruz;
$('.farkli-bir-cerceve > img').attr('id', 'cercevelislaytresmi');
// => jQuery [< img id = 'cercevelislaytresmi' > ] (1)
// Diğer ön fonksiyonlar;
/*
Elementin,
- Yükseklik değeri, $.height
- HTML döküman içeriği, $.html
- Girdi içeriği, $.val
- Verilen CSS sı ı ı
Diğer tüm manipülasyon fonksiyonları
*/
```
## Notlar
- Yaygı ı ı ı ı ı *kütüphanedir* .
- [Lower Camel Case][lower-camel-case-notasyonu] notasyonu için Wikipedia sayfası
## İleri Okuma
### İngilizce
- [jQuery][jquery-official-website] resmi sitesi.
- [Jakob Jenkov | $(document).ready article ](http://tutorials.jenkov.com/jquery/document-ready.html )
[jquery-official-website]: https://jquery.com
[ajax-wikipedia-page]: https://en.wikipedia.org/wiki/Ajax_(programming)
[javascript-learnxinyminutes-page]: https://learnxinyminutes.com/docs/javascript/
[lower-camel-case-notasyonu]: https://en.wikipedia.org/wiki/Camel_case#Programming_and_coding
