jQuery入門 : jQuery入門 No.38

jQuery入門 No.38

2009 10月16日
コメントは受け付けていません。

───────────────────────────────
　jQuery入門 No.38
───────────────────────────────

───────────────────────────────
■目次
───────────────────────────────

　1)要素のchangeイベントを実行する
　2)要素のchangeイベントに関数を設定する
　3)要素のclickイベントを実行する
　4)要素をclickイベントに関数を設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素のchangeイベントを実行する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

change()

となります。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素のchangeイベントに関数を設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

change(関数)
となります。

以下の例では選択された都道府県名を<div></div>に
設定しています。
また、初回change()イベントを実行しています。
例1)
<html>
<head>
    <meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
    <script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
    <script type=”text/javascript”>
      // ここにjavascriptのコードをこれから記述します!
      $(document).ready(function(){
        $(“select”).change(function(){
          var $str = $(“select option:selected”).text();
          $(“#disp”).html($str +”を選択”);
        }).change();
      });
    </script>
    <style>span {display:none;}</style>

</head>
<body>
    <select name=”pref”>
      <option>東京都</option>
      <option selected=”selected”>神奈川県</option>
      <option>埼玉県</option>
      <option >千葉県</option>
    </select>
    <div id=”disp”></div>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素のclickイベントを実行する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

click()

となります。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素をclickイベントに関数を設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

click(関数)

となります。

以下の例ではクリックすると文字が見えなくなります。

例2)
<html>
<head>
    <meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
    <script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
    <script type=”text/javascript”>
      // ここにjavascriptのコードをこれから記述します!
      $(document).ready(function(){
        $(“li”).click(function(){
          $(this).addClass(“hidden”);
        });
      });
    </script>
    <style>
       li{width:200; padding:2px;margin:2px;}
       .hidden{display:none;}
    </style>
</head>
<body>
    <ul>
      <li>Outlook</li>
      <li>FireFox</li>
      <li>Safari</li>
      <li>Chrome</li>
    </ul>
</body>
</html>