Jquery javascript ile kod yazanlar için gerçekten çok faydali ve isleri kolaylastiran bir kütüphanedir. Çogu programcilar salt js ile kod yazmaktansa javascript frameworklerini kullanmaktadirlar. Frameworkler hem isleri kolaylastirmakta hemde salt-js ile çok ugrastiran islemleri tek satir kod ile yapabilmemize olanak saglamaktadir. Ve bu frameworklerden de en fazla kullanilani ve kanimca -bence- en iyisi Jquery'dir
We love jquery... Jquery'de ilk ögrenecegimiz sey Seçiciler yani "Selector"lerdir.
Jquery'i sayfamizda dahil edelim.
Jquery.com sitesinden jquerynin son sürümünü indirip dahil edebildigimiz gibi google üzerine host edilen jquery dosyasini da sayfamiza dahil edebiliriz. Ben genelde asagidaki gibi yani google'in hostunu kullaniyorum.
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABCDEFG"></script>
bu kodu sayfamizin head kismina yazabiliriz.
Seçiciler (Selectors)
Seçiciler sayfada elementleri seçime alip onlarla islem yapmamizi saglar. javascript te bu islemi getElementById, getElementsByTagName, getElementsByTags gibi fonksiyonlarla yapmaktaydik.
Ancak bu yöntem çok ugrastirici ve pratik degildir. Örnegin tek bir element seçeceksek document.getElementById ile yakalayip istedigimiz islemi yapabiliyoruz ama birden fazla element seçmek için diger fonksiyonlarla döngü v.b. kurmamiz gerekir. Iste bu yüzden Jquery'nin seçicileri çok iyidir. Tekbir komutla ister bir ister birden fazla elementi seçip istediginiz gibi islem yaptirabilirsiniz. Jquery'deki seçiciler css'teki seçicilerin aynisidir.
1. Id (Kimlige) göre element seçimi
<div id="alan" style="background:yellow; display:none">
Lorem ipsum dolor sit amet ...
</div>
seklinde görünmez bir divimiz olsun. Bu divi jquery ile yakalayip bir güzel isleyelim
<a href="#" onclick="$('#alan').toggle(); return false;">tik tik<a>
Bu sekilde alan Id'li divi seçip islem yapabilmekteyiz. toggle fonksiyonu bir gizleyip gösterme efektidir. Bunun gibi efektleri ilerleyen derslerde görecegiz...
Jquery'de Id ile elementleri seçmek için basina # isareti koyariz.
2. Class (Sinif) yöntemi ile selement seçimi
Class'lar yani siniflar css'ten de bildigimiz gibi istedigimiz elementleri belirli özelliklerine göre siniflandirmamiza yani gruplandirmamiza yaramaktadir. Simdi bizde elementlerimize birer sinif atayarak onlarla toplu sekilde islemler yapacagiz.
<div id="alan" style="background:yellow; display:none" class="sinifadi">
Lorem ipsum dolor sit amet ...
</div>
<div id="alan2" style="background:yellow; display:none" class="sinifadi">
Lorem ipsum dolor sit amet ...
</div>
Simdi bu elementleri jquery ile seçip efektimizi verelim...
<a href="#" onclick="$('.sinifadi').toggle(); return false;">tik tik<a>
Id ile seçimden farkli olarak basina # yerine . (nokta) koymaktayiz...
Seçiciler temel olarak bu kadardir. Ancak çesitli çesitli matraxiyonlari vardir bu seçicilerin
Örnek verecek olursak.
Seçicilerde virgül kullanarak birden fazla seçim yapabiliriz.
$(".divadi,#divid").show();
Bir elementin altindaki elementleri seçebiliriz.
$("#container > div").show();
Belirli bir parametreye sahip olanlari seçebiliriz.
$("a[@rel='arkadas']").show();
Makaleyi kendi blogumda yazdım. Sizde faydalanın diye yayınlıyorum. link
