SEEDS Creators Blog

光陰矢の如しとはよく言ったもので、気づけばもう3月…そう”弥生”です。
普段の生活の中で、各月の別名を使うことは少ないと思いますが、皆さん知っておられますか？
自分はこういうの得意です！任せてください！
では、1月から…
あれ…？　えーっと…　あー…　あ！　　正月！

さて、気を取り直して、前回の記事に引き続いてjQueryでの要素の選択について書きます。
指定方法は多々ありますので、今回も自分の思うところの指定方法を抜粋して、記事にします。

フィルタを用いたセレクタ指定方法

フィルタと呼ばれる、要素の状態などを判断して指定が行なえます。

<ul class="hoge">
<li>テキスト１</li>
<li>テキスト２</li>
<li>テキスト３</li>
</ul>
<ul>
<li>テキスト４</li>
<li>テキスト５</li>
<li>テキスト６</li>
</ul>

上記のようなコードがあるとして説明していきます。

順序などによるフィルタ

:first　:last

最初、最後の指定ができます。

$("ul.hoge li:first").css("color", "#f00")

上記指定で、リスト内の最初の要素(テキスト１)の文字色が赤色になります。

$("ul.hoge li:last").css("color", "#00f")

上記指定で、リスト内の最期の要素(テキスト３)の文字色が青色になります。

:first-child　:last-child

“first”、”last”に似た指定方法で”:first-child”、”:last-child”というのもあります。

$("li:first-child").css("color", "#f00")

上記指定で、”各リスト内”の最初の要素(テキスト１とテキスト４)の文字色が赤色になります。

$("li:last-child").css("color", "#00f")

上記指定で、”各リスト内”の最期の要素(テキスト３とテキスト６)の文字色が青色になります。

:even　:odd

偶数、奇数を指定できます。

$("li:even").css("color", "#00f")

上記指定で、リスト内の偶数番目の要素(テキスト２)の文字色が青色になります。

$("li:odd").css("color", "#f00")

上記指定で、リスト内の奇数番目の要素(テキスト１とテキスト３)の文字色が赤色になります。

:eq(n)

n番目を指定できます。
注意点として、nは０から始まる番号です。

$("li:eq(2)").css("color", "#f00")

上記指定で、リスト内の３番目の要素(テキスト３)の文字色が赤色になります。

:lt(n)

n番目より前を指定できます。

$("li:lt(3)").css("color", "#f00")

上記指定で、リスト内の３番目より前の要素(テキスト１とテキスト２)の文字色が赤色になります。

:gt(n)

n番目より後を指定できます。

$("li:gt(1)").css("color", "#00f")

上記指定で、リスト内の１番目より後の要素(テキスト２とテキスト３)の文字色が青色になります。

:nth-child(n)

n番目を指定できます。
なお n には番号だけでなく、数式などでも指定可能です。
また、:nth-childでは1から始まる番号になります。

$("li:nth-child(2n+1)").css("color", "#f00")

上記指定で、リスト内の1、3、5…番目の要素(テキスト１とテキスト３)の文字色が赤色になります。

状態などによるフィルタ

:animated

アニメーションしている要素の指定ができます。

$("div:animated").css("background", "#f00")

上記指定で、アニメーションしている要素の背景色が赤色になります。

:visible　:hidden

表示、非表示を判断し、要素の指定ができます。

$("div:visible").css("background", "#f00")

上記指定で、表示されている要素の背景色が赤色になります。

$("div:hidden").show()

上記指定で、非表示の要素が表示されます。
※inputのtype=”hidden”の要素も対象です。

:enabled　:disabled

利用可能、不可能を判断し、要素の指定ができます。

$("input:enabled").val("YES");

上記指定で、利用可能な要素の値を”YES”に変更します。

$("input:disabled").val("NO");

上記指定で、利用不可能な要素の値を”NO”に変更します。

まとめ

前回と同じくですが、セレクタの指定方法は多々あり、フィルタを用いたセレクタ指定方法を網羅しているわけではありません。
他に、”:checked”、”:selected”などフォーム周りで使えそうな選択状態の要素を指定する方法などもあるようです。
jQueryの本家サイトや日本語翻訳サイトもありますので、さらに詳しくお知りになりたい場合は、そちらをご覧下さい。

後述

記事とは関係ありませんが、冒頭の月の別名については…

• １月 – 睦月
• ２月 – 如月
• ３月 – 弥生
• ４月 – 卯月
• ５月 – 皐月
• ６月 – 水無月
• ７月 – 文月
• ８月 – 葉月
• ９月 – 長月
• １０月 – 神無月
• １１月 – 霜月
• １２月 – 師走

でした。
恥ずかしくないようちゃんと覚えておこうと思います。

