（jQueryの学習）要素の指定（セレクタ）あれこれ ＜導入部～基本セレクタ＞

jQueryにて要素を指定する方法を整理します。

まず、jQueryにおいて、
要素を指定するためには「セレクタ」というものを使います。

このセレクタを使うと、
htmlファイル全体や、htmlファイル中のdivタグだけを読み込んだり、
さらにはdivタグの中でも、指定したクラス(class)などの属性で絞り込んだりできるようになります。

これまでの学習の中ではサラッと流してしまっていましたが、
今回はもう少し掘り下げて学んでみたいと思います。

◆セレクタとは

セレクタはjQueryで操作したい要素を指定するためのものです。
実際にどこに書いてあるものかというと、$()の中の文を指します。
下の例文だと、「#selecter」の部分に該当します。

$("#selecter").css(...);

●要素の指定方法（基本）

【サンプルソース】

1.全ての要素を指定する

  $("*")

全ての要素が対象となります。

＜＜＜サンプルはこちら＞＞＞

2.[要素セレクタ]HTMLタグの要素名で指定する

  $("ul")

指定した要素に該当した部分が対象となります。

＜＜＜サンプルはこちら＞＞＞

3.[IDセレクタ]ID属性が指定した値と一致する要素を指定する

  $("#list-item1")

指定したIDのに該当した部分が対象となります。（最初に該当した部分のみ）

＜＜＜サンプルはこちら＞＞＞

4.[クラスセレクタ]クラス名が指定した値と一致する要素を指定する

  $(".unordered-list-class")

指定したクラスに該当した部分が対象となります。

＜＜＜サンプルはこちら＞＞＞

5.[グループセレクタ]指定したセレクタにマッチする要素を指定する（OR）

  $("h4, #list-item2")  // カンマで区切る

カンマで区切ったセレクタ条件のいずれかに一致した要素が対象となります。

＜＜＜サンプルはこちら＞＞＞

いかがでしょうか？
基本的なセレクタの使い方を学びました。
次回は階層を意識したセレクタを学びます。

それでは、また。

• Tweet
• Share
• Share
• Share
• Share