2009年10月28日
フォームで使う命令 val()
ASCII.jp：jQueryによるフォームのデザインの基礎（前編）｜Web制作の現場で使えるjQuery UIデザイン入門
上記リンクを参考に実際に書いてみた。
val()命令はフォームに記入された値を取得・変更する命令。
以下は「比較」ボタンを押すと文章1と文章2に記入された文字を比べてその結果を出します。
「消す」ボタンを押すと記入された文字を消去します。
コードは以下の通り。
上記リンクを参考に実際に書いてみた。
val()命令はフォームに記入された値を取得・変更する命令。
以下は「比較」ボタンを押すと文章1と文章2に記入された文字を比べてその結果を出します。
「消す」ボタンを押すと記入された文字を消去します。
文章1：
文章2：
結果：
コードは以下の通り。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#val button#hikaku").click(function(){
if (($("#val input#bunsyo1").val() == "") || ($("#val input#bunsyo2").val() == "")) {
$("#val p span").text("文章1と文章2に文字を入力してください。");
} else {
if ($("#val input#bunsyo1").val() == $("#val input#bunsyo2").val()) {
$("#val p span").text("文章1と文章2同じです");
} else {
$("#val p span").text("文章1と文章2は違います");
}
}
});
$("#val button#kesu").click(function(){
$("#val input#bunsyo1,#val input#bunsyo2").val("");
});
})
</script>
<div id="val">
<p>文章1：<input id="bunsyo1" type="text" name="name" /></p>
<p>文章2：<input id="bunsyo2" type="text" name="name" /></p>
<button id="hikaku">比較</button>
<button id="kesu">消す</button>
<p>結果：<span></span></p>
</div>
jQueryでIE6を透過PNGに対応させる
jQueryで作るロールオーバー
jQueryで作るオリジナルツールチップ
jQueryで作るタブパネル
jQueryで作るアコーディオンパネル
jQueryでイメージギャラリーを作成。
jQueryで作るロールオーバー
jQueryで作るオリジナルツールチップ
jQueryで作るタブパネル
jQueryで作るアコーディオンパネル
jQueryでイメージギャラリーを作成。
Posted by ヒダカ at 13:57│Comments(2)
│jQuery
この記事へのコメント
こんばんは、来させていただきました。
先日はお疲れ様でした。
むずかしい事がいっぱい書いてあるなぁ。
先日はお疲れ様でした。
むずかしい事がいっぱい書いてあるなぁ。
Posted by 斬九郎 at 2009年10月29日 21:43
斬九郎さん
コメントありがとうございます。先日はありがとうございました。
最近、方針を変えてウェブ制作の勉強のためのブログにしたんですよ。
ただの日記よりも書くことがあって、続けやすいですよ。
コメントありがとうございます。先日はありがとうございました。
最近、方針を変えてウェブ制作の勉強のためのブログにしたんですよ。
ただの日記よりも書くことがあって、続けやすいですよ。
Posted by ヒダカ
at 2009年11月02日 15:20
at 2009年11月02日 15:20
