セレクタ ---- 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独自のセレクタです。