jQuery入門 http://www.bface.net/tips/jquery javascriptのライブラリ　jQueryの簡単な例の紹介です Tue, 29 Jun 2010 08:03:21 +0000 ja hourly 1 http://wordpress.org/?v=3.0 jQuery入門 No.59 http://www.bface.net/tips/jquery/?p=215 http://www.bface.net/tips/jquery/?p=215#comments Fri, 25 Jun 2010 08:02:55 +0000 tips_admin http://www.bface.net/tips/jquery/?p=215 ───────────────────────────────
　jQuery入門 No.59
───────────────────────────────

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

　1)Ajax通信で共有使用できる設定を行う
　2)設定したForm要素を送信可能な標準のURLエンコードされた表記に変換する
　3)設定したForm要素を送信可能な標準のURLエンコードされた表記に変換し、
JSON形式で返却する
　4)編集後記

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■Ajax通信で共有使用できる設定を行う
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

  jQuery.ajaxSetup( オプション )

  または

  $.ajaxSetup( オプション )

【サンプル１説明】
ボタンを押すと、PHPのプログラムを呼び、
返ってきたhtmlを表示しています。

こちらはPHPのプログラムを呼んでいますので、
PHPが動作するWebサーバー上でのみ動作します。

【サンプル１】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />

<script src=”jquery-1.4.2.min.js”></script>
</head>
<body>
<p>
<button>押してみてね</button>
</p>
<div id=”results”></div>
<script>

$.ajaxSetup({
  url: ‘test_post.php’,
  type: “POST”

});

$(“button”).click(function () {
$.ajax({
  data: {‘key’: ‘ビーフェイス’},
  success: function(data){
    $(“#results”).append(data);
  }
});

});

</script>
</body>
</html>

【test_post.php】
<p>postされた値は</p>
<p><?= htmlspecialchars($_POST['key'], ENT_QUOTES, ‘UTF-8′); ?></p>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■設定したForm要素を送信可能な標準のURLエンコードされた表記に変換する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

 serialize()

【サンプル２説明】
フォームのセレクションボックスや、チェックボックスなどを
選択したり、入力したりすると、<div id=”results”></div>
部分に変換された表記を表示します。
【サンプル２】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />

<script src=”jquery-1.4.2.min.js”></script>
</head>
<body>
<form>
<select name=”selection” >
      <option value=”0″>選択してください</option>
      <option value=”1″>東京都</option>
      <option value=”2″>神奈川県</option>
      <option value=”3″>埼玉県</option>
      <option value=”3″>千葉県</option>
</select>

<input type=”checkbox” name=”pc1″ value=”windows” id=”ch1″/>
<label for=”ch1″>windowsを使っている</label>
<input type=”checkbox” name=”pc2″ value=”mac” id=”ch2″/>
<label for=”ch2″>macを使っている</label>
<br />
<input type=”radio” name=”radio” value=”male” id=”r1″/>
<label for=”r1″>男性</label>
<input type=”radio” name=”radio” value=”female” id=”r2″/>
<label for=”r2″>女性</label>
<br />
<input type=”text” name=”etc” />
</form>

<div id=”results”></div>

<script>
    function showValues() {
      var str = $(“form”).serialize();
      $(“#results”).text(str);
    }
    $(“:checkbox, :radio”).click(showValues);
    $(“select”).change(showValues);

    $(“:text”).keyup(showValues);
    showValues();
</script>

</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■設定したForm要素を送信可能な標準のURLエンコードされた表記に変換し、
JSON形式で返却する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

 serializeArray()

【サンプル３説明】
ボタンを押すと、入力データのnameとvalueを<div id=”results”></div>
部分に表示します。
【サンプル３】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />

<script src=”jquery-1.4.2.min.js”></script>
</head>
<body>
<form>
<select name=”selection” >
      <option value=”0″>選択してください</option>
      <option value=”1″>東京都</option>
      <option value=”2″>神奈川県</option>
      <option value=”3″>埼玉県</option>
      <option value=”3″>千葉県</option>
</select>

<input type=”checkbox” name=”pc1″ value=”windows” id=”ch1″/>
<label for=”ch1″>windowsを使っている</label>
<input type=”checkbox” name=”pc2″ value=”mac” id=”ch2″/>
<label for=”ch2″>macを使っている</label>
<br />
<input type=”radio” name=”radio” value=”male” id=”r1″/>
<label for=”r1″>男性</label>
<input type=”radio” name=”radio” value=”female” id=”r2″/>
<label for=”r2″>女性</label>
<br />
<input type=”text” name=”etc” />
<br />
</form>
<button>入力したデータは？</button>
<div id=”results”></div>
<script>

$(“button”).click(function () {
$(“#results”).empty();
var array = $(“form”).serializeArray();

  jQuery.each(array , function(i, data) {
    $(“#results”).append(“name: ” + data.name + ” value:” + data.value + “<br />”);
  });
});

</script>

</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
twitterのダウンしたときのくじらのイメージを
CSSで表現した方がいらっしゃるようで
すごいなぁ～とついつい感心してしまいました。

IEでは崩れてしまいますが、SafariやChromeでは
ゆらゆらゆれています。
http://www.subcide.com/articles/pure-css-twitter-fail-whale/

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  jQuery入門 (http://www.bface.net/tips/jquery/)
    発行：株式会社ビーフェイス http://www.bface.net/
    発行システム：『まぐまぐ！』 http://www.mag2.com/
    配信中止はこちら http://www.mag2.com/m/0000280891.html
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    ■レンタルサーバー比較サイト■
      http://www.rental-server-search.jp/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

]]> http://www.bface.net/tips/jquery/?feed=rss2&p=215 0 入力関連プラグインの紹介ページ http://www.bface.net/tips/jquery/?p=211 http://www.bface.net/tips/jquery/?p=211#comments Mon, 21 Jun 2010 01:12:04 +0000 tips_admin http://www.bface.net/tips/jquery/?p=211 @ITのjQueryプラグイン実践活用法に「あなたのWebを入力しやすくするjQueryプラグイン10選」という記事がありました。

フォームを作る際参考になりそうですヨ。

]]> http://www.bface.net/tips/jquery/?feed=rss2&p=211 0 jQuery入門 No.58 http://www.bface.net/tips/jquery/?p=209 http://www.bface.net/tips/jquery/?p=209#comments Fri, 18 Jun 2010 07:00:03 +0000 tips_admin http://www.bface.net/tips/jquery/?p=209 ───────────────────────────────
jQuery入門 No.58
───────────────────────────────

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

1)Ajaxリクエスト終了時に実行するコールバック関数を設定する
2)Ajaxリクエスト送信が成功時に実行するコールバック関数を設定する
3)編集後記

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■Ajaxリクエスト終了時に実行するコールバック関数を設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

