jQuery Nedir ? Ne amaçla ve nerelerde kullanılır ? Ders 1
Merhaba,
Bu yazımızda jQuery nedir, ne amaçla kullanılır ile başlayıp ilerleyen yazılarımızda jQuerynin inceliklerine giriş yapacağız. Eğer jQuery hakkında bilginiz yok ise bu yazıdan itibaren okumaya başlamanızı öneririm. Yaklaşık 10 15 dersin sonunda jQuery kullanarak bir çok probleminizi kolayca çözebilir hale geleceksiniz.
Öncelikle jQuery’i kolayca anlamak istiyorsanız Html, Css konularında biraz bilginiz olması gerekli. Zaten Css derslerimiz mevcut eÄŸer Css bilginiz konusunda net deÄŸilseniz Css derslerimizide göz gezdirin derim.
Åžimdi gelelim konumuza ;
jQuery öğrenmesi ve mantığı kolay, JavaScript kütüphaneleri kullanan bir kodlama dilidir. Öğrenmesi kolay dememin nedeni çok komplike olmadığı gibi bir kaç kalıp oturduÄŸunda yazarken zevk alacağınız ve sonuçlarını hızlı görebileceÄŸiniz bir dildir. Günümüzde JavaScript inde kullanılıyor olmasına raÄŸmen jQuery daha popüler bir dil haline gelmiÅŸtir nedeni ise JavaScriptte satırlarca yazdığımız kodları jQuery sayesinde tek satırda yazabiliyoruz zaten sloganlarıda bu ÅŸekilde. “write less, do more“.Birazda genel mantığı hakkında  bilgi verelim.
jQuery kullanmak istiyor isek html sayfamıza kullanacağımız apinin adresini eklememiz gerekmektedir. Bunun için birden fazla yol bulunmaktadır ancak hepsi hemen hemen aynı kütüphaneyi refere etmektedir.
Html sayfamızda <head> etiketinin içerisine
|
1 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> |
etiketini ekliyoruz.
Görüntümüz şu şekilde olmalı ;
|
1 2 3 4 5 |
<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> </head> |
Artık kütüphanemizi tanıttığımız göre kodlama konusunda bilgi vermeye başlayabiliriz.
Css mantığını hatırlarsanız elementlerimizi seçip o elementler için görsel değişiklikler yapardık. Bundada mantık aynı. Önce elementi seç ondan sonra bir işlem yap.
Örn:
$(selector).action()
Burada $ aslında bunun bir jQuery kodu olduğunu belirtmekte dilersek değiştirebiliriz buna ileride bakarız.
(selector) bu kısım hangi element için diye belirttiğimiz yer. Sonuçta biz bir olay yapacağız ve bu olayı hangi element için yapacağız diye belirttiğimiz yer.
action() bu kısımda element için hangi işlemi yapacağız diye belirttiğimiz yer.
|
1 |
$("div").hide() |
Bu kod çalıştığı anda div tagli elementleri gizleyecek.
Teknik olarak bakarsak yapı bundan ibaret. Elementini belirle ekşınını yap.
şimdi kodumuzu yazalım.
|
1 2 3 4 5 6 7 8 9 |
<script> $(document).ready(function ( ) Â { $("div").hide() )}; </script> |
yukarıdaki kodumuzu incelediğinizde fazladan bir satır daha olduğunu göreceksiniz. Bu satır kodlarımız tüm dom elementleri yüklendikten sonra kodlarımız çalışabilir hale gelsin demektir.
jQuery ilk dersimizin sonuna geldik.
Bu derste öğrenilmesi beklenen ;
- jQuery nedir ?
- Hangi elementlerin arasında kodlanır.
- Genel kodlama yapısı hakkında kısa bilgi.
Bir sonraki dersimizde görüşmek üzere.
İyi Günler Dilerim,
Cevapla
Want to join the discussion?Feel free to contribute!