jQuery 初心者のためのセレクタ入門

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

jquery初心者のためのセレクタ入門

javascriptでもDOM操作やイベント処理などはできるのですが、jQueryはセレクタの書き方が簡単で非常にわかりやすくてjavascriptよりもかなりパワフル。

jQuery Get Started!

jQueryを使うにはjQueryの本体をダウンロードする必要があります。ダウンロードは公式サイトから。
jQuery
ダウンロードしたjQuery-xx.min.jsをプロジェクトファイルの任意の場所に移動し、HTMLに追加すれば準備完了。
js-download

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Selector</title>
</head>
<body>
    <h1>SELECTOR</h1>

    <p id="id-name">jQuery Get Started!</p>
    
    
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/jQuery-selector.js"></script>
</body>
</html>

jQueryのセレクタの書き方

javascriptではDOM操作をするのにidやtag名を取得していました。

var element = document.getElementById('id-name');

jQueryではCSSのセレクタと同じ書き方で簡単に取得可能。

var element = $('#id-name');

要素の検索にはCSSのセレクタがほぼそのまま使用できるので普段CSSを使っているならわかりやすいと思います。

jQueryのリファレンスサイト

jQuery日本語リファレンスもありますが、現在は行進が止まってる？ので最新版のjQueryを使う場合は本家のAPIリファレンスなどを参照しましょう。

簡単に便利なコンポーネントが使えるjQueryUIのリファレンスはこちら。jQueryUIも本家のリファレンスを参照するのが正確で確実です。