2020-04-12 21:21:45 +03:00
-- -
2020-09-06 04:12:32 +03:00
category : tool
tool : jquery
2020-04-12 21:21:45 +03:00
contributors :
- [ "Seçkin KÜKRER" , "https://github.com/leavenha" ]
filename : jquery - tr - tr . js
lang : tr - tr
-- -
# Tanı
jQuery , ( IPA : ˈ ͡ ʒeɪ ɪ ː ) .
j + Query , olarak isimlendirilmiş , çünkü çoğunlukla HTML elementlerini sorgulamak ve onları manipüle etmek için kullanı ı .
jQuery , 2006 yı ı geliştirilmiş ve günümüzde halen kullanı ı yaygı , görece en popüler çapraz - platform JavaScript kütüphanelerinden birisidir . Şimdilerde jQuery ekibi tarafı gelişimi devam etmektedir . Dünyanı bir çok yerinden büyük şirketler ve bağı ı yazı ı ekipleri tarafı kullanı ı .
Genel kullanı amacı animasyonlardı ; Galeri , ek menü , sayfa geçişleri , ve diğer tüm gerçeklemelere sağladı ı kolaylı birlikte Flash ' ı 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ı ı .
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ğı ı Ağı sistemleri sayesinde bağı ı olarak da sitenize eklenebilir .
Kütüphanenin kullanı ı 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ı
// 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ı ı , *= ' den farkı dikkat ediniz . )
- Özelliğin başlangı verisini arayan ; ^=
- Ö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ı ı ı ı
$ ( '.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ı ı ı ı
$ ( '.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ı kaybedilmesi ; $ . blur
- Farenin alanı girmesi ; $ . mouseenter
- Farenin alanı çı ı ; $ . mouseleave
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ı ; opacity
- Dı çevre mesafesi ; margin
- Çerçeve yüksekliği ; borderWidth
- Satı 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ı
// 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ı kaydı ı ; $ . slideUp
- Verilen saydamlı 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ı ı ı ı ı ı
// 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ı ) ;
// => jQuery [<div class='farkli-bir-cerceve>] (1)
// => <div class="farkli-bir-cerceve">
// <img id='slaytresmi'>
// <h1>Bu çerçeve farklı
// </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ı ı ı sahipliği , $ . hasClass
Diğer tüm manipülasyon fonksiyonları için resmi siteyi kontrol ediniz .
* /
` ` `
# # Notlar
- Yaygı bir yanlı bilineni düzeltmek adı ; jQuery bir çalı - çatı ı 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
