jQuery入門 : 2009 : 2月

jQuery入門 No.8

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

jQueryがバージョンアップしました。
http://jquery.com/
より
jquery-1.3.2.min.jsがダウンロードできます。

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

　├ スタイルが設定されているか調べる
　├ 要素のvalue属性を取得する
　├ 要素のvalue属性を設定する(1)
　├ 要素のvalue属性を設定する(2)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■スタイルが設定されているか調べる
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

hasClass(“クラス名”)
となります。

以下の例では、設定ボタンをクリックすると、
「jQuery入門」部分のclassの設定を切り替えます。
チェックボタンをクリックすると、設定されているかどうか
アラートウインドウを表示します。
例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のコードをこれから記述します!
      function hasClass() {
        if ($(“div”).hasClass(“selected”)) {
          alert(“selectedが設定されています”);
        } else {
          alert(“selectedは設定されていません”);
        }
      }
      function toggleClass() {
        $(“div”).toggleClass(“selected”);
      }

    </script>
    <style>
    div { margin: 8px; font-size:16px; }
    .selected { color:blue; }
    </style>
</head>
<body>
    <form>
      <input type=”button” value=”設定” onClick=”toggleClass();” />
      <input type=”button” value=”チェック” onClick=”hasClass();” />
    </form>
    <div class=”selected”>jQuery入門</div>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素のvalue属性を取得する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

val()

となります。

以下の例では、入力後、ボタンをクリックすると、
<div></div>に入力内容を表示します。

例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のコードをこれから記述します!
      function getText() {
        $(“div”).text($(“#input_text”).val());
      }
    </script>
</head>
<body>
    <div>ここに入力値を表示します。</div>
    <form>
     <input type=”text” id=”input_text” />
     <input type=”button” value=”入力値を表示” onClick=”getText();” />
    </form>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素のvalue属性を設定する(1)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

val(“値”)

となります。

以下の例では、入力1に入力後、ボタンをクリックすると、
入力2に同じ値を表示します。

例3)
<html>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <script type=”text/javascript” src=”jquery-1.3.min.js”></script>
    <script type=”text/javascript”>
      // ここにjavascriptのコードをこれから記述します!
      function getText() {
        text = $(“#input_text”).val();
        $(“#input_text2″).val(text);
      }
    </script>
</head>
<body>
    <form>
     入力1<input type=”text” id=”input_text” />
     入力2<input type=”text” id=”input_text2″ />
     <input type=”button” value=”入力値1を入力2に表示” onClick=”getText();” />
    </form>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素のvalue属性を設定する(2)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

val(“値”)
は、チェックボックスやセレクトボックス、ラジオボタンでも
使用できます。

以下の例ではボタンをクリックすると、
すべてのチェックボックスにチェックが入ります。

例4)
<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のコードをこれから記述します!
      function setCheckBox(){
        $(“.check1″).val(["check1", "check2", "check3"]);
      }
    </script>
</head>
<body>
    <form>
      <input type=”checkbox” class=”check1″ value=”check1″/> check1
      <input type=”checkbox” class=”check1″ value=”check2″/> check2
      <input type=”checkbox” class=”check1″ value=”check3″/> check3
      <input type=”button” value=”すべてにチェック” onClick=”setCheckBox();” />
    </form>
</body>
</html>

tips_admin jQuery

jQuery入門 No.7

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

┼─────────────────────────────┼
　jQuery入門 No.7
┼─────────────────────────────┼

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

　├ スタイルを削除する
　├ スタイルを切り替える(1)
　├ スタイルを切り替える(2)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■スタイルを削除する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

removeClass(“クラス名”)
となります。
以下の例ではボタンをクリックすると、
<div class=”selected”>jQuery入門</div>
のclassが削除されます。
そのため文字色が青から赤に変更されます。

例1)
<html>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <script type=”text/javascript” src=”jquery-1.3.1.min.js”></script>
    <script type=”text/javascript”>
      // ここにjavascriptのコードをこれから記述します!
      function removeClass() {
        $(“div”).removeClass(“selected”);
      }
    </script>
    <style>
      div { margin: 8px; font-size:16px; color:red;}
      .selected { color:blue; }
    </style>
</head>
<body>
    <div class=”selected”>jQuery入門</div>
    <form>
      <input type=”button” value=”削除” onClick=”removeClass();” />
    </form>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■スタイルを切り替える(1)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

toggleClass(“class”)

となります。
classの有無を切り替えます。

以下の例では、ボタンをクリックすると、
<div class=”selected”>jQuery入門</div>の
文字色が赤くなったり青くなったりします。

例2)
<html>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <script type=”text/javascript” src=”jquery-1.3.1.min.js”></script>
    <script type=”text/javascript”>
      // ここにjavascriptのコードをこれから記述します!
      function toggleClass() {
        $(“div”).toggleClass(“selected”);
      }
    </script>
    <style>
      div { margin: 8px; font-size:16px; color:red;}
      .selected { color:blue; }
    </style>
