Projede jQuery Kullanımı
Bu dersimizde projemizde jQuery kullanımını ve kullanım sırasında oluşabilecek hatalardan nasıl kurtulabileceğimizi öğreneceğiz.
<!DOCTYPE HTML>
<html>
<head>
<style>
ul li {color: green;}
</style>
</head>
<body>
<ul>
<li>Merhaba jQuery</li>
<li>Merhaba jQuery 2</li>
<li>Merhaba jQuery 3</li>
</ul>
<script src="~/Areas/web_tasarim/Scripts/jquery-2.0.3.js"></script>
</body>
</html>
Şeklinde kodlarımız olsun. Daha rahat görebilmeniz adına şimdilik @RenderBody() ve <head> etiketindeki metaları ve title'ı sildim.
Burada üç nesneden oluşan sırasız bir liste tanımladım ve renklerini yeşil yaptım.
- Merhaba jQuery
- Merhaba jQuery 2
- Merhaba jQuery 3
Ekran çıktım bu şekilde olacaktır.
<!DOCTYPE HTML>
<html>
<head>
<style>
ul li {color: green;}
</style>
</head>
<body>
<ul>
<li>Merhaba jQuery</li>
<li>Merhaba jQuery 2</li>
<li>Merhaba jQuery 3</li>
</ul>
<script src="~/Areas/web_tasarim/Scripts/jquery-2.0.3.js"></script>
<script>
jQuery('ul li');
</script>
</body>
</html>
jQuery tanımlamamın altına <script> etiketi açıyorum. İçine jQuery yazıyorum ve parantez açıktan sonra 'ul li' ile liste elemanlarımı seçiyorum. 'ul li' yerine "ul li" de yazabilirsiniz. Yani tek tırnak işareti yerine tırnak işareti kullanabilirsiniz.
Şu an jQuery ile liste elemanlarını seçtik. Peki bu seçimin yapıldığını nereden görebiliriz? Bunun için bazı kod eklemeleri yapmalıyız.
<!DOCTYPE HTML>
<html>
<head>
<style>
ul li {color: green;}
</style>
</head>
<body>
<ul>
<li>Merhaba jQuery</li>
<li>Merhaba jQuery 2</li>
<li>Merhaba jQuery 3</li>
</ul>
<script src="~/Areas/web_tasarim/Scripts/jquery-2.0.3.js"></script>
<script>
var liste = jQuery('ul li');
console.log(liste);
</script>
</body>
</html>
liste adlı yeni bir değişken tanımladım ve içeriğini jQuery olarak ile seçtiğimiz 'ul li' etiketleri ile belirledim. Daha sonra console.log özelliği ile bu liste değişkenimin konsol ekranında görüntülenmesini istedim.
Şimdi projenizi sadece Google Chrome tarayıcısı ile çalıştırın.
F12 fonksiyon tuşuna basın ve Console sekmesine gelin. Buradaki selector: "ul li" ifadesi ile liste elemanlarının jQuery ile seçildiğini görebilirsiniz.
<!DOCTYPE HTML>
<html>
<head>
<style>
/*ul li {color: green;}*/
</style>
</head>
<body>
<ul>
<li>Merhaba jQuery</li>
<li>Merhaba jQuery 2</li>
<li>Merhaba jQuery 3</li>
</ul>
<script src="~/Areas/web_tasarim/Scripts/jquery-2.0.3.js"></script>
<script>
jQuery('ul li').css('color', 'green');
</script>
</body>
</html>
Şimdi <style> etiketindeki kodları yorum satırı haline getirin ve <script> etiketinde jQuery('ul li').css('color', 'green'); şeklinde bir tanımlama yapın. Burada yaptığımız şu: jQuery ile liste elemanlarını seçtik ve css( ) fonksiyonu ile bu liste elemanlarının rengini yeşil olarak belirledik.
Şimdi tekrar projenizi çalıştırın ve F12 tuşuna basın.
Elements sekmesi altına gelin ve liste elemanlarını açılı hâle getirin. Gördüğünüz gibi her elemanımızın rengi yeşil olarak belirlendi. Bunu CSS'ten de yapabilirdik; fakat burada önemli olan jQuery'nin hangi mantık çerçevesi içinde çalıştığını sizlere anlatabilmek.
<!DOCTYPE HTML>
<html>
<head>
<style>
.vurgu {color: green}
</style>
</head>
<body>
<ul>
<li>Merhaba jQuery</li>
<li>Merhaba jQuery 2</li>
<li>Merhaba jQuery 3</li>
</ul>
<script src="~/Areas/web_tasarim/Scripts/jquery-2.0.3.js"></script>
<script>
jQuery('ul li').addClass('vurgu');
</script>
</body>
</html>
Şimdi <style> etiketinin içinde vurgu isimli bir sınıf tanımlayın ve özelliğini metin rengini yeşil olarak değiştirecek şekilde yapın. <script> etiketinin içine ise kodda da gördüğünüz gibi jQuery('ul li').addClass('vurgu'); yazın. addClass( ) fonksiyonu sınıf eklemek için kullanılır. Bu şekilde liste elemanlarımıza vurgu sınıfını eklemiş olacağız.
Her şey tamamsa projenizi tekrar çalıştırın ve F12 tuşuna basın.
Gördüğünüz gibi liste elemanlarına vurgu sınıfını eklemiş olduk. Bu yöntemi CSS ile de yapabiliriz.
<!DOCTYPE HTML>
<html>
<head>
<style>
.vurgu {color: green}
</style>
</head>
<body>
<ul>
<li>Merhaba jQuery</li>
<li>Merhaba jQuery 2</li>
<li>Merhaba jQuery 3</li>
</ul>
<script src="~/Areas/web_tasarim/Scripts/jquery-2.0.3.js"></script>
<script>
$('ul li').addClass('vurgu');
</script>
</body>
</html>
Şimdi jQuery ifadesinin yerine $ (dolar) ifadesi yazın. Yazamadıysanız Alt Gr + 4 tuş kombinasyonunu kullanın.
Burada jQuery ifadesi ile $ arasında herhangi bir fark yoktur. İkisi de kullanılabilir. Peki bunu nasıl anlıyoruz. Şimdi projenizin Scripts klasörü içindeki jquery-2.x.x.js isimli dosyaya tıklayın ve açın.
Sayfanın en altına geldiğinizde görselde gördüğünüz gibi bir koşul göreceksiniz. Burada şunu diyor: Belgenin tipi bir nesne ise jQuery ile $ tanımlaması aynı anlama gelmektedir.
<script>
jQuery('ul li').addClass('vurgu');
$('ul li').addClass('vurgu');
window.jQuery('ul li').addClass('vurgu');
window.$('ul li').addClass('vurgu');
</script>
Yani bu dört satır da birbiri ile eş anlamlıdır. Biz çalışırken genele uyarak $ tanımlamasını kullanacağız. Bunu yapıyoruz çünkü hem daha kısa hem de başkaları kodlarımızı okurken zorluk çekmesinler.
jQuery Kullanım Hataları
<!DOCTYPE HTML>
<html>
<head>
<script src="~/Areas/web_tasarim/Scripts/jquery-2.0.3.js"></script>
<script>
$('li:first-child').addClass('vurgu');
</script>
<style>
.vurgu {color: green}
</style>
</head>
<body>
<ul>
<li>Merhaba jQuery</li>
<li>Merhaba jQuery 2</li>
<li>Merhaba jQuery 3</li>
</ul>
</body>
</html>
Kodlarımızı biraz değiştirdim. jQuery dosya yolumu ve <script> etiketimi <head> etiketi içinde tanımladım ve liste elemanlarımın ilk elemanını seçtim.
Kodları çalıştırdığınızda ilk liste elemanının renginin yeşil olmadığını göreceksiniz.
Elements sekmesinden liste elemanlarıma bakıyorum; fakat vurgu sınıfım ilk elemana eklenmemiş. Peki bu neden kaynaklanıyor?
Arkadaşlar,
Tarayıcı sayfayı okumaya başladığında ilk olarak <head> etiketinden başlar. Daha sonra <body> etiketini okur. Yukarıdan aşağı doğru bir okuma işlemi söz konusudur. Bizim burada yaptığımız ilk olarak vurgu sınıfını ekle, daha sonra listeyi oluştur demek. İlk olarak listeyi oluşturup daha sonra vurgu sınıfını eklemeliydik. Bunu sağlayabilmek için document ready olarak literatüre geçmiş bir tanımlama yapmalıyız. document ready ilk önce sayfayı tamamen okur ve bu okuma işlemi tamamlandıktan sonra geçerli kodları çalıştırır.
<script>
$(document).ready(function() {
$('li:first-child').addClass('vurgu');
});
</script>
$ işareti yaptıktan sonra document yazıyoruz. Buradaki "document" ifadesi <body> etiketi anlamındadır. Daha sonra ready(function() { }); tanımlaması içinde çalışmasını istediğimiz kodları yazıyoruz. Bu şekilde sayfamız tamamen okunduktan sonra jQuery kodlarımız çalışmaya başlayacak.
Projeyi çalıştırdığınızda kodların çalıştığını ve ilk elemanın yeşil olduğunu göreceksiniz.
<script>
$(document).ready(function() {
$('li:first-child').addClass('vurgu');
});
$(function () {
$('li:first-child').addClass('vurgu');
});
</script>
document ready tanımlamasını sadece anonim bir fonksiyon ile de sağlayabilirsiniz. İki tanımlama da aynı anlama gelmektedir. Peki bu iki tanımlamanın da aynı olduğunu nereden anlayabiliriz? Bunun için tekrar jquery-2.x.x.js dosyanızı açın.
Başlara doğru jQuery.fn = jQuery.prototype eşitliğini tanımlayan bir bildirim alanı göreceksiniz.
if ( !selector ) ... jQuery tanımlaması bir seçici mi? Değilse metoddan çık. Bu aradığımız değil.
if ( typeof selector === "string" ) ... jQuery seçicisi bir HTML etiketi mi? Değil. Bizim aradığımız CSS seçicisi.
Tanımlamanın sonlarına doğru aşağıdaki görselde gördüğünüz gibi bir koşul göreceksiniz.
jQuery fonksiyon tanımlaması bir seçici ile yapılmışsa rootjQuery.ready'yi döndür. rootjQuery'den kastı bizim document yani body etiketi olduğu için iki ifadenin de aynı anlama geldiğini görebilirsiniz.
Eğer anlamadıysanız takılmayın. Çok da önemli değil. Yalnız bu iki kullanım şeklinin de aynı anlama geldiğini bilmelisiniz.
Bu dersin videosunu 1080p HD kalitesinde izleyebilirsiniz.
Bu derslik bu kadar. Bir sonraki dersimizde jQuery'de hiyerarşik düzenlemeler konusuna değineceğiz.