JQuery yardım çantası! En çok kullanılan özellikler!

Genelde uygulamalarimda sikca kullandigim javascript kodlarimi bu konuda toplamak istiyorum. Kodlari aklimda tutmayi sevmedigimden yada tekrar kullanmam uzun sure aldigi icin unutabiliyorum. Bu sorund egil, kullanim sekli ve kullanim alanlarini bildikten sonra kodlari ezberlemek gerekmez.

Konuda yer verilen anlatimlar:

  • .on (Tiklama tetikleme)
  • Goster/gizle (hide.show)
  • Jquery Ajax kullanimi
  • attr ile tanimli parametreleri alma
  • attr ile parametre içeriklerini değiştirme
  • Toplama, çıkarma, çarpma bölme
  • val() parametresi ile form iceriklerini alalim
  • html() ile kodlar arasindaki veriyi alma
  • css ozelliklerini degistirme
  • addClass-removeClass (Class ekleme/silme)
  • Jquery Form Event fonksiyonlari
  • setTimeout (timer) zaman (bekletme) fonksiyonu

Konuyu hazirlarken hem kendimi hemde bu konuda calismalari olabilecek arkadaslara takim cantasi olabilsin diye basliyorum. Konu herdaim yeni fikirler, yeni seyler buldugumda guncellenecektir. Sizlerden oneri gelirse konuya ekleyecegim, en azindan aradigimiz hersey tek bir konuda toplanmis olur 😉


 

Yardimci kaynaklar

Ilk olarak yardimci kaynaklara link vermek istiyorum, en azindan takildiginiz yerlerde yardim icin kontrol edebilirsiniz.

  • Ana site: http://jquery.com
  • Jquery konusunda harika videolu anlatimlar: http://try.jquery.com/
  • Jquery yeni versiyon ve indirme: http://jquery.com/download/

 

Jquery dosyasini tanimlama

Ben calismalarimda jquery uygulamasini kullaniyorum, oncelikle jquery dosyasini header meta taglari arasina yada yazacagimiz javascript kodlarinin ustune ekleyelim.

Siz jquery dosyasini kendi sunucunuza/hostunuza indirerek kullanirsaniz daha makul olacaktir.

! JQuery js dosyasini yazacagimiz jquery/javascript kodlarindan once eklememiz gerekli, aksi durumda yazdigimiz kodlar calismayacaktir.


 

Kodlamaya baslarken

Kodlarinizi ekstra bir js dosyasinda yazmaniz ve yukarida ekledigimiz JQuery dosyasinin altina include etmeniz daha mantikli olacaktir. Ancak baslangic ve test asamasinda HTML icerisinede ekleme yaparak hizli bir sekilde kodlarimizin kullanilabilirligini test edebilirsiniz.

Ornek Dosya ekleme:

Sayfa icerisine ekleme:

!$(document).ready kismini eklememizin sebebi: Butun sayfa ve jquery dosyalari yuklendikcen sonra kodlarimizin isleme alinmasini saglamak. Bazi durumlarda bunu yapmazsaniz kodlarimiz jquery yuklenmeden kendini calistirmaya calisacagindan, islevsel sorunlar yasayabilir, husrana ugrayabilirsiniz. Ayni sekilde asagidaki kod da ayni etkiyi ve ozelligi bize verecektir.

Yinede ilk onerdigim kodu kullanmanizi tavsiye ederim.

🙂 Gerekli on bilgiden sonra kullanim ve ornek calismalara baslayalim.


 

.on (Tiklama tetikleme)

Sayfa icerisinde herhangi bir elemente tiklandiginda isleme alacagimiz ve bu tiklamanin neticesinde gerceklesmesini istediginiz hareketleri calistiracagimiz fonksiyonumuz olacak.

Ornegin sayfada bir buton olusturup, buna tiklanildiginda butonun altinda ajax ile baska sayfadan bilgi cekip ekleyebiliriz, yada uyari mesaji cikartirabileriz.

!ID eti #test1 yerine klass ismini yazmaniz gerekli. Oncesine nokta (.) koymayi unutmayin. Yinede ornek bir uygulamayi asagida ekliyorum:


Goster/gizle (hide.show)

Sayfa icerisinde belirli bolumleri gizlemek yada gostermek isterseniz asagidaki orneklerden herhangi birini kullanabilirsiniz.

Yukaridakilere ek olarak, htmlde display ozelligini kullanarakda elementleri gosterip, gizleyebilirsiniz. Bir nevi style (css) ozelligine mudahale etmis oluyoruz 😉


 

Display ozelligine gore gosterme/gizleme


Jquery Ajax kullanimi

Ajax girdigimiz her sitede olan ve bir cok kez hayatimizi kurtaran, kullanicinin interaktifligini ust duzeye cikaran olmazsa olmazlarimizdan. Basit bir kullanim ornegi ile konuya giris yapalim, gelistirmek ve daha fonksiyonel yapmak icin konudaki diger basliklari kontrol edebilirsiniz.

Sayfaya girildiginde direk veri gondermek ve almak:

Yada yukaridaki orneklerimizde kullandigimiz butona tiklanildiginda ajax verisi gondermek ve almak icin:

Parametrelerin aciklamalari:

method: Veri gonderirken kullanicilacak method tipini belirleri (POST, GET, PUT) – Default deger: GET

url: Istek yapilacak url yada dosya adresi

dataType:  Veri alirken karsi taraftan donen degeri belirtiriz. Boylece JQuery kullanima hazir olarak calisacaktir. (xml, json, jsonp, script, html). html kullanirsaniz script kodlarida dahil geri donecektir.

