jQuery Nedir? jQuery Ne İşe Yarar? jQuery Kullanımı

Bu yazımda jQuery nedir? jQuery ne işe yarar? jQuery nasıl kullanılır? Neden jQuery öğrenmeliyim? jQuery kodlarını hangi editörde yazmalıyım? sorularına cevap verdikten sonra en temel seviyeden başlayıp ileri seviyeye kadar tüm jQuery konularını anlatmaya başlayacağım.

jQuery ile ilgili genel bilgileri verdikten sonra, detaylı bir şekilde tüm jQuery konularını da göreceğiz. Diğer tüm jQuery dersleri için A’DAN Z’YE JQUERY DERSLERİ yazımı inceleyebilirsiniz.

Konuyu daha fazla uzatmadan jQuery Nedir? Ne İşe Yarar? ile başlayalım.

jQuery Nedir? Ne İşe Yarar?

jQuery hızlı, küçük boyutlu ve zengin içeriğe sahip bir JavaScript kütüphanesidir.

⇒ jQuery bir framework değildir.

Yani JavaScript ile yapılan işleri jQuery kullanarak daha hızlı ve daha az kod ile yapabiliriz. Zaten sloganları write less, do more yani az kodla çok iş. Gerçekten çok hızlı bir şekilde öğrenip uygulamaya başlayabilirsiniz.

Daha anlaşılır olması için bir Html öğesine önce JavaScript kodları yazarak daha sonra ise jQuery kodları yazarak Css özellikleri verelim.

JavaScript Kodları ile

<script>
document.getElementById("paragraf").style.color = "blue";
document.getElementById("paragraf").style.fontFamily = "Arial";
document.getElementById("paragraf").style.fontSize = "24px";
</script>

document.getElementById("paragraf").style.color = "blue";

document.getElementById("paragraf").style.fontFamily = "Arial";

document.getElementById("paragraf").style.fontSize = "24px";

</script>

jQuery Kodları ile

<script>
$("#paragraf").css("color":"blue","font-family":"Arial","font-  size":"24");
</script>

$("#paragraf").css("color":"blue","font-family":"Arial","font- size":"24");

</script>

Gördüğünüz gibi JavaScript ile üç satırda yazdığımız kodları jQuery kullanarak tek satırda ve daha kısa bir şekilde yazabiliyoruz.

Peki JavaScript bilmeden jQuery öğrenebilir miyiz?

Evet öğrenebilir ve kullanabiliriz. Fakat JavaScript bilen biri jQuery kullanırken bize sağlamış olduğu kolaylıkları çok daha iyi anlayacaktır ve jQuery’i daha efektif bir şekilde kullanacaktır.

Neden jQuery Öğrenmeliyim?

Eğer bir web geliştiricisi olmak istiyorsanız öğrenmeniz gereken olmazsa olmaz 3 dil vardır.

1 – Html : Web sayfalarını oluştururken ilk olarak Html kodları yazarak sayfanın temel içeriğini ortaya çıkarırız.

Örneğin bir buton oluşturmak istersek;

Html Kodları

<button>Sepete Ekle</button>

<button>Sepete Ekle</button>

Tarayıcıdaki Görünümü

Html konularında eksikleriniz olduğunu düşünüyorsanız A’DAN Z’YE HTML DERSLERİ yazımdan tüm Html konularına bakabilirsiniz.

2 – Css : Yazmış olduğumuz Html kodlarına stil verebilmek ve aynı zamanda web sayfalarının yerleşimini belirlemek için Css öğrenmemiz gerekiyor.

Örneğin yukarıda Html ile yazdığımız butona Css özellikleri uygulayalım.

Html ve Css Kodları

<style>
button{
border: none;
background-color: lawngreen;
color: darkgreen;
border-radius: 6px;
padding: 12px;
}
</style>
<button>Sepete Ekle</button>

<style>

button{

border: none;

background-color: lawngreen;

color: darkgreen;

border-radius: 6px;

padding: 12px;

}

</style>

<button>Sepete Ekle</button>

Tarayıcıdaki Görünümü

Css konularında eksikleriniz olduğunu düşünüyorsanız A’DAN Z’YE CSS DERSLERİ yazımdan tüm Css konularına bakabilirsiniz.

