jQuery入門 : 2009 : 7月

jQuery入門 No.29

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

───────────────────────────────
　jQuery入門 No.29
───────────────────────────────

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

　├ 最初にマッチした要素の外部高を得る
　├ 最初にマッチした要素の外部幅を得る
　├ 条件に合致しない要素を除く
　├ 関数で指定した条件に合致しない要素を除く
　├ 編集後記

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■最初にマッチした要素の外部高を得る(border,paddingを含む)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

outerHeight([true])
となります。

マージンを含む場合はouterHeight(true)
とします。

以下の例ではボタンを押すと外部高を表示します。

例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(){

});

    </script>
    <style>
      p { width:100px;margin:10px;padding:5px;border:2px solid; }
    </style>
</head>
<body>
<button id=”getpara”>パラグラフの外部高取得</button>
<button id=”getpara2″>パラグラフの外部高取得(マージン有）</button>
<div> </div>
<p>
    パラグラフは<br />ここです。
</p>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■最初にマッチした要素の外部幅を得る(border,paddingを含む)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

outerWidth([true])

となります。

マージンを含む場合はouterWidth(true)
とします。

以下の例ではボタンを押すと外部幅を表示します。

例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(){

});

    </script>
    <style>
      p { width:100px; border:1px solid; margin:10px;}
    </style>
</head>
<body>
<button id=”getpara”>パラグラフの外部幅取得</button>
<button id=”getpara2″>パラグラフの外部幅取得(マージン有）</button>
<div> </div>
<p>
    パラグラフは<br />ここです。
</p>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■条件に合致しない要素を除く
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

filter(条件)

となります。

以下の例ではclassがmiddleのものを赤の枠線に変更しています。

例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(){

$(“div”).filter(“.middle”).css(“border-color”, “red”);

      });
    </script>
    <style>
      div { width:60px; height:60px; margin:5px; float:left;
            background:pink;
            border:2px solid;}
    </style>
</head>
<body>
    <div class=”first”></div>
    <div class=”middle”></div>
    <div class=”middle”></div>
    <div class=”middle”></div>
    <div class=”middle”></div>
    <div class=”last”></div>

</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■関数で指定した条件に合致しない要素を除く
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

filter(関数)

となります。

以下の例ではインデックスが1(0から数える）のものとidがfourthの
ものの枠線を２重の赤に指定しています。
例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(){

        $(“div”).filter(function (index) {
                  return index == 1 || $(this).attr(“id”) == “fourth”;
                }).css(“border”, “3px double red”);
      });
    </script>
    <style>
      div { width:60px; height:60px; margin:5px;
            float:left; background:pink;}
    </style>
</head>
<body>
    <div id=”first”></div>
    <div id=”second”></div>
    <div id=”third”></div>
    <div id=”fourth”></div>
    <div id=”fifth”></div>
    <div id=”last”></div>
</body>
</html>

tips_admin jQuery

jQuery入門 No.28

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

───────────────────────────────
　jQuery入門 No.28
───────────────────────────────

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

　├ 最初にマッチした要素の幅を取得する
　├ 幅を設定する
　├ 最初にマッチした要素の内部高を取得する
　├ 最初にマッチした要素の内部幅を取得する
　├ 編集後記

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■最初にマッチした要素の幅を取得する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

width()
となります。

以下の例ではボタンを押すとそれぞれの幅を表示します。

例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(){

});

    </script>
    <style>
      p { width:100px; border:1px solid; }
    </style>
</head>
<body>
<button id=”getpara”>パラグラフの幅取得</button>
<button id=”getdoc”>ドキュメントの幅取得</button>
<button id=”getwin”>ウインドウの幅取得</button>
<div> </div>
<p>
    パラグラフは<br />ここです。
</p>

</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■幅を設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

width(値)

となります。

以下の例ではdiv部分をクリックすると幅が20に変更されます。
例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(){

        $(“div”).one(‘click’, function () {
          $(this).width(20);
        });
       });
    </script>
    <style>
      div { width:100px; height:100px; float:left; margin:5px;
            background:red; cursor:pointer; }

    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■最初にマッチした要素の内部高を取得する(borderは除き、paddingを含む）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

innerHeight()

となります。

以下の例ではボタンを押すと<p></p>部分の内部高を表示します。

例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(){

        function showHeight(ele, h) {
          $(“div”).text( ele +
                    ” の高さは ” + h + “px.”);
        }
        $(“#getpara”).click(function () {
          showHeight(“パラグラフ”, $(“p”).innerHeight());
        });

});

    </script>
    <style>
      p {width: 150px;height: 50px;
         border: 3px solid black;
         padding: 2px;
      }
    </style>
