pillinetwork hesabınızla giriş yapın.

Sıfırdan JQuery Öğrenmek İsteyenlere

Nedir bu JQuery?

Javascript’le sayfalarca kod yazmaktan çok mu yoruldunuz.Hatta birnesneyi belirtirken bile çok mu uğraşıyonuz.Bu kadar uğraşmak istemiyorsanız JQuery tam da sizin için.

Yani kısacası Javascript’le yazılacak sayfalarca kod yerine 10 satırlık kod yazabilirsiniz.

Nasıl Çalışır?

JQuery’yi çalıştırmanız için gereken tek şey JQuery’nin son versiyonuna ait dosyayı indirmek.

Buradan indirebilirsiniz.

Başlangıç

JQuery’yi indirdik.Şimdi iş zamanı:

1
2
3
4
5
6
7
 
<script type=”text/javascript” src=”jquery.js”></script>



<script type=”text/javascript”>



//Kodlar buraya



</script>

Evet yukarıda gördüğünüz gibi.İlk önce JQuery’yi içerdik ,daha sonra kodları yazmak üzere yeni bir javascript aralığı açtık.

1
2
3
4
5
6
7
8
9
10
11
 
<script type=”text/javascript” src=”jquery.js”></script>



<script type=”text/javascript”>



$(document).ready(function(){



//JQuery kod aralığı



})



</script>

Yukarıda bir ready fonksiyonu yazdık yani sayfa yüklendiğinde fonksiyonu.Bu fonksiyonu her zaman yazmanızı öneririm. Çünkü JQuery’nin dörtte üçünü kullanabilmek için bu fonksiyon kullanılmalıdır.

Seçiciler(Selectors)

Javascript’te nasıl yapıyorduk bu işi;

1
 
document.getElementById(”asd”);

ohoo daha çok yazılır böyle.Ama JQuery sağolsun şu şekilde yapabilirsiniz:

1
 
$(”#asd”)

bu kadar mı?Evet arkadaşlar asd id’sine sahip nesnemizi böyle çağırıyoruz.Ayrıca:

1
 
$(”.herhangi_bir_class”)

bu da “herhangi_bir_class” class’ına sahip nesnemizin tanımı.

JQuery’de CSS

Arkadaşlar JQuery CSS alanında bize o kar büyük bir kolaylık sağlıyor ki.Yine Javascript le karşılaştırma yapalım.

Javascript kodu:

1
2
3
 
document.getElementById(”asd”).style.width = “25px”;



document.getElementById(”asd”).style.height = “30px”;

JQuery kodu:
1
2
3
4
5
6
7
 
$(”#asd”).css({



“width” : “25px”,



“height” : “30px”



})

Gördüğünüz gibi yine çok kısa.Ayrıca virgül koyarak istediğiniz kadar css özelliği verebilirsiniz
Not:Son özellikten sonra virgül koymayınız.

Eğer ben tek özellik belirleyeceğim diyorsanız:

1
 
$(”#asd”).css(”width”,”25px”);

gibi kısa bir kullanımı da mevcut.

JQuery’de Başlatıcılar

Bir aralar HTML taglarına onmouseover , onclick , onfocus gibi başlatıcılar yazardık.Bunlarda fonksiyon belirtip olaya göre fonksiyonu başlatırdık.Bana göre bu hem kod sayfamızın düzenini bozar hem de sayfamızın js kodlarında hangi fonksiyonların ne iş yaptığını anlamak için html taglarına bakmamız gerekir.Bunun yerine js sayfamızda yazsak çok daha güzel olur.

İşte ready fonksiyonunu burda kullanmamız gerekecek.

1
2
3
4
5
6
7
8
9
10
11
 
<script type=“text/javascript” src=“jquery.js“></script>



<script type=“text/javascript”>



$(document).ready(function(){

$(“#asd”).mouseover(function(){

$(this).css(“margin-left”,“170px”);

})

})



</script>

gördüğünüz gibi ready fonksiyonunu yazdım ki sayfa yüklendiğinde “bunun üzerine gelindiğinde şunu yap” diyebilelim.

Kodun açıklaması şu: “asd” id li nesnenin üzerine gelindiğinde bu nesnenin “margin-left” ini 170px yap.