3 – JavaScript, JavaScript Kütüphaneleri veya Framework’leri (jQuery, Angular, React, Vue vb.) : Yazmış olduğumuz web sayfalarına etkileşim kazandırmak için JavaScript’i, JavaScript Kütüphanelerini veya JavaScript framework’lerini öğrenmemiz gerekiyor.

Örneğin biraz önce Html ve Css kullanarak yapmış olduğumuz butona jQuery kodları yazarak etkileşim kazandıralım. Butona tıklandığında alert metodu ile “Butona Tıkladınız!!!” mesajı verdirelim.

Html, Css ve jQuery Kodları

<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Nedir? jQuery Ne İşe Yarar?</title>
<style>
body {
background-color: bisque;
}
button{ 
border: none; 
background-color: lawngreen; 
color: darkgreen; 
border-radius: 6px; 
padding: 12px; 
} 
</style>
</head>
<body>
<button onclick="myFunction()">Sepete Ekle</button>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script>
function myFunction() {
alert('Ürün Sepete Eklendi!');
}  
</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>jQuery Nedir? jQuery Ne İşe Yarar?</title>

<style>

body {

background-color: bisque;

}

button{

border: none;

background-color: lawngreen;

color: darkgreen;

border-radius: 6px;

padding: 12px;

}

</style>

</head>

<body>

<button onclick="myFunction()">Sepete Ekle</button>

function myFunction() {

alert('Ürün Sepete Eklendi!');

}

</script>

</body>

</html>

Uygulama Demosu

jQuery ile Neler Yapabilirim?

⇒ Html DOM üzerinde işlemler

⇒ Css değişimleri

⇒ Html olay yönetimleri

⇒ Efektler ve animasyonlar

⇒ AJAX işlemleri vb.

Şimdi yazmış olduğumuz bu teorik bilgileri uygulamalar üzerinde görerek daha iyi anlamaya çalışalım.

jQuery ile kapsamlı projeler de yazabiliriz ama bu kısımda basit birkaç örneği ne kadar kolay bir şekilde yapabildiğimizi göstermek istiyorum.

1 – jQuery ile bir Html öğesinin içeriğini değiştirebiliriz. Örneğin butona tıklandığında id’si test olan Html etiketinin içeriğini “Merhaba jQuery!” ile değiştirelim.

Html ve jQuery Kodları

<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Nedir? jQuery Ne İşe Yarar?</title>
<style>
body{
background-color: bisque;
}
</style>
</head>
<body>
<p id="test">jQuery Derslerine Hoşgeldiniz.</p> 
<button onclick="myFunction()">Tıkla!</button>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script>
function myFunction() {
$("#test").html("Merhaba jQuery!");
}    
</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>jQuery Nedir? jQuery Ne İşe Yarar?</title>

<style>

body{

background-color: bisque;

}

</style>

</head>

<body>

<p id="test">jQuery Derslerine Hoşgeldiniz.</p>

<button onclick="myFunction()">Tıkla!</button>

function myFunction() {

$("#test").html("Merhaba jQuery!");

}

</script>

</body>

</html>

Uygulama Demosu

NOT : jQuery kodları yazarken tek tırnak veya çift tırnak kullanabiliriz.

2 – jQuery ile bir Html öğesinin attribute’larının değerlerini değiştirebiliriz. Örneğin bir link tanımlayalım ve bu linke tıklandığında “https://www.google.com.tr/” adresine bağlantı verelim.

Butona tıklandığında bu linkin href attribute’unun değerini https://yandex.com.tr/ olarak değiştirelim.

Html ve jQuery Kodları

<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Nedir? jQuery Ne İşe Yarar?</title>
<style>
body{
background-color: bisque;
}
</style>
</head>
<body>
<a id="link" href="https://www.google.com.tr/">Google</a>
<button onclick="myFunction()">Tıkla</button>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script>
function myFunction() {
$("#link").attr("href","https://yandex.com.tr/");
}    
</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>jQuery Nedir? jQuery Ne İşe Yarar?</title>

<style>

body{

background-color: bisque;

}

</style>

</head>

<body>

<a id="link" href="https://www.google.com.tr/">Google</a>

<button onclick="myFunction()">Tıkla</button>

function myFunction() {

$("#link").attr("href","https://yandex.com.tr/");

}

</script>

</body>

</html>

Uygulama Demosu

Dikkat ederseniz butona tıkladığımızda a etiketinin href attribute’unun değeri değişiyor.

