1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
|
---
category: tool
tool: jquery
contributors:
- ["Seçkin KÜKRER", "https://github.com/leavenha"]
filename: jquery-tr-tr.js
lang: tr-tr
---
# Tanım
jQuery, (IPA: ˈd͡ʒeɪˌkwɪəɹiː).
j + Query, olarak isimlendirilmiş, çünkü çoğunlukla HTML elementlerini sorgulamak ve onları manipüle etmek için kullanılır.
jQuery, 2006 yılında geliştirilmiş ve günümüzde halen kullanımı yaygın, görece en popüler çapraz-platform JavaScript kütüphanelerinden birisidir. Şimdilerde jQuery ekibi tarafından gelişimi devam etmektedir. Dünyanın bir çok yerinden büyük şirketler ve bağımsız yazılım ekipleri tarafından kullanılmaktadır.
Genel kullanım amacı animasyonlardır; Galeri, ek menü, sayfa geçişleri, ve diğer tüm gerçeklemelere sağladığı kolaylıkla birlikte Flash'ın alternatifi olarak yorumlanabilir. [Ajax][ajax-wikipedia-page] işlemleri de dahil olmak üzere olay-yönetimi, döküman manipülasyonu ve bir çok programlama görevini kolaylaştırır.
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ı İçerik Dağıtım Ağı sistemleri sayesinde bağımsız olarak da sitenize eklenebilir.
Kütüphanenin kullanımı ile, jQueryUI gibi ek paketlerle gelişmiş ve modern arayüzler gerçekleyebilirsiniz.
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ır.
// Bu belgedeki kod parçalarının çıktıları,
// onları uyguladığınız dökümanın içeriğine bağlı olarak değişmektedir.
// Döküman boyunca, aşağıdaki gösterimde
// Kod - Çıktı ikilisi ile içeriğin anlamlandırılması
// kolaylaştırılmaya çalışmıştır.
// 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ıcının belirlediği window nesnesini verir.
// 1. Seçiciler
// Tüm nesneleri seçmek için `*` çağırımı yapılır.
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ılırlar,
const sayfa = $(window);
// => jQuery [window] (1)
// Sayfa, açık döküman nesnesini seçer.
// Elementler, kendileri için seçicidirler.
const tumParagraflar = $('p');
// => jQuery [<p>, <p>, <p>] (3)
// Seçiciler aynı zamanda CSS seçicileri olabilir.
const mavi = $('.mavi');
// => jQuery [<p class='mavi'] (1)
// Aynı zamanda element ile birlikte kullanılabilirler.
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ılmalı, *='den farkına dikkat ediniz.)
- Özelliğin başlangıç verisini arayan; ^=
- Özelliğin bitiş verisini arayan; $=
- Özelliği tamamen karşılaştıran; =
- Özelliğin eşitsizlik durumunu karşılaştıran; !=
Diğer tüm seçiciler için resmi siteyi kontrol ediniz.
*/
// 2. Olaylar ve Efektler
// - Olaylar
// jQuery kullanıcı ile tarayıcı arasındaki etkileşimi olaylar ile ele alır.
// En yaygın kullanımı tartışmasız ki Dökümanın Yüklenmesi olayıdır.
// $.ready fonksiyonu, argüman olarak aldığı fonksiyonu,
// seçilen eleman tamamen yüklendiğinde çağıracaktır.
$(document).ready(function(){
// Dökümanın tamamı yüklendiğine göre, iş mantığımı çağırabiliriz.
console.info('Döküman yüklendi!');
})
// => jQuery [#document] (1)
// Bir dökümanın tamamının yüklenmeden,
// herhangi bir iş mantığı çalıştırmanın
// neden kötü bir fikir olduğunu merak ediyorsanız,
// ileri okuma kısmına danışabilirsiniz.
// Önce Olay tanımlayalım.
// Tıklama olayı için `$.click` olay tetikleyicisi kullanılıyor.
$('.mavi').click(function(){
// Unutmayın ki, önceden tanımlanmış
// bir fonksiyonu da argüman olarak verebilirsiniz.
console.info('Mavi butona tıkladın!');
})
// => jQuery [<button>, <button>, <button>, <button>, <button>, …] (365)
// Çift Tıklama olayı için `$.dblclick` olay tetikleyicisi kullanılıyor.
$('.mavi').dblclick(function(){
console.info('Mavi butona çift tıkladın!');
})
// => jQuery [<button>, <button>, <button>, <button>, <button>, …] (365)
// Seçilen Elemente birden fazla tetiklenecek fonksiyon tanımalamak
// istersek, Olayları ve Fonksiyonları Anahtar-Değer yapısı sağlayan
// Objeleri kullanarak da çağırabiliriz.
// => tetiklenecekFonksiyon
$('.mor').on({
click: () => console.info('Tek tıklama ile tetiklendim!'),
dblclick: () => console.info('Çift tıklama ile tetiklendim!'),
// ...
});
// => jQuery [<button>, <button>, <button>, <button>, <button>, …] (365)
// Diğer olay tetikleyicileri;
/*
Elemente,
- Fokus/Odaklanma; $.focus
- Fokus/Odaklanmanın kaybedilmesi; $.blur
- Farenin alanına girmesi; $.mouseenter
- Farenin alanından çıkması; $.mouseleave
Diğer tüm olay tetikleyicileri için resmi siteyi kontrol ediniz.
*/
// Tanımlanan olayları tetiklemek için,
// Kullanıcı-Tarayıcı etkileşimi yerine elle çağrı yapmak da mümkün.
// Tanımlama ile çağırım arasındaki fark sadece sağlanan argümanlardır.
// Argümansız çağırım, olayı tetikler.
// Tıklama olayını tetiklemek için.
$('.mavi').click();
// => Mavi butona tıkladın!
// => jQuery [<button>] (1)
// Çift Tıklama olayını tetiklemek için.
$('.mavi').dblclick();
// => Mavi butona çift tıkladın!
// => jQuery [<button>] (1)
// - Efektler
// jQuery bir çok ön-tanımlı efekt sunmakta.
// Bu efektler, belirli parametlerle, farklı iş mantıklarını
// gerçeklemenize izin verebilir.
// Önce parametresiz işlevlere göz atalım.
// 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ık; opacity
- Dış çevre mesafesi; margin
- Çerçeve yüksekliği; borderWidth
- Satır yüksekliği; lineHeight
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ır ve animasyonun
// akıcılığını belirler.
// x ∈ {'linear', 'swing'}
const animasyonAkiciligi = 'linear';
// Bu parametre, bir fonksiyondur ve
// animasyondan sonra çağırılır.
// Bir geri-çağırım (callback*) olarak değerlendirilebilir.
const animasyonGeriCagirimFonksiyonu = function(){
console.info('Animasyon bitti!');
};
// Şimdi tanımlanan bilgilerimizle animasyonu çağırıyoruz.
$('#slaytresmi').animate(animeEdilecekCSSOzellikleri,
milisaniyeCinsindenAnimasyonSuresi,
animasyonAkiciligi,
animasyonGeriCagirimFonksiyonu);
// => jQuery [<img id='slaytresmi'>] (1)
// Kütüphane `$.animate` fonksiyonu için, anime edeceğiniz
// CSS özellikleri dışındaki tüm argümanlar için
// ön tanımlı değerler sağlamaktadır.
// Bu değerler için resmi siteyi kontrol ediniz.
// Diğer ön tanımlı efektler;
/*
Elementi,
- Yukarı kaydırır; $.slideUp
- Verilen saydamlık değerine anime eder; $.fadeTo
- Görünür yada görünmez yapar (geçerli durumuna bağlı); $.toggle
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ımlı CSS sınıfımız olduğunu hayal edebilirsiniz.
// Bu sınıfı istediğimiz elemente uygulamak için,
$('#slaytresmi').addClass('inanilmaz-bir-cerceve-sinifi');
// => jQuery [<img id='slaytresmi' class='inanilmaz-bir-cerceve-sinifi'>] (1)
// Bu CSS sınıfını istediğimiz zaman silebiliriz,
$('#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ısını temel bir seçici ile gözlemleyebiliriz;
$('.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ılacaktır.
// Bu süreci daha iyi gözlemleyebilmek için içeriğine bakmamız yeterli,
// 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ıyoruz.
$('.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ın güncel halini görmek için seçiciyi çağırıyoruz,
$('.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ılanmış durumda.
// 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ında yeni değerini argüman
// 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ınıfına sahipliği, $.hasClass
Diğer tüm manipülasyon fonksiyonları için resmi siteyi kontrol ediniz.
*/
```
## Notlar
- Yaygın bir yanlış bilineni düzeltmek adına; jQuery bir çalışma-çatısı değil, bir *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
|
