jQuery入門 : 2009 : 6月

jQuery入門 No.25

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

───────────────────────────────
　jQuery入門 No.25
───────────────────────────────

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

　├ 指定した要素のスタイルを取得する
　├ 指定した要素のスタイルを設定する
　├ 指定した要素のスタイルを設定する
　├ 指定した要素の位置(top,left)を取得する

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■指定した要素のスタイルを取得する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

css(“プロパティ”)

となります。

以下の例ではクリックした部分の背景色を<span id=”result”></span>部分に
表示します。

例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(){
        $(“div”).click(function () {
           var color = $(this).css(“background-color”);
           $(“#result”).html(“背景の色は” + color + “です”);
        });
      });
    </script>
    <style>
      div { width:60px; height:60px; margin:5px; float:left; }
    </style>
</head>
<body>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■指定した要素のスタイルを設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

css({“プロパティ”:”設定したい値”,….} )

となります。

以下の例ではボタンを押すと、2月,4月部分の背景が緑に変わります。
例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(){
        $(“input:button”).click(function() {
          $(“.odd”).css({“background”:”green”});
        });
      });
    </script>
</head>
<body>
    <ul>
     <li class=”even”>1月</li>
     <li class=”odd”>2月</li>
     <li class=”even”>3月</li>
     <li class=”odd”>4月</li>
    </ul>
    <form>
      <input type=”button” value=”設定” />
    </form>
</body>
</html>

css(“プロパテ”, “値”)

となります。

以下の例では「暑いですね」部分にマウスをのせると
文字色が赤になります。

例3)
<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(){
        $(“p”).mouseover(function () {
            $(this).css(“color”,”red”);
         });

      });
    </script>
</head>
<body>
    <p>暑いですね。</p>
    <div>はい。</div>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■指定した要素の位置(top,left)を取得する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

offset()

となります。

以下の例では<div></div>の位置を<div></div>内に表示しています。

例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のコードをこれから記述します!
     $(document).ready(function(){
       var tmp = $(“div”);
       var offset = tmp.offset();
       tmp.html( “left: ” + offset.left + “, top: ” + offset.top );
     });
    </script>
    <style>
      div { width:100px; height:100px; margin-left:5px;
            float:left; background:pink}
    </style>
</head>
<body>
    <div>ここです</div>
</body>
</html>

tips_admin jQuery

jQuery入門 No.24

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

───────────────────────────────
　jQuery入門 No.24
───────────────────────────────

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

　├ 子要素を削除する
　├ 指定した要素を削除する
　├ 指定した要素を複製する
　├ 指定した要素をイベントハンドラを含めて複製する

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■子要素を削除する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

empty()

となります。

以下の例ではボタンをクリックすると、<p>こんにちは</p>の「こんにちは」部分が
削除されます。
例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(){
        $(“input:button”).click(function() {
           $(“p”).empty();
           $(“input:button”).attr(“disabled”, “disabled”);
        });
      });
    </script>
</head>
<body>
    <p>こんにちは</p>
    <form>
      <input type=”button” value=”削除” />
    </form>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■指定した要素を削除する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

remove()
または
remove(条件式)

となります。

以下の例ではボタンをクリックすると、idがtestの
<p></p>部分のみが削除されます。

例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(){
        $(“input:button”).click(function() {
           $(“p”).remove(“#test”);
           $(“input:button”).attr(“disabled”, “disabled”);
        });
      });
    </script>
</head>
<body>
    <p id=”test”>こんにちは</p>
    <p>さようなら</p>
    <form>
      <input type=”button” value=”削除” />
    </form>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■指定した要素を複製する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

clone()

となります。

以下の例ではボタンをクリックすると、「はい。」の後ろに
「暑いですね。」が追加されます。

例3)
<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(){
        $(“input:button”).click(function() {
           $(“#text”).clone().appendTo(“div”);
           $(“input:button”).attr(“disabled”, “disabled”);
        });
      });
    </script>
</head>
<body>
    <p id=”text”>暑いですね。</p>
    <div>はい。</div>
    <form>
      <input type=”button” value=”設定” />
    </form>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■指定した要素をイベントハンドラを含めて複製する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

clone(真/偽)
となります。

clone(true)
の場合、イベントハンドラを含めて複製します。

以下の例ではクリックするとボタンが複製されて
そのボタンを押してもボタンが複製されます。

例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のコードをこれから記述します!
     $(document).ready(function(){
       $(“button”).click(function(){
         $(this).clone(true).insertBefore(this);
       });
     });
    </script>
</head>
<body>
    <button>クリックしてみてください</button>
</body>
</html>

tips_admin jQuery

jQuery入門 No.23

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

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

　├ 指定した要素の子要素をhtmlコンテンツで囲む
　├ 指定した要素の子要素を要素で囲む
　├ 指定したコンテンツで置き換える
　├ 指定したセレクタの要素を指定した要素に変換

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■指定した要素の子要素をhtmlコンテンツで囲む
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

wrapInner(“htmlコンテンツ”)

となります。

