ホームページ > ウェブフロントエンド > jsチュートリアル > 複数の異なる要素にクラス スタイルを追加する jQuery のメソッド_jquery

複数の異なる要素にクラス スタイルを追加する jQuery のメソッド_jquery

WBOY
リリース: 2016-05-16 16:07:23
オリジナル
1875 人が閲覧しました

この記事の例では、jQuery が複数の異なる要素にクラス スタイルを追加する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

jQuery は、addClass() メソッドを通じて、同じクラスを複数の異なる HTML 要素に同時に追加できます

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

<!DOCTYPE html>

<html>

<head>

<script src="js/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>Heading 1</h1>

<h2>Heading 2</h2>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<div>This is some important text!</div>

<br>

<button>Add classes to elements</button>

</body>

</html>

ログイン後にコピー

この記事が皆さんの jQuery プログラミングに役立つことを願っています。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート