伊那谷で働くWebデザイナーの日記

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">

	$(function(){

		$.ajax({

			url:'http://webdesign.naganoblog.jp/index.xml',

			dataType:'xml',

			success:function(data){

				$("item",data).each(function(){

					$("#ajax dl").append("
"+$("title",this).text()+"
"+$("pubDate",this).text()+"
");

				});

			}

		});

	})

</script>



<div id="ajax">

	<dl></dl>

</div>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">

	$(function(){

		$("#load button").click(function(){

			$("#load div").load("http://webdesign.naganoblog.jp/ div.recententry");

		});

	})

</script>



<div id="load">

	<button>load</button>

	<div><p>ここに読み込みます。</p></div>

</div>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">

	$(function(){

			//label要素またはcheckboxがクリックされた時に以下を実行

			$("label,:checkbox").click(function(){

				//label要素の背景色を一旦リセットする

				$("label").css("background","")

				//選択されている(checked)要素すべてに以下を実行

				$(":checked").each(function(){

					//for属性の属性値が選択されているcheckboxのidと同じlabelに対して、背景色を#CCCに変更

				$("label[for='"+$(this).attr("id")+"']").css("background","#CCC")

			})

		})

	}) 

</script>





<input type="checkbox" name="xhtml" value="XHTML" id="xhtml" />

<label for="xhtml">XHTML</label>

<input type="checkbox" name="css" value="CSS" id="css" />

<label for="css">CSS</label>

<input type="checkbox" name="javascript" value="JavaScript" id="javascript" />

<label for="javascript">JavaScript</label>

<input type="checkbox" name="php" value="PHP" id="php" />

<label for="php">PHP</label>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

	$(function(){

		//select要素に変更があったとき以下を実行

		$("select").change(function(){

			//もし選択されている要素の値が"10代"ならば以下を実行

			if($(":selected").attr("value")=="10代"){

				//input要素のdisabled属性の属性値をdisabledに変更

				$("input").attr("disabled", "disabled");

			//"10代"以外ならば以下を実行

			}else{

				//input要素のdisabled属性を削除

				$("input").removeAttr("disabled");

			}

		})

	})



<p>年齢：

<select name="age">

	<option value="選択してください">選択してください</option>

	<option value="10代">10代</option>

	<option value="20代">20代</option>

	<option value="30代">30代</option>

	<option value="40代以上">40代以上</option>

</select></p>

<p>好きなお酒：<input type="text" /></p>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">

	$(function(){

		$("#inputtype :text").focus(function(){$("#inputtype form").after("
type属性がtextであるinput要素がフォーカスされています。
");}).blur(function(){$("#inputtype>p").remove();});

		$("#inputtype :password").focus(function(){$("#inputtype form").after("
type属性がpasswordであるinput要素がフォーカスされています。
");}).blur(function(){$("#inputtype>p").remove();});

		$("#inputtype :radio").focus(function(){$("#inputtype form").after("
type属性がradioであるinput要素がフォーカスされています。
");}).blur(function(){$("#inputtype>p").remove();});

		$("#inputtype :checkbox").focus(function(){$("#inputtype form").after("
type属性がcheckboxであるinput要素がフォーカスされています。
");}).blur(function(){$("#inputtype>p").remove();});

		$("#inputtype :submit").focus(function(){$("#inputtype form").after("
type属性がsubmitであるinput要素がフォーカスされています。
");}).blur(function(){$("#inputtype>p").remove();});

		$("#inputtype :image").focus(function(){$("#inputtype form").after("
type属性がimageであるinput要素がフォーカスされています。
");}).blur(function(){$("#inputtype>p").remove();});

		$("#inputtype :reset").focus(function(){$("#inputtype form").after("
type属性がresetであるinput要素がフォーカスされています。
");}).blur(function(){$("#inputtype>p").remove();});

		$("#inputtype :file").focus(function(){$("#inputtype form").after("
type属性がfileであるinput要素がフォーカスされています。
");}).blur(function(){$("#inputtype>p").remove();});

		$("#inputtype :button").focus(function(){$("#inputtype form").after("
type属性がbuttonであるinput要素がフォーカスされています。
");}).blur(function(){$("#inputtype>p").remove();});

	})

</script>



<div id="inputtype">

	<form>

		<p>

			<input type="text" />type属性がtext<br />

			<input type="password" />type属性がpassword<br />

			<input type="radio" />type属性がradio<br />

			<input type="checkbox" />type属性がcheckbox<br />

			<input type="submit" />type属性がsubmit<br />

			<input type="image" />type属性がimage<br />

			<input type="reset" />type属性がreset<br />

			<input type="file" />type属性がfile<br />

			<input type="button" value="button" />type属性がbutton

		</p>

	</form>

</div>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">

	$(function(){

		$("#input :input").css("width","180px").css("marginBottom","10px");

	})

</script>



<div id="input">

	<form>

		<input type="text" value＝"テキストフィールド" /><br />

		<textarea>テキストエリア</textarea><br />

		<select>

			<option>選択1</option>

			<option>選択1</option>

			<option>選択1</option>

			<option>選択1</option>

			<option>選択1</option>

		</select><br />

		<input type="button" value="汎用ボタン"/><br />

		<input type="submit"value="送信ボタン"/>

	</form>

</div>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">

	$(function(){

		$("#submit form").submit(function(){

			if ($("#submit input[type='checkbox']").attr("checked") == "") {

				window.alert("同意してください");

				return false;

			}

		});

	})

</script>



<div id="submit">

	<form action="#" method="post">

		<p><input type="checkbox" />同意します<br /><input type="submit" value="送信" /></p>

	</form>

</div>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">

	$(function(){

		$("#change select").change(function(){

			$("#change p").css("color",$(this).val());

		});

	})

</script>



<div id="change">

	<form>

		<select>

			<option value="black">黒</option>

			<option value="red">赤</option>

			<option value="blue">青</option>

			<option value="green">緑</option>

		</select>

		<p style="font-size:50px;">SAMPLE</p>

	</form>

</div>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">

	$(function(){

		$("#focus input").focus(function(){

			$(this).css("backgroundColor","#ffffcf");

		}).one("focus",function(){

			$(this).val("");

		});

		$("#focus input").blur(function(){

			$(this).css("backgroundColor","#fff");

		});

	})

</script>



<div id="focus">

<form>

	<p>記入事項1：<input type="text" value="例1" /><br />

	記入事項2：<input type="text" value="例2" /><br />

	記入事項3：<input type="text" value="例3" /></p>

</form>

</div>