近頃は朝夕の気温がめっきり下がり、外に出るのが億劫になってきています。
そんな時は自宅にこもり、先日発売されたモンスターハンター４Gなんかをやりたくなりますね…まだ持っていませんが…
社内でモンハン部が発足すれば、迷わず購入するのですが…|ω・`）チラ

閑話休題、業務でjQueryを用いて諸々の機能を実装するのですが、その際に少々悩むjQueryでの要素の選択について、自身の備忘録を兼ねて書きます。

DOM要素の選択

まず、jQueryでは容易にDOM要素の選択が行なえます。

$("body")

上記のコードだけでbody要素を選択することができます。

基本的なセレクタ(セレクター)指定方法

セレクタの指定方法には、タグを指定する以外にも様々なパターンがあります。
以下に基本的なセレクタ指定方法を記述します。

要素（タグ）セレクタ

$("div")

div要素が選択ができます。

idセレクタ

指定したidを持つ要素が選択できます。

classセレクタ

$(".hogehoge")

指定したclassを持つ要素が選択できます。

グループセレクタ

$("body, div, p")

指定した要素が選択ができます。

$("body, #hoge, .hogehoge")

また、上記コードのように、異なるセレクタでの指定も可能です。

ユニバーサルセレクタ

$("*")

全ての要素が選択ができます。
ワイルドカードでの指定です。

属性セレクタ

<a href="" target="_blank">リンク</a&gt

このようにtarget属性を持ったaタグがあるとして、

$("a[target='_blank']")

上記コードで、target=’_blank’の属性と値を持つaタグが選択できます。
また、属性セレクタには色々と指定方法があり、それについても記述します。

[属性名]

$("input[name]")

特定の属性を持つ要素を選択できます。

[属性名=値]

$("input[name="hoge"]")

属性の値が一致した要素を選択できます。

[属性名=!値]

$("input[name!='hoge']")

属性の値が完全一致しない要素を選択できます。

[属性名 *= 値]

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

属性の値が部分一致した要素を選択できます。

<input name="hoge" type="text" >
<input name="hoge123" type="text" >
<input name="hoge hoga hogi" type="text" >

上記コードでは、全て対象です。

[属性名 ~= 値]

$("input[name~='hoge']")

区切られた単語ベースで一致した要素を選択できます。

<input name="hoge" type="text" >
<input name="hoge123" type="text" >
<input name="hoge hoga hogi" type="text" >

上記コードでは、１行目と３行目が対象です。

[属性名 ^= 値]

$("input[name^='hoge']")

値と前方一致した属性を持つ要素を絞り込みます。

<input name="hoge123" type="text" >
<input name="123hoge" type="text" >

上記コードでは、１行目が対象です。

[属性名 $= 値]

$("input[name$='hoge']")

値と後方一致した属性を持つ要素を絞り込みます。

<input name="hoge123" type="text" >
<input name="123hoge" type="text" >

上記コードでは、２行目が対象です。

階層構造でのセレクタ指定方法

基本的な指定方法では、ピンポイントでその要素の選択でしたが、階層構造でのセレクタ指定もできるので、子孫要素の選択などが可能です。
以下に基本的な子孫、兄弟要素を選択するセレクタの指定方法を記述します。

子孫セレクタ

$("body div")

body要素の中にある、div要素を選択できます。

$("body div.hoge")

上記のように、特定のclassを持ったdiv要素の選択などもできます。

子セレクタ

$("body > div")

body要素の直下の、div要素を選択できます。

隣接セレクタ

$("h1 + div")```
h1要素の”すぐ”後に続く(隣接する)、div要素を選択できます。
<h3>兄弟セレクタ</h3>

$(“h1 ~ div”)

h1要素の後に続く(弟要素)、div要素を選択できます。
”兄弟セレクタ”と書きましたが、基準となる要素より後の要素のみが対象のようです。<br /><br />
以上が私が思う、ごく基本的なセレクタの指定方法のまとめです。
<h2><span style="color: #2196f3">まとめ</span></h2>
セレクタの指定方法は多くあり、今回の内容で全て網羅しているわけではありません。
私の知らないセレクタの指定方法もまだあるかと思います。
また、セレクタではなくjQuery関数で、先祖子孫、親子、兄弟要素の選択の方法や、フィルタと呼ばれるセレクタの指定方法もあります。
それらについては次回以降に書こうかと考えております。
<h2><span style="color: #2196f3">後述</span></h2>
今回も至極当然な記事になってしまった…が、備忘録も兼ねているということでよしとします。
頻繁に利用するので、作業の度に調べることの無いようにしよう。

初秋の候、皆様お変わりなくお過ごしでしょうか。
私は年齢のためか、右足太ももに激痛を感じている今日この頃です…

さて、話は変わりまして、業務でjavascriptでプログラムを作成していた時のことなのですが、動的に生成される要素に”hover”で動作を設定したかったので、単純に”.on()”で処理をしようと考えたのです。

“.on()”で”hover”を機能させるには

“.on()”に”hover”を引数として書いても機能しない

$(".hoge").on("hover", function(){...});

まず単純に考えて上記の様に記述したのですが、見事に動作しませんでした…
動作すると思い込んでいたため、見当違いな部分を修正したりして、つまずき時間を費やしてしまいました。

“.hover()”は”.mouseenter()”と”.mouseleave()”

とりあえず、私のちっぽけな頭脳では全く解答が導き出せなかったので、Google先生に相談しました。
すると、「”.hover()”は”.mouseenter()”と”.mouseleave()”をまとめたものである」とのことでした。
なるほど、つまりそもそも引数に”hover”を渡すということが間違いだったようです。

“.mouseenter().mouseleave()”を”.on()”で記述

ということで、Google先生の相談の結果、書き直すと

$(".hoge").on({
"mouseenter": function(){...},
"mouseleave": function(){...}
});

上記コードになります。
これで”.on()”での”hover”の記述するということはできました。

しかし、もう一声

先ほどのコードでは、動的に生成される要素には適用されません。
ですので、動的生成要素に対応する場合はコチラ

$(document).on({
"mouseenter": function(){...},
"mouseleave": function(){...}
}, ".hoge");

“document”の部分は親要素が決まっていれば、その親要素の指定で大丈夫なようです。
上記コードで私の思っていた動作が無事実現できました。

後述

私がまだまだ未熟というか圧倒的に知識、技術が乏しいので、ごく当然なことだったのかもしれませんが、記事にしました。
調べたことは(なるべく)忘れないよう身に付けて、成長していこうと思います。

全く話は変わるのですが、”つまずく”って「爪(つま)突(づ)く」の意のようですが、”つまづく”ではなく”つまずく”と書くのがどうも一般的なようですね…知らなかった…

参考サイト

tacamy.hatenablog