jQuery mempunyai kaedah yang berkuasa untuk memanipulasi elemen dan atribut HTML.
operasi DOM jQuery
Bahagian yang sangat penting dalam jQuery ialah keupayaan untuk mengendalikan DOM.
jQuery menyediakan satu set kaedah berkaitan DOM yang memudahkan untuk mengakses dan memanipulasi elemen dan atribut.
DOM = Model Objek Dokumen
Definasi DOM mengakses dokumen HTML dan XML Standard:
"Model Objek Dokumen W3C ialah antara muka bebas platform dan bahasa yang membolehkan program dan skrip mengakses dan mengemas kini kandungan, struktur dan gaya dokumen secara dinamik."
Dapatkan kandungan - teks ( ), html() dan val()
Tiga kaedah jQuery yang mudah dan praktikal untuk operasi DOM:
text() - Tetapkan atau kembalikan kandungan teks bagi elemen yang dipilih html() - Tetapkan atau kembalikan kandungan elemen yang dipilih (termasuk teg HTML) val() - Tetapkan atau kembalikan nilai medan borang
<!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(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
});
</script>
</head>
<body>
<p id="test">这是段落中的 <b>粗体</b> 文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
</body>
</html>Contoh berikut menunjukkan cara mendapatkan nilai medan input melalui jQuery kaedah val():
Dapatkan atribut - attr()
kaedah jQuery attr() digunakan untuk mendapatkan nilai atribut.
Contoh berikut menunjukkan cara mendapatkan nilai atribut href dalam pautan:
<!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(){
alert($("#php").attr("href"));
});
});
</script>
</head>
<body>
<p><a href="http://www.php.cn" id="php">php中文网</a></p>
<button>显示 href 属性的值</button>
</body>
</html>
bahagian seterusnya