【jQuery入門】セレクタで要素を取得する方法

前回の記事で、jQueryについての基本を紹介しました。

• $(セレクタ)で、HTML要素を取得する
• $(セレクタ).メソッド()でメソッドを実行し、取得した要素に対する操作をする
• 必要に応じて$(セレクタ).click(function(){ })等で、イベントを指定して上記処理を実行させる

今回は、$(セレクタ)の部分を紹介します。

前回記事も是非ご覧ください！！

https://katsu-dev.netlify.app/blog/web/jquery-basic/

本題に入る前に

jQueryはJavaScriptのコードの書き方をあまり意識せずとも使えるようにしてくれます。

当jQuery入門編シリーズでも、なるべく初学者向けに分かりやすく書いていきたいと思いますが、最低限、JavaScriptの次の概念を理解しなければなりません。

変数

変数は、データを入れる事のできる箱です。var 変数名で任意の名前を付けて宣言し、変数名 = データとすることで、データを入れることができます。

var 変数名 = データのように、変数の宣言と同時にデータを初期化することもできます。

変数名は英字、数字、アンダースコア_、ドル記号$等を使用できますが、一文字目は数字以外で始めなければなりません。

変数の宣言にはvar以外にletやconstもありますが、とりあえずここではvarで進めます。

// 変数hogeを宣言し、文字列"fuga"を入れる
var hoge = "fuga"

// 関数piyoの引数に変数hogeを指定して実行する
piyo(hoge)

データ型

変数に入れたり、関数の引数に指定したりするデータには型があり、代表的な種類は次になります。

※他のプログラミング言語では変数の宣言時に型を指定するものがありますが、JavaScriptでは変数に入れる値によって型の決まる動的型付けとなっています。

• 数値型 … 数値をそのまま入れる

// 変数numを宣言し、数値123を入れる
var num = 123

• 文字列型 … クオート(""または'')で囲む

// 変数strを宣言し、文字列"hoge"を入れる
var str = "hoge"

• 論理型 … true,falseが入る

// 変数isHoge、isFugaを宣言し、true、falseを入れる
var isHoge = true
var isFuga = false

• オブジェクト型 … {プロパティ: 値, プロパティ:値, ...}の形でグループ化されたものを入れる。プロパティは任意の英数字で指定でき、値には数値型、文字列型などが入る

// 変数objを宣言し、オブジェクトを入れる
var obj = {
  name: "John",
  age: 25,
  isAdult: true
}

関数

関数は再利用可能な処理のまとまりです。関数は入力（引数）を受け取り、処理を実行し、結果を返すことができます。

function 関数名(引数){処理内容}の形で関数を定義し、関数名(引数)とすると定義した関数を実行できます。

後から出てくるイベント処理に直接渡す関数については、名前を付けるのを省略してfunction(引数){処理内容}とすることができます。

// 関数greetの定義
function greet(name) {
  // ブラウザのコンソールにログ出力を行う
  console.log("Hello, " + name + "!")
}

// 関数greetを引数に"Alice"を指定し呼び出し
greet("Alice") // 結果: Hello, Alice!

// 関数greetを引数に"Bob"を指定し呼び出し
greet("Bob") // 結果: Hello, Bob!

要素の取得

ここから本題にもどります。

HTML要素の取得は$()で行うと紹介しましたが、この括弧内に入るものは大まかに分けると以下になります。

• CSSと同じセレクタの文字列
• jQuery独自のセレクタの文字列
• 要素を直接入れる

また、jQuery側から新規に要素を追加する目的で以下を入れることもできます。

• HTML要素の文字列

ちなみに、この$()は、HTML要素をjQueryオブジェクトに変換して返すものです。

jQueryオブジェクトに変換すると、要素.textContent等のHTML要素を操作するDOM APIを簡潔な構文で使えるようになります。

※DOM API ... JavascriptからHTML要素を操作したりするためのインターフェイス

CSSと同じセレクタ

CSSと同じセレクタで要素を取得できます。

セレクタで複数の要素が該当すれば、その全ての要素を取得します。

おさらいまでに、いくつかのセレクタを載せておきます。

// 要素名を指定
$("p")

// クラス名を指定
$(".title")

// ID名を指定
$("#service")

// 子孫要素を指定
$(".main p")

// 直下の子要素を指定
$(".header > h1")

// 属性を指定
$("a[href='#service']")  // 完全一致
$("a[href^='#']")  // 前方一致
$("a[href$='.com']")  // 後方一致
$("a[href*='www.']")  // 部分一致

※属性セレクタのように、セレクタの中でもクォートを使用したい場合、文字列型を表す為に""、その中で''等とする事ができます。

