javascriptでもDOM操作やイベント処理などはできるのですが、jQueryはセレクタの書き方が簡単で非常にわかりやすくてjavascriptよりもかなりパワフル。
jQuery Get Started!
jQueryを使うにはjQueryの本体をダウンロードする必要があります。ダウンロードは公式サイトから。
ダウンロードしたjQuery-xx.min.js
をプロジェクトファイルの任意の場所に移動し、HTMLに追加すれば準備完了。
<!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も本家のリファレンスを参照するのが正確で確実です。