Yukarıda $(this) ibaresini görüyorsunuz.Bu belirteç fonksiyon nesnesini temsil eder.Burda “asd” id’li nesneyi temsil ediyor.

Mouseover gibi birçok başlatıcı da mevcut.Bunlar:

click

mouseover

mouseout

focus

load (body tag’ı için geçerli)

dblclick

blur

yani anlayacağınız html taglarında yazdıklarınızdan “on” u çıkarın ve yazın.

Not : submit javascript’te formu gönder komutu olduğu için başlatıcı olarak kullanılamaz.

JQuery'de Özel Efektler

Show ve Hide özel efekti

Evet.Şimdi javascript'in kısaltılmışı diyoruz.Bunun yanında hazır kalıplarıyla da meşurdur JQuery.Bunlara örnek olarak özel efektler verilebilir.

1
2
3
4
5
6
7
8
9
10
11
 
<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#asd").click(function(){

$(this).show("normal");

})

$("#asdasd").click(function(){

$(this).hide(1000);

})

})

</script>

Yukarıdaki kodu açıklayalım."asd" id li nesneye tıkladığımızda normal hızla show efektini gerçekleştirir.
"asdasd" id li nesneye tıkladığımızda 1000 milisaniyede(1 sn) hide özel efektini gerçekleştirir.
Buna benzer toggle vb. gibi özel efektler de mevcut.Daha fazla özel efekt için JQuery sitesine bakabilirsiniz.

JQuery'de animate fonksiyonu

show,hide birer animasyon fonksiyonudur.Fakat bunlarda yapılan hareketlere biz karışmadık.

Fakat animate fonksiyonu ile yapılan hareketleri bunların kaç saniyede yapıldığını biz ayarlayabiliriz.Bunun için css kullanacağız.

İlk önce aşağıdaki kodları inceleyen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<script type="text/javascript" src= "jquery.js"><script>

<script type=text/javascript>



$(document).ready(function(){

$("#asd").click(function(){

$("#asd").animate({

"width" : "200px",

"height" : "300px",

"margin-left" : "500px"

},3000)

})

})



</script>

Evet şimdi bu kodları açıklayalım."asd" id’sine sahip olan nesneyi tıkladığımızda "asd" id’li nesneyi animate fonksiyonu ile 3000 milisaniyede şu durumlara sok:

_Genişliğini 200px
_Yüksekliğini 300px
_Sola uzaklığını 500px olarak ayarla.

Bunu yaparken hepsini orantılı biçimde yap.Yani bu bize nesnenin bir animasyon gibi hareket etmesini sağlar.

3000 milisaniye cinsindendir yani 3sn.Nesne 3sn.de hareketini tamamlar.Bunun yerine "slow" ya da "fast" yazabilirsiniz.

JQuery nin en sevdiğim özelliği de budur zaten.Javascript olsa bir döngü yazacaksın, zamanlayıcı koyacaksın,her bir özelliği ayrı ayrı döngülere sokacaksın...Ohoo daha çok kod yazılır.Ama JQuery 2-3 satır kod.

addClass ve removeClass

JQuery CSS alanında birçok kolaylıklar sunmakta bunlardan biri de nesneye class verme özelliğimizdir.

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<script type="text/javascript" src= "jquery><script>

<script type=text/javascript>



$(document).ready(function(){

$("#asd").mouseover(function(){

$(this).addClass("yeni_bir_class");

})

$("#asd").mouseout(function(){

$(this).removeClass("yeni_bir_class")

})

})



</script>

Evet şimdi açıklayalım."asd" id li nesnemizin üzerine fare ile geldiğimizde nesnenin class’ı "yeni_bir_class" olacak üzerinden gittiğimizde ise bu class silinip nesne eski halini alacaktır.

Evet JQuery nin en önemli fonksiyonlarını öğrenmiş olduk.Gördüğünüz hazır JQuery script'leri bunların dışında hiçbir fonksiyon kullanmıyor.

Sorusu olan arkadaşlar yorumda sorabilir.

/* Etiketler:  */
/* sundowatch yazdı. 28 Temmuz 2009 02:48. 28 yorum var */

Yorumlar

javascript bu kütüphaneler sayesinde flash'a bir adım daha yaklaştı. yakında canvas özelliği de yaygınlaşırsa çok büyük fark kalmayacak flash ile arasında. sadece flash ile sistem kaynaklarına belirli izinlerle erişilebilirken javascript ile bunu yapamıyor olacağız. ama belli mi olur, belki bir gün browserlar bu desteği de emektar javascripte sunarlar..

/* if life="" then call BatsinBuDunya() */
/* lazaronnie | 28 Temmuz 2009 17:48 */

Chrome'un yeni projesiyle artık bu da mümkün olacak. Chrome tarayıcısına Native Client adında bir özellik ekliyor ve oyunlar vs. yi bilgisayar işlemcisi üzerinde çalıştırabiliyor :)

/* / oguzozcan.com / */
/* centrual | 28 Temmuz 2009 18:02 */

ama aynı şey değil. ben yılların emektarı javascriptten bahsediyorum. sizin verdiğiniz örnekte c, c++ gibi derlenebilir diller kullanılıyor. javascript derlenmez yorumlanır ve yorumlanan bir dilin sistem kaynaklarına erişmesinden bahsediyorum. tıpkı şuan bunu yapabilen action script betik dili gibi...

/* if life="" then call BatsinBuDunya() */
/* lazaronnie | 28 Temmuz 2009 22:33 */

Javascript içinde olabilecek diye hatırlıyorum. Tekrardan bakarım.
Sevgiler...

/* / oguzozcan.com / */
/* centrual | 28 Temmuz 2009 22:43 */

javascript'e böyle bir özelliklik sunulacağını sanmıyorum.Olsa bile javascript tabanlı olmaz veya olamaz.Yeni bir dil.Tarayıcılara yeni özellik.Bu mümkün olunca web sektöründe çok büyük bir patlama yaşanacaktır.

/* http://protestit.org/ */
/* sundowatch | 29 Temmuz 2009 00:51 */

güzel makale arkadaşım teşekkürler..

/* erhanaslan | 29 Temmuz 2009 00:51 */

Birşey değil.Faydalanmış olmana sevindim.

/* http://protestit.org/ */
/* sundowatch | 29 Temmuz 2009 01:02 */

Ya hani oluyor ya sol oka tıklayınca sola, sağa oka tıklayınca sağa kayıyor.

Şurdaki sol ve sağ oklar gibi...

jQuery ile mi yoksa ajax ile yapılıyor, nasıl yapılıyor :)

/* blog | twitter | dART */
/* Qmer | 29 Temmuz 2009 12:31 */

Ajaxı da işin içine katabilirsin jqueryide. Ajax bir browser metodudur. Sayfayı yenilemeden başka yerden veri çekmeni sağlar. Bunda yapılması gereken şey :
iconların göründüğü alanı cssten overflow:hidden; yap. Alanın clientWidth'inin yarısını al ve sağa ise sağa sola ise sola alanın yarısı kadar kaydır.

/* / oguzozcan.com / */
/* centrual | 29 Temmuz 2009 12:51 */

@Qomer istediğini şu jquery plugini ile kolayca yapabilirsin.

edit: demolarıda ekledim.

demo #1 #2 #3

/* OCEANGRAY.net */
/* oceangray | 29 Temmuz 2009 14:31 */

Teşekkürler oceangray.

/* blog | twitter | dART */
/* Qmer | 29 Temmuz 2009 15:21 */

rica ederim...

/* OCEANGRAY.net */
/* oceangray | 29 Temmuz 2009 16:30 */

Canvas derken, bir kaç tane canvasımsı çizim kütüphanesi çıkmıştı. İnanılmaz şeyler yapmışlardı javascript ile. Bildiğiniz fizik motoru. Topu yuvarlıyorsunuz ve kutuları deviriyor hepsi o çarpmanın etkisi ile bir yana dağalıyor falan. Hatırlayamadım ama şimdi ne yazık ki adresi :(

Ömer bu arada ne hoş bi tasarım o, tüm siteyi nasıl merak ettim bilemezsin :)

/* ekaynak | 05 Ağustos 2009 08:56 */

Bu tür fizik motorlarını nasıl yapıyor olabilirler?

/* http://protestit.org/ */
/* sundowatch | 06 Ağustos 2009 00:55 */

Çok güzel bir ders olmuş sundowatch, bana çok yardımcı oldu. Teşekkürler.

/* nskmr | 21 Ağustos 2009 11:05 */

Birşey değil.

