jQuery ile Stil Verme
jQuery ile Stil Verme
jQuery ile Stil Verme, CoddyKit'te ücretsiz bir jQuery Academy dersidir. Bu, 1 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, jQuery Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. jQuery Academy kursu toplamda 1 dersten oluşur.
Giriş
Merhaba,
Şimdiye kadarki tüm örneklerde HTML DOM nesneleri üzerinde çalıştık.
jQuery ile HTML öğelerinin stillerini de değiştirebiliriz.
jQuery bunu yapabilmemiz için bazı yöntemler sunar.
sınıf
İlk örneklerde jQuery ile sınıfların kullanımını göreceğiz.
Aşağıdaki örnekte jQuery kütüphanemizi HTML içine ekliyor ve metni pembe ve sarı yapan pink ve yellow adlı iki sınıf tanımlıyoruz.
Başlayalım 🚀
örnek
<p> öğesini <body> etiketleri arasına ekledik.
Şu anda bu öğenin henüz bir sınıfı yok.
<style>
.pink{
color:pink;
}
.yellow{
color: yellow;
}
</style>
<p>lorem ipsum </p>örnek 2
Şimdi addClass() yöntemini kullanarak paragraf öğesine pink sınıfını ekleyelim.
Önizleme ekranında Lorem ipsum metninin renginin pembeye döndüğünü göreceğiz.
<style>
.pink{
color:pink;
}
</style>
<p>lorem ipsum</p>
<script>
/*
This callback runs as soon as
the DOM is Loaded
*/
$(document).ready(function(){
//adding pink class to p element
$('p').addClass('pink');
});
</script>removeClass
removeClass() yöntemi
HTML öğelerindeki sınıfları kaldırmak istiyorsak removeClass() yöntemi kullanılır.
Aşağıdaki örneğimizi değiştirdik ve başlangıçta HTML öğemize pink sınıfını tanımladık. DOM yüklenir yüklenmez p öğemizdeki pink sınıfı kaldırılacaktır.
<style>
.pink{color:pink;}
</style>
<p class="pink">lorem ipsum </p>
<script>
/*
This callback runs as soon as
the DOM is Loaded
*/
$(document).ready(function(){
//removing pink class to p element
$('p').removeClass('pink');
});
</script>toggle sınıfı
toggleClass() yöntemi
Adından da anlaşılacağı gibi bu yöntemle,
hedef öğede bir sınıf varsa kaldırılır, yoksa eklenir.
<style>
.pink{color:pink;}
</style>
<p class="pink">lorem ipsum</p>
<script>
/*
This callback runs as soon as
the DOM is Loaded
*/
$(document).ready(function(){
/*
Since p element has pink class,
pink class will be removed.
*/
$('p').toggleClass('pink');
/*
Since p element hasn't pink class,
pink class will be added.
*/
$('p').toggleClass('pink');
/*
Since p element has pink class,
pink class will be removed.
*/
$('p').toggleClass('pink');
});
</script>CSS yöntemi
css() yöntemi
Sınıf ekleme ve kaldırma yöntemlerini gördük.
Şimdi HTML düğümlerimiz için satır içi stiller tanımlamakta kullanılan CSS yöntemini öğrenelim.
CSS yöntemi iki parametre alır.
- İlk parametre, atanacak özelliğin adıdır.
- İkinci parametre, atanacak özelliğin değeridir.
Aşağıdaki örnekte CSS yönteminin farklı kullanımları gösterilmektedir.
<button>My Button</button>
<script>
/*
Below, the button element's color style
has been read and written
to the color variable.
*/
let color = $('button').css('color');
/*
Now let's change the button color by assigning
the red value to the second argument=
*/
$('button').css('color', 'red')
/*
If we want to change more than one style of
an element at the same time, we pass JSON type arguments.
*/
$("button").css({"color": "red", "padding": "20px"});
</script>
jQuery API'si
jQuery ile DOM üzerinde birçok değiştirme işlemi öğrendik.
Öğrendiğimiz yöntemlere ek olarak jQuery'de pek çok değiştirme yöntemi bulunur.
Aşağıdaki bağlantıya tıklayarak API'nin tamamına göz atabilirsiniz.
Tebrikler
Tebrikler 🎉
jQuery ile biçimlendirmeyi öğrendik.
Bir sonraki bölümde jQuery'de olay yönetimini öğreneceğiz.
Sıkça Sorulan Sorular
“jQuery ile Stil Verme” dersi ücretsiz mi?
Evet — “jQuery ile Stil Verme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve jQuery Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. jQuery Academy kursu toplamda 1 dersten oluşur.
“jQuery ile Stil Verme” dersinde ne öğreneceğim?
jQuery ile Stil Verme jQuery Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
jQuery Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te jQuery Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 1 dersinin 1. dersidir.
“jQuery ile Stil Verme” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu jQuery Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her jQuery Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.