CSSのセレクタについてはこちらもご覧ください！

【CSS入門】セレクタでスタイルをあてる要素を選択しよう | KATSU LOG

スタイルをあてる要素を選択する為のセレクタの記述方法について紹介します

https://katsu-dev.netlify.app/blog/web/css-selector/

jQuery独自のセレクタ

CSSの標準セレクタの他にも、jQueryで独自に用意しているセレクタがあり、疑似クラス:nth-of-type()等と同等の機能を簡潔に書く事ができるものがあります。

こちらもセレクタで複数の要素が該当すれば、その全ての要素を取得します。

先頭の要素、末尾の要素

セレクタの後ろに:first、:lastをそれぞれ付け加えると、セレクタで指定した兄弟要素の先頭・末尾を取得できます。

// liの中で先頭の要素
$('li:first')

// liの中で末尾の要素
$('li:last')

n番目の要素、n番目より前・後の要素

セレクタの後ろに

• :eq(n番目)で兄弟要素のn番目
• :lt(n番目)でn番目を含まない、n番目より前の兄弟要素
• :gt(n番目)でn番目を含まない、n番目より後の兄弟要素

を取得できます。

但し、これらは兄弟要素の先頭を0として数え始めるので注意！

// liの中で2番目の要素
$('li:eq(2)')

// liの中で2番目より前の要素
$('li:lt(2)')

// liの中で2番目より後の要素
$('li:gt(2)')

偶数番目、奇数番目の要素

セレクターの後に:even、:oddと付け加えると、それぞれ兄弟要素の偶数番目、奇数番目の要素を取得できます。

但し、これらは兄弟要素の先頭を0として数え始めるので注意！

// liで偶数番目の要素
$('li:even')

// liで奇数番目の要素
$('li:odd')

DOMを直接指定する

document等のDOMを直接$()とすることでも、jQueryオブジェクトへ変換する事ができます。

documentをjQueryオブジェクト化

documentはHTML文書の操作ができるJavaScriptのオブジェクトです。

jQueryオブジェクト化したdocumentは主にHTML要素の読込完了イベントで使用します。

// ※documentはJavaScriptでのグローバルオブジェクトなので、""や''を付けないことに注意
$(document).ready(function(){
  // HTMLの読込が完了したら実行する処理を記述
})

これを書かず、尚且つ読込む<script>の属性にdeferも付けないと、全てのHTML要素の読込完了前にスクリプトが実行されてしまい、操作すべきHTML要素が無く、意図した動作とならない場合があります。

尚、この構文は、次のように書き換える事ができます。

$(function () {
  // HTMLの読込が完了したら実行する処理を記述
});

今後コーディングするjQueryの.jsファイルは、外側をこれで囲って記述しましょう。

windowをjQueryオブジェクト化

windowはブラウザそのものを操作したりすることができるJavaScriptのオブジェクトです。

jQueryオブジェクト化したwindowは、主にブラウザのスクロールイベントの指定に使います。

// ※windowはJavaScriptでのグローバルオブジェクトなので、""や''を付けないことに注意
$(function () {
  $(window).scroll(function(){    // ブラウザのスクロール毎に実行する処理を記述
  });
});

後程、TOPへ戻るボタン等で使用します。

thisをjQueryオブジェクト化

click等のイベントに指定する関数内では、thisを使用することができますが、これはイベントが発生した要素自身を指すものです。

イベント処理内で、その要素に対する操作が必要な場合はthisをjQueryオブジェクト化してあげる事で、再びセレクタで指定せずに要素を使用する事ができます。

// IDがbtnの要素のクリックイベントの処理を追加
$("#btn").click(function(){  // 自分自身の背景色をピンクにする
  $(this).css("background","pink")
});

HTML要素を作成する

タグを含む文字列を$()へ渡すと要素の取得ではなく、新しい要素(jQueryオブジェクト)を作成します。

作成した要素はこの後紹介するメソッドでHTML側へ追加することができます。

// 開始タグのみ指定してdiv要素を作成し、変数element1へ入れる
var element1 = $("<div>")

// HTML要素全体を記述して要素を作成し、変数element2へ入れる
var element2 = $("<p>hogehoge</p>");

まとめ

$()による要素の取得では、CSSと同じセレクタも使用できるので、WEB制作をする人にはかなり優しい設計ですね。

次回は取得した要素で使用するメソッドについて紹介します！

次の記事
取得した要素を操作する、メソッドについて紹介します！

【jQuery入門】よく使うメソッドとその書き方 | KATSU LOG

よく使うjQueryのメソッドをコード例と共に紹介します。

https://katsu-dev.netlify.app/blog/web/jquery-method/