読者です 読者をやめる 読者になる 読者になる
無料で使えるシステムトレードフレームワーク「Jiji」 をリリースしました!

・OANDA Trade APIを利用した、オープンソースのシステムトレードフレームワークです。
・自分だけの取引アルゴリズムで、誰でも、いますぐ、かんたんに、自動取引を開始できます。

セレクタ

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>

実行結果はこちら