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.


 

Geri
Sonraki

.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:


Geri
Sonraki

Bir Cevap Yazın