tangkapan jQuery


jQuery - Dapatkan kandungan dan atribut

jQuery mempunyai kaedah berkuasa untuk memanipulasi elemen dan atribut HTML.

manipulasi DOM jQuery

Bahagian jQuery yang sangat penting ialah keupayaan untuk memanipulasi DOM.

jQuery menyediakan satu set kaedah berkaitan DOM yang memudahkan untuk mengakses dan memanipulasi elemen dan atribut.



Nota: DOM = Model Objek Dokumen

DOM mentakrifkan piawaian untuk mengakses dokumen HTML dan XML:

"Model Objek Dokumen W3C ialah antara muka bebas platform dan bahasa yang membolehkan atur cara dan skrip mengakses dan mengemas kini kandungan secara dinamik dokumen. , struktur dan gaya. ().

Tiga kaedah jQuery yang mudah dan praktikal untuk manipulasi DOM:

teks() - Tetapkan atau kembalikan elemen yang dipilih Kandungan teks
html() - Menetapkan atau mengembalikan kandungan elemen yang dipilih (termasuk teg HTML)

    val() - Tetapkan atau Kembalikan nilai medan borang

    • Contoh berikut menunjukkan cara mendapatkan kandungan melalui kaedah jQuery text() dan html():

  • 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(){
    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>

    • Jalankan contoh»

Klik butang "Jalankan contoh" untuk melihat contoh dalam talian

Contoh berikut menunjukkan cara untuk lulus kaedah jQuery val() Dapatkan nilai medan input:

Instance
<!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>

Run Instance»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Dapatkan atribut - attr()

jQuery attr () kaedah digunakan untuk mendapatkan nilai atribut.

Contoh berikut menunjukkan cara mendapatkan nilai atribut href dalam pautan:

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(){
  $("button").click(function(){
    alert($("#runoob").attr("href"));
  });
});
</script>
</head>

<body>
<p><a href="http://www.php.cn" id="runoob">php中文网</a></p>
<button>显示 href 属性的值</button>
</body>
</html>

Jalankan instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

→