3 – jQuery ile bir Html öğesine Css değerleri verebilir veya varolan Css değerlerini değiştirebiliriz.

Örneğin bir p etiketi ve bir buton tanımlayalım. Butona tıklandığında p etiketinin font-size özelliğine 40px değeri verelim.

Html ve jQuery Kodları

<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Nedir? jQuery Ne İşe Yarar?</title>
<style>
body{
background-color: bisque;
}
</style>
</head>
<body>
<p id="test">jQuery Derslerine Hoşgeldiniz!</p> 
<button onclick="myFunction()">Tıkla!</button>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script>
function myFunction() {
$("#test").css("font-size","40px");
}    
</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>jQuery Nedir? jQuery Ne İşe Yarar?</title>

<style>

body{

background-color: bisque;

}

</style>

</head>

<body>

<p id="test">jQuery Derslerine Hoşgeldiniz!</p>

<button onclick="myFunction()">Tıkla!</button>

function myFunction() {

$("#test").css("font-size","40px");

}

</script>

</body>

</html>

Uygulama Demosu

4 – jQuery ile Html öğelerine Css uygulama konusunda bir örnek daha vermek istiyorum.

Örneğin bir div etiketi ve iki buton tanımlayalım. Butonlardan Gizle yazılı butona tıkladığımızda div etiketini gizleyelim. Butonlardan Göster yazılı butona tıkladığımızda div etiketini tekrar gösterelim.

Html ve jQuery Kodları

<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Nedir? jQuery Ne İşe Yarar?</title>
<style>
body {
background-color: bisque;
}
div { 
width: 200px; 
height: 200px; 
background-color: red;   
margin-bottom: 15px;      
} 
</style>
</head>
<body>
<div id="box"></div> 
<button onclick="hide()">Gizle</button> 
<button onclick="show()">Göster</button>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script>
function hide() {
$("#box").css("visibility","hidden");
} 
function show() {
$("#box").css("visibility","visible");
}   
</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>jQuery Nedir? jQuery Ne İşe Yarar?</title>

<style>

body {

background-color: bisque;

}

div {

width: 200px;

height: 200px;

background-color: red;

margin-bottom: 15px;

}

</style>

</head>

<body>

<button onclick="hide()">Gizle</button>

<button onclick="show()">Göster</button>

function hide() {

$("#box").css("visibility","hidden");

}

function show() {

$("#box").css("visibility","visible");

}

</script>

</body>

</html>

Uygulama Demosu

jQuery ile neler yapılabilir sorusuna çok basit birkaç örnek ile cevap vermeye çalıştım. Tabi dediğim gibi anlaşılması adına basit örnekler tercih ettim. Bunların dışında jQuery ile sliderlar, açılıp kapanan pencereler, mesaj kutuları vb. yüzlerce örneği yapabiliyoruz.

jQuery Kullanımı

Şimdi jQuery kullanımı ile ilgili detaylara bakalım. Projemize eklerken bunu 2 farklı yöntem ile yapabiliriz.

1 jQuery kütüphanesini, CDN olarak projemize ekleyebiliriz.

Bunun için Html sayfamızın <head></head> etiketleri arasına jQuery kütüphanesini referans olarak eklememiz gerekiyor. CDN olarak ekleme yönteminde 3 farklı firmanın CDN kodlarını kullanabilirsiniz.

jQuery’nin kendi firması
Google
Microsoft

Üçünü de burada paylaşacağım. Dilediğinizi kullanabilirsiniz.

jQuery CDN kullanmak isterseniz

<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
</head>

<head>

</head>

Google CDN kullanmak isterseniz

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

<head>

</head>

Microsoft CDN kullanmak isterseniz

<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
</head>

<head>

</head>

Bu referansı projemize ekledikten sonra artık jQuery’i kullanmaya başlayabiliriz.

Önemli Başka bir yerde de bu referansı verebilirsiniz. Ama burada şuna dikkat etmelisiniz. Bu referansı nereye yazdıysanız, jQuery kodlarınızı bu tanımlamadan sonra yazmalısınız. Yoksa jQuery kodlarınız çalışmayacaktır.

Bazen jQuery kodlarını <head> etiketleri arasına yazıyoruz. Referansı ise <body> etiketini kapatmadan hemen önceki kısma yazıyoruz. Bu şekilde olduğunda jQuery kodlarımız çalışmayacaktır. Bu problemin nereden kaynaklandığını bulmak bazen ciddi zamanımızı alabiliyor.

