Üye Kayıt Üye Giriş

jQuery Yazım Kuralları ve Seçiciler


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.

 

jQueryi sayfaya çağırmak oldukça basittir. İster jQuery dosyasını indirip sayfaya dahil edebilirsiniz. İsterseniz de direk link vererek çağırabilirsiniz.

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.
Bilgisayar Dershanesi Ders Sahibi;
Bilgisayar Dershanesi

Yorumlar

Yorum Yapabilmek İçin Üye Girişi Yapmanız Gerekmektedir.

ETİKETLER