jQuery-Settings


jQuery - Tetapkan kandungan dan atribut

Tetapkan kandungan - text(), html() dan val()

Kami akan menggunakan tiga kaedah yang sama dari bab sebelumnya untuk menetapkan kandungan:

  • teks() - Tetapkan atau Kembalikan kandungan teks elemen yang dipilih

  • html() - Menetapkan atau mengembalikan kandungan elemen yang dipilih (termasuk teg HTML)

  • val ( ) - Tetapkan atau kembalikan nilai medan borang

Contoh berikut menunjukkan cara menetapkan kandungan melalui kaedah text(), html() dan val():

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text("Hello world!");
  });
  $("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
  });
  $("#btn3").click(function(){
    $("#test3").val("RUNOOB");
  });
});
</script>
</head>

<body>
<p id="test1">这是一个段落。</p>
<p id="test2">这是另外一个段落。</p>
<p>输入框: <input type="text" id="test3" value="菜鸟教程"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Fungsi panggilan balik teks(), html() dan val()

Tiga kaedah jQuery di atas: text(), html() dan val() juga mempunyai fungsi panggil balik. Fungsi panggil balik mengambil dua parameter: indeks elemen semasa dalam senarai elemen yang dipilih dan nilai asal (lama). Kemudian kembalikan rentetan yang anda ingin gunakan sebagai nilai baharu fungsi tersebut.

Contoh berikut menunjukkan teks() dan html() dengan fungsi panggil balik:

Contoh

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text(function(i,origText){
      return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
  });

  $("#btn2").click(function(){
    $("#test2").html(function(i,origText){
      return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
    });
  });

});
</script>
</head>

<body>
<p id="test1">这是一个有 <b>粗体</b> 字的段落。</p>
<p id="test2">这是另外一个有 <b>粗体</b> 字的段落。</p>
<button id="btn1">显示 新/旧 文本</button>
<button id="btn2">显示 新/旧 HTML</button>
</body>
</html>

Jalankan Instance»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Tetapkan atribut - attr()

Kaedah jQuery attr() juga digunakan untuk menetapkan/menukar nilai atribut.

Contoh berikut menunjukkan cara menukar (menetapkan) nilai atribut href dalam pautan:

Contoh

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#runoob").attr("href","http://www.php.cn/jquery");
  });
});
</script>
</head>

<body>
<p><a href="http://www.runoob.com" id="runoob">php中文网</a></p>
<button>修改 href 值</button>
<p>点击按钮修改后，可以点击链接查看链接地址是否变化。</p>
</body>
</html>

Jalankan contoh »

Klik butang "Run Instance" untuk melihat contoh dalam talian

kaedah attr() Juga membolehkan anda menetapkan berbilang sifat pada masa yang sama.

Contoh berikut menunjukkan cara menetapkan kedua-dua atribut href dan tajuk:

Contoh

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#runoob").attr({
      "href" : "http://www.runoob.com/jquery",
      "title" : "jQuery 教程"
    });
  });
});
</script>
</head>

<body>
<p><a href="http://www.php.cn" id="runoob">php中文网</a></p>
<button>修改 href 和 title</button>
<p>点击按钮修改后，可以查看 href 和 title 是否变化。</p>
</body>
</html>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Fungsi panggil balik attr()

Kaedah jQuery attr() juga menyediakan fungsi panggil balik. Fungsi panggil balik mengambil dua parameter: indeks elemen semasa dalam senarai elemen yang dipilih dan nilai asal (lama). Kemudian kembalikan rentetan yang anda ingin gunakan sebagai nilai baharu fungsi tersebut.

Contoh berikut menunjukkan kaedah attr() dengan fungsi panggil balik:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#runoob").attr("href", function(i, origValue){
            return origValue + "/jquery";
        });
    });
});
</script>
</head>
<body>

<p><a href="http://www.php.cn" id="runoob">php中文网</a></p>

<button>修改 href 值</button>

<p>点击按钮修改后，可以点击链接查看 href 属性是否变化。</p>

</body>
</html>

Jalankan Instance»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian