Merhaba arkadaşlar bu makalemde jQuery'nin temellerinden bahsedeceğim. Hiç klasik bir giriş yapmıyorum. Direk olaya giriyorum :)
Örneğin bir listenin elemanları seçmek ve üzerinde işlem yapmak için.
Bu şekilde html form'daki tüm li etiketleri seçilir ve üzerinde işlem yapabiliriz.
Bir elementi seçip seçemediğimiz anlayabilmek için jquery'nin length methodunu kullanıyoruz..
Bu kod parçacığında sayfadaki table'lar içindeki tüm td'lerin html'ine <div>jQuery is aWesome!</div> yazacaktır.
Sadece text yazdırmak istiyorsak text() methodunu kullanıyoruz.
Makalenin devamını bekleyin. :)
İyi Kodlar!
Kaynak : http://www.kodstrap.com/makale-jquery-temelleri-bolum-1-31
$ Nedir?
" $ " jQuery'nin html elementlerini seçmemize yarayan işaretidir.Örneğin bir listenin elemanları seçmek ve üzerinde işlem yapmak için.
var liste = $("li");
Bu şekilde html form'daki tüm li etiketleri seçilir ve üzerinde işlem yapabiliriz.
$(document).ready()
Document Ready. Açılan sayfa tamamen yüklediğinde yapılacak işlemleri bu method içinde kullanırız. Örneğin:$(document).ready(
function(){ //Sayfa yüklediğinde bu method çalışır.
alert("Sayfa Yüklendi");
});
Seçili element örnekleri
$( '#makale' ); // makale id'sine sahip elementi seçer.
$( 'li' ); // sayfadaki tüm liste elementlerini seçer
$( 'ul li' ); // sayfadaki tüm sırasız liste elementlerini seçer.
$( '.kodstrap' ); // kodstrap class'ına sahip tüm elementlerini seçer.
Elementi doğru seçtik mi?
Bir elementi seçip seçemediğimiz anlayabilmek için jquery'nin length methodunu kullanıyoruz..
if ( $( '#secilielement' ).length > 0 ) {
// Bir şeyler yaz..
}
Bu if kullanımı seçimin doğru olup olmadığını döndürür bize...
Seçilen bir grup element içinden herhangi birini seçmek.
var liste= $('ul#liste li' );
var indextekielement= liste[0];
Bunu dizi gibi düşünebiliriz. liste dizisinin 0. ncı index'indeki element.Seçili elementin içini doldurmak.
$( 'table tr td' ).html( '<div>jQuery is aWesome!</div>' );
Bu kod parçacığında sayfadaki table'lar içindeki tüm td'lerin html'ine <div>jQuery is aWesome!</div> yazacaktır.
Sadece text yazdırmak istiyorsak text() methodunu kullanıyoruz.
$( 'table tr td' ).text( 'jQuery is aWesome!' );
Makalenin devamını bekleyin. :)
Kaynak : http://www.kodstrap.com/makale-jquery-temelleri-bolum-1-31
Yorumlar
Yorum Gönder