ajaxStop( コールバック関数 )

【サンプル１説明】
ボタンを押すと、「開始！」のアラートが出て
ロード中です…を表示します。
データの読み込みが完了すると、「完了」の
アラートが出てロード中です…を隠します。

こちらはPHPのプログラムを呼んでいますので、
PHPが動作するWebサーバー上でのみ動作します。

【サンプル１】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />

<script src=”jquery-1.4.2.min.js”></script>
<style>
#loading { display:none; }

</style>
</head>
<body>
<p>
<button>押してみてね</button>
</p>
<div id=”loading”>ロード中です…</div>
<div id=”results”></div>
<script>

$(“#results”).ajaxStart(function(){
alert(“開始”);
$(“#loading”).show();
});

$(“#results”).ajaxSend(function(){
$(“#results”).text(“”);
});

$(“#results”).ajaxStop(function(){
alert(“完了”);
$(“#loading”).hide();
});

$(“button”).click(function () {
$.getJSON(
“test_getjson2.php”,
null,
function(data) {
$(“#results”).append(“<dl>”);
for (i in data) {
$(“#results”).append(“<dt>” + i + “</dt><dd>” + data[i] + “</dd>”);
}
$(“#results”).append(“</dl>”);
});

});

</script>
</body>
</html>

【test_getjson2.php】
<?php
echo <<<EOF
{“5/1″: “○○ちゃん誕生日”, “5/2-5″: “旅行”,”5/6″: “夕食会”}
EOF;
?>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■Ajaxリクエスト送信が成功時に実行するコールバック関数を設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

ajaxSuccess( コールバック関数 )

【サンプル２説明】
ボタンを押すと、「開始！」のアラートが出て
ロード中です…を表示します。
データの読み込みが成功すると、「成功しました！」の
アラートが出てロード中です…を隠します。

こちらはPHPのプログラムを呼んでいますので、
PHPが動作するWebサーバー上でのみ動作します。

【サンプル２】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />

<script src=”jquery-1.4.2.min.js”></script>
<style>
#loading { display:none; }

</style>
</head>
<body>
<p>
<button>押してみてね</button>
</p>
<div id=”loading”>ロード中です…</div>
<div id=”results”></div>
<script>

$(“#results”).ajaxStart(function(){
alert(“開始”);
$(“#loading”).show();
});

$(“#results”).ajaxSend(function(){
$(“#results”).text(“”);
});

$(“#results”).ajaxSuccess(function(){
alert(“成功しました！”);
$(“#loading”).hide();
});

$(“button”).click(function () {
$.getJSON(
“test_getjson2.php”,
null,
function(data) {
$(“#results”).append(“<dl>”);
for (i in data) {
$(“#results”).append(“<dt>” + i + “</dt><dd>” + data[i] + “</dd>”);
}
$(“#results”).append(“</dl>”);
});
});

</script>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
東京も梅雨入りしました。
４月の天気の影響かつい最近までつつじが綺麗でしたが
これで紫陽花が元気に咲きそうですね。
ワールドカップも始まり、サッカーファンの方は眠れない日々が
続きそうですね。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
jQuery入門 (http://www.bface.net/tips/jquery/)
発行：株式会社ビーフェイス http://www.bface.net/
発行システム：『まぐまぐ！』 http://www.mag2.com/
配信中止はこちら http://www.mag2.com/m/0000280891.html
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■レンタルサーバー比較サイト■

http://www.rental-server-search.jp/

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

]]> http://www.bface.net/tips/jquery/?feed=rss2&p=209 0 jQuery入門 No.56 http://www.bface.net/tips/jquery/?p=206 http://www.bface.net/tips/jquery/?p=206#comments Fri, 04 Jun 2010 07:48:37 +0000 admin http://www.bface.net/tips/jquery/?p=206 ───────────────────────────────
　jQuery入門 No.56
───────────────────────────────

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

　1)Ajaxリクエスト完了時に実行するコールバック関数を設定する
　2)Ajaxリクエストが失敗時に実行するコールバック関数を設定する
　3)編集後記

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■Ajaxリクエスト完了時に実行するコールバック関数を設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

  ajaxComplete( コールバック関数 )
【サンプル１説明】
ボタンを押すと、test_post.phpを呼び、取得した
データを表示しています。
表示完了後に完了！を表示します。

こちらはPHPのプログラムを呼んでいますので、
PHPが動作するWebサーバー上でのみ動作します。

【サンプル１】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />

<script src=”jquery-1.4.2.min.js”></script>
</head>
<body>
<p>
<button>押してみてね！</button>
</p>
<div id=”results”></div>
<div id=”results2″></div>
<script>

$(“#results”).ajaxComplete(function(){
  $(“#results2″).append(“完了 <br />”);
});
$(“button”).click(function () {
$.post(
 ”test_post.php”,
  {“key”:”値は１です”},
  function(data) {
    $(“#results”).append(data + “<br />”);
    },”html”);

});

</script>
</body>
</html>

【test_post.php】
<p>postされた値は</p>
<p><?php echo htmlspecialchars($_POST['key'], ENT_QUOTES, ‘UTF-8′); ?></p>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■Ajaxリクエストが失敗時に実行するコールバック関数を設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

 ajaxError( コールバック関数 )
【サンプル２説明】
ボタンを押すと、test_post2.phpを呼ぼうとしますが、
存在しないため、読み込み失敗が表示され、その後に
完了と表示します。

【サンプル２】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />

<script src=”jquery-1.4.2.min.js”></script>
</head>
<body>
<p>
<button>押してみてね！</button>
</p>
<div id=”results”></div>
<div id=”results2″></div>
<script>

$(“#results”).ajaxComplete(function(){
  $(“#results2″).append(“完了 <br />”);
});

$(“#results”).ajaxError(function(){
  $(“#results2″).append(“読み込み失敗 <br />”);
});

$(“button”).click(function () {
$.post(
 ”test_post2.php”,
  {“key”:”値は１です”},
  function(data) {
    $(“#results”).append(data + “<br />”);
    },”html”);

});

</script>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
6月に入りました。
今年も半分が終わろうとしているんですね。
色々な変化を受け入れて少しずつ前進できると
良いですね。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  jQuery入門 (http://www.bface.net/tips/jquery/)
    発行：株式会社ビーフェイス http://www.bface.net/
    発行システム：『まぐまぐ！』 http://www.mag2.com/
    配信中止はこちら http://www.mag2.com/m/0000280891.html
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    ■レンタルサーバー比較サイト■
      http://www.rental-server-search.jp/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

]]> http://www.bface.net/tips/jquery/?feed=rss2&p=206 0 jQuery入門 No.55 http://www.bface.net/tips/jquery/?p=204 http://www.bface.net/tips/jquery/?p=204#comments Fri, 28 May 2010 07:06:04 +0000 tips_admin http://www.bface.net/tips/jquery/?p=204 ───────────────────────────────
　jQuery入門 No.55
───────────────────────────────

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

　1)HTTP通信(GET)でjavascriptファイルを読み込み実行する
　2)HTTP通信(POST)でデータを取得する
　3)編集後記

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■HTTP通信(GET)でjavascriptファイルを読み込み実行する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

  jQuery.getScript( url, [コールバック関数] )

