masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

tangkapan jQuery

jQuery mempunyai kaedah yang 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.

DOM = Model Objek Dokumen

DOM mentakrifkan piawaian untuk mengakses dokumen HTML dan XML:

"Model Objek Dokumen W3C bebas platform dan bahasa -antara muka khusus yang membolehkan program dan skrip mengakses dan mengemas kini kandungan, struktur dan gaya dokumen secara dinamik

Tiga kaedah jQuery yang mudah dan praktikal untuk manipulasi DOM: .

text() - Tetapkan atau kembalikan elemen yang dipilih Kandungan teks

  • html() - Menetapkan atau mengembalikan kandungan elemen yang dipilih (termasuk Tag HTML)

  • val() - Menetapkan atau Mengembalikan nilai medan borang

  • Contoh berikut menunjukkan cara untuk menyelesaikan kandungan kaedah jQuery text() dan html(): 

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/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 atur cara untuk mencubanya

Contoh berikut menunjukkan cara mendapatkan nilai medan input melalui jQuery kaedah val(): 

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <script src="http://cdn.static.runoob.com/libs/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"></p>
<button>显示值</button>
</body>
</html>

Jalankan program untuk mencubanya

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://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                alert($("#tr").attr("href"));
            });
        });
    </script>
</head>
<body>
<p><a href="http://www.php.cn" id="tr">PHP中文网</a></p>
<button>显示 href 属性的值</button>
</body>
</html>

Jalankan atur cara untuk mencubanya

Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/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>
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)  492970 permainan