</head>
<body>
<button id=”getpara”>パラグラフの内部高取得</button>
<div></div>
<p>
    パラグラフは<br />ここです。
</p>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■最初にマッチした要素の内部幅を取得する(borderは除き、paddingを含む）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

innerWidth()

となります。

以下の例ではボタンを押すと<p></p>部分の内部幅を表示します。
例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(){

        function showHeight(ele, h) {
          $(“div”).text( ele +
                    ” の幅は ” + h + “px.”);
        }
        $(“#getpara”).click(function () {
          showHeight(“パラグラフ”, $(“p”).innerWidth());
        });

});

    </script>
    <style>
      p {width: 150px;height: 50px;
         border: 3px solid black;
         padding: 2px;
      }
    </style>
</head>
<body>
<button id=”getpara”>パラグラフの内部幅取得</button>
<div></div>
<p>
    パラグラフは<br />ここです。
</p>

</body>
</html>

tips_admin jQuery

jQuery入門 No.27

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

───────────────────────────────
jQuery入門 No.27
───────────────────────────────

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

├ 最初にマッチした要素の現在のスクロール上の左位置を取得
├ 指定した値まで右方向へスクロールする
├ 最初にマッチした要素の高さを取得する
├ 高さを設定する

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■最初にマッチした要素の現在のスクロール上の左位置を取得
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

scrollLeft()
となります。

例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”).text(“scrollLeft:” + $(“p”).scrollLeft() );

});
</script>
<style>
p { margin:10px;padding:5px;border:2px solid #666;
width:300px;height:300px; }
</style>
</head>
<body>
<p>pです。</p>
<div></div>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■指定した値まで右方向へスクロールする
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

crollLeft(値)

となります。

以下の例では左から100の位置にスクロールします。

例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(){
$(“div.demo”).scrollLeft(100);
});
</script>
<style>
div.demo {
margin:5px;
padding:5px;
position:relative;
width:200px;
height:100px;
overflow:auto;
}
p { margin:10px;padding:5px;border:1px solid #666;
width:1000px;height:1000px; }
</style>
</head>
<body>
<div class=”demo”><p>こんにちは！</p></div>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■最初にマッチした要素の高さを取得する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

height()

となります。

以下の例ではボタンを押すとそれぞれの高さを表示します。

例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(){

});

</script>
<style>
p { width:100px; border:1px solid; }
</style>
</head>
<body>
<button id=”getpara”>パラグラフの高さ取得</button>
<button id=”getdoc”>ドキュメントの高さ取得</button>
<button id=”getwin”>ウインドウの高さ取得</button>
<div> </div>
<p>
パラグラフは<br />ここです。
</p>

</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■高さを設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

height(値)

となります。

以下の例ではdiv部分をクリックすると高さが20に変更されます。
例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(){

$(“div”).one(‘click’, function () {
$(this).height(20);
});
});
</script>
<style>
div { width:100px; height:100px; float:left; margin:5px;
background:red; cursor:pointer; }
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

tips_admin jQuery

jQuery入門 No.26

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

───────────────────────────────
　jQuery入門 No.26
───────────────────────────────

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

　├ 親要素からの相対位置を取得
　├ 最初にマッチした要素からのスクロール位置を取得
　├ 指定した値まで下方向へスクロールする

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■親要素からの相対位置を取得
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

position()

となります。
例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(){

var position = $(“p”).position();
$(“div”).text( “left: ” + position.left + “, top: ” + position.top );

});
</script>
</head>
<body>
<p>ここの位置が表示されます。</p>
<div>ここに表示します。</div>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■最初にマッチした要素からのスクロール位置を取得
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

scrollTop()

となります。
例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(){

$(“div”).text(“scrollTop:” + $(“p”).scrollTop() );

});
</script>
<style>
p { margin:10px;padding:5px;border:2px solid #666;width:300px;height:300px; }
</style>
</head>
<body>
<p>pです。</p>
<div></div>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■指定した値まで下方向へスクロールする
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法

scrollTop(値)

となります。

以下の例では上から100の位置にスクロールします。

例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(){
        $(“div.demo”).scrollTop(100);
      });
</script>
<style>
div.demo {
            margin:5px;
            padding:5px;
            position:relative;
            width:200px;
            height:100px;
            overflow:auto;
}
p { margin:10px;padding:5px;border:1px solid #666;
      width:1000px;height:1000px; }
</style>
</head>
<body>
    <div class=”demo”><p>こんにちは！</p></div>
</body>
</html>

tips_admin jQuery

日	月	火	水	木	金	土
« 6月				8月 »
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31