</head>
<body>
    <div class=”selected”>jQuery入門</div>
    <form>
      <input type=”button” value=”切替” onClick=”toggleClass();” />
    </form>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■スタイルを切り替える(2)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

toggleClass(“クラス名”, “真偽”)

となります。
以下の例では、”クリックしてみてください。”部分を
クリックすると3回に１度だけ背景がピンクに変わります。
count countを3で割ったものの余りが0の場合、真(true)となるため
“hightlight”が設定されますが、
余りが1か2の場合は偽(false)となるため、
highlightの設定をオフになります。
countはクリックすると1づつプラスされていきます。

例3)
<html>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <script type=”text/javascript” src=”jquery-1.3.1.min.js”></script>
    <script type=”text/javascript”>
      // ここにjavascriptのコードをこれから記述します!
      $(document).ready(function(){
        var count = 0;
        $(“div”).click(function(){
          $(this).toggleClass(“highlight”, count % 3 === 0);
          count++;
        });
     });
    </script>
    <style>
      div { margin: 8px; font-size:16px; }
      .blue { color:blue; }
      .highlight { background:pink; }
    </style>
</head>
<body>
    <div class=”blue”>クリックしてみてください。</div>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

tips_admin jQuery

jQuery入門 No.6

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

┼─────────────────────────────┼
　jQuery入門 No.6
┼─────────────────────────────┼

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

　├ 属性値を設定する(3)
　├ 属性値を削除する
　├ スタイルを追加する

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■属性値を参照する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

attr(“属性名”, 関数 )

となります。
以下の例ではテキスト入力部分が入力不可になります。

例1)
<html>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <script type=”text/javascript” src=”jquery-1.3.1.min.js”></script>
    <script type=”text/javascript”>
      // ここにjavascriptのコードをこれから記述します!
      $(document).ready(function(){
       $(“#text_area”).attr(“disabled”, function() {
          return”disabled”;
        });
      });
</script>
</head>
<body>
    <form>
      <input type=”text” id=”text_area” value=”テスト” />
    </form>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■属性値を削除する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

removeAttr(“属性名”)

となります。

属性値を削除します。
以下の例では、ボタンを押すとテキスト入力ができるように
なります。

例2)
<html>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <script type=”text/javascript” src=”jquery-1.3.1.min.js”></script>
    <script type=”text/javascript”>
      // ここにjavascriptのコードをこれから記述します!
      function setCheck() {
          $(“#text_area”).removeAttr(“disabled”);
      }
    </script>
</head>
<body>
    <form>
      <input type=”text” id=”text_area” value=”" disabled />
      <input type=”button” value=”入力可能に” onClick=”setCheck();” />
    </form>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■スタイルを追加する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

addClass(“クラス名”)

となります。

以下の例では、設定ボタンを押すと、

<div>jQuery入門</div>

部分に selectedが設定されるため、色が青に変わります。

例3)
<html>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <script type=”text/javascript” src=”jquery-1.3.1.min.js”></script>
    <script type=”text/javascript”>
      // ここにjavascriptのコードをこれから記述します!
      function setClass() {
         $(“div”).addClass(“selected”);
      }
    </script>
    <style>
      div { margin: 8px; font-size:16px; }
      .selected { color:blue; }
    </style>
</head>
<body>
    <form>
      <input type=”button” value=”設定” onClick=”setClass();” />
    </form>
    <div>jQuery入門</div>
</body>
</html>

tips_admin jQuery

jQuery入門 No.5

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

┼─────────────────────────────┼
　jQuery入門 No.5
┼─────────────────────────────┼

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

