jQuery入門 (セレクタ編)

2019/06/20

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

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

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

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

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

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

 

基礎知識

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

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

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

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


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

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

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

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

  • 1.セレクタ
  • 2.メソッド
  • 3.イベント

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

 

1.セレクタ

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

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

 

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

タグ名 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のセレクタに関しては以上です。

 

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

Stack Overflow によると、よく使われているプログラミング言語はJavaScriptが7年連続で第1位だそうです。(2019年現在)わからない箇所だけネットで調べるやり方は知識が断片化するので、いつか、本を読んでJavaScriptの知識を体系的に整理したいと思っていました。この本はAmazonでも評価が高く、以前から気になっていた本です。図解と実行結果、短めのサンプルプログラムと見やすく解りやすかったのでおススメですね。「超」入門と書いてありますが、後半になると jQueryAjax の内容が出てきます。Ajaxの情報はネットでもあまりなかったので僕にとってはよかったです。

Amazonで詳細を見る

オススメ

 

本庄マサノリ

仕事でLaravelを使っています。気づいたことや新しい発見など情報を発信していきます。メールはこちら

 

-周辺知識