または

  $.getScript( url, [コールバック関数] )

戻り値はXMLHttpRequestオブジェクトになります。
【サンプル１説明】
ボタンを押すと、test.jsが読み込まれ、アラートが表示されます。

【サンプル１】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />

<script src=”jquery-1.4.2.min.js”></script>
</head>
<body>
<p>
<button>押してみてね！</button>
</p>
<div id=”results”></div>
<script>
$(“button”).click(function () {
$.getScript(
 ”test.js”);
});

</script>
</body>
</html>

【test.js】
alert(“呼ばれたよ!”);

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■HTTP通信(POST)でデータを取得する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

 jQuery.post( url, [ 送信するデータ ], [コールバック関数], [データの形式] )

または

  $.post( url, [ 送信するデータ ], [コールバック関数], [データの形式] )
【サンプル２説明】
ボタンを押すと、test_post.phpを呼び、取得した
データを表示しています。
こちらはPHPのプログラムを呼んでいますので、
PHPが動作するWebサーバー上でのみ動作します。

【サンプル２】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />

<script src=”jquery-1.4.2.min.js”></script>
</head>
<body>
<p>
<button>押してみてね！</button>
</p>
<div id=”results”></div>
<script>
$(“button”).click(function () {
$.post(
 ”test_post.php”,
  {“key”:”値は１です”},
  function(data) {
    $(“#results”).append(data + “<br />”);
    },”html”);

});

</script>
</body>
</html>
【test_post.php】
<p>postされた値は</p>
<p><?php echo htmlspecialchars($_POST['key'], ENT_QUOTES, ‘UTF-8′); ?></p>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
この前「Charlotte’s Web（シャーロットのおくりもの)」をなにげに読み
始めたら結構面白かったです。
分からない単語なども結構ありますが、読み進めるにはほどよい長さでした。
英語の多読をされている方には結構お勧めかもしれません。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  jQuery入門 (http://www.bface.net/tips/jquery/)
    発行：株式会社ビーフェイス http://www.bface.net/
    発行システム：『まぐまぐ！』 http://www.mag2.com/
    配信中止はこちら http://www.mag2.com/m/0000280891.html
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    ■レンタルサーバー比較サイト■
      http://www.rental-server-search.jp/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

]]> http://www.bface.net/tips/jquery/?feed=rss2&p=204 0 jQuery入門 No.54 http://www.bface.net/tips/jquery/?p=202 http://www.bface.net/tips/jquery/?p=202#comments Mon, 24 May 2010 07:04:58 +0000 tips_admin http://www.bface.net/tips/jquery/?p=202 ───────────────────────────────
　jQuery入門 No.54
───────────────────────────────

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

