Herkese zor gözüken bir JQuery...

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!

Öncelikle JQuery'in çalışması için head taglarının arasına :
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Yüklemesi bu kadar.. (İsterseniz sitesinden dosyayı indirip de yükleyebilirsiniz.)

Ş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(){


});
Bu kodu bildikten sonrası kolaydır. Bu kodun içerisindekinin her zaman hazır olduğunu ifade eder.

İ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();
    });
});
Biraz karışık gibi gözüksede kolaydır. Anlatayım.
İ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
    });
});
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_slow Girin ve test edin anlıyacaksınız..
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");
    });
});
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_slide_toggle
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'
        });
    });
});
Bu kod sizde ne olabilir ? button a bastığınızda div i 250px sola opaklığını düşürüp yüksekliğini ve genişliğini 150px arttırıcaktır. Haydi test edelim ve görelim..
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:

Üst