jQuery - İçeriği ve Nitelikleri Ayarla
İçeriği Ayarla - text(), html() ve val()
İçeriği ayarlamak için önceki sayfadaki aynı üç yöntemi kullanacağız :
text()- Seçili öğelerin metin içeriğini ayarlar veya döndürürhtml()- Seçili öğelerin içeriğini ayarlar veya döndürür (HTML işaretlemesi dahil)val()- Form alanlarının değerini ayarlar veya döndürür
Aşağıdaki örnek, jQuery , ve yöntemleriyle içeriğin nasıl text()ayarlanacağını html()gösterir val():
Örnek
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
text(), html() ve val() için bir Geri Çağırma İşlevi
Yukarıdaki üç jQuery yönteminin tümü: text(), html()ve val(), ayrıca bir geri arama işleviyle birlikte gelir. Geri arama işlevinin iki parametresi vardır: seçilen öğeler listesindeki geçerli öğenin dizini ve orijinal (eski) değer. Ardından, işlevden yeni değer olarak kullanmak istediğiniz dizeyi döndürürsünüz.
Aşağıdaki örnekte text()ve html()bir geri arama işlevi gösterilmektedir:
Örnek
$("#btn1").click(function(){
$("#test1").text(function(i, origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i, origText){
return "Old html: " + origText + " New html: Hello
<b>world!</b>
(index: " + i + ")";
});
});
Nitelikleri Ayarla - attr()
jQuery attr()yöntemi, öznitelik değerlerini ayarlamak/değiştirmek için de kullanılır.
Aşağıdaki örnek, bir bağlantıdaki href özniteliğinin değerinin nasıl değiştirileceğini (ayarlanacağını) gösterir:
Örnek
$("button").click(function(){
$("#w3s").attr("href", "https://www.w3schools.com/jquery/");
});
Yöntem attr(), aynı anda birden çok öznitelik ayarlamanıza da olanak tanır.
Aşağıdaki örnek, hem href hem de başlık özniteliklerinin aynı anda nasıl ayarlanacağını gösterir:
Örnek
$("button").click(function(){
$("#w3s").attr({
"href" : "https://www.w3schools.com/jquery/",
"title" : "W3Schools jQuery Tutorial"
});
});
attr() için bir Geri Çağırma İşlevi
jQuery yöntemi attr()ayrıca bir geri arama işleviyle birlikte gelir. Geri arama işlevinin iki parametresi vardır: seçilen öğeler listesindeki geçerli öğenin dizini ve orijinal (eski) öznitelik değeri. Ardından, işlevden yeni öznitelik değeri olarak kullanmak istediğiniz dizeyi döndürürsünüz.
Aşağıdaki örnek attr(), bir geri arama işleviyle gösterilmektedir:
Örnek
$("button").click(function(){
$("#w3s").attr("href", function(i, origValue){
return origValue + "/jquery/";
});
});
jQuery Alıştırmaları
jQuery HTML Referansı
Tüm jQuery HTML yöntemlerine tam bir genel bakış için lütfen jQuery HTML/CSS Referansımıza gidin .