　1)HTTP通信(GET)でデータを取得する
　2)HTTP通信(GET)でJSON形式のデータを取得する
　3)編集後記

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■HTTP通信(GET)でデータを取得する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】
  jQuery.get( url, [ 送信するデータ ], [コールバック関数], [データの形式] )

または

  $.get( url, [ 送信するデータ ], [コールバック関数], [データの形式] )

戻り値はXMLHttpRequestオブジェクトになります。
【サンプル１説明】
ボタンを押すと、test.htmlが読み込まれます。
(IEの場合はwebサーバーでないと動作しない場合があるようです）

【サンプル１】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />

<script src=”jquery-1.4.2.min.js”></script>
</head>
<body>
<p>
<button>押してみてね！</button>
</p>
<div id=”results”></div>
<script>
$(“button”).click(function () {
$.get(
 ”test.html”,
  null,
  function(data, status) {
    $(“#results”).append(data);
  },
  “html”);
});

</script>
</body>
</html>

【test.html】
テスト！<br />
読み込まれましたか？<br />

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■HTTP通信(GET)でJSON形式のデータを取得する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

jQuery.getJSON(url, [データ], [コールバック関数])

または

$.getJSON(url, [データ], [コールバック関数])
【サンプル２説明】
ボタンを押すと、test_getjson.phpを呼び、取得した
JSONデータを表示しています。
こちらはPHPのプログラムを呼んでいますので、
PHPが動作するWebサーバー上でのみ動作します。

【サンプル２】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />

<script src=”jquery-1.4.2.min.js”></script>
</head>
<body>
<p>
<button>押してみてね！</button>
</p>
<div id=”results”></div>
<script>
$(“button”).click(function () {
$.getJSON(
 ”test_getjson.php”,
  null,
  function(data) {
    for (i in data) {
      $(“#results”).append(“キー:” + i + ” 値:” + data[i] + “<br />”);
    }
  });

});

</script>
</body>
</html>

【test_getjson.php】
<?php
echo <<<EOF
{“key1″: “value1″, “key2″: “value2″}
EOF;
?>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
今年の私のブームはホームベーカリー、週に3日程の利用率です。
焼きたてパンも美味しいですが、半日くらいたつと
しっとりしてきてまた美味しいです。

イーストはサフかパネトーネマザーを使っています。

サフはくせがないので、結構お勧めです。

パネトーネマザーは賛否両論なようですが、以下のサイトの方法で
焼くとほんのり甘くて美味しいパンに仕上がります。
http://plaza.rakuten.co.jp/breadrecipe/diary/200704090000/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  jQuery入門 (http://www.bface.net/tips/jquery/)
    発行：株式会社ビーフェイス http://www.bface.net/
    発行システム：『まぐまぐ！』 http://www.mag2.com/
    配信中止はこちら http://www.mag2.com/m/0000280891.html
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    ■レンタルサーバー比較サイト■
      http://www.rental-server-search.jp/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

]]> http://www.bface.net/tips/jquery/?feed=rss2&p=202 0 jQuery入門 No.53 http://www.bface.net/tips/jquery/?p=200 http://www.bface.net/tips/jquery/?p=200#comments Fri, 14 May 2010 03:02:44 +0000 tips_admin http://www.bface.net/tips/jquery/?p=200 ───────────────────────────────
　jQuery入門 No.53
───────────────────────────────

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

　1)HTTP通信でデータを取得する
　2)HTTP通信でデータを取得し、DOMに挿入する
　3)編集後記

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■HTTP通信でデータを取得する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】
jQuery.ajax(
  オプション
)

または

$.ajax(
  オプション
)

戻り値はXMLHttpRequestオブジェクトになります。

この関数はjQueryのAJAX通信の基本で、実際には、jQuery.getや
jQuery.postなどのほうが簡単に実装できます。

細かくオプションを設定したい場合はこちらを
利用します。
オプションには以下をハッシュ（キー:値）で設定することが出来ます。

//——————
// async : boolean
//——————
　初期値：true
　非同期通信フラグ

//——————
// beforeSend : function(XMLHttpRequest)
//——————
　ajaxリクエストが送信される前に呼ばれるイベント

//——————
// cache : boolean
//——————
　初期値：true
　キャッシュ

//——————
// complete : function(XMLHttpRequest, textStatus)
//——————
　ajax通信完了時に呼ばれる関数

//——————
// contentType : string
//——————
　初期値：”application/x-www-form-urlencoded”
　データ送信の際のcontent-type

//——————
// context : object
//——————
　コールバック関数内で用いるthisの値を設定

//——————
// data : object, string
//——————
　サーバーに送信する値

//——————
// dataFilter : function(data, type)
//——————
　戻りデータをフィルタリング

//——————
// dataType : string
//——————
　dataTypeには以下が設定できます。
　xml,html,script,json,jsonp,text

//——————
// error : function(XMLHttpRequest, textStatus, errorThrown)
//——————
　通信失敗の際に呼ばれる関数

//——————
// global : boolean
//——————
　初期値：true
　グローバルAjaxイベントを実行するかどうか指定

//——————
// ifModified : boolean
//——————
　初期値：false
　データが更新された場合のみデータを送信するかどうか

//——————
// jsonp : string
//——————
　JSONPリクエストで使用するコールバック関数のパラメータ名を設定
　設定しない場合は、callbackとなります。

//——————
// jsonpCallback : string
//——————
　JSONPリクエストのコールバック関数名を設定

//——————
// password : string
//——————
　初期値:null
　認証が必要なHTTPリクエストを送信する場合のパスワードを指定

//——————
// processData : boolean
//——————
　初期値:true
　detaオプションで指定したオブジェクトを
　”application/x-www-form-urlencoded”形式で
　送るかどうかを指定します。

//——————
// scriptCharset : string
//——————
　dataTypeオプションが”script”の場合など、読み込み文字コードを指定します。

//——————
// success : function(data, textStatus, XMLHttpRequest)
//——————
　通信が成功したときに呼ばれるコールバック関数

//——————
// timeout : number
//——————
　初期値:0
　タイムアウト時間をミリ秒で指定

//——————
// traditional : boolean
//——————
　パラメータのシリアライズをトラディショナルスタイルにしたい時
　trueにする

//——————
// type : string
//——————
　初期値:”GET”
　”GET”もしくは”POST”を指定

//——————
// url : string
//——————
　初期値:現在のページのURL
　リクエスト先のURLを指定

//——————
// username : string
//——————
　初期値:null
　認証が必要なHTTPリクエストを送信する場合のユーザ名を指定

//——————
// xhr : function
//——————
　XMLHttpRequestオブジェクトが作成された際に呼び出される
　コールバック関数
【サンプル１説明】
ボタンを押すと、test.htmlが読み込まれます。
(IEの場合はwebサーバーでないと動作しない場合があるようです）

【サンプル１】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />

<script src=”jquery-1.4.2.min.js”></script>
</head>
<body>
<p>
<button>押してみてね！</button>
</p>
<div id=”results”></div>
<script>
$(“button”).click(function () {
$.ajax({
  url: “test.html”,
  cache: false,
  success: function(html){
    $(“#results”).append(html);
  }
});

});
</script>
</body>
</html>

【test.html】
テスト！<br />
読み込まれましたか？<br />

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■HTTP通信でデータを取得し、DOMに挿入する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

load(url,[データ],[コールバック関数])
【サンプル２説明】
ボタンを押すと、test.htmlが読み込まれまれ、
完了時にアラートを表示し、渡されている引数を表示します。
test.htmlはサンプル１と同じものを使用しています。
(IEの場合はwebサーバーでないと動作しない場合があるようです）

【サンプル２】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />

<script src=”jquery-1.4.2.min.js”></script>
</head>
<body>
<p>
<button>押してみてね！</button>
</p>
<div id=”results”></div>
<script>
$(“button”).click(function () {
$(“#results”).load(“test.html”, null,
  function(responseText, status, XMLHttpRequest) {
    alert(“通信完了\n” + “responseText:” + responseText +
    “\nstatus:” + status + “\nXMLHttpRequest:” + XMLHttpRequest);
  });

});
</script>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
連休は皆さんいかがお過ごしでしたか？

今週はiPadの予約開始で並んだ方もいらっしゃるようですね。
欲しいと思いつつも、どうしようかと悩む今日この頃です。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  jQuery入門 (http://www.bface.net/tips/jquery/)
    発行：株式会社ビーフェイス http://www.bface.net/
    発行システム：『まぐまぐ！』 http://www.mag2.com/
    配信中止はこちら http://www.mag2.com/m/0000280891.html
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    ■レンタルサーバー比較サイト■
      http://www.rental-server-search.jp/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

]]> http://www.bface.net/tips/jquery/?feed=rss2&p=200 0 jQuery入門 No.52 http://www.bface.net/tips/jquery/?p=198 http://www.bface.net/tips/jquery/?p=198#comments Wed, 28 Apr 2010 02:19:06 +0000 tips_admin http://www.bface.net/tips/jquery/?p=198 ───────────────────────────────
jQuery入門 No.52
───────────────────────────────

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

1)要素のキューにコールバック関数を設定する
2)要素のキューの先頭から実行する
3)要素のキューの内容を削除する
4)アニメーションエフェクトをON/OFFする。
5)編集後記

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素のキューにコールバック関数を設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

queue(コールバック関数)

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素のキューの先頭から実行する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

dequeue()

【サンプル１説明】
キューの最後にエフェクトを追加して、実行します。

【サンプル１】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<style>
#box { margin:3px; width:100px; height:100px;
position:absolute; left:0px; top:100px;
background:green; display:none; }
#queue_num { color:red;}
</style>

<script src=”jquery-1.4.2.min.js”></script>
</head>
<body>
<p>
<button id=”start”>スタート</button>
</p>
<div id=”box”></div>

<script>
$(“#start”).click(function () {

$(“#box”).show(“slow”);
$(“#box”).animate({left:’+=400′},2000);
$(“#box”).queue(function () {
$(this).animate({width:’200px’},1500);
$(this).slideToggle(1000);
$(this).slideToggle(“fast”);
$(this).animate({width:’100px’},1500);
$(this).animate({left:’-=400′},1500);
$(this).slideUp(“normal”);
$(this).dequeue();

});

});
</script>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素のキューの内容を削除する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

clearQueue([キュー名])

【サンプル2説明】
スタートボタンを押し、動いている途中でストップボタンを
押すと、動きが止まります。スタートを再度押すとその位置から
最初からのエフェクトが実行されます。

【サンプル2】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<style>
#box { margin:3px; width:100px; height:100px;
position:absolute; left:0px; top:100px;
background:green; display:none; }
#queue_num { color:red;}
</style>

<script src=”jquery-1.4.2.min.js”></script>
</head>
<body>
<p>
<button id=”start”>スタート</button>
<button id=”stop”>ストップ</button>
</p>
<div id=”box”></div>

<script>
$(“#start”).click(function () {

$(“#box”).show(“slow”);
$(“#box”).animate({left:’+=400′},2000);
$(“#box”).queue(function () {
$(this).animate({width:’200px’},1500);
$(this).slideToggle(1000);
$(this).slideToggle(“fast”);
$(this).animate({width:’100px’},1500);
$(this).animate({left:’-=400′},1500);
$(this).slideUp(“normal”);
$(this).dequeue();

});

});

