Tolga Çelik

Yazılım Geliştirici & Yazılım Danışmanı

jQuery Serisi – jQuery Kullanımı ve Örnekler

Yazar: · Yayımlanmış · Güncellendi

Merhaba arkadaşlar, Javascript kullanmak istediğimizde yardımımıza koşan “jQuery”kütüphanesinin ne olduğunu, ne işe yaradığını, nasıl kullanacağınızı anlatacağım ve jQuery örneklerini paylaşacağım “jQuery Serisi”ne ikinci yazımız ile devam ediyoruz. Bu yazımda sizlerle jQuery kullanımı ve bazı örnek kodları paylaşacağım.

jquery

 

jQuery Kullanımı

HTML elemanlarımızı ana elementlerine göre ya da kendi verdiğimiz id ve classlara göre seçip üzerinde jQuery ile javascript işlemlerini yapabiliyoruz.

Bunun en basit hali : $(selector).action()  şeklindedir.

Bu kodda gördüğünüz gibi jQueryde tanımlamalarımızı “$” işareti ile yapıyoruz. “selector” yazan bölüme HTML elementlerimizi seçebilmek için id, class veya elementin adını yazıyoruz.
Örn: Sayfamızdaki tüm <p> elementleri üzerinde işlem yapabilmek için $(“p”) yazmamız gerekiyor.

.action() yazan kısma ise seçtiğimiz HTML elementine yapılmasını istediğimiz eylemi yazıyoruz.
Örn: Sayfamızdaki tüm <p> elementlerini gizlemek için $(“p”).hide() yazmamız gerekiyor.

$(document).ready() Olayı Nedir?

Ready fonksiyonu, sayfamızdaki nesneler yüklendikten sonra çalıştıracağımız olayları belirlememizi sağlar.

Web tarayıcıları html belgemizi yukarıdan aşağıya doğru okumaya başladığı için,  üst tarafına yazdığınız JavaScript kodları hemen çalıştırılacaktır. Bu yüzden javascript kodlarımızdan sonra yüklenen elementlerde yaptığımız işlemler gözükmeyecektir. Bu fonksiyon sayesinde JavaScript kodlarımız en üst tarafta olsa bile (ki bu sayfa yüklenmeden js kodlarımızın çalışmasını sağlar) sayfanın alt tarafındaki sonradan yüklenen elementlere yönelik işlem yaptırabiliyoruz. Örneğin;

<html>
<head>
<meta http–equiv=“Content-Type” content=“text/html; charset=utf-8”>
<title>tolgacelik.net jQuery Serisi – jQuery Örnekleri </title>
<script src=“//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script type=“text/javascript”>
$(‘h1’).css(‘color’, ‘blue’);
</script>
</head>
<body>
<h1>Bu elementin renginin mavi olması gerekiyor.</h1>
</body>
</html>

Okunma sırası;

html > head > meta > title > script > script > body > h1 şeklinde olacaktır.
Kalın olarak belirttiğim yerde gördüğünüz gibi scriptimiz önce çalıştırıldığı için <h1> elementimiz mavi renkli olmayacaktır. Görüntülemek için : Demo
Script kodlarımızı alt tarafa alırsak ne olacağını görelim.
<html>
<head>
<meta http–equiv=“Content-Type” content=“text/html; charset=utf-8”>
<title>tolgacelik.net jQuery Serisi – jQuery Örnekleri </title>
<script src=“//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
</head>
<body>
<h1>Bu elementin renginin mavi olması gerekiyor.</h1>
<script type=“text/javascript”>
$(‘h1’).css(‘color’, ‘blue’);
</script>
</body>
</html>

Kodlarımızı bu şekilde derlediğimizde istediğimiz sonucu alabiliyoruz. Görüntülemek için: Demo

Script kodlarımızı sayfanın alt kısmına almak yerine, ready() fonksiyonunu kullanarak bu işlemin gerçekleşmesini sağlayabiliriz.
Normalde :
html > head > meta > title > script > script > body > h1 şeklinde olan sıralamamız,
ready fonksiyonu sayesinde ilk önce elementlere yöneliyor ve sonrasında scriptimizi çalıştırıyor, böylelikle
html > head > meta > title > script(jquery load) > script > body > h1 > script şeklinde gerçekleşiyor.

Şimdi örneğimizi document ready kullanarak yazalım.

<html>
<head>
<meta http–equiv=“Content-Type” content=“text/html; charset=utf-8”>
<title>tolgacelik.net jQuery Serisi – jQuery Örnekleri </title>
<script src=“//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script type=“text/javascript”>
$(document).ready(function(){
$(‘h1’).css(‘color’, ‘blue’);
});
</script>
</head>
<body>
<h1>Bu elementin renginin mavi olması gerekiyor.</h1>
</body>
</html>
Bu sayede script kodumuzu hem üste yazmış olduk hem de yapmak istediğimiz eylemi gerçekleştirmiş olduk.Görüntülemek için : Demo

Ready fonkyisonunun iki adet kullanımı mevcut,
Birincisi uzun olan yöntem:
$(document).ready(function(){
//kodlarımız
});

İkincisi ise kısa olan yöntem:

$(function(){
//kodlarımız
});
Evet arkadaşlar bu yazımda sizlere, jQuery kullanımına giriş için küçük çaplı bir örnek paylaştım. Hem de document ready kodunun işlevinden bahsetmeye çalıştım. Bir sonraki yazımda jQuery ile ilgili örneklerle devam edeceğiz.
Soru ve önerilerinizi yorum olarak ya da e-mail göndererek iletebilirsiniz, teşekkürler.

Etiketler:

Bunlar da hoşunuza gidebilir...

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Time limit is exhausted. Please reload CAPTCHA.

https://supertotobetgir.xyzhttps://perabetadresi.xyzhttps://girispiabet2.xyzhttps://artemisbetadres.xyzhttps://klasbahisgiris.xyz