cache: default deger acik (true) olarak gelir. Ancak dataType degeri script yada jsonp oldugunda false dir. Yapilan isteklerin cache de kalmasini ve tekrar tekrar ayni istegin gitmesini isterseniz true yapin. Ancak bazi durumlarda farkli istekler donebilecegi icin uygulamaniza gore bunu false yapmaniz daha mantikli olacaktir.

data: Gonderilecek veriye ait data bilgilerini icerir. Alabilecegi data turleri: PlainObject, String, Array Form verilerinde veya bazi durumlarda ben array veri seklinde gonderim yapiyorum.

.done: Veri basarili bir sekilde gonderilirse donen data_bilgi parametresi ile fonksiyon icerisinde kullanilabilir olacaktir. Bu kisimda karsi tarafta duzgunde olsa, sorunda olsa veri gonderildigi ve alinabildigi icin calisacaktir.

.fail: Veri gonderilemedigi zaman bu kisim acilacak ve hata mesajini gosterecektir. Bu kisim calisiyorsa ajax kod yapinizda bir yerde sorun var demektir. Ornek url yanlis olabilir…

! Ben ajax orneklerinde alert ile donen degeri sizlerin gorebilmesi icin actirdim. siz kolayca herhangi bir div yada elementin icerisinde ekleyerek o elementi gostererek kullaniciya interaktif bir heycan yasatabilirsiniz. bunun icin konudaki ilgili basliklari kontrol edebilirsiniz.


 

attr ile tanimli parametreleri alma

En sevdigim ozelliklerden birisi ve bir cok kez kullanma firsatim oluyor. Bir elemente (div, a, input v.S ne varsa) ait icerisinde tanimlanmis bir parametreyi almamizi saglar. Ornek kodlara asagidan bakarsaniz daha net anlayacaksiniz.

Yukadaki kullanimla, ID si yada class i belirtilen kod betiginde tanimli herhangi bir alani alabilirsiniz. Birden fazla tanim belirtebilirsiniz. input, button, p div v.s her konuda kullanim kolayligi saglayacak bir ozelliktir.

Tıklanan elementin içerisindeki herhangi bir parametreyi almak içinde thiş tanımlayıcısını kullanırız, örnek:

Yukarıdaki örnekte, tıklanan butonda bulunan p elementine atanan bilgiyi almaktadır. isterseniz bir çok parametre olsun, tıklanan yani tetiklenen butondaki her bilgiyi bu şekilde çekebilirsiniz.


 

attr ile parametre içeriklerini değiştirme

Yukarda attr ile bir bölümde kayıtlı parametreyi almayı göstermiştik. Şimdide bu aldığımız parametreyi nasıl değiştirebileceğimizi göstereceğim.


 

Toplama, çıkarma, çarpma bölme

Bu işlemler çok basit aslında ancak bazı durumlarda bir sonuç alamayabiliyorsunuz. Değişkenlerden gelen değerleri toplama çıkarma işlemine sokarken sonuç doğru çıkmamaktadır, bu yüzden yaptığınız işlemlerde tavsiyem değeri parseInt işleminden geçirerek toplama çıkarma v.s formatına şokunuz..


 

val() parametresi ile form iceriklerini alalim

val() ozelligi ile bir input’un, selectin yada herhangi bir value degerine sahip html etiketinin degerini alabiliriz. Ornek kullanim asagida yer almaktadir.

! val() degerinin icerisine birseyler eklerseniz tanimlanan form elementinin value degerinide degistirmis olacaksiniz. Bu Degisime ornek:

! Bu degisim sadece value degerinde ise yarayacaktir. div yada herahngi bir html kodlari arasindaki degeri degistirmek, yada almak isterseniz html() ozelligini kullanmaniz gerekli.


 

html() ile kodlar arasindaki veriyi alma

html() de yukarida bahsettigim val() elementi gibi birseylerin icerigini alir. html() genel olarak html etiketleri arasinda kalanlari almaniz icin isimize yarayacak. Ornek kullanimi incelerseniz ne demek istedigimi net anlayacaksiniz.

! val() degerinde oldugu gibi icerigine birsey eklerseniz div in yada her ne kullaniyorsaniz icerigini degistirmis olursunuz. Ornek kullanim yukarida ayri olarak ekledim.


 

css ozelliklerini degistirme

html kodlarinizin, div, p, a v.s gibi html etiketlerine ait css ozelliklerinizi duzenlemenize yarar. Kolay bir kullanim yapisi vardir, ornekler asagida inceleyebilirsiniz.

! Ilk alan degistirilecek css parametresini, ikinci alanda alacagi degeri belirtir.. Css de bulunan butun ozellikleri bu sekilde degistirebilirsiniz.


 

addClass-removeClass (Class ekleme/silme)

Html kodlarinizda herhangi bir class i silebilir yada yeni bir class ekleyerek html kodunuzun goruntusunu degistirebilir yada sirf sonraki asamalarda kullanmak icin sirayi belirtmek icin atayabilirsiniz. Kullanimi basitdir:


 

Jquery Form Event fonksiyonlari

Form elementlerini kullanirken yapilan islem, tiklama yada v.s hareketlerini yakalamak icin asagidaki fonksiyonlari kullanabilirsiniz. Demo ve kaynak.

1 – focus()

2 – blur()

3 – change()

4 – select()

5 – submit()

Ornek kodlarin hepsi:


 

setTimeout (timer) zaman (bekletme) fonksiyonu

Jquery deki timer fonksiyonu ile istediginiz bir etkiyi, belirlediginiz bir zaman sonra calistirabilirsiniz.

Zamanim olursa konuyu guncelleyecegim, yeni konularada yer verecegim.

Bir Cevap Yazın