jQ_CSSを操作する

04CSSを操作する

css()メソッドを用いると簡単にCSSを変更することができます。

「Lesson6_jQuery」ファイルの中に新しく「css_index.html」を作成しましょう。

css_index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery CSS</title>
  </head>
  <body>
    <div id="box">赤文字</div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
      $('#box').css('color', 'red');
    </script>
  </body>
</html>

ブラウザを読み込むと赤文字になっているはずです。

デベロッパーツールで確認してみると、

しっかりとCSSが充てられていることが確認できました。

jQueryでメソッドチェーンする

先ほどの例ではメソッドを一つしか記述していませんでした。

jQueryだけでなくLaravelやJavaScriptでもある記述方法でメソッドチェーンというものがあり、メソッドを複数つなげて記述することができます。

新しく「Lesson6_jQuery」フォルダの中にmethod_chain.htmlを作成しましょう。

method_chain.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery chain</title>
  </head>
  <body>
    <div id="outer">
      親要素
      <div id="inner">子要素</div>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
      $('#outer').children().css({ 'background-color': 'blue' });
    </script>
  </body>
</html>

$(‘#outer’)でまずはidがouterの要素を取得しました。

そしてchildren()でouterの子要素であるinnerの要素を取得しています。

最後にcss({ ‘background-color’: ‘blue’ })で背景色に青色を設定しています。

今回は２つのメソッドでチェーンしましたが、実務では５つや６つなど複雑にチェーンされているケースが存在します。

そのときもあせらず左からそれぞれのメソッドが何をしているか確認していけば、複雑なコードも理解できるようになります。

HTML要素を操作する

JavaScriptでもあったようにjQueryでもHTML要素を操作することができます。

また新しく「Lesson6_jQuery」フォルダの中にHTMLファイルを新しく作成しその中にoperation.htmlを作成しましょう。

operation.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery html</title>
  </head>
  <body>
    <div id="box"></div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
      $('#box').append('<p>こんばんは</p>');
    </script>
  </body>
</html>

ブラウザを読み込むと「こんばんは」が表示されます。

デベロッパーツールで確認するとちゃんとpタグの中に「こんばんは」が格納されています。

また、削除も簡単に行うことができます。

$('#box').remove();

remove()メソッドを使うとidがboxの要素事態を削除できます。

Formからデータを受け取る

inputタグに入力された値はval()メソッドを使います。

このval()メソッドは今後多く見かけると思いますので使いこなせるようにしましょう。

「Lesson6_jQuery」フォルダの中に新しくform.htmlを作成しましょう。

form.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery form</title>
  </head>
  <body>
    <input type="text" id="text" value="サンプル" />
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
      console.log($('#text').val());
    </script>
  </body>
</html>

ブラウザを表示しコンソールを開いてみましょう。

コンソールにサンプルが表示されています。

val()メソッドでフォームのvalue属性を取得できます。また、val()メソッドの引数に値をいれることでvalue属性に値を設定できます。

例えば、

$('#text').val('サンプルテキスト');

これでidがtextのvalue属性にサンプルテキストを入れることができます。

04CSSを操作する

jQueryでメソッドチェーンする

HTML要素を操作する

Formからデータを受け取る

コメント

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル