操作要素のCSSスタイル

要素セットのclass nameを追加または除去
1.addClass()メソッドの使用
addClass(names)は、namesが指定した1つ以上のclass nameをwrapped setに追加します.複数のnameがある場合は、スペースで区切って、要するにnamesは文字列です.
元のwrapped setを返してJQueryチェーン操作を行います.
注意:追加したスタイル宣言に重複宣言がある場合、優先度が高いのは誰ですか?CSSの重み付けを参照してください.
2.removeClass()メソッドの使用
removeClass(names)は、namesが指定した1つ以上のclass nameを除去します.複数のnamesがある場合は、スペースで区切ります.
元のwrapped setを返してJQueryチェーン操作を行います.
3.toggleClass()メソッドの使用
toggleClass(name)今回は1つのclass nameしかパラメータとして使用できません.classがすでに存在する場合は、削除します.なければ追加します.
元のwrapped setを返してJQueryチェーン操作を行います.
CSSスタイルの取得または設定
1.css(name,value)メソッドの使用
この方法は、wrapped setの各要素にcssスタイルを設定するために使用されます.
nameはcssスタイルのプロパティ名です.
valueは(string|number|function)であってもよく、前節で述べたattr(name,value)メソッドと同様に、valueがfunctionであればfunctionのパラメータに渡されるときの要素のwrappsed setのシーケンス番号であり、function内部ではthisを使用して操作中のJavascript DOM要素(十分強い)を指す.functionの戻り値は、設定するcss属性の値です.
例:

$('div').css('font-size', function(n){
        return (n+1)+'em';


    });

ページのdivを表示される順にフォントサイズを大きくします.
2.css(properties)メソッドの使用
パラメータpropertiesはobjectで、class属性名と値ペアが定義されています.これにより一度に複数のcss属性の設定が可能になります.
JQueryチェーンの操作を容易にするためにwrapped setが返されます.
次のようになります.

$('div:eq(0)').css({

    'font-size' : '2em',

    'color' : '#cc00ff'


}); 

憂鬱なことに、このObjectの属性名は引用符で文字列として引き起こさなければならない.そうしないとブラウザに認識されないので、attr()のような方法は必要ない.
同様にObjectにfunctionを含めることもできます.

    $('div').css({
        'font-size': function(n)
            {
                return (n+2) + 'em';
            }


        });

3.css(name)メソッドの使用
このメソッドはnameで指定されたcss属性の値を返し、返される値は文字列であるため、変換する必要がある場合があります.この方法では、wrapped setの最初の要素の指定したcss属性値しか返されません.
例えば:$('#firstDiv').css('font-size')は、文字列'16 PX'を返す可能性があります.
ちなみに、指定した要素のclass名(指定した場合)を取得するには、Javascript標準メソッドを使用します.
$('#firstDiv')[0].className
4.width()とheight()メソッドの使用
1)パラメータを持たないwidth()メソッドとheight()メソッドは、文字列から変換することなくwrapped setの最初の要素の幅と高さを返します.
2)パラメータ付きwitdh(value)とheight(value)はwrapped setの各要素にvalueで表される幅を指定する.wrapped setを返します.
valueの値はnumberまたは文字列であってもよい.numberの場合、単位はpxです.
例えば:$('div').width(600);   //600px
$('div') .width('400mm');//400mm
hasClass(name)メソッド
wrapped setにnameで指定されたclass nameが含まれている要素があるかどうかを判断します.nameは、スペースで区切られた複数のclass namesからなる文字列であってもよいです.true|falseを返します.
注意:class nameとclass property nameの違い:
--class nameはstyleを定義するcssの名前を指し、1つのstyle定義にはclass propertyが多く含まれる.たとえばownStyleというスタイルを定義します.
--class property nameとは、css仕様のcss属性名を指します.例えばfont-size、colorなどです.
要素のすべてのclass namesを取得するには、attr('className')メソッドまたはJavascript DOMプロパティclassNameを使用します.注意返される文字列を分割するときは、まず文字列が空であるか否かを判断します.次のようになります.

$.fn.getClassNames = function() {
    if (name = this.attr("className")) {
        return name.split(" ");
    }
    else {
        return [];
    }
};

このコードは、要素のclass name配列を得るための拡張関数getClassName()をJQueryに追加します.