JavaScript 備忘録 | メシのタネ

jQuery11
このエントリーをはてなブックマークに追加

【jQuery】セレクタのはなし

 2014/09/12

jQueryで何か作ってみたいなぁと思ってんですけど、
ダイナミックなもの開発したこと無いので、
イベントに対して発動するってあんまり馴染みが無くって
上手くコードが書けてない感じです。

個人的にはJSで何か作る場合は、デザインの資質とか
あった方が良いなと思います。僕には無いので苦労しています。

あんまりjQueryの話と関係ない事言いましたけど、
jQueryのセレクタの事でも書いてみようかなと思います。

jQueryのセレクタ

指定したタグやid、クラスや属性等
APIを駆使して、HTMLから指定されたら探しに行ってくれます。


     $("body")

こんな感じの奴です。
これを動かすには、DOMていうAPIが使われています。

DOMについて

DOMっていうのはジオン公国軍の陸戦用量産型モビルスーツではなく
DocumentObjectModelといわれる奴で、XML、HTMLをツリー構造として扱える仕組みです。

DOMを利用することで、pタグに属性追加したり、
divタグのスグ下にdivタグを追加したりすることが行えたりします。

セレクタの動作

セレクタの指定によって、働くDOMが異なります。
querySelectorを使わせると遅くなるので、
getElementBy系を使わせるようにすると良いです。

IDはIDだけでclassはclassだけで検索させる方が
jQueryは素早く動く事ができます。

getElement > querySelector > sizzle

って感じだと思います。
sizzleはjQueryのセレクタエンジンです。
主に:radioとか:hiddenとか:checkとか
フィルター使うときに使う場合があります。

セレクタって何処に載ってるの

セレクタって実はかなりの数があります。
私も全部把握できているわけではないです。
参考になりそうなとこ載せておきます。

選択セレクタを可視化してくれるサンプル

セレクタ理解するのに丁度良いかも

jQueryリファレンスとか

ここに基本的な奴は大体載ってます。

jQueryのセレクタメモ

ちょっと変わったセレクタの使い方が紹介されてます。階層関係の指定、ANDやOR、属性に対しての条件指定等

今日の記事の詳細が分かる生地


このエントリーをはてなブックマークに追加

コメント

"【jQuery】セレクタのはなし"
でメシのタネのおすすめを検索したよ!

プログラミング備忘録 | メシのタネ