JQuery nedir

0
35
Daha az kodla, daha fazlasını yap

jQuery popüler bir  JavaScript kütüphanesidir. 2006 yılında John Resig tarafından geliştiricilerin web sitelerinde JavaScript kullanmasını kolaylaştırmak amacıyla oluşturuldu. Ayrı bir programlama dili değildir ve JavaScript ile birlikte çalışır. JQuery ile, çok daha fazlasını çok daha az kod ile yapacaksınız. Bunlardan bazıları; HTML belge geçişi, olay işleme, animasyon ve Ajax etkileşimleridir.

Kod yazmak özellikle de çok sayıda dize olduğunda yorucu olabilir. jQuery, birden fazla kod satırını tek bir işleve sıkıştırır, böylece tek bir görevi gerçekleştirmek için tüm kod bloklarını yeniden yazmanıza gerek yoktur.

jQuery Örnekleri

Örnek 1: Yazılara tıklayınca yazıların ortadan kaybolması

<!DOCTYPE html>
<html>
<head>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 <script  src="https://code.jquery.com/jquery-3.2.1.js"  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>


<script>
$(document).ready(function(){
    $("p").click(function(){
        $(this).hide();
    });
});
</script>
</head>
<body>

<p>Eğer bana tıklarsan ortadan kaybolacağım.</p>
<p>İstersen tıkla!</p>
<p>İnanamdın mı ? Tekrardan tıklayabilirsin!</p>

</body>
</html>
Yazılara Tıklandığında Yazıların Kaybolması
Örnek 1 – Kod çıktısı. Yazılara Tıklandığında kaybolacaktır.

Örnek 2: Panele tıklayınca ek panel çıkması

<!DOCTYPE html>
<html>
<head>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 <script  src="https://code.jquery.com/jquery-3.2.1.js"  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>


<script> 
$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideDown("slow");
    });
});
</script>
 <style> 
#panel, #flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}

#panel {
    padding: 50px;
    display: none;
}
</style>
</head>
<body>
<div id="flip">Paneli kaydırmak için tıklayın.</div>
<div id="panel">Merhabalar.. Modern Öğretmen Site Sakinleri</div>


</body>
</html>
Tıklandığında Açılan Panel
Örnek 2 – Tıklandığında Açılan Panel

Örnek 3: Butona tıklayınca renkli kutunun hareket edip yazı boyutunun büyümesi

<!DOCTYPE html>
<html>
<head>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 <script  src="https://code.jquery.com/jquery-3.2.1.js"  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>


<script> 
$(document).ready(function(){
    $("button").click(function(){
        var div = $("div");  
        div.animate({left: '150px'}, "slow");  // Left animasyonun hangi yöne doğru gideceği 150px ise kaç piksel gideceğidir.
        div.animate({fontSize: '48px'}, "slow"); //FontSize yazı boyutudur.
    });
});
</script> 
</head>
<body>

<button>Animasyonu Başlat</button>

<p>Varsayılan olarak, tüm HTML öğelerinin statik konumu vardır ve taşınamazlar. Konumu değiştirmek jquery kodlarını kullandık.!</p>

<div style="background:yellow ;height:80px;width:200px;position:absolute;">Merhaba</div>

</body>
</html>
Kutu ve içerisindeki yazıya animasyon yapma
Örnek 3 – Kutu ve içerisindeki yazıya animasyon yapma

Önemli jQuery Özellikleri

JQuery’nin neden bu kadar başarılı ve popüler hale gelmesinin bir özelliği muhtemelen platformlar arası yeteneklerdir. Hataları otomatik olarak düzeltir ve Chrome, Firefox, Safari, MS Edge, IE, Android ve iOS gibi en sık kullanılan tarayıcılarda aynı şekilde çalışır.

jQuery ayrıca Ajax’ı çok daha kolay hale getirir. Ajax, kodun geri kalanından eşzamansız olarak çalışır. Bunun anlamı, Ajax ile yazılan kodun sunucuyla iletişim kurabilmesi ve sayfayı yeniden yüklemeye gerek kalmadan içeriğini güncelleyebilmesidir.

Animasyon oluşturmak jQuery ile de basitleştirilmiştir. Animasyonla ilgili yukarıdaki kod snippet’inde olduğu gibi, hepsi birkaç kod satırı ile kaplıdır, tek yapmanız gereken değişkenleri eklemektir.

jQuery ile HTML belge geçişi, efektler ve olay işlemlerini oluşturmak gayet basittir.

jQuery Avantajları

JQuery kullanmanın faydaları büyüktür. “Daha az kodla, daha fazlasını yap” sloganı jQuery’ye mükemmel şekilde uyar. Bir kez jQuery’yi kullanmayı öğrendiğinizde (ki bu oldukça kolaydır), her türlü karmaşık eylemi kolaylıkla yapabilirsiniz.

Mevcut en popüler JavaScript kitaplığından biri olduğundan, jQuery’yi nasıl öğreneceğiniz konusunda çevrimiçi olarak tonlarca kaynak var . Temel bir JavaScript anlayışına sahip olmakla birlikte, HTML ve CSS gerekli olabilir.

Sonuçta, JavaScript kullanıyorsanız, jQuery neredeyse zorunludur, çünkü birçok olumlu yanı vardırr ancak tek dezavantajı nasıl kullanılacağını öğrenmektir.

Çevrimiçi Kurslar

  1. https://www.w3bai.com/tr/jquery/jquery_examples.html

W3ii popüler bir öğretici web sitesidir. İnsanların programlamayı daha kolay öğrenebilmesi yaklaşık 2000 çeşit öğretici dersler vardır. Sitede öncelikle programlama dili ile ilgili genel bilgiler ardından her kod ile ilgili örnekler bulunuyor. En son olarak da sitedeki testleri çözerek konu hakkında öz değerlendirme yapabilirsiniz.

2. https://www.tutorialspoint.com/jquery/jquery-multiscroll.htm

Bu sitede jquery hakkında detaylı bilgilere ulaşabilirsiniz. https://www.w3bai.com ‘dan farkı örneklerin daha detaylı oluşudur. Benim tavsiyem biraz altyapı oluşturduktan sonra bu sitedeki örnekleri incelemeniz.

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz