さて、さっそくjQueryを使っていきましょう。
jQueryの基本形式は先ほども書きましたが

$(要素).メソッド();

という形になります。
メソッドはたくさんありますので少しずつ紹介していきますが、
まず要素（ノード）のcss（見た目）を変更することから始めましょう。

cssを設定・変更するメソッドは、その名の通りcssメソッドとなります。
cssメソッドは、
①　１項目のみ変更する
②　複数の項目を一括して変更する
それぞれで書き方が異なります。

（１）１項目変更するcssメソッド

１項目のみcssのプロパティを変更する場合のcssメソッドは

$(要素).css('プロパティ','値');

と書きます。値が数値のときは''で囲う必要はありません。

例として p要素の文字の色を赤(red)にしたい場合は以下のように記述します。
(‘p’).css(‘color’, ‘red’);

では、前項でダウンロードした、フォルダのindex.htmlを修正して、このcssメソッドを実行してみましょう。
スクリプトタグの中を

$(function(){
    $('p').css('color', 'blue');
});

と記述して保存してください。
その後index.htmlを開いてください。
pタグで囲まれたところが青くなっていますでしょうか。


上の画像のように、pタグの部分の色が赤くなっていると正解です。赤くなっていないとどこかが違いますので、つづりなどを確認してください。

（２）複数の項目を一括して変更する

先程は、colorプロパティを１つだけ変更しましたが、複数のプロパティを一括して変更したい場合があります。
そのときには、以下のような記述を行います。

$(要素).css({
プロパティ:  値,
プロパティ:  値,
…
プロパティ:  値
});

プロパティの書き方については、２種類あります。

①クォーテーションでくくる書き方
②クォーテーションでくくらない書き方

①クォーテーションでくくる書き方は以下のようになります。

    $('h1').css({
        'color': 'red',
        'font-size': '24px',
    });

②クォーテーションでくくらない書き方

    $('h1').css({
        color : 'red',
        fontSize : '24px',
    });

違いがわかりますか？
①の場合は、CSS表記と全く同じ書き方で大丈夫なのですが
②の場合、「-（ハイフン）」がプロパティ名にないものは、そのままの書き方、「-（ハイフン）」がプロパティ名にあるものは、ハイフンを取り除きハイフンの直後の文字を小文字から大文字に変えて表現します。どちらを使ってもいいと思いますが、表現の仕方は統一しておいたほうがいいでしょう。

さて、ここで、見出し１のcssを「フォントの大きさを24ピクセル、文字色を緑、背景色を黄色、境界線（ボーダー）を実線2ピクセルで青色」として設定してみましょう。
CSSファイルに設定する場合は、

h1 {
  font-size : 24px;
  color: green;
  background-color: yellow;
  border: 2px solid blue;
}

このような書き方になりますので、これに準じて設定します。
 

$(function(){
    $('p').css('color', 'red');
// ここまでは記述済み

    $('h1').css({
        'font-size': '24px',
        'color':  'green',
        'background-color': 'yellow',
        'border': '2px solid blue'
    });
});

もしくは、
 

$(function(){
    $('p').css('color', 'red');
// ここまでは記述済み

    $('h1').css({
        fontSize : '24px',
        color :  'green',
        backgroundColor : 'yellow',
        border : '2px solid blue'
    });
});

と記述します。

見出し１の表示が下の図のように、指定したとおりに表示されたかどうかをぜひ確認してください。


メソッドについてはほかにもたくさんありますが、まずはcssを変更するメソッドのみを学び、ここで、改めてDOMの指定方法を次項で説明していきます。