Archive for 6月 2015

2015年6月29日月曜日

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

（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の学習）イベント：要素にイベントを埋め込む（その３）

（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の学習）イベント：要素にイベントを埋め込む（その２）

（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のイベントについて、学習していきます。

イベントとは、
ユーザがアプリケーションに対して何らかのアクションを掛けたときのことを表します。
例えば・・・
　・ボタンを押す
　・マウスでクリックする
　・キーボードでタイプする
・・・などのことです。
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の学習）要素の指定（セレクタ）あれこれ　＜その他＞

（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の学習）要素の指定（セレクタ）あれこれ　＜フォーム系フィルタ＞

（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の学習）要素の指定（セレクタ）あれこれ　＜属性セレクタ＞

（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の学習）要素の指定（セレクタ）あれこれ　＜内容系フィルタ＞

（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の学習）要素の指定（セレクタ）あれこれ　＜順序系フィルタ＞

（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の学習）要素の指定（セレクタ）あれこれ　＜階層系フィルタ＞

（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の学習）要素の指定（セレクタ）あれこれ　＜階層セレクタ＞

（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にて要素を指定する方法を整理します。

まず、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")  // カンマで区切る
カンマで区切ったセレクタ条件のいずれかに一致した要素が対象となります。
＜＜＜サンプルはこちら＞＞＞
いかがでしょうか？
基本的なセレクタの使い方を学びました。
次回は階層を意識したセレクタを学びます。

それでは、また。