JQuery Seçiciler (Selectors): $(…)

bitlimakina tarafından 27 Mart 2009 | 4 Yorum | JQuery

Yeni bir Jquery yazısı daha yazma zamanı geldi. Bu yazının konusu seçiciler, seçiciler sayesinde her elemana ulaşarak CSS özelliklerinden veri okumaya, yazmaya kadar birçok işlemi gerçekleştirebiliyoruz. Bunun için $(“tag”) ifadesini kullanmak yeterli. $(..) kullanarak herhangi bir HTML,XML,CSS veya Jquery tagını seçmek mümkündür. Tag seçmek için bazı özel durumlar dışında tag “ “ içersinde yazılmalıdır. Ayrıca $(“..“) arasında bir text, html kodu girmek ve bunu başka bir elemana da atamak mümkündür.

Örnekler:

1-Tüm tagları seçmek.

  $(“*”)

2-Tüm paragrafları seçmek.

  $(“p”);

3-Tüm div leri seçmek.

$(“div”);

4-Sınıf Seçiciler

  $(“.kirmizi”);//tüm kırmizi adlı sınıfları seçer.

5-Gelişmiş Seçiciler

  $(“div”,xml.responseXML);
  $(“input:text”, document.forms[0]);
  $(“<div>Hello</div>”).appendTo(“body”);

Satır-1: Ajax kullanarak alınan bir xml belgesindeki tüm div taglarını seçer.

Satır-2: Sayfada kullanılan ilk formun “[0]” tüm textbox larını seçer.

Satır-3: appendTo fonksiyonu seçme tagında verilen HTML kodunu body tagının en altına ekler. Body yerine bir id kullanarak başka bir elemanada ekleme yapabilirsiniz.

6-JQuery kodlarını sayfa yüklendiğinde çalıştırmak.

  $(function(){
    // HTML dosyası yüklendiğinde çalışacak.
  });

Html dosyamız tarayıcıda yüklendiğinde aradaki kod bloğunu çalışacaktır. $(function(){ global bir tanımdır.

7-JQuery kodlarını sayfa yüklendiğinde çalıştırmak.

  $(document).ready(function(){
	// HTML dosyası yüklendiğinde çalışacak.
  });

Html dosyamız tarayıcıda yüklendiğinde aradaki kod bloğunu çalışacaktır. Ayrıca ready kullanarak sayfa yüklendiğinde çalışmasını istediğiniz fonksiyonları belirleye bilirsiniz. Diğerine nazaran daha güvenli bir yapı sağladığı için tercih edilir.

Bir örnek vererek tamamlayalım

Örneğimiz de tüm “a” etiketlerinden class=”bag” özelliğini taşıyanların Css etiketi ile üzerleri çiziliyor.

<script src="js/jquery.js"></script>
.bag {
	font-size:12px;
}
.bag2{
	font-size:20px;
}
<script type="text/javascript"></script>
 
Bu Bir Paragraf
 
	<a class="bag" href="#">Bu bir bağlantı</a>
	<a class="bag2" href="#">Bu bir bağlantı</a>
	<a class="bag2" href="#">Bu bir bağlantı</a>
	<a class="bag" href="#">Bu bir bağlantı</a>
	<a class="bag2" href="#">Bu bir bağlantı</a>
	<a class="bag" href="#">Bu bir bağlantı</a>
<div id="metin">Bu Bir Div</div>

Şimdilik bu kadar, farklı örnekler yaparak kalıcı bir öğrenme sağlayabilirsiniz. Jquery Cheat Sheet bu konuda size çok yardımcı olacak.