jQuery məlumat dəyişdirmək

Bundan əvvəlki dərsdə bəhs edilən üç üsulu, obyektlərin dəyərlərini dəyişdirmək üçün də istifadə edə bilərik.

- text("əlavə olunacaq/dəyişdiriləcək yazı") - Yazılar üçün
- html("əlavə olunacaq/dəyişdiriləcək yazı") - HTML kodları olan məzmunlar üçün
- val("əlavə olunacaq/dəyişdiriləcək yazı") - Form obyektləri üçün

Aşağıdakı kodu yoxlayaq.
<p id="test1">Bu mətndir</p>
<p id="test2">Bu başqa bir mətndir.</p>
<p>Form məlumat:
<input type="text" id="test3" value="Burdakı form məlumatıdır"></p>
<button id="btn1">Yazını dəyişdir</button>
<button id="btn2">HTML kodunu dəyişdir</button>
<button id="btn3">Form məlumatını dəyişdir</button>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text("Salamlar!");
  });
  $("#btn2").click(function(){
    $("#test2").html("<b>jQuery dərslərinə xoş gəldiniz.</b>");
  });
  $("#btn3").click(function(){
    $("#test3").val("Yeni dərsimiz də maraqlı olacaq!");
  });
});
</script>
Nəticəni görmək üçün klikləyin
 
Nəticəyə baxın, düymələrə növbəylə klikləsəniz əvvəlcədən qeyd olunan dəyərlərin düymələr basıldıqca dəyişdiyini görəcəksiniz.

QEYD: text() və html() funksiyalarında bəzən köhnə və yeni dəyərlərə ehtiyacımız ola bilər. Bu vəziyyətdə jQuery-də hazır bir callback funksiyası istifadə edərək dəyişən dəyərləri istifadə edə bilərik. Aşağıdakı kodlara baxaq:
function(i,origText){
   return "Köhnə yazı: " + origText + " 
Yeni yazı: Salamlar! (index: " + i + ")"; 
}
 
attr() əmri də element xüsusiyyətini dəyişdirmək üçün istifadə edilə bilər.

Aşağıdakı kod, düymə elementinə basıldığında id dəyəri "link" olan a elementinin HREF xüsusiyyətinin http://xpert.az/ olaraq dəyişməsini təmin edir:
<a id="link" target="_blank" href="https://www.google.az/" title="Google">Buraya kliklə</a>
<button id="btn5">Linkə daxil ol, sonra bura kliklə və yenidən linkə daxil ol</button>
<script>
$(document).ready(function(){
$("#btn5").click(function(){
   $("#link").attr({
     "href" : "http://xpert.az/",
     "title" : "Xpert.az saytı"
   });
 });
 });
</script>
Nəticəni görmək üçün klikləyin
 
Yuxarıdakı nümunədə həm HREF, həm TITLE xüsusiyyətlərini dəyişdirdik.
jQuery