jQuery入門 No.17
- 2009 04月30日
- コメントは受け付けていません。
───────────────────────────────
jQuery入門 No.17
───────────────────────────────
───────────────────────────────
■目次
───────────────────────────────
├ フォームのinput要素のpassword属性の要素を指定する
├ フォームのinput要素のradio属性の要素を指定する
├ フォームのinput要素のcheckbox属性の要素を指定する
├ フォームのinput要素のsubmit属性の要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■フォームのinput要素のpassword属性の要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
:password
となります。
以下の例ではパスワード入力部分の背景が黄色、枠線が赤になります。
例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(){
$(“:password”).css({background:”yellow”, border:”3px red solid”});
});
</script>
</head>
<body>
<form>
<p><input type=”text” value=”text”/></p>
<p><input type=”password” value=”"/></p>
</form>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■フォームのinput要素のradio属性の要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
:radio
となります。
以下の例では、チェックした場合チェックしたラジオボタンの値を
<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のコードをこれから記述します!
function radio_check() {
$(“div”).text(“チェックしたのは” + $(“:radio:checked”).val() + “です”);
}
</script>
</head>
<body>
<form>
<input type=”radio” value=”1″ name=”test1″ onclick=”radio_check();”/>1
<input type=”radio” value=”2″name=”test1″ onclick=”radio_check();” />2
</form>
<div></div>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■フォームのinput要素のcheckbox属性の要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
:checkbox
となります。
以下の例では、値が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(){
$(“:checkbox[value='3']“).attr(“disabled”,”disabled”);
});
</script>
</head>
<body>
<form>
<input type=”checkbox” name=”test1″ value=”1″ />1
<input type=”checkbox” name=”test2″ value=”2″ />2
<input type=”checkbox” name=”test3″ value=”3″ />3
</form>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■フォームのinput要素のsubmit属性の要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
:submit
となります。
以下の例では、表示時はOKボタンは押せず、
チェックボックスをチェックすると、OKボタンが押せるように
なります。
例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(){
$(“:submit”).attr(“disabled”,”disabled”);
$(“:checkbox”).click(function() {
if($(this).attr(‘checked’) == true) {
$(“:submit”).attr(“disabled”,false);
} else {
$(“:submit”).attr(“disabled”,”disabled”);
}
});
});
</script>
</head>
<body>
<form>
<input type=”checkbox” name=”check1″ id=”check1″ value=”1″ />
<input type=”submit” name=”submit” value=”ok” />
</form>
</body>
</html>
jQuery入門 No.16
- 2009 04月23日
- コメントは受け付けていません。
───────────────────────────────
jQuery入門 No.16
───────────────────────────────
───────────────────────────────
■目次
───────────────────────────────
├ 子要素が１つのみのものを指定する
├ フォームのinput,textarea,button,select要素を指定する
├ フォームのinput要素のtext属性の要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■子要素が１つのみのものを指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
nly-child
となります。
以下の例では、「クリックしてください」ボタンを
クリックすると、子要素が１つのみのものだけボタンの
文字が変わります。
例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(){
$(“#click_button”).click(function () {
$(“div button:only-child”).text(“ここが１つだけです”);
});
});
</script>
</head>
<body>
<button id=”click_button”>クリックしてください</button>
<div>
<button>divの子要素</button>
<button>divの子要素</button>
</div>
<div>
<button>divの子要素</button>
</div>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■フォームのinput,textarea,button,select要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
:input
となります。
以下の例では<div id=”message”></div>にフォームのinput要素の数を表示します。
例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(){
var all_inputs = $(“:input”);
$(“#message”).text(“Formの:inputで見つかった要素は” +
all_inputs.length + “です”);
});
</script>
</head>
<body>
<form>
<input type=”text” value=”text”/>
<textarea>textarea</textarea>
<input type=”radio” />radio button
<select><option>select</option></select>
<button>button</button>
</form>
<div id=”message”></div>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■フォームのinput要素のtext属性の要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
:text
となります。
以下の例では、フォームのinput type=”text”の要素の枠線が青くなり、
<div id=”message”></div>に数を表示します。
例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(){
var input_text =$(“:text”).css(“border”, “3px groove blue”);
$(“#message”).text(“Formの:textで見つかった要素は” +
input_text.length + “です”);
});
</script>
</head>
<body>
<form>
<input type=”text” value=”text”/>
<textarea>textarea</textarea>
<input type=”radio” />radio button
<select><option>select</option></select>
<button>button</button>
</form>
<div id=”message”></div>
</body>
</html>
jQuery入門 No.15
- 2009 04月16日
- コメントは受け付けていません。
───────────────────────────────
■目次
───────────────────────────────
├ 属性のフィルタを複数にし、全てを満たす要素を指定する
├ 指定した番目、偶数、奇数、何番目おきの要素を指定する
├ 最初の子要素を指定する
├ 最後の子要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■属性のフィルタを複数にし、全てを満たす要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
[属性フィルタ][属性フィルタ][...]
となります。
属性フィルタ部分は、No.13,No.14でご紹介した、
[属性]や[属性='値']…などが該当します。
以下の例では、idが設定されていて、nameがcheckでないその他の
チェックボックスがボタンをクリックすると、チェックできなくなります。
例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(){
$(“button”).click(function () {
$(“input[id][name!='check']“).attr(“disabled”, “disabled”);
});
});
</script>
</head>
<body>
<button>クリックしてください</button>
<input id=”checkebox1″ name=”check” type=”checkbox” value=”1″ />1
<input name=”check2″ type=”checkbox” value=”2″ />2
<input id=”checkebox1″ name=”other” type=”checkbox” value=”other” />その他
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■指定した番目、偶数、奇数、何番目おきの要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
:nth-child(数字)
:nth-child(even)
:nth-child(odd)
:nth-child(数字n)
となります。
:nth-child(1)の場合、1番目となります。eq(1)の場合は、0から始まる1番目なので
2番目となります。
:nth-child(even)の場合、偶数番目となります。
:nth-child(odd)の場合、奇数番目となります。
:nth-child(7n)の場合、7の倍数番目となります。
以下の例では、ボタンをクリックするとtdの7の倍数番目の
背景が赤くなります。
例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(){
$(“button”).click(function () {
$(“td:nth-child(7n)”).css(“background”, “red”);
});
});
</script>
</head>
<body>
<button>クリックしてください</button>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
</table>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■最初の子要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
:first-child
となります。
以下の例では、divの子のspanの最初の要素に下線を付けています。
例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 span:first-child”)
.css(“text-decoration”, “underline”);
});
</script>
</head>
<body>
<div>
<span>ひろと</span>
<span>ゆうと</span>
<span>そうた</span>
</div>
<div>
<span>ひな</span>
<span>あおい</span>
<span>さくら</span>
</div>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■最後の子要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
:last-child
となります。
以下の例では、divの子のspanの最後の要素に下線を付けています。
例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 span:last-child”)
.css(“text-decoration”, “underline”);
});
</script>
</head>
<body>
<div>
<span>ひろと</span>
<span>ゆうと</span>
<span>そうた</span>
</div>
<div>
<span>ひな</span>
<span>あおい</span>
<span>さくら</span>
</div>
</body>
</html>
jQueryプラグインAutotab
- 2009 04月16日
- コメントは受け付けていません。
フォームで入力時自動で次の項目に移るプラグインです。郵便番号などを入力する際に便利そうですね。
Autotabよりjquery.autotab.jsをダウンロードします。
ライセンスはMIT と GPLのデュアルライセンスだそうです。
例)
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<script type=”text/javascript” src=”jquery-1.3.min.js”></script>
<script type=”text/javascript” src=”jquery.autotab.js”></script>
<script type=”text/javascript”>
// ここにjavascriptのコードをこれから記述します!
$(document).ready(function() {
$(‘input[name=zip1]‘).autotab({ target: ‘zip2′, format: ‘numeric’ });
$(‘input[name=zip2]‘).autotab({ previous: ‘zip1′, format: ‘numeric’ });
});
</script>
</head>
<body>
<form>
<input type=”text” name=”zip1″ size=”3″ maxlength=”3″ /> -
<input type=”text” name=”zip2″ size=”4″ maxlength=”4″ />
</form>
</body>
</html>
jQuery入門 No.14
- 2009 04月09日
- コメントは受け付けていません。
───────────────────────────────
■目次
───────────────────────────────
├ 指定した値でない属性を持つ要素を指定する
├ 指定した値から始まる属性を持つ要素を指定する
├ 指定した値で終わる属性を持つ要素を指定する
├ 指定した値を含む属性を持つ要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■指定した値でない属性を持つ要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
[属性!='値']
となります。
以下の例ではその他(nameがcheckでないものですので、otherを指定しています）の
チェックボックスが表示時チェックできませんが、
ボタンをクリックするとチェックできるようになります。
例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[name!='check']“).attr(“disabled”,”disabled”);
$(“button”).click(function () {
$(“input[name!='check']“).attr(“disabled”,false);
});
});
</script>
</head>
<body>
<button>クリックしてください</button>
<input name=”check” type=”checkbox” value=”check” />1
<input name=”other” type=”checkbox” value=”other” />その他
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■指定した値から始まる属性を持つ要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
[属性^='値']
となります。
以下ではnameがcheckで始まる1,2のチェックボックスが
表示時チェックできませんが、ボタンを押すとチェックできるように
なります。
例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[name^='check']“).attr(“disabled”,”disabled”);
$(“button”).click(function () {
$(“input[name^='check']“).attr(“disabled”,false);
});
});
</script>
</head>
<body>
<button>クリックしてください</button>
<input name=”check1″ type=”checkbox” value=”check” />1
<input name=”check2″ type=”checkbox” value=”check” />2
<input name=”other” type=”checkbox” value=”other” />その他
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■指定した値で終わる属性を持つ要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
[属性$='値']
となります。
以下の例ではnameがcheckで終わる、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[name$='check']“).attr(“disabled”,”disabled”);
$(“button”).click(function () {
$(“input[name$='check']“).attr(“disabled”,false);
});
});
</script>
</head>
<body>
<button>クリックしてください</button>
<input name=”check1″ type=”checkbox” value=”check” />1
<input name=”check2″ type=”checkbox” value=”check” />2
<input name=”3check” type=”checkbox” value=”check” />3
<input name=”other” type=”checkbox” value=”other” />その他
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■指定した値を含む属性を持つ要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
[属性*='値']
となります。
以下の例ではnameがcheckを含む、1,2,3,4のチェックボックスが
表示時チェックできませんが、ボタンを押すとチェックできるように
なります。
例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[name*='check']“).attr(“disabled”,”disabled”);
$(“button”).click(function () {
$(“input[name*='check']“).attr(“disabled”,false);
});
});
</script>
</head>
<body>
<button>クリックしてください</button>
<input name=”check1″ type=”checkbox” value=”check” />1
<input name=”check2″ type=”checkbox” value=”check” />2
<input name=”3check” type=”checkbox” value=”check” />3
<input name=”4check4″ type=”checkbox” value=”check” />4
<input name=”other” type=”checkbox” value=”other” />その他
</body>
</html>
jQuery入門 No.13
- 2009 04月02日
- コメントは受け付けていません。
───────────────────────────────
■目次
───────────────────────────────
├ ページを表示した際に表示されている要素を指定する
├ ページを表示した際に隠されている（表示していない）要素を指定する
├ 指定した属性を持つ要素を指定する
├ 指定した値をもつ属性を持つ要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■ページをロードする際に表示されている要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
:visible
となります。
以下の例では、ページ表示時に表示している部分(文字部分）をクリックすると
背景がピンクになります。
ボタンを押した後に表示した箇所はクリックしてもピンクになりません。
例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:visible”).click(function () {
$(this).css(“background”, “pink”);
});
$(“button”).click(function () {
$(“div:hidden”).show(“fast”);
});
});
</script>
<style>
div {}
.hidden { display:none; }
</style>
</head>
<body>
<button>隠れている要素を表示します。</button>
<div>もとから表示されています。</div>
<div class=”hidden”>隠れています。</div>
<div>ここも表示されています。</div>
<div style=”display:none;”>ここも隠れています。</div>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■ページをロードする際に隠されている（表示していない）要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
:hidden
となります。
例1では、ボタンをクリックすると隠れている要素を
表示させています。
$(“div:hidden”).show(“fast”);
部分が表示させる箇所になります。
show()
はエフェクト部分になり、”slow” “fast” “normal” もしくは
数字(ミリ秒)で設定できます。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■指定した属性を持つ要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
[属性]
となります。
以下の例ではdivでidが設定されているものをクリックすると背景が
ピンクになり、IDを一緒に表示します。
例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[id]“).click(function () {
$(this).css(“background”, “pink”);
var str = $(this).text() + “のIDは” + $(this).attr(“id”);
$(this).text(str);
});
});
</script>
</head>
<body>
<div id=”hello”>divです</div>
<div>divです</div>
<span id=”hello”>spanです</span>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■指定した値の属性を持つ要素を指定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
[属性='値']
となります。
以下の例では
div id=”hello”の要素をクリックすると背景が
ピンクになり、IDを一緒に表示します。
例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[id='hello']“).click(function () {
$(this).css(“background”, “pink”);
var str = $(this).text() + “のIDは” + $(this).attr(“id”);
$(this).text(str);
});
});
</script>
</head>
<body>
<div id=”hello”>divです</div>
<div id=”good-bye”>divです</div>
<div>divです</div>
<span id=”hello”>spanです</span>
</body>
</html>
指定したプログラムをsubmitするには
- 2009 04月02日
- コメントは受け付けていません。
修正ボタンなどでフォームデータを送信したい場合、
$(“#フォームのID”).attr(“action”,”postするurl”);
$(“#フォームのID”).submit();
で、送信できます。
例）
html側
<form id=”form1″ method=”post”>
<input type=”button” name=”実行” onclick=”form_submit();” />
</form>
javascript側（test.phpをsubmitする場合）
function form_submit() {
$(“#form1″).attr(“action”, “test.php”);
$(“#form1″).submit();
}
CodeZineでjQuery入門記事があります
- 2009 04月02日
- コメントは受け付けていません。
メールマガジンとは全く関係ありませんが、CodeZineにjQueryに関する記述がアップされていました。
ご参考にどうぞ。
http://codezine.jp/article/detail/3672
tips_admin jQuery
- アーカイブ
- 最近の投稿
- タグ
- カテゴリー