masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

jQuery-capture

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>


Meneruskan pembelajaran
||
<!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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492837 permainan