Developers Tech Notes

（jQueryの学習）イベント：動的に追加された要素にイベントを埋め込む

本日は、
動的に追加された要素にイベントを埋め込む方法を考えます。

動的に追加・・・とは、
アンケートを例にすると、
ある選択肢の回答結果によって質問内容を切り替えるような画面（画面遷移はしない）で、
それぞれの質問にイベントを埋め込みたいときが該当します。

簡単に書くと、
　最初に表示されたボタン（要素）ではなく、
　追加されたボタン（要素）にもイベントを埋め込みたい
ときに使います。

ボタンを押すイベントは「clickイベント」でハンドリングします。
こんな感じで実装しますよね？

$(function() {
  $("input").click(function(){
    // ・・・clickイベント発生時の処理・・・
  });
});

実はこのイベントは静的な要素にしか反応しません。
つまり、最初に表示されたボタン（要素）にしか反応しないのです。

では、いつものように試してみたいと思います。
『ボタンを押すと、↓の領域にテスト用のボタンが追加されます。』というボタンを押すと、
その言葉通りにボタンが増殖します。
この増えたボタンと、『最初からあったボタン』を押し比べてみてください。

◆イベントの静的ハンドリングの実装例

$(function() {
  $("ボタン要素").click(function(eo){
    $("要素-ログ出力").append("～ログ出力～");
  });
});

・・・いかがでしょうか？
『最初からあったボタン』のみclickイベントが反応しています。
（反応するとログを出力する動きにしています）

この増えたボタンにどうしてもイベントを埋め込みたい！！
・・・という方は、前回のエントリーにも登場した「.on()」を使ってください。

前回のエントリーでは、
１つの要素に複数のイベントが埋め込められますとサラッと触れただけですが、
今回はもう少し深く（でも、サラッと・・・）見てみたいと思います。

★onメソッドの構文

　[jQueryオブジェクト].on(イベント, セレクタ, イベント発生時の処理)
　【引数】
　　・イベント：イベントの名称を指定します（clickとかdblclickとか）
　　・セレクタ：[jQueryオブジェクト]から埋め込む対象の要素をさらに絞り込むときに使います（無くてもOK）
　　・イベント発生時の処理：その名の通りです

注意点としては、
要素に対して動的にイベントを埋め込む必要があるため、
イベント発生ごとにhtml全体をチェックすることになります。
結果、処理負荷が掛かり、レスポンスに影響を及ぼす場合があります。

それでは、先に提示したサンプルを「.on()」に置き換えてみましょう。

◆イベントの動的ハンドリングの実装例

$(function() {
  $("body").on("click", "ボタン要素", function(eo){
    $("要素-ログ出力").append("～ログ出力～");
  });
});

いかがでしょうか？
追加したボタンにもclickイベントが反応するようになりました。

今回は最初の[jQueryオブジェクト]を「bodyタグ」にしましたが、
余計な要素に反応しても困るので、
可能であればもう少し反応する範囲を狭めた方が良いと思います。

それでは、また。

2015年7月1日水曜日

（jQueryの学習）イベント：１つの要素に複数のイベントを埋め込む

本日は、
１つの要素に対して、複数のイベントを埋め込む方法を考えます。

例えば・・・
ターゲットとなる要素を、
クリックしてもダブルクリックしても、ハンドリングしたいとします。
このような場合は↓のように実装すれば問題ありません。

$(function() {
  $("input").click(function(){
    // ・・・clickイベント発生後の処理・・・
  });
  $("input").dblclick(function(){
    // ・・・dblclickイベント発生後の処理・・・
  });
});

・・・が、コードが冗長になってしまいますね。

このようなときに便利なのが「.on()」です。
指定の要素に対して任意のイベントを組み込むことができるようになります。

基本的な使い方は以下の通りです。

$(function() {
  $("input").on('***', function(){  // ←1個以上の組み込みたいイベントを指定
    // ・・・組み込んだイベント発生後の処理・・・
  });
});

先ほどのclickイベントとdblclickイベントの例では、以下のように記述します。

$(function() {
  $("input").on('click dblclick', function(){  // ←半角スペースで区切る
    // ・・・clickイベントとdblclickイベント発生後の処理・・・
  });
});

これではclickイベントとdblclickイベントに対して、
同じ処理を行うことになってしまいますね。
もし、clickイベントとdblclickイベントで、
それぞれ別の処理を実行したいのであれば、次のようにします。

