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.
Tiga kaedah jQuery yang mudah dan praktikal untuk operasi DOM:
teks() - tetapkan atau kembalikan kandungan Teks daripada elemen yang dipilih
html() - Menetapkan atau mengembalikan kandungan elemen yang dipilih (termasuk teg HTML)
val() - Tetapkan atau kembalikan nilai medan borang
Tunjukkan cara mendapatkan kandungan melalui kaedah jQuery text() dan html():
<!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> Demonstrasi Bagaimana untuk mendapatkan nilai medan input melalui kaedah jQuery val():
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("值为: " + $("#test").val());
});
});
</script>
</head>
<body>
<p>名称: <input type="text" id="test" value="php中文网"></p>
<button>显示值</button>
</body>
</html>
attr() atribut
kaedah jQuery attr() digunakan untuk mendapatkan nilai atribut.
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