ColorFullWeb

カラーがフルな情報配信ブログ。Web関係多め。

【javascriptパターン】よく使うセレクタ(1)【jQuery】

time 2013/03/21

こんにちわ。jQuery世代の@i_saku39です。

 

【前書き】jQueryのセレクタってなんであんなに便利なんでしょう

jQuery世代の自分としてはjavascriptに触れ始めた頃、

getElementByIdとかgetElementsByNameすら知らなかったのでありがたみとかなかったのですが、

jQueryがどれだけ補助してくれているのかとわかったとき、とても感動したのを覚えています。

どれだけ補助してくれているのかはコチラ↓
(記事内容はちょっと違いますがわかりやすいと思いました。)
セレクタの高速化をjavascriptで考える – Geekz

 
 

今回の記事で重要なこと
■セレクタをコード・スニペットとして記録しておくこと

 
 

【さっそく】よく使うセレクタ

 
 

var one = $("#【ID名】").find('#【セレクトしたいID】'); // 【セレクトしたいID】
var two = $("#【ID名】").find('#【セレクトしたい要素】'); // 【セレクトしたい要素】
var three = $("#【ID名】").height(); //【ID】の高さ
var four = $("div#【ID名】"); //divの中の【ID】
var five = $("#【ID名】").find('.【クラス名】').eq(0); //【ID】の中の【クラス名】の1番目

 
 
thisとか使ってるプラグインって個人的にすごい読みづらいんです。
(基本的に読むためのものではないのですが、勉強しているので)

$("#【ID名】").click(function() {
	var six = $("#【ID名】"); // .【ID】
    var seven = $(this); // .【ID】
    var eight = $(this).parent(); //【ID】の親要素
    var nine = $(this).children(); // 【ID】の子要素
    var ten = $('.child',this); // 【ID】の子要素.child
});

 
 

ちょっと見づらいですがこんな感じです。

少しずつ増やして言って、最終的にまとめた記事がかければと思ってます。

down

コメントする