masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Atribut dan gaya jQuery (5)

Apabila melakukan kesan tertentu, gaya tertentu nod yang sama boleh ditukar secara berterusan, iaitu, penukaran yang saling eksklusif antara addClass dan removeClass, seperti kesan perubahan warna berjalin

jQuery menyediakan kaedah toggleClass Digunakan untuk memudahkan logik yang saling eksklusif ini, menambah dan memadam Kelas secara dinamik melalui kaedah toggleClass Satu pelaksanaan adalah bersamaan dengan addClass dan satu lagi pelaksanaan adalah bersamaan dengan kaedah removeClass

toggleClass(): setiap elemen dalam set elemen yang dipadankan. Tambah atau alih keluar satu atau lebih kelas gaya, bergantung pada sama ada kelas gaya wujud atau nilai atribut togol. Iaitu: jika ia wujud (tidak wujud), padamkan (tambah) kelas

toggleClass( className ): satu atau lebih (dipisahkan dengan ruang) digunakan untuk menogol pada setiap elemen dalam set elemen yang dipadankan ) Gaya nama kelas

toggleClass( className, switch ): Nilai Boolean yang digunakan untuk menentukan sama ada gaya perlu ditambah atau dialih keluar

toggleClass( [switch ] ): Nilai Boolean yang digunakan untuk menentukan sama ada gaya harus ditambah atau dialih keluar Nilai Boolean sama ada kelas ditambah atau dialih keluar

toggleClass( function(index, class, switch) [, switch ] ): digunakan untuk mengembalikan kelas gaya yang digunakan untuk menogol pada setiap elemen dalam nama set elemen yang dipadankan bagi fungsi. Menerima kedudukan indeks elemen dan kelas gaya lama elemen sebagai parameter

Nota:

toggleClass ialah logik yang saling eksklusif, iaitu, dengan menilai sama ada nama Kelas yang ditentukan wujud pada elemen yang sepadan, Jika ada, padamkannya, jika tidak, tambahkannya

toggleClass akan mengekalkan nama Kelas asal dan menambahnya, dipisahkan dengan ruang

Mari tulis contoh di bawah 

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <title>隔行换色</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <style type="text/css">
    body,table,td,{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
    }
    
    .h {
        background: #f3f3f3;
        color: #000;
    }
    
    .c {
        background: #ebebeb;
        color: #000;
    }
    </style>
</head>

<body>
    <table id="table" width="50%" border="0" cellpadding="3" cellspacing="1">
        <tr>
            <td>php中文网</td>
            <td>php.cn</td>
        </tr>
        <tr>
            <td>php中文网</td>
            <td>php.cn</td>
        </tr>
        <tr>
            <td>php中文网</td>
            <td>php.cn</td>
        </tr>
        <tr>
            <td>php中文网</td>
            <td>php.cn</td>
        </tr>
        <tr>
            <td>php中文网</td>
            <td>php.cn</td>
        </tr>
    </table>
    </div>
    <script type="text/javascript">
    //给所有的tr元素加一个class="c"的样式
    $("#table tr").toggleClass("c");
    </script>
    <script type="text/javascript">
    //给所有的偶数tr元素切换class="c"的样式
    //所有基数的样式保留，偶数的被删除
    $("#table tr:odd").toggleClass("c");
    </script>
    <script type="text/javascript">
    //第二个参数判断样式类是否应该被添加或删除
    //true，那么这个样式类将被添加;
    //false，那么这个样式类将被移除
    //所有的奇数tr元素，应该都保留class="c"样式
    $("#table tr:even").toggleClass("c", true); //这个操作没有变化，因为样式已经是存在的
    </script>
</body>

</html>


Meneruskan pembelajaran
||
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>隔行换色</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <style type="text/css"> body,table,td,{ font-family: Arial, Helvetica, sans-serif; font-size: 12px; } .h { background: #f3f3f3; color: #000; } .c { background: #ebebeb; color: #000; } </style> </head> <body> <table id="table" width="50%" border="0" cellpadding="3" cellspacing="1"> <tr> <td>php中文网</td> <td>php.cn</td> </tr> <tr> <td>php中文网</td> <td>php.cn</td> </tr> <tr> <td>php中文网</td> <td>php.cn</td> </tr> <tr> <td>php中文网</td> <td>php.cn</td> </tr> <tr> <td>php中文网</td> <td>php.cn</td> </tr> </table> </div> <script type="text/javascript"> //给所有的tr元素加一个class="c"的样式 $("#table tr").toggleClass("c"); </script> <script type="text/javascript"> //给所有的偶数tr元素切换class="c"的样式 //所有基数的样式保留，偶数的被删除 $("#table tr:odd").toggleClass("c"); </script> <script type="text/javascript"> //第二个参数判断样式类是否应该被添加或删除 //true，那么这个样式类将被添加; //false，那么这个样式类将被移除 //所有的奇数tr元素，应该都保留class="c"样式 $("#table tr:even").toggleClass("c", true); //这个操作没有变化，因为样式已经是存在的 </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)  492462 permainan