セレクタ ---- jQueryを使った要素の取得
記述の仕方は以下になります。
$(セレクタ);
使い方としては↓
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<title>jQuery-test02</title>
</head>
<body>
<div id="div1">
<span id="span1"></span>
<span id="span2"></span>
</div>
<div id="div2">
<span id="span3"></span>
<span id="span4"></span>
</div>
<script type="text/javascript">
$(function(){
// すべてのdiv要素を取得
var $div = $('div');
console.log($div);
//=> <div id="div1">...</div>, <div id="div2">...</div>
// id名がdiv1の要素を取得
var $div1 = $('#div1');
console.log($div1);
//=> <div id="div1">...</div>
// id名がdiv1の子要素のspan要素を取得
var $span = $('#div1 span');
console.log($span);
//=> <span id="span1"></span>, <span id="span2"></span>
});
</script>
</html>
上記の様に基本的には「CSSのセレクタ」がすべてそのまま使えます。
jQueryの独自のセレクタ
次の様なjQuery独自のセレクタも存在します。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<title>jQuery-test02</title>
</head>
<body>
<div id="div1">
<span id="span1"></span>
<span id="span2"></span>
</div>
<div id="div2">
<span id="span3"></span>
<span id="span4"></span>
</div>
<script type="text/javascript">
$(function(){
// すべてのdiv要素のうち、2番目の要素(指定する数字は0からスタート)を取得
var $div2 = $('div:eq(1)');
console.log($div2); //=> <div id="div2">...</div>
});
</script>
</html>
コメントにも書いてある様にeq(1)はdiv要素の２番目を指定するjQuery独自のセレクタです。