jQuery CSS 类

Dengan jQuery, elemen CSS boleh dimanipulasi dengan mudah. Tukar kelas CSS

operasi jQuery CSS

jQuery mempunyai beberapa kaedah untuk melaksanakan operasi CSS. Kami akan mempelajari perkara berikut:

addClass() - Tambahkan satu atau lebih kelas pada elemen yang dipilih
removeClass() - Alih keluar daripada elemen terpilih Pilih elemen untuk memadam satu atau lebih kelas
toggleClass() - lakukan tambah/padam operasi penukaran kelas pada elemen yang dipilih
css( ) - Tetapkan atau kembalikan sifat gaya

kaedah jQuery addClass()

Contoh berikut menunjukkan cara Tambah atribut kelas kepada elemen yang berbeza. Sudah tentu, apabila menambah kelas, anda juga boleh memilih berbilang elemen:

<!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(){
                $("h1,p").addClass("blue");
                $("div").addClass("important");
            });
        });
    </script>
    <style type="text/css">
        .important
        {
            font-weight:bold;
            font-size:xx-large;
        }
        .blue
        {
            color:blue;
        }
    </style>
</head>
<body>
<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<div>这是一些重要的文本!</div>
<br>
<button>为元素添加 class</button>
</body>
</html>

Jalankan program untuk mencubanya

Anda juga boleh menentukan berbilang kelas dalam kaedah addClass():

<!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(){
                $("#div1").addClass("important blue");
            });
        });
    </script>
    <style type="text/css">
        .important
        {
            font-weight:bold;
            font-size:xx-large;
        }
        .blue
        {
            color:blue;
        }
    </style>
</head>
<body>
<div id="div1">这是一些文本。</div>
<div id="div2">这是一些文本。</div>
<br>
<button>为第一个 div 元素添加类</button>
</body>
</html>

Jalankan program dan cuba

kaedah jQuery removeClass()

The contoh berikut menunjukkan cara Padam atribut kelas yang ditentukan dalam elemen berbeza:

Instance

<!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(){
                $("h1,h2,p").removeClass("blue");
            });
        });
    </script>
    <style type="text/css">
        .important
        {
            font-weight:bold;
            font-size:xx-large;
        }
        .blue
        {
            color:blue;
        }
    </style>
</head>
<body>
<h1 class="blue">标题 1</h1>
<h2 class="blue">标题 2</h2>
<p class="blue">这是一个段落。</p>
<p>这是另外一个段落。</p>
<br>
<button>从元素中移除 class</button>
</body>
</html>

Jalankan atur cara dan cuba

kaedah jQuery toggleClass()

Contoh berikut akan menunjukkan cara menggunakan kaedah toggleClass() jQuery. Kaedah ini melaksanakan operasi penukaran menambah/memadam kelas kepada elemen yang dipilih:

Instance

<!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(){
                $("h1,h2,p").toggleClass("blue");
            });
        });
    </script>
    <style type="text/css">
        .blue
        {
            color:blue;
        }
    </style>
</head>
<body>
<h1 class="blue">标题 1</h1>
<h2 >标题 2</h2>
<p class="blue">这是一个段落。</p>
<p>这是另外一个段落。</p>
<br>
<button>切换 class</button>
</body>
</html>

Jalankan atur cara dan cuba

Meneruskan pembelajaran

fail baharu

<!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(){ $("h1,h2,p").toggleClass("blue"); }); }); </script> <style type="text/css"> .blue { color:blue; } </style> </head> <body> <h1 class="blue">标题 1</h1> <h2 >标题 2</h2> <p class="blue">这是一个段落。</p> <p>这是另外一个段落。</p> <br> <button>切换 class</button> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik

jQuery CSS 类

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]