以下の例ではボタンをクリックすると、<p></p>部分の中の
要素を<b></b>で囲むため太字になります。
例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(){
        $(“input:button”).click(function() {
           $(“p”).wrapInner(“<b></b>”);
           $(“input:button”).attr(“disabled”, “disabled”);
        });
      });
    </script>
    <style>p { background:#bbf; }</style>
</head>
<body>
    <p>大翔</p>
    <p>悠斗</p>
    <p>陽向</p>
    <form>
      <input type=”button” value=”設定” />
    </form>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■指定した要素の子要素を要素で囲む
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

wrapInner(“要素”)

となります。

以下の例ではボタンをクリックすると、<p></p>部分の中の
要素を<b></b>で囲むため太字になります。

例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(){
        $(“input:button”).click(function() {
           $(“p”).wrapInner(document.createElement(“b”));
           $(“input:button”).attr(“disabled”, “disabled”);
        });
      });
    </script>
    <style>p { background:#bbf; }</style>
</head>
<body>
    <p>大翔</p>
    <p>悠斗</p>
    <p>陽向</p>
    <form>
      <input type=”button” value=”設定” />
    </form>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■指定したコンテンツで置き換える
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

replaceWith(“コンテンツ”)

となります。

以下の例では「暑いですね」部分をクリックすると
「そうですね」に変更されます。

例3)
<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(){
        $(“#text”).click(function() {
           $(“#text”).replaceWith(“<div>そうですね</div>”);
        });
      });
    </script>
</head>
<body>
    <p id=”text”>暑いですね。</p>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■指定したセレクタの要素を指定した要素に変換
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

replaceAll(“セレクタ”)

となります。

$(A).replaceWith(B);
は

AをBに置換しますが、

$(A).replaceAll(B);
は

BをAに置換します。

以下の例では、画像部分が<div>画像</div>
に変更されます。

例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のコードをこれから記述します!
      $(document).ready(function(){
        $(“input:button”).click(function() {
           $(“<div class=’txt’>画像</div>”).replaceAll(“img”);

        });
      });
    </script>
    <style>
      div.txt { width:100px; height:75px; line-height:75px;
                text-align:center; background-color:pink; }

    </style>
</head>
<body>
    <img src=”sample.gif” width=”100″ height=”75″ alt=”画像” /></img>
    <form>
      <input type=”button” value=”設定” />
    </form>
</body>
</html>

tips_admin jQuery

jQuery入門 No.22

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

───────────────────────────────
　jQuery入門 No.22
───────────────────────────────

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

　├ htmlコンテンツで囲む
　├ 要素で囲む
　├ 要素全体をhtmlコンテンツで囲む
　├ 要素全体を囲む

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■htmlコンテンツで囲む
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

wrap(“コンテンツ”)

となります。

以下の例ではボタンをクリックすると、<p></p>部分を
<div></div>で囲うため、青罫線が表示されます。
例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(){
        $(“input:button”).click(function() {
           $(“p”).wrap(“<div></div>”);
           $(“input:button”).attr(“disabled”, “disabled”);
        });
      });
    </script>
    <style>
      div { border: 2px solid blue; }
      p { background:yellow; margin:4px; }
    </style>
</head>
<body>
    <p>こんにちは</p>
    <form>
      <input type=”button” value=”設定” />
    </form>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素で囲む
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

wrap(“要素”)

となります。

以下の例ではボタンをクリックすると、<p></p>部分を
createElementで作られた<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のコードをこれから記述します!
      $(document).ready(function(){
        $(“input:button”).click(function() {
           $(“p”).wrap(document.createElement(“div”));
           $(“input:button”).attr(“disabled”, “disabled”);
        });
      });
    </script>
    <style>
      div { border: 2px solid blue; }
      p { background:yellow; margin:4px; }
    </style>
</head>
<body>
    <p>こんにちは</p>
    <form>
      <input type=”button” value=”設定” />
    </form>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素全体をhtmlコンテンツで囲む
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

wrapAll(“コンテンツ”)

となります。

以下の例では、ボタンをクリックすると、
1月、2月、3月全体に枠線が表示されます。

例3)
<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(){
        $(“input:button”).click(function() {
           $(“p”).wrapAll(“<div></div>”);
        });
      });
    </script>
    <style>
      div {border:2px dotted blue; margin:5px;}
    </style>
</head>
<body>
    <p>1月</p>
    <p>2月</p>
    <p>3月</p>
    <form>
      <input type=”button” value=”設定” />
    </form>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素全体を囲む
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

wrapAll(“要素”)

となります。

以下の例では、ボタンをクリックすると、
1月、2月、3月全体に枠線が表示されます。
例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のコードをこれから記述します!
      $(document).ready(function(){
        $(“input:button”).click(function() {
           $(“p”).wrapAll(document.createElement(“div”));
        });
      });
    </script>
    <style>
      div {border:2px dotted blue; margin:5px;}
    </style>
</head>
<body>
    <p>1月</p>
    <p>2月</p>
    <p>3月</p>
    <form>
      <input type=”button” value=”設定” />
    </form>
</body>
</html>