セレクタ - うなの日記

jQueryでは、操作対象となる要素を指定するためのパラメータをセレクタと呼びます。以下のような呼び出しの

$(selector).method()

「selector」部分がそれです。値としては以下が指定可能です。

CSS形式のセレクタ
- 「#id」とか「.class」のようなもの。
- 指定のインデックス以降のリストを選択する「:gt(index)」など、jQuery独自の拡張構文も使えます。
- リファレンスはこちら
XPath
- プラグインを導入すれば使えるらしい。
エレメントそのもの
- 操作対象のDOMエレメントそのものがすでにある場合は「$(elemnt)」でエレメントを操作するためのjQueryオブジェクト?を作成できます。

あと、関数も指定できて、

$( function(){
  // 処理
});

これは、

$( document ).ready( function(){
  // 処理
});

と同じ動作になります。

以下はセレクタを使ってみるサンプルです。

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  <script type="text/javascript" src="./jquery-1.3.2.js"></script> 
  <script type="text/javascript">
    // ドキュメントがロードされた時に実行する処理を指定。
    $(function(){
      // kittensを選択し、枠で囲む
      $("#kittens").css( {
        border : "1px solid #999999",
        margin : "10px",
        padding: "10px",
        listStyle: "none"
      });
      // エレメントがわかっている場合は、↓のような形でもオブジェクトを操作できる。
      var elm = document.getElementById("kittens");
      $(elm).css( {
        listStyle: "none"
      });
      // kittens配下のliの偶数番目の色を変更する
      $("ul#kittens li:odd").css( {
        color : "#6666cc"
      });
      
    });
  </script>
</head>
<body>
  <ul id="kittens">
    <li>mii</li>
    <li>tora</li>
    <li>shiro</li>
    <li>kuro</li>
  </ul>
</body>
</html>

実行結果はこちら