　├ 属性値を参照する
　├ 属性値を設定する(1)
　├ 属性値を設定する(2)
　├ Tips　入力文字数チェックのプラグイン(2)

attr(“属性名”)

となります。

以下の例では

<div>ここに出力されます。</div>

部分に

<img src=”test1.jpg” />
のsrc部分に記述されている”test1.jpg”
が表示されます。

（今回の例1,例2では画像ファイルを１つ用意して、test1.jpgという
名前をつけています）

例1)
<html>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <script type=”text/javascript” src=”jquery-1.3.1.min.js”></script>
    <script type=”text/javascript”>
      // ここにjavascriptのコードをこれから記述します!
      $(document).ready(function(){
        var f_name = $(“img”).attr(“src”);
        $(“div”).text(f_name);
     });
    </script>
</head>
<body>
    <img src=”test1.jpg” />
    <div>ここに出力されます。</div>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■属性値を設定する(1)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

attr(プロパティ)

となります。

プロパティ部分は

({
属性名: “内容”,
属性名: “内容”,
属性名: “内容”,
    :
    :
    });

というように属性名と変えたい内容を
連続で記述します。

以下の例では

<img />

部分に画像が設定され、

部分にaltの文章が設定されます。

例2)
<html>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <script type=”text/javascript” src=”jquery-1.3.1.min.js”></script>
    <script type=”text/javascript”>
      // ここにjavascriptのコードをこれから記述します!
      $(document).ready(function(){
        $(“img”).attr({
          src: “test1.jpg”,
          title: “写真”,
          alt: “jQuery入門例用画像”
       });
       $(“div”).text($(“img”).attr(“alt”));
      });
    </script>
</head>
<body>
    <img />
    <div>ここに画像のaltが記述され、上に画像が表示されます。</div>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■属性値を設定する(2)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

attr(“属性名”,”値”)

となります。

以下の例では、設定ボタンを押すと、
入力部分が入力できなくなります。
また設定解除ボタンを押すと
入力部分が入力できるようになります。

例3)
<html>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <script type=”text/javascript” src=”jquery-1.3.1.min.js”></script>
    <script type=”text/javascript”>
      // ここにjavascriptのコードをこれから記述します!
      function setCheck($flg) {
        if ($flg === 1) {
          $(“#text_area”).attr(“disabled”,”disabled”);
        } else if ($flg === 0) {
          $(“#text_area”).attr(“disabled”, false);
        }
      }
    </script>
</head>
<body>
    <form>
      <input type=”text” id=”text_area” value=”" />
      <input type=”button” value=”設定” onClick=”setCheck(1);” />
      <input type=”button” value=”設定解除” onClick=”setCheck(0);” />
    </form>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■Tips　入力文字数チェックのプラグイン(2)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
前回ご紹介したプラグインとは別の文字数チェック
プラグインをご紹介します。

http://remysharp.com/2008/06/30/maxlength-plugin/

から

jquery.maxlength.js
をダウンロードします。

設定方法は

maxlength({オプション})

となります。

オプションの設定は
“オプション名”:”設定値”
です。

設定できるオプションは以下の通りです。

maxlength: プラグインはテキストエレメントのmaxlength要素を読み込みます。

feedback:あと何文字入力できるか表示する要素を記述。
hardLimit:制限文字数以上入力できるかどうか。
(TRUE/FALSE 未設定時はTRUE)TRUEの場合、制限の文字数以上は入力できません。
Falseに設定すると入力可能になり、超えるとマイナスで表示します。
useInput:<input type=”hidden” にname=”maxlengete” value=”数字” />
という形で設定する場合、TRUEに設定します。(TRUE/FALSE 未設定時はFALSE)

以下の例では、フォームのコメント欄の文字数を設定して
表示しています。

例4)
<html>
<head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    <script type=”text/javascript” src=”jquery-1.3.1.min.js”></script>
    <script type=”text/javascript” src=”jquery.maxlength.js”></script>
    <script type=”text/javascript”>
      // ここにjavascriptのコードをこれから記述します!
      $(document).ready(function(){
        $(“#comment”).maxlength({
         “feedback” : “#charanum”
        });
      });
    </script>
</head>
<body>
    <form>
      <p>残り: <span id=”charanum” ></span>文字</p>
      <textarea maxlength=”50″ id=”comment” name=”コメント”>テスト</textarea>
    </form>
</body>
</html>