【初級編3】jQuery 必須事項「セレクタ」の基本理解

javascript
jQuery セレクタ

前回記事ではjQueryの大まかな内容を記載いたしました。

jQueryをまず触ってみる

今回はjQueryに必要な三つの項目のうち、まずはじめに覚える必要がある「セレクタ」について説明いたします。

jQuery セレクタ(selector)とは

セレクタ 階層構造の理解

HTMLの文書構造の中には

<html> <head>
</head>
<body>
<div class="main">
 <h1>〜ここにタイトル〜</h1>
 <p class="description">〜ここに本文〜</p>
 <p class="assistance">〜補助文〜</p>
</div>
</body>
</html>

というような構造で body の中に div があったり、h1 / pのタグが存在してたりします。

このHTML文章構造にclassをつけることによってCSSで装飾することが出来ます。

.main h1 {
    line-height: 1.25;
    font-weight: bold;
    font-size: 26px;
    margin: 16px 0;
}
.main p.description{
    margin-top: 1.4em;
    margin-bottom: 1.4em;
    color: red;
}

上記CSSの概念は main というクラスの中の h1 のみに「文字サイズ」「太さ」などの装飾を行なっています。
main p.description については main という クラスの配下には複数の pタグ が存在しています。今回は <p class=”description>〜〜</p> だけを装飾したいために main p.descriptionという風に記載しています。

これらのHTML文章を簡単にしたものを以下に記載いたします。

- html
  - head
  - body
  - div.main
    - h1
    - p.description
    - p.assistance

上記が今回サンプルで記載したHTML文章を階層化表示(yamlと言います)したもので、このようにツリー向上になっていることを理解してください。
この構造をセレクタとして覚えてください。

jQueryでのセレクタ指定方法

jQueryではセレクタの指定方法にお作法があります。

<html> <head>
</head>
<body>
<div class="main">
 <h1>〜ここにタイトル〜</h1>
 <p class="description">〜ここに本文〜</p>
 <p class="assistance">〜補助文〜</p>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
$('div.main').css("color","red");
</script>
</body>
</html>

まずは先ほど掲載したHTML文章にjQueryを記載します。

ここにあるHTMLをコピーして、htmlとして保存してみてください。
CSSで装飾していないはずなのに全部が赤字になっていると思います。

表示されたHTML

ではこのコードを書き換え〜ここに本文〜のみに適用したいと思います。<script></script>の中岳を変更してください

<script> $('div.main p.description').css("color","red"); </script>

こうすると、divタグ(クラスはmain)の下のpタグ(クラスはdescription)を指定して、colorを赤にしなさいという命令が出来ます。

jQueryのセレクタ指定方法をみてください。
$(‘div.main p.description’) これがセレクタ指定で上記に書いてある通り、「divタグ(クラスはmain)の下のpタグ(クラスはdescription)」を指定表現となっています。

タグ:<div>は$(‘div’)と表現
タグ:<div class=”main”>は$(‘div.main’)と表現
今回は例題にはありませんでしたが、classではなくidを使った場合は
タグ:<div id=”main”> は$(‘div#main’) と#で表現します。

セレクタのおさらい

セレクタ構造おさらい

セレクタの指定方法は以下の通りを基礎として覚えていきましょう。

セレクタ知識
  • HTMLタグの表現は$(‘タグ名’)
  • HTMLタグとclassの表現は$(‘タグ名.クラス名’)
  • HTMLタグとidの表現は$(‘タグ名#id名’)
  • さらに階層化された場合の表現は$(‘タグ名 その下のタグ名’)

このようにセレクタの指定方法を階層化して覚えることで楽〜に指定することが出来ます。

まとめ

前の記事で紹介したjQuery必要知識の中のセレクタに今回チャレンジしました。

jQuery必要知識
  • セレクタ
  • イベント
  • 要素の変更

次のブログ記事ではイベントについて記事を書いていきたいと思います。

Ads オススメの勉強サイト

米国シリコンバレー発祥、世界最大級のオンライン学習プラットフォーム!

最短で技術を身に付けたい場合は有料ではありますが、実績のあるUdemyがオススメです!

コメント

タイトルとURLをコピーしました