masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

jQuery traversal add() kaedah

jQuery ialah objek koleksi Selepas mencari koleksi elemen yang ditentukan melalui kaedah $(), satu siri operasi boleh dilakukan. Selepas $(), ini bermakna objek koleksi sudah ditentukan Apakah yang perlu dilakukan jika anda perlu menambah elemen baharu pada koleksi ini nanti? jQuery menyediakan kaedah tambah untuk ini, yang digunakan untuk mencipta objek jQuery baharu , elemen itu ditambahkan pada set elemen yang dipadankan

Hujah untuk menambah() boleh menerima hampir mana-mana $(), termasuk ungkapan pemilih jQuery, elemen DOM atau rujukan serpihan HTML.

Lihat sahaja kes:

Operasi: Pilih semua elemen li, dan kemudian tambah elemen p pada koleksi li

<ul> > <li>senarai item 1</li>
<li>senarai item 3</li>
</ul>
<p>Elemen p baharu</ p>

Proses 1: Lulus pemilih

$('li').add('p')


Proses 2: Lulus Elemen dom

$('li').add(document.getElementsByTagName('p')[0])


Cara lain ialah membuat teg P secara dinamik dan menambahkannya pada koleksi , dan kemudian masukkannya ke dalam kedudukan yang ditentukan, tetapi ini mengubah susunan elemen itu sendiri

$('li').add('<p>Elemen p baharu</p>'). kedudukan sasaran)


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    .left {
        width: auto;
        height: 150px;
    }
    
    .left div {
        width: 150px;
        height: 120px;
        padding: 5px;
        margin: 5px;
        float: left;
        background: #bbffaa;
        border: 1px solid #ccc;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>add方法()</h2>
    <div class="left first-div">
        <div class="div">
            <ul>
                <li>list item 1</li>
                <li>list item 2</li>
                <li>list item 3</li>
            </ul>
            <p>新的p元素</p>
        </div>
    </div>
    <div class="right"></div>
    <br/>
    <button>点击：add传递元素标签</button>
    <button>点击：add传递html结构</button>
    <script type="text/javascript">
    $("button:first").click(function() {
         //把p元素添加到li的合集中
         $('li').add('p').css('background', 'red')
    })
    </script>
    <script type="text/javascript">
    $("button:last").click(function() {
         //把html结构'<p>新的p元素</p>'
         //加入到li的合集中，为了能够在页面上显示
         //需要再重新appendTo到指定的节点处
         //值得注意：整个结构位置都改变了
         $('li').add('<p>新的p元素</p>').appendTo($('.right'))
    })
    </script>
</body>

</html>


Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> .left { width: auto; height: 150px; } .left div { width: 150px; height: 120px; padding: 5px; margin: 5px; float: left; background: #bbffaa; border: 1px solid #ccc; } </style> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <h2>add方法()</h2> <div class="left first-div"> <div class="div"> <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> </ul> <p>新的p元素</p> </div> </div> <div class="right"></div> <br/> <button>点击：add传递元素标签</button> <button>点击：add传递html结构</button> <script type="text/javascript"> $("button:first").click(function() { //把p元素添加到li的合集中 $('li').add('p').css('background', 'red') }) </script> <script type="text/javascript"> $("button:last").click(function() { //把html结构'<p>新的p元素</p>' //加入到li的合集中，为了能够在页面上显示 //需要再重新appendTo到指定的节点处 //值得注意：整个结构位置都改变了 $('li').add('<p>新的p元素</p>').appendTo($('.right')) }) </script> </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)  492454 permainan