THE HAM MEDIA BLOG

jQuer基礎:class関連の勉強

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
javascript
DOM
class

class関連の勉強

今回はclass関連。
classをつけたりとったりすることについて勉強。

個人的にこの点んについては比較的覚えているのだけど、
復習というような感じですすめます。

addClass( class )

これはクラスを付け加える関数。
ここのブログでは画像へリンクされていた場合、
自動的にlightboxのクラスを付け加えたりする機能をつけているが、
それもこれを使っている。

■サンプルソース

$(document).ready(function(){
    $("input.samp1").click(function(){
        $("p.add01 span").addClass("addSamp01");
    });
});

■サンプル1 HTMLソース

<p class="add01">
<span>ここにclassが付加されて変化します</span>
</p>
<input type="button"
 value="クリックでclass付加" class="samp1" />

■サンプル1 CSSソース

span.addSamp01{
    color: #ff00ff;
    font-size:133%;
    font-weight: bold;
}

classがついたらこのCSSが適応されるようにしてみます。

■サンプル1 プレビュー

ここにclassが付加されて変化します

クリックすると、spanにclassが付加され、
あらかじめ設定しておいたCSSが適応されるようになっています。

これのメリットは、CSSが付加されるだけなので、
装飾自体はあらかじめCSSに記述しておけば、
自動的に適応される事です。

JavaScriptでCSSを制御するよりもメンテナンスはしやすいと思います。

removeClass( class )

これはclassを取り除く関数。
あらかじめclassをつけておいたのを取り除く事ができるのです。

■サンプルソース

$(document).ready(function(){
    $("input.samp2").click(function(){
        $("p.add02 span").removeClass("addSamp02");
    });
});

■サンプル2 HTMLソース

<p class="add02">
<span class="removeSamp02">ここのclassがとれて変化します</span>
</p>
<input type="button"
 value="クリックでclassを除去" class="samp2" />

■サンプル2 CSSソース

span.removeSamp02{
    color: #ff5500;
    font-size:133%;
    font-weight: bold;
}

classがついたらこのCSSが適応されるようにしてみます。

■サンプル2 プレビュー

ここのclassがとれて変化します

先ほどのクラスを加えたのとは違い、
クラスを抜くだけで、CSSの適応をなくすこともできるので、
これもメンテナンス制に長けていると思います。

toggleClass( class )

これはclassをとったりつけたりできる関数です。

■サンプルソース

$(document).ready(function(){
    $("input.samp3").click(function(){
        $("p.add03 span").toggleClass("addSamp03");
    }).toggle(
		function(){$(this).val("クリックでclass除去");
		},function(){$(this).val("クリックでclassを付加");
		});
});

このサンプルはinputのvalueの中身も変化するように作りました。

■サンプル3 HTMLソース

<p class="add03">
<span>ここのclassがついたりとれたりします</span>
</p>
<input type="button"
 value="クリックでclassを付加" class="samp3" />

■サンプル3 CSSソース

span.addSamp03{
    color: #7f7fff;
    font-size:133%;
    font-weight: bold;
}

classがついたらこのCSSが適応されるようにしてみます。

■サンプル3 プレビュー

ここのclassがついたりとれたりします

これはaddClassもremoveClassもどちらの効果もあるのがわかると思います。
前の二つのサンプルとは違って、一度だけ適応となるのではなく、
classを加えたりとったりを繰り返します。
つけたりとったりしたいときはこれを利用しましょう。

※ hasClass( class )

これは、クラスを持っているかどうかの判定だと思うのですが、
今回はサンプルが浮かばなかったために割愛。

というより、もしこれが判定だとして、使うときってくるのでしょうか?

$(.class)・・・でいいような気がします。

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。