OGUZHANPW
Onlar ABC'yi öğrettiler ama DEF'yi biz öğrendik.
- Mesajlar
- 42
- En iyi cevaplar
- 0
- Beğeniler
- 20
- Puanları
- 0
Merhaba arkadaşlar ben Oğuzhan Atalay.
Bu gün herkese zor gözüken fakat aslında çok kolay olan JQuery'i anlatacağım.
Anlatımım basit mod olup daha fazlasını isteyenlere skype üzerinden anlatabilirim.
Skype: oguzhannn4501at
DESTEK: http://www.w3schools.com/jquery/
Unutmayın eğer öğrenmek istiyor iseniz sırasıyla okuyunuz!
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Şimdi bir site.js dosyası oluşturalım ve head taglarının arasına koyalım.
Öğrenmeye başlamadan önce bu kodu iyi bilmelisiniz..
JavaScript:
$(document).ready(function(){
});
İlerleyelim..
Kolay modda bilmeniz gereken bazı küçük kodlar vardır.
JavaScript:
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
İster yazı ister buton farketmez, id="hide" ise <p>cümle</p> içeriğini gizler. Neden gizler ? .hide() gizler .show() gösterir. id="show" olan ise <p>cümle</p> yi gösterir. Çok karışık geldi değil mi ??
Alttaki linke bas ve test et anlıyacaksın!
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show
Anladıysan geçelim...
Test ettiğinde hızlı kapandığını görüceksin bunu yavaşlatmak için .hide(1000) yaparsanız veya .show(1000) yapar iseniz yavaşlayacaktır. Daha gelişmiş bir örnek ile anlatayım..
JavaScript:
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000); // gördüğünüz gibi 1000 yavaşlatıcak
});
});
Hem kapatıp hem açmak için .hide veya .show değilde .toggle yazmanız yeterlidir.
Burdan sonra aklınızda şekillenecektir.
Şimdi ise .slideDown() .slideUp() .slideToggle() Öğrenelim.. Unutmayın parantezin içine ne kadar büyük bir sayı girerseniz o kadar yavaşlar! Veya slow da yazabilirsiniz aşağıdaki örnek gibi..
JavaScript:
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
Denemeniz yeterli olucaktır.
Son aşamada animasyonu da anlar iseniz basit modu tamamen anlamış olucaksınız.
Anlamadığınız bir yerde lütfen sorunuz!!!!
JavaScript:
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
});
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation1_multicss
Size şu an bir upload sitesinde basit yöntemlerle kullandığım bir dosyayı göstermek isterim.
http://oguzhan.pw/yukle/js/oguzhanpw.js
Siteden bakabilirsiniz.
Eğer bu bölümlerin hepsini anladıysanız ve daha fazla şey merak ediyor iseniz skype üzerinden eklemeniz yeterli olucaktır. Eğer bunların hiç birini anlamadıysanız fakat öğrenmek istiyorsanız çekinmeyin gelin skypedan öğretiyim. "Bilgi paylaştıkça çoğalır.."
Skype: oguzhannn4501at
Bazı kişilerin isteği üzerine ben html ve css de bilmiyorum fakat illa ki öğrenmek istiyorum diyenler çıktığı için gene ekliyebilirsiniz..
Şimdiden bu yazıyı okuyanlara teşekkür ederim.
"Bilgi paylaştıkça çoğalır.."
Son düzenleme: