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>
  • Cadangan kursus
  • Muat turun perisian kursus