$(function() {
  $("input").on('click dblclick', function(eo){  // ←イベントオブジェクト[eo]を追記
    if (eo.type == "click") {  // ←イベントオブジェクトから発生したイベントを取り出す
      // ・・・clickイベント発生後の処理・・・
    } else {
      // ・・・dblclickイベント発生後の処理・・・
    }
  });
});

もう少し応用してみます。
マウスのカーソルが「当たってから外れるまで」の間に何かしらの処理を実行します。
※今回の例では、任意の領域を消したり出したりしてます。

ここまでのやり方では、下のような感じでしょうか。

◆マウスオーバー⇒アウトの実装例（その１）

$(function() {
  $("要素").on('mouseover mouseleave', function(eo){
    if (eo.type == "mouseover") {
      $(this).fadeOut();
    } else {
      $(this).fadeIn();
    }
  });
});

ここにマウスのカーソルを当ててください

わざわざ発生したイベントによって処理を振り分けるのは、
ちょっとややこしい印象がありますね。

これをもっとシンプルにしてみます。

◆マウスオーバー⇒アウトの実装例（その２）

$(function() {
  $("要素").mouseover(function(){
    $(this).fadeOut();
  }).mouseleave(function(){
    $(this).fadeIn();
  });
});

ここにマウスのカーソルを当ててください

このようにイベントを繋いで書くことで、よりシンプルにできますね。

さらにmouseoverとmouseleaveを使うなら、hoverを使えば一発です。

◆マウスオーバー⇒アウトの実装例（ホバーを使う）（その３）

$(function() {
  $("要素").hover(function(){
    $(this).fadeOut();
  },function(){
    $(this).fadeIn();
  });
});

ここにマウスのカーソルを当ててください

hoverイベントは、
カンマの前が「マウスオーバーの処理」で、
カンマの後が「マウスアウトの処理」で構成されてます。

いかがでしょうか？
要素にイベントを埋め込む方法一つ取ってもいろんな実現方法が存在します。
ケース・バイ・ケースで柔軟に対応できるようになれると良いでしょう。

それでは、また。

2015年6月29日月曜日

（jQueryの学習）イベント：要素にイベントを埋め込む（その４）

本日は要素に組み込めるイベントの最終回です。

18.resize

