kelas dan kaedah jQuery-CSS

jQuery - Dapatkan dan tetapkan kelas CSS

jQuery Manipulate CSS

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

addClass() - Tambah satu atau lebih kelas pada elemen yang dipilih

removeClass() - Alih keluar satu atau lebih kelas daripada elemen yang dipilih

toggleClass() - Tambah/padam operasi penukaran kelas untuk elemen yang dipilih

css() - Tetapkan atau kembalikan atribut gaya

Helaian gaya contoh

di bawah Helaian gaya akan digunakan untuk semua contoh pada halaman ini:

.important{
font-weight:bold;
font-size:xx-large;
}.
blue{
color:blue;
}

kaedah jQuery addClass()

Contoh berikut menunjukkan cara menambah 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,h2,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>静夜思</h1>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>这是另外一个段落。</p>
<div>这是一些重要的文本!</div>
<br>
<button>为元素添加 class</button>
</body>
</html>

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

<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>

Kaedah jQuery removeClass()

Contoh berikut menunjukkan cara memadamkan atribut kelas yang ditentukan dalam elemen berbeza:

<!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>静夜思</h1>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>这是另外一个段落。</p>
<div>这是一些重要的文本!</div>
<br>
<button>从元素中移除 class</button>
</body>
</html>

mempunyai kesan yang bertentangan daripada addclass.

kaedah jQuery toggleClass()

Fungsi penukaran atribut:

<!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 class="blue">标题 2</h2>
<p class="blue">这是一个段落。</p>
<p>这是另外一个段落。</p>
<br>
<button>切换 class</button>
</body>
</html>

kaedah jQuery css()

tetapan kaedah css() Atau mengembalikan satu atau lebih sifat gaya elemen yang dipilih.

Kembalikan sifat CSS

Untuk mengembalikan nilai sifat CSS yang ditentukan, sila gunakan sintaks berikut:

css("propertyname");

Tetapkan sifat CSS

Untuk menetapkan sifat CSS tertentu, sila gunakan sintaks berikut:

css("propertyname","value");

Tetapkan berbilang sifat CSS

Untuk menetapkan berbilang sifat CSS, sila gunakan sintaks berikut:

css({"propertyname":" value" ,"propertyname":"value",...});

<!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(){
    $("p").css({"background-color":"yellow","font-size":"200%"});
  });
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p style="background-color:#ff0000">这是一个例子</p>
<p style="background-color:#00ff00">这是一个例子</p>
<p style="background-color:#0000ff">这是一个例子</p>
<p>这是一个例子</p>
<button>为 p 元素设置多个样式</button>
</body>
</html>

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(){ $("p").css("background-color","yellow"); }); }); </script> </head> <body> <h2>这是一个标题</h2> <p style="background-color:#ff0000">我们是例子</p> <p style="background-color:#00ff00">我们是例子</p> <p style="background-color:#0000ff">我们是例子</p> <p>我们是例子</p> <button>设置 p 元素的 background-color </button> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik

kelas dan kaedah 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]