Bu yazımızda jQuery’de text, html ve val fonksiyonlarının ne işe yaradığını ve nasıl kullanabileceğimizi anlatacağım.
Şimdi sırasıyla bu fonksiyonların ne işe yaradığını ve nasıl kullanıldığını inceleyelim.
Daha sonra da tüm fonksiyonları aynı anda içeren bir uygulama yapalım. Böylece fonksiyonların birbirinden farkını daha iyi anlayabiliriz.
⇒ Text Fonksiyonu : text() fonksiyonu ile seçtiğimiz Html öğesinin metnini alabilir veya seçtiğimiz Html öğesine metin ekleyebiliriz.
⇒ Html Fonksiyonu : html() fonksiyonu ile seçtiğimiz Html öğesinin içeriğini Html kodları ile beraber alabilir veya seçtiğimiz Html öğesinin içerisine Html kodları ekleyebiliriz.
⇒ Val Fonksiyonu : val() fonksiyonu ile seçtiğimiz Html öğesinin value attribute’unun değerini alabilir veya seçtiğimiz Html öğesinin value attribute’una bir değer atayabiliriz.
Örneğimizde text ve html fonksiyonları için bir p etiketi, val fonksiyonu için ise bir input etiketi tanımlayalım.
Artık bu fonksiyonları içerisinde barındıran uygulamamıza geçebiliriz.
Html Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<button id="text-get">Text() - Get</button> <button id="html-get">Html() - Get</button> <button id="val-get">Val() - Get</button> <button id="text-set">Text() - Set</button> <button id="html-set">Html() - Set</button> <button id="val-set">Val() - Set</button> <p>Lorem <b>ipsum</b> dolor <i>sit</i> amet.</p> <input type="text" value="jQuery"> |
Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
body { margin: 20px; font-size: 18px; } button { width: 110px; padding: 10px; margin-right: 12px; margin-bottom: 12px; background-color: tomato; color: #fff; border: none; cursor: pointer; font-size: 16px; } p { font-size: 22px; } input { padding: 5px; font-size: 20px; } |
jQuery Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> $(document).ready(function() { $("#text-get").click(function() { var text = $("p").text(); alert(text); }); $("#html-get").click(function() { var html = $("p").html(); alert(html); }); $("#val-get").click(function() { var value = $("input").val() alert(value); }); $("#text-set").click(function() { $("p").text("Hello World"); }); $("#html-set").click(function() { $("p").html("<h2><i>Hello World</i></h2>"); }); $("#val-set").click(function() { var value = "Javascript"; $("input").val(value); }); }); |
Fonksiyonları Set olarak kullandığımız örneklerde tarayıcınızda sağ tıklayıp incele derseniz Html öğeleri üzerindeki değişiklikleri inceleyerek daha iyi anlayabilirsiniz.
Umarım “jQuery text(), html(), val() Fonksiyonları ve Kullanımları” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
jQuery fadeOut(), fadeIn(), fadeToggle(), fadeTo() Fonksiyonları ve Kullanımları
jQuery slideDown(), slideUp(), slideToggle() Fonksiyonları ve Kullanımları
Yeni bir yazımda görüşmek üzere.
, html(), val() Metodları ve Kullanımları){kind=link}