2020-04-12 18:21:45 +00:00
-- -
2021-03-10 03:43:53 +00:00
category : framework
framework : jquery
2020-04-12 18:21:45 +00:00
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