1. HOME
  2. プログラミング
  3. jQuery
  4. 【入門】jQueryの書き方　〜 jQueryの基本 〜

【入門】jQueryの書き方　〜 jQueryの基本 〜

  • 2020.01.25
  • 2022.05.04
  • jQuery
【入門】jQueryの書き方　〜 jQueryの基本 〜

みなさんこんにちは、さくちゃんです。
本日は「jQueryの基本」について学んでいきます。
本日学ぶ内容は以下の2つです。

  • セレクタ・メソッド
  • jQueryの基本的な書き方

では早速やっていきましょう！
前回の記事をまだみていない方は、こちらを先にご覧ください。

【入門】jQueryの書き方　〜 jQueryとは？ 〜
目次

【jQueryの書き方】jQueryの基本

セレクタ・メソッド

jQueryは基本、”どのHTML要素に対して“、”どういった処理を行うか“と書いていきます。
この「どのHTML要素に対して」の部分を「セレクタ」、「どういった処理を行うか」の部分を「メソッド」と呼びます。
また、メソッドは繋げて書くこともできます。繋げて書くことを「メソッドチェーン」と呼ぶので、これも覚えておくといいでしょう。

jQueryの基本的な書き方

では実際に、jQueryの基本的な書き方についてみていきます。
前回使用したHTMLに書いていきますので、前回の記事をまだ見ていないかたはそちらをご覧ください。

【入門】jQueryの書き方　〜 jQueryとは？ 〜

jQueryの基本的な形式は下のように書きます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Hello World</title>
  </head>
      <body>　
　　　　　<p>Hello World</p>


         <script src="https://code.jquery.com/jquery-3.4.1.js"></script> 
　　　　　　
         <script>
          //jQueryの基本的な形式

          $(function(){
             //ここにセレクタ、メソッドを書いていく
          });
         
         </script>
      </body>
</html>

jQueryは、$(function( ){ } );と書いていき、{ }の中にセレクタ、メソッドを書いていきます。
例えば、<p>要素の色を赤色に変えるといった処理を書く場合は、下のように書いていきます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Hello World</title>
  </head>
      <body>　
　　　　　<p>Hello World</p>


         <script src="https://code.jquery.com/jquery-3.4.1.js"></script> 
　　　　　　　
          //jQueryの基本的な形式
      <script>
          $(function(){
             $('p').css('color', 'red');
          });
      </script>
      </body>
</html>

ここで言うセレクタは<p>要素なので$( ‘p’ )と書きます。次にメソッドは、色を赤色に変えるなので、.css( ‘color’, ‘red’ );と書きます。
ブラウザで確認すると<p>要素のHello Worldが赤色に変わります。

まとめ

今回は「セレクタ・メソッド」「jQueryの基本的な書き方」について見てきました。
次回は、「id」「クラス」を使った書き方についてやっていきます。

では本日は以上になります。

オススメの教材