
スキルアップ
2021.04.15
社会人におすすめなプログラミングスクールの条件とは?目的別25校と選び方
突然ですが、社会人に最適なプログラミングスクールの条件とは何かをご存じですか?本記事では「未経験からIT業界に就職したい」「今の職場でスキルアップしてから転職したい」という20代~30代に向けて、元エンジニアがおすすめの […]
jQuery
2018.03.13
jQuery は、セレクタで対象となる要素を特定した上で 命令等を記述する という書き方をするため、セレクタの使い方がとても重要です。
今回は、jQuery のセレクタについて紹介したいと思います。
1.jQuery のセレクタ
2.基本のセレクタ
3.階層や前後のセレクタ
4.属性を使用するセレクタ
5.基本のフィルタ
6.子要素のフィルタ
7.表示 / 非表示フィルタ
8.内容に関するフィルタ
9.フォームに関するフィルタ
jQuery は、基本的に次のような形で書きます。
$( セレクタ ). イベント( function(){
$( セレクタ ). 命令
});
この中の「 セレクタ 」が jQuery を使用する上でとても重要です。
セレクタ( selector )とは、HTML要素をセレクトするもので、HTML要素を特定します。
HTML要素の名前の他、id名、class名など、色々な種類を対象に指定することができます。
jQuery の基本的なセレクタの書き方は、次の通りです。
「 $(“内容”) 」のような形で記述します。
$(“*”) |
---|
全要素を選択 他のセレクタと組み合わせて特定の範囲内の要素全てを選択する時などに利用することが多い |
$(“要素名”) |
指定した要素を選択 |
$(“#id名”) |
指定したid名の要素を選択 |
$(“.class名”) |
指定したclass名の要素を選択 |
$(“セレクタ セレクタ”) |
指定した複数のセレクタ(要素名、#id名、.class名、etc.)の全てにマッチする要素を選択 |
$(“セレクタ , セレクタ”) |
指定した複数のセレクタ(要素名、#id名、.class名、etc.)のいずれかにマッチする要素を選択 |
階層や前後関係に関連するセレクタは、次のように記述して要素を指定します。
$(“親要素 子要素”) |
---|
親要素内にある任意の要素を選択 「 親要素 > 子要素 」とは異なり、直下の要素である必要はない |
$(“親要素 > 子要素”) |
親要素内にある任意の要素を選択 「 親要素 子要素 」とは異なり、直下の要素のみを選択する |
$(“要素A + 要素B”) |
要素Aの直後に現れる要素Bを選択 直後の要素を 1 つだけ選択する 複数選択したい場合は「 要素A ~ 要素B 」を使用する |
$(“要素A ~ 要素B”) |
要素Aの後ろにある要素B全てを選択 |
属性によって要素を選択するセレクタもあります。
属性を使用するセレクタは、次のように記述して要素を指定します。
$(“[ 属性 ]”) |
---|
任意の属性を持つ要素を選択 |
$(“[ 属性 = ‘値’ ]”) |
任意の属性が 指定した値を持つ要素を選択 |
$(“[ 属性 != ‘値’ ]”) |
任意の属性が 指定した値以外の値を持つ要素を選択 |
$(“[ 属性 ^= ‘値’ ]”) |
任意の属性が 指定した値から始まる要素を選択 |
$(“[ 属性 $= ‘値’ ]”) |
任意の属性が 指定した値で終わる要素を選択 |
$(“[ 属性 *= ‘値’ ]”) |
任意の属性が 指定した値を含む要素を選択 |
$(“[ 属性 ~= ‘値’ ]”) |
任意の属性が 指定した値を単語として持つ要素を選択 |
$(“[ 属性 |= ‘値’ ]”) |
任意の属性が 指定した値と一致 又は ハイフンを付けて派生した 要素を選択 |
$(“[属性セレクタ][属性セレクタ]…”) |
複数の属性セレクタ全てにマッチする要素を選択 |
よく使用されるフィルタは、次の通りです。
コロン( : )を忘れずに記述します。
$(“:root”) |
---|
最上位の要素( html要素 )を選択 |
$(“:header”) |
見出し要素を選択 |
$(“:lang()”) |
引数で指定した lang 属性の要素を選択 |
$(“:target”) |
リンク先の要素を選択 |
$(“:animated”) |
アニメーション中の要素を選択 |
$(“:first”) |
最初の要素を選択 |
$(“:last”) |
最後の要素を選択 |
$(“:even”) |
偶数番目の要素を選択 |
$(“:odd”) |
奇数番目の要素を選択 |
$(“:eq()”) |
引数で指定したインデックス番号の要素を選択 |
$(“:gt()”) |
引数で指定したインデックス番号より大きい要素を選択 |
$(“:lt()”) |
引数で指定したインデックス番号より小さい要素を選択 |
$(“:not()”) |
引数で指定したセレクタ以外の要素を選択 |
子要素の選択に使用されるフィルタは、次の通りです。
$(“セレクタ:first-child”) |
---|
最初の子要素を選択 最初の子要素が セレクタで指定した要素でない場合は 選択されない |
$(“セレクタ:first-of-type”) |
セレクタで指定された最初の子要素を選択 「 :first-child 」と異なり、指定したセレクタが最初の子要素である必要はない |
$(“セレクタ:last-child”) |
最後の子要素を選択 最後の子要素が セレクタで指定した要素がでない場合は 選択されない |
$(“セレクタ:last-of-type”) |
セレクタで指定された最後の子要素を選択 「 :last-child 」と異なり、指定したセレクタが最後の子要素である必要はない |
$(“セレクタ:only-child”) |
子要素が 1 つしかない場合、その子要素を選択 |
$(“セレクタ:only-of-type”) |
セレクタで指定された子要素が単独の場合に選択 「 :only-child 」と異なり、指定したセレクタが単独であれば他に要素があってもOK |
$(“セレクタ:nth-child()”) |
設定した引数によって 親要素内の様々な要素を選択 引数にはインデックス番号、even/odd、数式 等を設定する |
$(“セレクタ:nth-of-type()”) |
セレクタと引数で指定した子要素を選択 引数にはインデックス番号、even/odd、数式 等を設定する 「 nth-child 」と異なり、セレクタで指定した要素しかカウントしない |
$(“セレクタ:nth-last-child()”) |
設定した引数によって 親要素内の様々な要素を選択( nth-child() の後から数えたフィルタ ) 引数にはインデックス番号、even/odd、数式 等を設定する 「 nth-last-child 」と異なり、セレクタで指定した要素しかカウントしない |
表示 又は 非表示 に関するフィルタは、次の通りです。
$(“:hidden”) |
---|
css で非表示に設定されている要素(display:none、width:0px 等)や フォームの hidden 要素を選択 |
$(“:visible”) |
表示されている要素を選択 |
要素の内容に関するフィルタは、次の通りです。
div タグ等 エリアを設定する要素の場合は、開始タグから終了タグの間がフィルタの対象になります。
$(“:contains()”) |
---|
引数で指定した文字列を含む要素を選択 |
$(“セレクタA:has(セレクタB)”) |
セレクタBを子孫要素に持つセレクタAの要素を選択 |
$(“:empty”) |
何も持っていない要素を選択 |
$(“:parent”) |
子要素 又は テキストを持っている要素を選択 「 :empty 」と逆の意味を持つフィルタ |
フォームに関するフィルタは、次の通りです。
$(“:checked”) |
---|
チェックボックスやラジオボタンで チェックされた要素を選択 |
$(“:selected”) |
選択されているセレクト要素を選択 |
$(“:disabled”) |
無効になっている要素を選択 |
$(“:enabled”) |
有効になっている要素を選択 |
$(“:focus”) |
フォーカスされている要素を選択 |
$(“:button”) |
ボタン( button要素、type属性がbuttonの要素 )を選択 |
$(“:checkbox”) |
チェックボックス( type属性がcheckboxの要素 )を選択 |
$(“:file”) |
ファイル選択ボタン( type属性がfileの要素 )を選択 |
$(“:image”) |
画像を利用したフォームボタン( type属性がimageの要素 )を選択 |
$(“:input”) |
input要素を選択 |
$(“:password”) |
type属性が password の要素を選択 |
$(“:radio”) |
ラジオボタン( type属性がradioの要素 )を選択 |
$(“:reset”) |
リセットボタン( type属性がresetの要素 )を選択 |
$(“:submit”) |
送信ボタン( type属性がsubmitの要素 )を選択 type属性を設定していないbutton要素も、デフォルト値が submit のため選択される |
$(“:text”) |
type属性が text の要素を選択 |
スキルアップ
2021.04.15
突然ですが、社会人に最適なプログラミングスクールの条件とは何かをご存じですか?本記事では「未経験からIT業界に就職したい」「今の職場でスキルアップしてから転職したい」という20代~30代に向けて、元エンジニアがおすすめの […]
スキルアップ
2021.04.15
Webディレクターとは、Webサイト制作や、企画、運用の現場においてリーダーの役割を担う職種です。多くの業務をこなすため大変な仕事ではありますが、その分やりがいや魅力もある仕事です。本記事では、Webディレクターの具体的 […]
スキルアップ
2021.04.14
IT業界やエンジニアという職種に対してなんとなくイメージは持っているものの、具体的にどんな仕事をしているのか詳しく知らないという方もいらっしゃるでしょう。本記事では、IT業界とはどんな業界なのかをわかりやすく解説。各業種 […]
スキルアップ
2021.04.02
IT業界未経験からITエンジニアへ転職しようとするとき、強い味方になってくれるのが資格です。IT系の資格試験には数多くの種類があり、取得することでスキルの証明が可能。本記事では、未経験者が就職を有利にするためのおすすめ資 […]
スキルアップ
2021.04.01
「プログラミングができると就活が余裕らしいけど、大学生のうちにプログラミングを学ぶメリットって何?」と考えている方に向けて、本記事では元エンジニアである筆者がこれまでの経験則をもとに、在学中にプログラミングを学習するメリ […]
スキルアップ
2021.04.01
【2021年最新】いざJava SE 11のBronze資格にチャレンジしようと思っても「申込方法が複雑すぎて難しい…」と困っている方も多いのでは?本記事では、2020年に新しくなったOracle認定Javaプログラマ試 […]
INTERNOUS,inc. All rights reserved.