jQuery入門 (セレクタ編)

Laravel ではデフォルトで public ディレクトリ以下にコンパイル済みの Bootstrap があります。

なので、フロントエンドで Bootstrap を利用する人は多いかもしれません。

Bootstrap を使用するには、jQuery を読み込む必要があります。

せっかく jQuery を読み込むなら、入力フォームのバリデーションとか、検索フォームとかにも利用したくなりませんか？

ただ、Laravel は勉強することがたくさんあるので、jQuery まで手が回らなかったりします。

今回は jQuery についてのエントリーです。

 

基礎知識

jQuery とは、JavaScript をより楽に書けるようにするためのライブラリです。

ライブラリというのは、よく使う機能をまとめたファイルのことです。

jQuery を使うには同サーバ内（ローカル）から読み込む方法とCDNから読み込む方法があります。

書式は以下のようになります。

# 書式１
$(' セレクタ ').メソッド( 引数 );

# 書式２
$(' セレクタ ').メソッド( イベント, 関数 );

# 書式３
$(' セレクタ ').イベント名(function(){
  //イベント発生時に実行したい処理
});

主な構成要素は以下になります。

• １．セレクタ
• ２．メソッド
• ３．イベント

今回はこれらの中でもセレクタに絞って解説していきます。

 

１．セレクタ

どの要素に処理を行うかは $(' セレクタ ') という形で指定します。

セレクタの指定方法は以下のような記述ができます。

 

要素を指定する方法(基本)

タグ名 or クラス名 or ID による指定ができます。

$("form"); // タグ名="form"
$(".className"); // クラス名="className"
$("#formId"); // ID="formId"

 

複数条件の指定

区切りなしでAND、カンマ区切りでOR。

 
AND指定

$("ul.listClass1"); // タグ名="ul" and クラス名="listClass1"
$("ul#listId1"); // タグ名="ul" and ID="listId1"

 
OR指定

$("div,.listClass1"); // タグ名="div" and クラス名="listClass1"
$("ul,#divId1"); // タグ名="ul" and ID="divId1"

 

階層関係の指定

親-子関係

$("#root > .node"); // 「ID="root"」を親に持つ「クラス名="node"」
$(".node").parent("root"); // 「クラス名="node"」の親のうち「ID="root"」の要素

 
先祖-子孫関係

$("#root .node"); // 「ID="root"」を先祖に持つ「クラス名="node"」
$(".node").parents("#root"); // 「クラス名="node"」の先祖のうち「ID="root"」の要素

 

フィルターを使った指定方法

 
属性

$('input[name]'); // タグ名="input and name属性を持つ"

 
選択状態

$('input[type="checkbox"]:checked'); // 選択済チェックボックス
$('input[type="radio"]:checked'); // 選択済ラジオボタン
$('select > option:selected'); // リストボックス・コンボボックス内の選択済み要素

 
このようにCSSのような指定ができるのが特徴です。

CSSを普段触っているデザイナーの方にとったらわかりやすいですよね。

jQueryのセレクタに関しては以上です。

 

 

-周辺知識