jQueryの基本「セレクタを理解しよう」

jQueryとJavaScriptの2回目。

今回はよく聞くけどよく分からない「セレクタ」について。

See the Pen jQuery[Basic-2] by CreativeFlake (@creativeflake) on CodePen.

サンプル中のボタンをクリックすると、上のテキストが消えます。



JSの解説

$(document).ready(function(){
    $("button").click(function(){　　//buttonをクリックすると次の関数を実行
        $("p").hide();　　　　　　　　//pタグを非表示にする
    });
});

ここでは
　「何を」＝buttonタグを
　「どうすると」＝クリックすると
　「何が」＝pタグが
　「どうなるのか」＝非表示にする
という一連の流れがあります。



「セレクタ」"Selector"は、英語で"Selection（選択）"の派生なので、何かを選んでいるんだ、という風に思ってください。

jQueryでは「任意の要素、範囲を指定する」という意味があるのがセレクタです。



ではさっきの例題を少し変えて、「ボタンがクリックされたら、ボタンが消える（テキストは変化しない）」という動作をしたい場合、どうすればよいでしょうか？

セレクタ自体を動作させるには"this"を使います。

See the Pen jQuery[Basic-3] by CreativeFlake (@creativeflake) on CodePen.

JSの解説

$(document).ready(function(){
    $("button").click(function(){　　//buttonをクリックすると次の関数を実行
        $(this).hide();　　　　　　　　//これ（buttonタグのこと）を非表示にする
    });
});

この"this"はjQueryでは頻出するので、ぜひ覚えて利用できるようになりたいですね。

Written by Creative Flake