$(“#stop”).click(function () {

$(“#box”).clearQueue();
$(“#box”).stop();

});
</script>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■アニメーションエフェクトをON/OFFする。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

jQuery.fx.off = TRUE;
もしくは

jQuery.fx.off = FALSE;

TRUEの場合アニメーション処理を行いません。
FALSEにするとアニメーション処理を行います。

【サンプル３説明】
アニメーションアリのチェックボックスのチェックを
はずすと、アニメーション処理を行わなくなります。

【サンプル2】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<style>
div { width: 100px; height: 100px; margin: 5px;
float:left;background-color: #00f;}
</style>
<script src=”jquery-1.4.2.min.js”></script>
</head>
<body>
<p>
<button>押してみてね！</button>
<label><input type=”checkbox” checked=”checked”>アニメーションアリ</label>
</p>
<div></div>
<div></div>
<script>
$(“button”).click(function () {

$(“div:eq(0)”).slideUp(300).fadeIn(400);
$(“div:eq(1)”).slideUp(300).delay(300).fadeIn(400);

});

$(“:checkbox”).click(function(){
jQuery.fx.off = !$(this).attr(“checked”);
});

</script>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
この頃子ども(5歳)は図書館がブームで、絵本を大量に借りてきて
読んでいます。
毎晩寝る前に絵本を１冊読むのですが、毎回違う絵本を読むのもまた
新鮮です。
絵本は子どものみならず親も癒してくれる気がします。
今年は国民読書年。
色々な本を手に取って読むのも良いですね。
また、今後は電子書籍での絵本なども増えていくのかもしれないですね。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
jQuery入門 (http://www.bface.net/tips/jquery/)
発行：株式会社ビーフェイス http://www.bface.net/
発行システム：『まぐまぐ！』 http://www.mag2.com/
配信中止はこちら http://www.mag2.com/m/0000280891.html
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■レンタルサーバー比較サイト■

http://www.rental-server-search.jp/

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

]]> http://www.bface.net/tips/jquery/?feed=rss2&p=198 0 jQuery入門 No.51 http://www.bface.net/tips/jquery/?p=193 http://www.bface.net/tips/jquery/?p=193#comments Thu, 22 Apr 2010 07:21:24 +0000 tips_admin http://www.bface.net/tips/jquery/?p=193 ───────────────────────────────
jQuery入門 No.51
───────────────────────────────

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

1)要素のエフェクトを遅らせる
2)要素のエフェクトを止める
3)要素のキューの数を返却する
4)編集後記

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素のエフェクトを遅らせる
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

delay(“スピード”,[キュー名])

スピード部分は、slow,normal,fast,ミリ秒を指定します。
ない場合は、normalのスピードとなります。
キュー名は指定がない場合はデフォルトの標準キューのfxに
なります。

【サンプル１説明】
ボタンをクリックすると、同時に２つの四角がスライドアップしますが、
２つめの四角はフェイドインが300ミリ秒遅れます。

【サンプル１】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<style>
div { width: 100px; height: 100px; margin: 5px;
float:left;background-color: #00f;}
</style>
<script src=”jquery-1.4.2.min.js”></script>
</head>
<body>
<p>
<button>押してみてね！</button>
</p>
<div></div>
<div></div>
<script>
$(“button”).click(function () {

$(“div:eq(0)”).slideUp(300).fadeIn(400);
$(“div:eq(1)”).slideUp(300).delay(300).fadeIn(400);
});
</script>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素のエフェクトを止める
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

stop()

【サンプル2説明】
スタートボタンを押し、動いている途中でストップボタンを
押すと、動きが止まります。

【サンプル2】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<style>
div { width: 100px; height: 100px; margin: 5px;position:absolute; background-color: #00f;}
</style>
<script src=”jquery-1.4.2.min.js”></script>
</head>
<body>
<p>
<button id=”start”>スタート</button>
<button id=”stop”>ストップ</button>
</p>
<div></div>

<script>
$(“#start”).click(function(){
$(“div”).animate({“left”: “+=100px”}, 2000);
});
$(“#stop”).click(function () {

$(“div”).stop();
});
</script>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素のキューを返却する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

queue([キュー名])

キュー名は指定がない場合はデフォルトの標準キューのfxに
なります。

【サンプル3説明】
キューの数を表示ボタンを押すと、現在溜まっているキューの
数を表示します。
キューとは待ち行列のことで、処理の待ち状態のものの
数を示します。
処理部分はrun_it部分になります。
run_it部分の中のslideUp()でまたrun_itを
呼んでいますので、ずっとrun_it部分を処理し続けます。

【サンプル3】
<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<style>
#box { margin:3px; width:100px; height:100px;
position:absolute; left:0px; top:100px;
background:green; display:none; }
#queue_num { color:red;}
</style>

<script src=”jquery-1.4.2.min.js”></script>
</head>
<body>
<p>
<button id=”start”>キューの数を表示</button>
</p>
<p id=”queue_num”></p>
<div id=”box”></div>