2 jQuery kütüphanesini bilgisayarımıza indirip dosyalarını projemize ekleyebiliriz.

Öncelikle jQuery kütüphanesini download linkinden indirmemiz gerekiyor.

Gördüğünüz gibi burada 2 seçenek var.

Birincisi sıkıştırılmış, ikincisi sıkıştırılmamış versiyonu. Aralarındaki tek fark boyutunun farklı olması.

⇒ Proje geliştirirken sıkıştırılmamış versiyonu kullanmanızı tavsiye ederim.

Projenin testleri bittikten sonra yayınlama aşamasında .min (sıkıştırılmış) versiyonu kullanmanız size avantaj sağlayacaktır. Çünkü küçük boyutlu olduğundan sitenizin açılış hızını olumlu yönde etkileyecektir.

Dosyaları indirdikten sonra göreceğiniz gibi normal versiyon 284 KB iken sıkıştırılmış versiyon 86 KB boyutunda.

Son olarak indirdiğimiz jquery-3.4.1.js dosyasını projemize ekleyip, jQuery dosyasının yolunu Html sayfamızın <head></head> etiketleri arasına referans vermemiz gerekiyor.

<head>
<script src="kendi-projenizdeki-dosyanın-yolu/jquery-3.4.1.js"></script>
</head>

<head>

</head>

Bu referansı yazdıktan sonra artık projemizde jQuery’i kullanmaya başlayabiliriz.

jQuery Kodlarını Hangi Editörde Yazmalıyım?

jQuery kodlarını istediğiniz herhangi bir editörde de yazabilirsiniz. Örneğin Notepad++, Atom, Sublime Text, Brackets vb. Ben Visual Studio Code editörünü kullanıyorum ve size de Visual Studio Code kullanmanızı tavsiye ederim.

Visual Studio Code kullanmak isteyenler için jQuery kodlarını yazarken işlerimizi kolaylaştıran küçük bir eklentiyi göstermek istiyorum.

Visual Studio Code editörünü indirmek için sitesini ziyaret edebilirsiniz.

İndirip kurulum işlemini tamamladıktan sonra aşağıdaki resimde olduğu gibi soldaki Extensions (Eklentiler) ikonuna tıklıyoruz.

Daha sonra arama kutusuna jQuery Code Snippets yazıp aratıyoruz.

Son olarak jQuery Code Snippets eklentisini Install butonuna tıklayarak yüklüyoruz.

Bu eklenti sayesinde jQuery kodlarını daha hızlı ve kolay bir şekilde yazabiliyoruz.

Artık “jQuery nedir? jQuery Ne işe yarar? jQuery nasıl kullanılır?” öğrendiğimize göre diğer konulara başlayabiliriz.

Umarım sizin için faydalı bir yazı olmuştur.

Şu yazılar da ilginizi çekebilir.

JavaScript Nedir? JavaScript Ne İşe Yarar?

Yeni bir yazımda görüşmek üzere.

2 Yorum

MUHAMMED FURKAN TAN Nisan 14, 2021 Cevapla

JQuery yi indirmek istediğimde bir XCode sayfası çıkıyor -Onu nasıl yapacağım -Yardımcı olabilirseniz çok mutlu olurum -İyi akşamlar

admin Nisan 20, 2021

Bilgisayarınızda jquery-3.6.0.js isimli bir dosya oluşturup o kodları bu dosyaya yapıştırın. Daha sonra bu dosyayı kullanmak istediğiniz sayfaya import edebilirsiniz. İyi çalışmalar.

jQuery Nedir? jQuery Ne İşe Yarar? jQuery Kullanımı

jQuery Nedir? Ne İşe Yarar?

Neden jQuery Öğrenmeliyim?

jQuery ile Neler Yapabilirim?

jQuery Kullanımı

jQuery Kodlarını Hangi Editörde Yazmalıyım?

Yazar Hakkında

2 Yorum

Yorum Yazın

jQuery Nedir? Ne İşe Yarar?

Neden jQuery Öğrenmeliyim?

jQuery ile Neler Yapabilirim?

jQuery Kullanımı

jQuery Kodlarını Hangi Editörde Yazmalıyım?

Benzer Yazılar

Yazar Hakkında

2 Yorum

Yorum Yazın