jQuery ve Yazım Kuralları

Serdar Yılmaz

4 sene önce

jQuery, 2006 yılında John Resig tarafından geliştirilmiş açık kaynak kodlu bir JavaScript kütüphanesidir. Web geliştiricilerinin sıkça başvurduğu JavaScript komutlarını ve fonksiyonlarını hazır bir şekilde sunmaktadır.

jQuery Kütüphanesinin Sayfaya Eklenmesi

jQuery kütüphanesindeki komutları ve fonksiyonları kullanabilmek için kütüphaneyi sayfaya eklememiz gerekmektedir. Kütüphaneyi sayfaya eklemek için konumunu <head> </head> etiketi arasında bildiriyoruz.

<!DOCTYPE html>
<html>
<head>
	<title>jQuery</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	<h1>jQuery Dersleri - Srdrylmz.com</h1>
</body>
</html>

Yukarıdaki örnekte jQuery kütüphanesini Google’un CDN sunucularından çekerek sayfamıza ekledik. Dilersek jQuery kütüphanesini “jquery.com” adresinden bilgisayarımıza indirip, dosya konumunu “src” özelliğinde belirterek de kullanabiliriz.

<script src="script/jquery.min.js"></script>

jQuery Yazım Kuralları

JavaScript dilinin bütün yazım kuralları jQuery kütüphanesi içinde geçerlidir.

Ek olarak; yukarıdaki örnekte de görüldüğü gibi jQuery kodlarımız temel olarak “$” işareti, seçici, kullanılacak metod ve metoda gönderilecek parametre bilgisinden oluşmaktadır. Parantezler içerisindeki tırnaklar tek(‘) veya çift(“) tırnak olabilir. Temiz bir kodlama için kod satırları “;” ile bitirilmelidir. Ayrıca aşağıdaki örnekte olduğu gibi jQuery’de metotlar art arda yazılabilir.

$('div').html('<b>Serdar YILMAZ</b>').height(30).width(100);

jQuery kodlarının, DOM yüklendikten sonra çalışması için kodlarımızı aşağıdaki kod blogunun arasına yazmaktayız. Böylece olası bir çok hatayı önlemiş olacağız.

$(document).ready(function(){
    // jQuery Kodları
});

Fonksiyonların Yazım Şekli ve Kullanımı

Aşağıdaki örnekte 3 farklı şekilde fonksiyon tanımlandık.

<!DOCTYPE html>
<html>
<head>
	<title>jQuery</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

	<script>
		$(document).ready(function(){
			// Yazım Şekli 1
			function topla(sayi1,sayi2){				
				alert(sayi1+sayi2);
			};	

			// Yazım Şekli 2
			$.carp = function(sayi1,sayi2){
				alert(sayi1*sayi2);
			};
			
			// Yazım Şekli 3
			$.islem = {
				cikar: function(sayi1,sayi2){
					alert(sayi1-sayi2);
				},
					
				karesi: function(sayi1){
					alert(sayi1*sayi1);
				}
			};
		});		
	</script>
</head>
<body>
	<!-- HTML SAYFAMIZIN GÖVDESİ-->
</body>
</html>

Tanımlamış olduğumuz fonksiyonların çağrımı aşağıdaki gibidir.

topla(4,5);
$.carp(3,8);
$.islem.cikar(9,5);
$.islem.karesi(8);

Serdar YILMAZ