tetapan jQuery
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">這是一個(gè)段落。</p>
<p id="test2">這是另外一個(gè)段落。</p>
<p>輸入框: <input type="text" id="test3" value="php中文網(wǎng)"></p>
<button id="btn1">設(shè)置文本</button>
<button id="btn2">設(shè)置 HTML</button>
<button id="btn3">設(shè)置值</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">這是一個(gè)有 <b>粗體</b> 字的段落。</p>
<p id="test2">這是另外一個(gè)有 <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
rreeeJalankan 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://ipnx.cn" id="php">php中文網(wǎng)</a></p>
<button>修改 href 值</button>
<p>點(diǎn)擊按鈕修改后，可以點(diǎn)擊鏈接查看鏈接地址是否變化。</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://ipnx.cn" id="php">php中文網(wǎng)</a></p>
<button>修改 href 和 title</button>
<p>點(diǎn)擊按鈕修改后，可以查看 href 和 title 是否變化。</p>
</body>
</html>Jalankan atur cara untuk mencubanya
