Webmasterlar için, web dersleri, dreamweaver, photoshop, fotomontaj, hazır kod

Jquery jquery dedikleri nedir ki ?

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.

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();