/* http://protestit.org/ */
/* sundowatch | 01 Eylül 2009 12:58 */

document.getElementById(”asd”); tam karşılığı $("#asd") değil $("#asd")[0]'dir ;)

/* Seregwethrin | 13 Eylül 2009 12:25 */

$("asd").get(0) ;)

/* / oguzozcan.com / */
/* centrual | 13 Eylül 2009 13:06 */

$(#"asd")[0] ile aynı şey o da, sadece biraz daha uzun ;)

/* Seregwethrin | 13 Eylül 2009 14:10 */

id'sini benim dediğim gibi seçebiliyor musun?Seçebiliyorsun. Sorun ne?

/* http://protestit.org/ */
/* sundowatch | 17 Eylül 2009 12:43 */

Seçemezsin. Bir object arrayi elde edersin öyle, ve istediğin elemana ulaşmak için kaçıncı eleman olduğunu belirtmen lazım. ID aslında unique olduğundan da [0] diye ilk eleman olduğunu belirtmelisin. Kısaca iş sadece jquery'nin id'yi unique görmemesinden kaynaklanıyor.

/* Seregwethrin | 17 Eylül 2009 13:00 */

jquery'nin selectorleri diğer frameworklerden oldukça hızlı o yüzden document.getelementbyid yapmak yerine $("#id"); yapmanız her zaman sizin için daha iyi olacaktır.

unutmayın microsoft jquery'yi seçti.

/* ben.ferit.im */
/* Frosten | 17 Eylül 2009 13:51 */

getelementbyid'den daha hızlı olabileceğini hiç mi hiç sanmıyorum. aksine çok daha yavaş olduğunu düşünüyorum. diğer js fw'lerinden hızlı olabilir tabi ama getelementbyid native js fonksiyonu.

edit: ayrıca getelementbyid bir id'yi bulduğunda 2. idyi aramazken jquery 2. 3. 4. gibi diğer elemenları da arıyor. En azından array object return etmesinden bunu düşünüyorum.

/* Seregwethrin | 17 Eylül 2009 14:05 */

Eğer sadece bir tanesini seçeceksen dediğin doğru ama tamamını seçeceksen benim dediğim doğru.

Mesela:

$("#asd").css("opacity",".5");

çalışır ve asd id'sine sahip elementlerine etkir.

Ayrıca getelementbyid ile $("#") yapmak arasında büyük bir fark olacağını sanmıyorum. Saniselerle konuşacaksak hiç class veya kütüphane kullanmayalım.

/* http://protestit.org/ */
/* sundowatch | 17 Eylül 2009 16:45 */

@Frosten "unutmayın microsoft jquery'yi seçti." diyerek jquery için kötü reklam yapıyorsun burada şimdi. :) soğudum sanki bir an..

/* sinanp | 24 Ocak 2010 20:56 */

@sinanp jQuery'i seçen seçmiş zaten microsoft seçse ne yazar seçmese ne yazar.

/* if life="" then call BatsinBuDunya() */
/* lazaronnie | 24 Ocak 2010 22:06 */

Hem sadece microsoft seçmemiş jQuery anasayfasında google,dell,nbc gibi önemli isimlerin kullandığı da yazıyor:)

/* http://protestit.org/ */
/* sundowatch | 30 Ocak 2010 11:55 */

Ayrıca jQuery 1.4 versiyonunun yeni özelliklerini öğrenmek için "Yepyeni özellikleriyle jQuery 1.4" adlı makalemi okuyabilirsiniz.

/* http://protestit.org/ */
/* sundowatch | 06 Şubat 2010 13:59 */

üye olunpillinetwork sitelerine yorum ekleyebilmek ve daha fazlası için, üye olun ya da giriş yapın.

Bu yazıyı rapor et. Kural dışı içeriğe rastladığınızda editörlerimize rapor ederek müdahale edilmesini sağlayabilirsiniz. (Hangi durumlarda rapor edebilirim?)

Bu site

Nokta ve pilli ortak yapımı olan kodaman.org hep birlikte içerik üretip gelirini yazarları ile paylaştığımız kolektif bir kod yazarları blogudur. Siz de katılabilirsiniz.

pilliilan

Bu siteye ilan vermek 7ytl/gün'den başlayan fiyatlarla

son yorumlar

devamı »

arama

pillinetwork