jQuery Yazım Kuralları ve Seçiciler
Bu derste işleyeceklerimize şöyle bir göz atalım.
- jQuery kütüphanesini sayfaya çağırmak.
- jQuery yazım kuralları.
- jQuery seçicileri.
Geçen dersimizde jQuery nedir ve neden kullanılır üzerinde durmuştuk. Şimdi ise biraz daha işin teknik boyutuna geçiyoruz.
jQuery kütüphanesini sayfaya çağırmak.
Hem jQuery dosyamızı çağırmak için hemde jQuery kod bloklarımızı yazmak için <head> </head> tagları arasını kullanıyoruz.
Şimdi www.jQuery.com adresine giriyoruz ve Download(jQuery) kısmına tıklıyoruz. Açılan sayfada bulunan kodlar size anlamsız gelebilir ama işte tüm jQuery fonksiyonlarımızı çalıştıracak olan dosya budur. Şimdi açılan sayfanın linkini kopyalayalım. (http://code.jQuery.com/jQuery-1.8.2.min.js) ve aşağıda gördümüzü şekilde sayfamıza yerleştirelim.
|
1
2
3
4
5
6
|
<head> <title>waxipro.com - jQuery Dersleri</title> <script type="text/javascript" src="http://code.jQuery.com/jQuery-1.8.2.min.js"> </script> </head> |
Ama biz jQuery dosyamızı google üzerinden almayı tercih ediyoruz. Bunun en önemli avantajı sitenize gelen bir kullanıcı sizin sitenize gelmeden önce başka bir site üzerinden jQuery dosyasını download etmişse sizin sayfanızda tekrar download etmek zorunda kalmaz. Bu da sizin jQuery kodlarınızın daha hızlı çalışmasına sebep olacaktır.
Google üzerinden çağırırken ise sadece linki http://ajax.googleapis.com/ajax/libs/jQuery/1.8.2/jQuery.min.js olarak değiştirmeniz yeterlidir.
jQuery yazım kuralları.
Öncelikle Javascript kodlarının tüm yazım kuralları jQuery için de geçerlidir. Çünkü geçen derste dile getirdiğimiz gibi jQuery bir Javascript kütüphanesidir.
- jQuery komutlarımızın başına jQuery yada $ işareti koymak zorundayız. Genel kullanımı $ işaretidir.
- jQuery kodları <script> </script> tagları içinde kullanılır.
- Her ifadenin sonuna “ ; “ koyulur.
|
1
2
3
4
5
6
7
|
<script> $(document).ready(function(){ // Sayfa hazır olduğunda aşağıdaki kodlar çalışacaktır. $('div').css('background-color','red'); // Buradaki kodları sonraki derslerimizde göstereceğim. )}; </script> |
jQuery seçicileri.
jQuery de seçiciler çok önemli bir konudur. Zaten seçimi doğru yaptıktan sonra geriye sadece doğru methodu uygulamak kalıyor. jQuery’nin en temel konusu seçicilerdir.
Öncelikle şunu bilmeliyiz ki jQuery’nin kendi seçicileri yoktur. Sadece CSS seçicilerini kullanılır. Yani zaten CSS biliyorsanız işiniz çok kolay.
3 farklı seçici vardır.
- Tag Seçiciler.
- Class Seçiciler.
- ID Seçiciler.
Tag Seçiciler
Bir web sayfası Türkçesi etiket olan taglerden oluşur. Bunlar her web sayfasında gördüğünüz <p><a><ul><li><tr><td><span><img><form> vs. dir.
İşte jQueryde bu tagleri şöyle seçiyoruz:
|
1
2
3
|
$('p') // Şuan sayfadaki tüm <p> taglerını seçtik. $('p,a,span') // Şimdide sayfadaki tüm <p> <a> ve <span> taglerini seçtik. |
Class Seçiciler
CSS de tanımladığmız class ları ise seçmek taglerde olduğu gibi oldukça basittir.
|
1
2
3
|
$('.yazi') // Şuan classı yazi olan tüm nesneleri seçtik. $('.yazi, .deneme') // Şimdi de classı yazi veya deneme olan tüm nesneleri seçtik. |
ID Seçiciler
CSS de tanımladığımız IDleri de şu şekilde seçiyoruz;
|
1
|
$('#yazi') // ID si yazi olan tüm nesneleri seçtik. |
Özniteliğe Göre Seçmek
Tüm nesnelerin içerisinde kendilerine özel özellikleri vardır. Bunlara öznitelik denir.
Şöyleki bir <a> taginin href yada name özniteliği vardır. HTML bildiğinizi düşünerek bu öznitelik konusuna girmiyorum.
Şimdi özniteliğe göre seçiciler nasıl kullanılır onu görelim.
|
1
|
$('a[name="link"]') // Şuan <a> tagleri arasından name özniteliği link olanları seçtik. |
Bu şekilde istediğimiz nesneyi özniteliğine göre seçebiliriz.
Ayrıca şunları da bilmemiz gerekiyor.
|
1
2
3
4
5
6
7
|
$('a[href^="www"]') // href i www ile başlayan <a> taglerini seçtik. $('a[href$="com"]') // href i com ile biten <a> taglerini seçtik. $('a[href!="google"]') // href özniteliğinde google kelimesi geçmeyen <a> taglerini seçtik. $('a[href*="waxipro"]') // href özniteliğide waxipro geçen <a> taglerini seçtik. |