説明	windowの大きさが変更されたタイミングで発生
サンプルソース	$(function() { // ↓他と異なり、windowでresizeイベントが捕捉できる $(window).resize(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源	（ブラウザのサイズを変えてください）
確認エリア	※イベントが発生するとログが出力されます。

19.scroll

説明	ドキュメントがスクロールしたタイミングで発生
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("textarea").scroll(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源	スクロールバーを押してください＊＊＊＊＊＊＊＊＊
確認エリア	※イベントが発生するとログが出力されます。

20.select

説明	type属性値が"text"のinput要素、 textarea要素のテキストが選択されたタイミングで発生
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("input").select(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

21.submit

説明	フォームが送信されたタイミングで発生
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("input").blur(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

最後は
　resize、scroll、select、submit
の4本を学びました。

scrollイベントは、
今回、textarea要素で確認しましたが、
スクロールバーが出るような要素（div、windowなど）でも発生します。

また、resizeイベントは、
その２で学んだloadイベントと同じく、
window要素に対して働く点が他のイベントと異なります。

それでは、また。

2015年6月26日金曜日

（jQueryの学習）イベント：要素にイベントを埋め込む（その３）

本日も要素に組み込めるイベントの続きです。

11.mousedown

説明	要素上でマウスが押されたタイミングで発生
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("input").mousedown(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

12.mouseenter

説明	マウスが要素に入ったタイミングで発生（子孫要素に入ったタイミングでは発生しない）
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("input").mouseenter(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

13.mouseleave

説明	マウスが要素から外れたタイミングで発生（子孫要素から外れたタイミングでは発生しない）
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("input").mouseleave(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

14.mousemove

説明	要素上でマウスが移動しているタイミングで発生
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("input").mousemove(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

15.mouseout

説明	マウスが要素から外れたタイミングで発生（子要素でも発生）
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("input").mouseout(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

16.mouseover

説明	マウスが要素に入ったタイミングで発生（子要素でも発生）
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("input").mouseover(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

17.mouseup

説明	要素上でマウスが押され、上がったタイミングで発生
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("input").mouseup(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

本日は
　mousedown、mouseenter、mouseleave、mousemove、mouseout、mouseover、mouseup
の7本を学びました。
mouse***イベントは、key***と同じくいくつか種類があり、
それぞれ発生するタイミングが違うので注意が必要です。

それでは、また。

2015年6月24日水曜日

（jQueryの学習）イベント：要素にイベントを埋め込む（その２）

本日も要素に組み込めるイベントの続きです。

6.focus

説明	要素がフォーカス（マウスやタブキー）を得たタイミングで発生
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("input").focus(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

7.keydown

説明	いずれかのキーが押し下げられたタイミングで発生
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("input").keydown(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

8.keypress

説明	いずれかのキーが押されたタイミングで発生
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("input").keypress(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

9.keyup

説明	いずれかのキーが押された後、上がったタイミングで発生
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("input").keyup(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

10.load

説明	ドキュメント内の全リソースの読み込みが完了したときに発生
サンプルソース	$(function() { // ↓他と異なり、windowでloadイベントが捕捉できる $(window).load(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源	（このページをリロードしてください）
確認エリア	※イベントが発生するとログが出力されます。

本日は
　focus、keydown、keypress、keyup、load
の5本を学びました。
key***イベントは、
それぞれ発生するタイミングが違うので注意が必要です。
また、loadイベントはwindow要素に対して働く点は他のイベントと異なります。

それでは、また。

2015年6月22日月曜日

（jQueryの学習）イベント：要素にイベントを埋め込む（その１）

本日からはjQueryのイベントについて、学習していきます。

イベントとは、
ユーザがアプリケーションに対して何らかのアクションを掛けたときのことを表します。
例えば・・・
　・ボタンを押す
　・マウスでクリックする
　・キーボードでタイプする
・・・などのことです。
jQueryを使って、
これらのイベントをどのようにして判断するのか？を学びます。

各要素に埋め込んで、
捕捉できるイベントは21個ありますので、
1つずつサンプルを上げながら確認していきたいと思います。
（アルファベット順）

1.blur

説明	要素がフォーカス（マウスやタブキー）を失ったタイミングで発生
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("input").blur(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

2.change

説明	要素がフォーカスを得て値の修正が完了したタイミングで発生
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("input").change(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

3.click

説明	クリックされた時
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("input").click(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

4.dblclick

説明	ダブルクリックされた時
サンプルソース	$(function() { // ↓要素に対して捕捉するイベントを指定 $("input").dblclick(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

5.error

説明	JavaScriptのエラーが発生したタイミングで発生
サンプルソース	$(function() { // ↓「error()」でわざとエラーを発生させています。 $("input[type=button]").click(function(){ $("input").error(); }); // ↓要素に対して捕捉するイベントを指定 $("input").error(function(){ // ・・・イベント発生後の処理・・・ }); });
イベント発生源
確認エリア	※イベントが発生するとログが出力されます。

本日は
　blur、change、click、dblclick、error
の5本を学びました。
changeイベントは入力を完了したタイミングで、
入力内容の妥当性を検証するときなどで使えそうですね。

それでは、また。

2015年6月19日金曜日

（jQueryの学習）要素の指定（セレクタ）あれこれ　＜その他＞

本日でセレクタの学習も最後になります。
最後は「特殊な指定方法」や「代替手段」を学びます。

●要素の指定方法（その他）

【サンプルソース】

37.その要素自体を取り出す

  $(this)

ここでは下のボタン押下をハンドリングしていて、
この状態で[this]を指定すると、押したボタン自体の情報が得られます。
※ボタンの値属性(value)を表示しています。

38.親要素を取り出す

  $(this).parent()

親属性を取り出します。
引数なしでは親要素全体が取り出され、引数ありでは指定した要素のみが取り出されます。
なお、ここでは↑と同じく下のボタン押下をハンドリングしていますので、
この状態で[this]を指定すると、押したボタン自体の情報が得られます。

39.子要素を取り出す

  $("#unordered-list2").children("p")

子属性を取り出します。
引数なしでは子要素全体が取り出され、引数ありでは指定した子要素のみが取り出されます。

40.全ての子孫要素の中から条件付で要素を取り出す

  $(this).parent().find("input")

全ての子孫要素の中から、条件に一致する要素を取り出します。
処理中の要素集合に対して、一部の要素のみ指定するときに便利です。
ここでは、
『[this]（ボタン要素）⇒[parent()]（親要素）⇒子孫要素全体』を取り出した後、
findに指定した条件で絞り込んでいます。

41.次の要素を取り出す

  $("h5").next();
  $("#unordered-list1").next();
  $("#unordered-list2").next();

指定した要素のすぐ隣の要素（兄弟要素）のみを取り出します。
次以降の要素全体を取り出す場合は「nextAll()」を使います。

42.兄弟要素を全て取り出す

  $("#list-item2").siblings();

指定した要素のすぐ隣の要素（兄弟要素）のみを取り出します。
次以降の要素全体を取り出す場合は「nextAll()」を使います。

いかがでしょうか？
8回に渡ったセレクタの学習は今回で終了です。
セレクタを使いこなすことで、
いろいろな要素を簡単に取り出すことができそうですね。

それでは、また。

2015年6月17日水曜日

（jQueryの学習）要素の指定（セレクタ）あれこれ　＜フォーム系フィルタ＞

本日はフォームの要素を絞り込む方法を学びます。

ボタンや入力項目などのフォームに指定した
要素を取り出すときに利用します。

●要素の指定方法（フォームセレクタ）

【サンプルソース】

35.フォーム内の要素を取り出す

	指定方法（ソース）	対象
	$(":input")	フォームの全要素
	$(":text")	テキストボックス
	$(":password")	パスワード入力ボックス
	$(":radio")	ラジオボタン
	$(":checkbox")	チェックボックス
	$(":file")	ファイル選択ボックス
	$(":submit")	送信ボタン
	$(":image")	画像ボタン
	$(":reset")	リセットボタン
	$(":button")	全てのボタン
	$(":hidden")	隠し要素

↑の表で選択したフォーム要素を↓に表示します。
※隠し要素(:hidden)は目に見える形では表示されないため、
　hiddenに設定した値属性(value)を取り出して表示しています。

36.フォーム内の要素を状態指定で取り出す

	指定方法（ソース）	対象
	$(":enabled")	利用可能な状態
	$(":disabled")	利用不可の状態
	$(":checked")	チェック済の状態
	$(":selected")	選択済の状態
	$(":hidden")	非表示の状態
	$(":visible")	表示の状態
	$(":animated")	アニメーション中の状態

↑の表で選択したフォームの状態に一致する要素を↓に表示します。
※隠し要素(:hidden)は目に見える形では表示されないため、
　hiddenに設定した値属性(value)を取り出して表示しています。

いかがでしょうか？
次回はその他のセレクタを学びます。

それでは、また。

2015年6月15日月曜日

（jQueryの学習）要素の指定（セレクタ）あれこれ　＜属性セレクタ＞

本日は要素を属性で絞り込む方法を学びます。

セレクタで要素の集合体を取得する際、
属性に対する条件を指定して要素を取り出すときに利用します。

●要素の指定方法（属性セレクタ）

【サンプルソース】

26.要素の集合体から、指定した属性を持つ要素を取り出す

  $("input[src]")

指定した要素の集合体の中で、特定の属性を持つ要素が対象となります。

27.要素の集合体から、指定した属性に等しい値を持つ要素を取り出す

  $("input[type='input']")

指定した要素の集合体の中で、特定の属性に等しい値を持つ要素が対象となります。

28.要素の集合体から、指定した属性に等しくない値を持つ要素を取り出す

  $("input[type!='input']")

指定した要素の集合体の中で、特定の属性に等しくない値を持つ要素が対象となります。

29.要素の集合体から、指定した属性に前方一致する値を持つ要素を取り出す

  $("input[type^='i']")

指定した要素の集合体の中で、特定の属性に前方一致する値を持つ要素が対象となります。

30.要素の集合体から、指定した属性に後方一致する値を持つ要素を取り出す

  $("input[type$='t']")

指定した要素の集合体の中で、特定の属性に後方一致する値を持つ要素が対象となります。

31.要素の集合体から、指定した属性に部分一致する値を持つ要素を取り出す

  $("input[name*='check']")

指定した要素の集合体の中で、特定の属性に部分一致する値を持つ要素が対象となります。

32.要素の集合体から、指定した属性を持たない要素を取り出す

  $("input:not([value])")

指定した要素の集合体の中で、特定の属性を持たない要素が対象となります。

33.見出し要素を全て取り出す

  $(":header")

全ての見出し要素（h1,h2等のヘッダータグ）が対象となります。

34.要素の集合体から、2つの条件をどちらも満たす（AND）要素を取り出す

  $("input[name$='ed'],[value$='ed']")

指定した要素の集合体の中で、複数の条件で属性を絞り込むことも可能です。

いかがでしょうか？
次回はフォームの要素を取得する方法を学びます。

それでは、また。

2015年6月12日金曜日

（jQueryの学習）要素の指定（セレクタ）あれこれ　＜内容系フィルタ＞

本日は要素の内容に関するフィルタの利用法を学びます。

セレクタにより取得した要素の集合体に対して、
要素の内容を条件にして要素を取り出すときに利用します。

●要素の指定方法（内容系フィルタ）

【サンプルソース】

22.要素の集合体から、指定した引数の文字列を含む要素を取り出す

  $(".unordered-list-class span:contains('Test')")

指定した要素の集合体の中で、特定の文字列を含む要素が対象となります。
※大文字・小文字は区別されます。

23.要素の集合体から、内容を持つ要素を取り出す

  $(".unordered-list-class span:parent")

指定した要素の集合体の中で、内容を持つ要素が対象となります。
※↓の「:empty」とは相反関係にあります。

24.要素の集合体から、内容を持たない要素を取り出す

  $(".unordered-list-class span:empty")

指定した要素の集合体の中で、内容を持たない要素が対象となります。
※↑の「:parent」とは相反関係にあります。
　また、わかりやすくするため、サンプルでは親要素を含めたHTML形式で表示しています。

25.要素の集合体から、指定した引数のセレクタを子孫要素に持つ要素集合を取り出す

  $(".unordered-list-class span:has(font[color=red])")

指定した要素の集合体の中で、セレクタでさらに絞り込んだ要素が対象となります。
※サンプルは『fontタグのカラー属性に「赤」が指定されている要素』を追加で指定しています。

いかがでしょうか？
次回は取り出した要素の属性を意識したフィルタを学びます。

それでは、また。

2015年6月10日水曜日

（jQueryの学習）要素の指定（セレクタ）あれこれ　＜順序系フィルタ＞

本日は基本的な順序系のフィルタの利用法を学びます。

セレクタにより取得した要素の集合体に対して、
指定した位置（最初や最後、位置指定）の要素を取り出すときに利用します。

●要素の指定方法（順序系フィルタ）

【サンプルソース】

15.要素の集合体から、最初の要素を取り出す

  $(".unordered-list-class span:first")

指定した要素の集合体の中で、最初に登場する要素が対象となります。

16.要素の集合体から、最後の要素を取り出す

  $(".unordered-list-class span:last")

指定した要素の集合体の中で、最後に登場する要素が対象となります。

17.要素の集合体から、偶数番目の要素を取り出す

  $(".unordered-list-class span:even")

指定した要素の集合体の中で、偶数番目に登場する要素が対象となります。

18.要素の集合体から、奇数番目の要素を取り出す

  $(".unordered-list-class span:odd")

指定した要素の集合体の中で、奇数番目に登場する要素が対象となります。

19.要素の集合体から、n番目の要素を取り出す

  $(".unordered-list-class span:eq(2)")

指定した要素の集合体の中で、n番目（サンプル:3番目）に登場する要素が対象となります。
※Index指定のため、「2」を指定すると「3番目」が該当する。

20.要素の集合体から、n番目より前の要素を全て取り出す

  $(".unordered-list-class span:lt(2)")

指定した要素の集合体の中で、n番目（サンプル:3番目）より前に登場する要素が対象となります。
※Index指定のため、「2」を指定すると「3番目」が該当する。

21.要素の集合体から、n番目より後の要素を全て取り出す

  $(".unordered-list-class span:gt(2)")

指定した要素の集合体の中で、n番目（サンプル:3番目）より後に登場する要素が対象となります。
※Index指定のため、「2」を指定すると「3番目」が該当する。

いかがでしょうか？
順序や位置に関連したフィルタの使い方を学びました。
次回は取り出した要素の内容を意識したフィルタを学びます。

それでは、また。

2015年6月8日月曜日

（jQueryの学習）要素の指定（セレクタ）あれこれ　＜階層系フィルタ＞

今回からはセレクタによって取得した結果をさらに絞り込む、
フィルタというものを学びます。

イメージとしては、
セレクタによってある集合体を抽出した後、
その中から「ある条件」に合致する要素を取り出す場合に使用します。

今回はその中で、階層系のフィルタに焦点を絞って学びます。

●要素の指定方法（階層系フィルタ）

【サンプルソース】

10.各親要素に対して「最初の子要素」を取り出す

  $(".unordered-list-class span:first-child")

指定した要素の最初の子要素が対象となります。
（始めに登場するspanタグのみ取り出す）

11.各親要素に対して「最後の子要素」を取り出す

  $(".unordered-list-class span:last-child")

指定した要素の最後の子要素が対象となります。
（最後に登場するspanタグのみ取り出す）

12.各親要素が「1つだけ持つ子要素」を取り出す

  $(".unordered-list-class span:only-child")

指定した要素の1つだけ子要素を持つ子要素が対象となります。
（spanタグが1つだけ登場する要素のみ取り出す）

13.各親要素に対して「n番目の子要素」を取り出す（基本）

  $(".unordered-list-class span:nth-child(2)")

指定した要素のn番目の子要素（サンプル:2番目）が対象となります。

14.各親要素に対して「n番目の子要素」を取り出す（応用）

  $(".unordered-list-class span:nth-child(2n+1)")

指定した要素の『奇数』番目の子要素が対象となります。
「nth-child()」のカッコ内に数式を指定することで、色々なパターンで取り出すことができます。

いかがでしょうか？
階層に関連したフィルタの使い方を学びました。
次回は順番を意識したフィルタを学びます。
（13～14は階層というより、順序に該当しますね）

それでは、また。

2015年6月4日木曜日

（jQueryの学習）要素の指定（セレクタ）あれこれ　＜階層セレクタ＞

本日は階層を意識したセレクタの利用法を学びます。

前回は参照したい要素をダイレクトに指定しましたが、
今回の「階層」では、
対象となる要素から見て、
同じ階層、または、従属する階層の要素を取り出すために利用します。

●要素の指定方法（階層）

【サンプルソース】

6.[子孫セレクタ]先祖要素（左側）を持つ、子孫要素（右側）を指定する

  $(".box li")  // 半角スペースで区切る

指定した親要素の配下に属する子孫要素が対象となります。

7.[子セレクタ]親要素（左側）を持つ、子要素（右側）を指定する（直下のみ）

  $(".box > ul")  // " > "で区切る

指定した親要素の配下に属する子要素が対象となります。（子要素のみ指定できます）

8.[隣接セレクタ]前後関係になっている後方の要素を指定する

  $("#list-item1 + #list-item2")  // " + "で区切る

指定した要素に続く要素が対象となります。（直後の要素のみ指定できます）
例えば、『$("#list-item1 + #list-item3")』としても要素は取得できません。

9.[兄弟セレクタ]前後関係になっている後方の全ての要素を指定する

  $("#list-item1 ~ #list-item3")  // " ~ "で区切る

指定した要素と同じ階層にある、後方の要素が対象となります。
[隣接セレクタ]との違いは、同じ階層にあれば隣り合っていなくても良い所です。

いかがでしょうか？
階層によるセレクタの使い方を学びました。
次回はセレクタによって取得した結果をさらに絞り込む、
フィルタというものを学びます。

それでは、また。

2015年6月2日火曜日

（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")  // カンマで区切る

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

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

それでは、また。

2015年5月22日金曜日

（jQueryの学習）エフェクト：アニメーション（第三回）

「アニメーション」の３回目です。

今回もanimateメソッドのサンプルの紹介ですが、
前回よりももう少し難易度を上げたいと思います。

●animateメソッドのサンプル（応用）

7.複数のエフェクトを直列に動かす

直列に動かすためには、
最初のエフェクトが『終わったら』次を実行するようにします。
今回は「complete」の引数を利用して実現しています。

  $("#animate7-Target1").animate(
    {marginLeft: "+=100"},
    1000,
    "swing",
    function() {
      $("#animate7-Target2").animate(
        {marginLeft: "+=100"},
        1000,
        "linear"
      );
    }
  );

swing

linear

8.複数のエフェクトを並列に動かす

並列に動かすためには、動かしたいエフェクトを続けて書くだけです。

  $("#animate8-Target1").animate({marginLeft: "+=100"}, 1000, "swing");
  $("#animate8-Target2").animate({marginLeft: "+=100"}, 1000, "linear");

swing

linear

9.エフェクトをループさせる

ループさせるためには、
jQueryではなくJavaScriptの「setTimeout（mozillaのAPIリファレンスはこちら）」を使います。
今回の例では『3秒間に左から右に丸いオブジェクトを延々と移動』させてます。

$(function() {
  // (1)実行ボタン押下で「setTimeout」を起動（JavaScriptの関数を実行）
  $("#animate9-Trigger input[type=button]").click(function(){
    setTimeout("loopAnimate()");
  });
});
function loopAnimate() {
  // (2)animateでオブジェクトを移動（左⇒右・・・移動が完了したら左へ戻す）
  $("#animate9-Target").animate({marginLeft: "350px"}, 3000)
                        .animate({marginLeft: "-100px"}, 0)
  // (3)もう一度「setTimeout」を起動（後は(2)～(3)の繰り返し）
  setTimeout("loopAnimate()", 3000);
}

loop

いかがでしたか？

調べてみると、
もっと複雑なアニメーションもできるようです。
近いうちに挑戦したいですね。

それでは、また。

2015年5月18日月曜日

（jQueryの学習）エフェクト：アニメーション（第一回）

今回は「アニメーション」を学びます。

アニメーションとはどんなものか？

例えば、文字を・・・
・大きくしたり、小さくしたり
・右に動かしたり、左に動かしたり
・薄くしたり、濃くしたり
・・・のようなことを、
Webページ上に独自の描画効果を表示することです。

Windows98が全盛だったときに、
JavaScriptで同じようなコードを書いたことがありますが、
ものすごいコード量だった記憶があります。

これをjQueryを使うことで、
どの程度シンプルにできるのか？（期待を込めて）も学んでみたいと思います。

◆主な用途

こんなときやこんなものに使えます。

●利用したいシーン
1.Webサイト（特にリッチサイト）を着飾りたいとき
2.Webサイトにトリックを埋め込みたいとき

●利用したいコンテンツ
1.入力（入力後、次のアンケート項目をストレス無く表示させる）
2.背景（雪を降らせるなど）

上記に限らず、使い手次第で様々な用途に使えます。

◆主な方法

●アニメーションの方法
アニメーションの方法はいくつかあるようです。
1.animateメソッド
2.toggle系メソッドを駆使する
3.CSS3を使う

3.のCSS3は、まだどんなものかわかっていないので、今後の課題とします。
頑張れば2.の「toggle系メソッド」でも実現できると思いますが、
今の段階ではあまりにも難題のため、今回は「animateメソッド」に特化して学びたいと思います。

●animateメソッドの引数
引数を見ることで、animateメソッドにどんな用途があるのかが見えてきます。

引数には
1.properties
2.[任意]duration
3.[任意]easing
4.[任意]complete

があります。

1.properties
アニメーションによって、どのようなデザインに変化させたいのか？を指定します。
具体的には、width、opacity、borderLeftWidth、fontSizeのようなstyle属性を変化させる情報を指定します。
※注意事項として、各項目IDはキャメルケースで表記する必要があります。
　（例：border-left-width ⇒ borderLeftWidth）

2.[任意]duration
アニメーションの動作期間を指定します。

『"slow"、"normal"、"fast"のいずれかの文字列』、または、『ミリ秒単位の数値』を指定します。

"slow"などの文字列を指定した時の秒数は以下の通りです。

文字列	ミリ秒
slow	600
normal	400
fast	200

durationに「2000」を指定すると、2秒間かけてアニメーションを完了させます。

なお、未指定時のデフォルト値は「400」です。

3.[任意]easing
値の変化量を調節するときに指定します。
アニメーションの変化に抑揚をつけたいときに指定すると説明すればわかりやすいでしょうか。

標準では"swing"と"linear"が用意されており、
2つの違いを以下に記します。

指定値	変化量例：10秒で0⇒10cmになる場合
linear	単調な変化例：毎秒1㎝ずつ大きくなる
swing	緩急のある変化例：最初と最後の2秒は1㎝しか変わらないが、途中の6秒間の変化が大きい

</table>

上のように書きましたが、
実際に動かしてみると、
左から右に一直線上に動くような変化で比較しないと、
どちらも似たようなものに思えます。
（私がこのようなアニメーションの分野に疎いということもあるのかも知れませんが）

ただし、独自関数を指定することで、
「最初だけ早く」したり、「最後だけ早く」したり、
「起伏のある変化をする」など、独自の描画効果を得ることもできるようになっています。

なお、未指定時のデフォルト値は「"swing"」です。

4.[任意]complete
最後の引数は、アニメーション終了時に実行する関数を指定できます。
例えば・・・アラート出力、CSS制御（フォントを変えるなど）、HTML制御（文言出力など）ができます。

次回、animateメソッドのサンプルを紹介したいと思います。
それでは、また。

2015年5月14日木曜日

（jQueryの学習）エフェクト：特定エリアの開閉（toggle系以外のメソッド）

今回も「特定エリアの開閉」を学びます。

前回学んだ方法は
　1.toggleメソッド
　2.slideToggleメソッド
　3.fadeToggleメソッド
です。

これに対して、
今回は
　4.showメソッドと hideメソッドの組合せ
　5.slideDownメソッドと slideUpメソッドの組合せ
　6.fadeInメソッドと fadeOutメソッドの組合せ
について学びます。

◆開閉方法の違い

4.show-hideメソッドのサンプル

slow normal fast

描画効果：「対角線方向（閉：右下から左上　開：左上から右下）」で表示・非表示を制御する

＜＜＜開いたり、閉じたりする領域（開始）＞＞＞

    x = $("#showHide-Target");
    if (x.is(":hidden")) {
      x.show("slow");
    } else {
      x.hide("slow");
    }

＜＜＜開いたり、閉じたりする領域（終了）＞＞＞

5.slideUp-slideDownメソッドのサンプル

slow normal fast

描画効果：「垂直方向（閉：下から上　開：上から下）」で表示・非表示を制御する

＜＜＜開いたり、閉じたりする領域（開始）＞＞＞

    x = $("#slideUpDown-Target");
    if (x.is(":hidden")) {
      x.slideDown("slow");
    } else {
      x.slideUp("slow");
    }

＜＜＜開いたり、閉じたりする領域（終了）＞＞＞

6.fadeIn-fadeOutメソッドのサンプル

slow normal fast

描画効果：「指定エリア全面」で表示・非表示を制御する（徐々に消えたり、出たりする）

＜＜＜開いたり、閉じたりする領域（開始）＞＞＞

    x = $("#fadeInOut-Target");
    if (x.is(":hidden")) {
      x.fadeIn("slow");
    } else {
      x.fadeOut("slow");
    }

＜＜＜開いたり、閉じたりする領域（終了）＞＞＞

●ここまでで気づいたこと・・・

・前回のtoggle系メソッドと描画効果を類似している
・toggle系メソッドの方がコード量が少ない

描画効果の違いについて、
わかりやすくするため、似ているもの同士を左右に並べてみました。

◆開閉方法ごとの比較

大きく3つの描画効果に分けてみました。

効果	toggle系	toggle系以外
show/hide	1.toggleメソッド＜＜＜開閉エリア（開始）＞＞＞・・・・・・・・・・・・・・・＜＜＜開閉エリア（終了）＞＞＞	4.show-hideメソッド＜＜＜開閉エリア（開始）＞＞＞・・・・・・・・・・・・・・・＜＜＜開閉エリア（終了）＞＞＞
slide	2.slideToggleメソッド＜＜＜開閉エリア（開始）＞＞＞・・・・・・・・・・・・・・・＜＜＜開閉エリア（終了）＞＞＞	5.slideUp-slideDownメソッド＜＜＜開閉エリア（開始）＞＞＞・・・・・・・・・・・・・・・＜＜＜開閉エリア（終了）＞＞＞
fade	3.fadeToggleメソッド＜＜＜開閉エリア（開始）＞＞＞・・・・・・・・・・・・・・・＜＜＜開閉エリア（終了）＞＞＞	6.fadeIn-fadeOutメソッド＜＜＜開閉エリア（開始）＞＞＞・・・・・・・・・・・・・・・＜＜＜開閉エリア（終了）＞＞＞

このようにして比較してみると、違いは無いように見えます。

実はちょっと違うのかな？とあれこれいじってみましたが、大差無し。

・・・なんてことはない・・・。

jQueryの本家サイト（http://api.jquery.com/）で調べてみたところ、
toggle系のメソッドは、
2本のメソッド（例：toggle VS show⇔hide）を対に呼び出すことと同等と書いてありました。
⇒http://api.jquery.com/toggle/　（"Examples:"の手前辺り）

だったら、コード量の少ない「toggle系メソッド」しか使わなくて良いかも知れませんね。

違いとしては、
使用するjQueryのバージョンによっては使えないところ（↓）なので、
ver1.4以降なら「toggle系メソッド」一択で良さそうです。

●バージョンによる違い

・toggle系以外のメソッド：ver1.0～
・toggle系メソッド　　　：ver1.4～

jQueryのバージョンの違いで大きく出るのは「1.x系」か「2.x系」か？を選択するときで、
しかも、「1.x系」は2015年5月現在で「ver1.11」まで上がっているので、
よほどのこと（バージョンアップにより廃止された機能が必要など）が無い限りは
「toggle系メソッド」を選択して問題ありませんね。

それでは、また。

2015年5月13日水曜日