<script>
$(“#start”).click(function () {
var n = $(“#box”).queue(“fx”);
$(“#queue_num”).text(“キューの数: ” + n.length);
});
function run_it() {
$(“#box”).show(“slow”);
$(“#box”).animate({left:’+=400′},2000);
$(“#box”).animate({width:’200px’},1500);
$(“#box”).slideToggle(1000);
$(“#box”).slideToggle(“fast”);
$(“#box”).animate({width:’100px’},1500);
$(“#box”).animate({left:’-=400′},1500);
$(“#box”).slideUp(“normal”, run_it);
}
run_it();
</script>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
GWも近くなってきましたね。
皆さんはご予定はいかがですか？
遠くにお出かけもよいですが、近くを散策するのも良いですよね。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
jQuery入門 (http://www.bface.net/tips/jquery/)
発行：株式会社ビーフェイス http://www.bface.net/
発行システム：『まぐまぐ！』 http://www.mag2.com/
配信中止はこちら http://www.mag2.com/m/0000280891.html
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■レンタルサーバー比較サイト■

http://www.rental-server-search.jp/

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

]]> http://www.bface.net/tips/jquery/?feed=rss2&p=193 0 jQuery入門 No.50 http://www.bface.net/tips/jquery/?p=191 http://www.bface.net/tips/jquery/?p=191#comments Thu, 15 Apr 2010 03:26:14 +0000 tips_admin http://www.bface.net/tips/jquery/?p=191 ───────────────────────────────
　jQuery入門 No.50
───────────────────────────────

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

　1)要素にfadeToエフェクトを設定する
　2)要素にanimateエフェクトを設定する(1)
　3)要素にanimateエフェクトを設定する(2)
　4)編集後記

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素にfadeToエフェクトを設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

fadeTo(["スピード"],[コールバック関数])

スピード部分は、slow,normal,fast,ミリ秒を指定します。
ない場合は、normalのスピードとなります。
コールバック関数ではエフェクト完了後に実行する
処理を指定します。

【サンプル１説明】
<p></p>部分の文字をクリックするとフェイドし、
「フェードしました！」とアラート表示します。

【サンプル１】

<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<style>
  p{cursor:pointer;}
</style>
</style>
<script src=”jquery-1.4.2.min.js”></script>
</head>
<body>
<p>
 ここをクリックすると、フェイドします。
</p>
<script>
  $(“p”).click(function () {
    $(“p”).fadeTo(“slow”,0.25, function() {alert(“フェードしました！”);});
  });
</script>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素にanimateエフェクトを設定する(1)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

animate( プロパティ, [ "スピード" ], [ "easing名" ], [ コールバック関数 ] )

プロパティにはアニーメーションで変化させるstyleを設定します。
例えば、{height:”100px”}などになります。

スピード部分は、slow,normal,fast,ミリ秒を指定します。
ない場合は、normalのスピードとなります。

easing名部分で、値の変化の調節について指定します。
“linear”と”swing”を指定することが出来、プラグインを
いれると、他のeasingも利用することが可能になります。

コールバック関数ではエフェクト完了後に実行する
処理を指定します。

【サンプル2説明】

開始ボタンを押すと、四角が消えて、ボタンが押せなくなります。

【サンプル２】

<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<style>
  div{width:100px;height:100px;background:#0f0;}
</style>
</style>
<script src=”jquery-1.4.2.min.js”></script>
</head>
<body>
<button>
開始
</button>
<div></div>
<script>
$(“button”).click(function(){
    $(“div”).animate({height: “hide”}, 1500, “linear”,
      function() { $(“button”).attr(“disabled”, “disabled”);});
});

</script>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素にanimateエフェクトを設定する(2)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【記述方法】

animate(プロパティ, オプション)

プロパティにはアニーメーションで変化させるstyleを設定します。

オプションには、
スピード(duration),
easing値(easing),
アニメーションが終了後に
実行される関数(complete)、
アニメーション実行中のフレームごとに呼ばれる関数(step)、
キューへの保存の真偽(queue)が設定できます。

【サンプル3説明】

右へ移動ボタンをクリックすると、四角が右へ移動して,
「動いた？」というアラートを表示します。

【サンプル３】

<html>
<head>
<meta http-equiv=”content-Type” content=”text/html; charset=utf-8″ />
<style>
 div {
    position:absolute;
    background-color:#00F;
    left:10px;
    top:70px;
    width:100px;
    height:100px;
    margin:5px;
  }

</style>
<script src=”jquery-1.4.2.min.js”></script>
</head>
<body>
<button>
右へ移動
</button>

<div></div>

<script>
$(“button”).click(function(){
  $(“div”).animate({“left”: “+=30px”}, {duration:”fast”,complete:function(){alert(“動いた？”);}}
);
});

</script>
</body>
</html>

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■編集後記
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
４月も半ばですが例年より寒い日が続いたりして
なかなかコートが手放せませんね。
このままだた急に暑くなって冬から夏に
なってしまいそうですね。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  jQuery入門 (http://www.bface.net/tips/jquery/)
    発行：株式会社ビーフェイス http://www.bface.net/
    発行システム：『まぐまぐ！』 http://www.mag2.com/
    配信中止はこちら http://www.mag2.com/m/0000280891.html
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    ■レンタルサーバー比較サイト■
      http://www.rental-server-search.jp/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

]]> http://www.bface.net/tips/jquery/?feed=rss2&p=191 0