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() - Menetapkan atau mengembalikan teks elemen yang dipilih Kandungan
html() - Menetapkan atau mengembalikan kandungan elemen yang dipilih (termasuk teg HTML)
val() - Menetapkan atau mengembalikan nilai Medan bentuk
Contoh berikut menunjukkan cara menetapkan kandungan melalui kaedah text(), html() dan val():
<!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("你好!");
});
$("#btn2").click(function(){
$("#test2").html("<b>你好!</b>");
});
$("#btn3").click(function(){
$("#test3").val("php.cn");
});
});
</script>
</head>
<body>
<p id="test1">这是一个段落。</p>
<p id="test2">这是另外一个段落。</p>
<p>输入框: <input type="text" id="test3" value="php中文网"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
</body>
</html>Jalankan atur cara untuk mencuba it out
Fungsi panggil balik text(), html() dan val()
Tiga kaedah jQuery di atas: teks (), 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:
<!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 atur cara untuk mencubanya
Atribut Tetapan - attr()
kaedah jQuery attr() juga digunakan untuk menetapkan/menukar nilai atribut.
Contoh berikut menunjukkan cara menukar (menetapkan) nilai atribut href dalam pautan:
Contoh
rreee
Jalankan program Cubalah
kaedah attr() juga membolehkan anda menetapkan berbilang atribut pada masa yang sama.
Contoh berikut menunjukkan cara untuk menetapkan atribut href dan tajuk pada masa yang sama:
<!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(){
$("#php").attr("href","http://www.baidu.com/");
});
});
</script>
</head>
<body>
<p><a href="http://www.php.cn" id="php">php中文网</a></p>
<button>修改 href 值</button>
<p>点击按钮修改后，可以点击链接查看链接地址是否变化。</p>
</body>
</html>Jalankan program untuk mencubanya
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:
<!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(){
$("#php").attr({
"href" : "http://www.baidu.com",
"title" : "baidu"
});
});
});
</script>
</head>
<body>
<p><a href="http://www.php.cn" id="php">php中文网</a></p>
<button>修改 href 和 title</button>
<p>点击按钮修改后，可以查看 href 和 title 是否变化。</p>
</body>
</html>Jalankan atur cara untuk mencubanya
bahagian seterusnya