jQuery入門 No.40
- 2009 10月30日
- コメントは受け付けていません。
───────────────────────────────
jQuery入門 No.40
───────────────────────────────
───────────────────────────────
■目次
───────────────────────────────
1)要素のfocusイベントを実行する
2)要素にfocusイベントを設定する
3)要素のkeydownイベントを実行する
4)要素にkeydownイベントを設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素のfocusイベントを実行する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
focus()
となります。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素にfocusイベントを設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
focus(関数)
となります。
以下の例では入力部分にフォーカスすると
背景色がオレンジに変更され、フォーカスが
はずれると、白に戻ります。
例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”).focus(function () {
$(this).css(“background-color”, “#FC0″)
}).blur(function () {
$(this).css(“background-color”, “#FFF”)
});
});
</script>
</head>
<body>
<input type=”text” />
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素のkeydownイベントを実行する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
keydown()
となります。
keydownイベントは、キーボードのキーを押し下げる時に発生する
イベントです。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素にkeydownイベントを設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
keydown(関数)
となります。
以下の例では入力部分に何か入力するとkeycodeを
<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のコードをこれから記述します!
$(document).ready(function(){
$(“input”).keydown(function(event) {
$(“#comment”).html(“keycodeは” + event.keyCode);
});
});
</script>
</head>
<body>
<input type=”text” /><div id=”comment”><div>
</body>
</html>
jQuery入門 No.39
- 2009 10月28日
- コメントは受け付けていません。
───────────────────────────────
jQuery入門 No.39
───────────────────────────────
───────────────────────────────
■目次
───────────────────────────────
1)要素のdblclickイベントを実行する
2)要素にのdblclickイベントの動作を設定する
3)要素のerrorイベントを実行する
4)要素にerrorイベントを設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素のdblclickイベントを実行する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
dblclick()
となります。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素にdblclickイベントを設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
dblclick(関数)
となります。
以下の例ではダブルクリックすると背景色が変わるように
設定しています。
例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’).dblclick(function () {
$(this).toggleClass(‘highlight’);
});
});
</script>
<style>
div { width:30px; height:30px; margin:10px; float:left;
background:blue;}
.highlight { background:yellow; }
</style>
</head>
<body>
<div></div>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素のerrorイベントを実行する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
error()
となります。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素にerrorイベントを設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
error(関数)
となります。
以下の例では存在しない画像(a.jpg)を
ボタンを押した際に表示しようとし、
その場合エラーとなるため、
errorイベントが呼ばれ、
<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のコードをこれから記述します!
$(document).ready(function(){
$(“#show”).click(function(){
$(“img”).attr(“src”, “a.jpg”).show();
});
$(“img”).error(function(){
$(this).hide();
$(“#message”).text(“見つかりません”);
return true;
});
});
</script>
<style>
img {display:none;}
</style>
</head>
<body>
<img />
<div id=”message”></div>
<button id=”show”>画像表示</button>
</body>
</html>
jQueryでInputフィールドを操作する小技いろいろ
- 2009 10月21日
- コメントは受け付けていません。
IDEA*IDEAさんでjQueryでInputフィールドを操作する小技いろいろが
紹介されていました。
なかなかよさそうですね。
URL:http://www.ideaxidea.com/archives/2009/10/jquery_with_input_field.html
tips_admin jQueryjQuery入門 No.38
- 2009 10月16日
- コメントは受け付けていません。
───────────────────────────────
jQuery入門 No.38
───────────────────────────────
───────────────────────────────
■目次
───────────────────────────────
1)要素のchangeイベントを実行する
2)要素のchangeイベントに関数を設定する
3)要素のclickイベントを実行する
4)要素をclickイベントに関数を設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素のchangeイベントを実行する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
change()
となります。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素のchangeイベントに関数を設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
change(関数)
となります。
以下の例では選択された都道府県名を<div></div>に
設定しています。
また、初回change()イベントを実行しています。
例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(){
$(“select”).change(function(){
var $str = $(“select option:selected”).text();
$(“#disp”).html($str +”を選択”);
}).change();
});
</script>
<style>span {display:none;}</style>
</head>
<body>
<select name=”pref”>
<option>東京都</option>
<option selected=”selected”>神奈川県</option>
<option>埼玉県</option>
<option >千葉県</option>
</select>
<div id=”disp”></div>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素のclickイベントを実行する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
click()
となります。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素をclickイベントに関数を設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
click(関数)
となります。
以下の例ではクリックすると文字が見えなくなります。
例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(){
$(“li”).click(function(){
$(this).addClass(“hidden”);
});
});
</script>
<style>
li{width:200; padding:2px;margin:2px;}
.hidden{display:none;}
</style>
</head>
<body>
<ul>
<li>Outlook</li>
<li>FireFox</li>
<li>Safari</li>
<li>Chrome</li>
</ul>
</body>
</html>
jQuery入門 No.37
- 2009 10月09日
- コメントは受け付けていません。
───────────────────────────────
jQuery入門 No.37
───────────────────────────────
───────────────────────────────
■目次
───────────────────────────────
1)要素にマウスが乗った場合の動作を設定する
2)要素をクリックした場合の動作を設定する
3)要素のblurイベントを実行する
4)要素のblurイベントにイベントを設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素にマウスが乗った場合の動作を設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
hover(マウスが乗った場合の関数, マウスが離れた場合の関数)
となります。
以下の例ではマウスが乗った場合、背景がピンクになります。
例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(){
$(“li”).hover(
function () {
$(this).addClass(“selected”);
},
function () {
$(this).removeClass(“selected”);
}
);
});
</script>
<style>
li{width:200;background: #EEEEEE; padding:2px;margin:2px;}
.selected { background: pink; }
</style>
</head>
<body>
<ul>
<li>Outlook</li>
<li>FireFox</li>
<li>Safari</li>
<li>Chrome</li>
</ul>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素をクリックした場合の動作を設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
toggle(関数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(){
$(“li”).toggle(
function () {
$(this).css({“background”:”#FFFF66″});
},
function () {
$(this).css({“background”:”#FF66CC”});
},
function () {
$(this).css({“background”:”#FFFFFF”});
}
);
});
</script>
<style>
li{width:200; padding:2px;margin:2px;}
</style>
</head>
<body>
<ul>
<li>Outlook</li>
<li>FireFox</li>
<li>Safari</li>
<li>Chrome</li>
</ul>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素のblurイベントを実行する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
blur()
となります。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素のblurイベントに関数を設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
blur(関数)
となります。
blurイベントはフォーカスがはずれた時に発生する
イベントです。
以下の例ではテキスト入力部分からフォーカスがはずれた時
「フォーカスがはずれました」と表示し、表示が
消えていくように設定しています。
例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”).blur( function (){
$(“span”).css(‘display’,'inline’).fadeOut(1000);
} );
});
</script>
<style>span {display:none;}</style>
</head>
<body>
<input type=”text” />
<span>フォーカスがはずれました</span>
</body>
</html>
jQuery入門 No.36
- 2009 10月02日
- コメントは受け付けていません。
───────────────────────────────
jQuery入門 No.36
───────────────────────────────
───────────────────────────────
■目次
───────────────────────────────
1)指定されたイベントを実行する(ブラウザのイベントは除く）
2)要素に指定イベントに対して、実行していた関数を削除する
3)要素に指定イベントに対して、関数を実行するように設定する
4)要素に指定イベントに対して、実行していた関数を削除する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■指定されたイベントを実行する(ブラウザのイベントは除く）
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
triggerHandler(“イベントタイプ”, [データ])
となります。
triggerHandlerで指定したボタンをクリックすると、<div></div>
部分は変わりますが、チェックボックスの状態は変わりません。
例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(){
$(“#check1″).click(function() {
$(“div”).toggleClass(“highlight”);
});
$(“#button1″).click(function() {
$(“#check1″).triggerHandler(“click”);
});
$(“#button2″).click(function() {
$(“#check1″).trigger(“click”);
});
});
</script>
<style>
div { width:30px; height:30px; margin:10px; float:left;
border:3px solid black;
background:white;}
.highlight { background:yellow; }
</style>
</head>
<body>
<input type=”checkbox” id=”check1″>テスト
<div></div>
<button id=”button1″>ここをクリックしてみてね(triggerHandler)</button>
<button id=”button2″>ここをクリックしてみてね(trigger)</button>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素に指定イベントに対して、実行していた関数を削除する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
unbind(["イベントタイプ"], [関数] )
となります。
以下の例では、<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のコードをこれから記述します!
$(document).ready(function(){
$(“div”).bind(“click”, function(event){
$(this).toggleClass(“highlight”);
});
$(“button”).click(function() {
$(“div”).unbind(“click”);
});
});
</script>
<style>
div { width:80px; height:30px; margin:10px; float:left;
border:3px solid black; background:white;}
.highlight { background:yellow; }
</style>
</head>
<body>
<div>クリック</div>
<div>クリック</div>
<button>停止</button>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素に指定イベントに対して、関数を実行するように設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
live(“イベントタイプ”, 関数)
となります。
<p></p>部分をクリックすると新たな<p></p>が増え、
増えた部分もクリックすると同じ関数を実行しますが
<div></div>部分では増えた<div></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(){
$(“div”).bind(“click”, function(event){
$(this).after(“<div>新たなdiv要素</div>”);
});
$(“p”).live(“click”, function(){
$(this).after(“<p>新たなp要素</p>”);
});
});
</script>
<style>
p {width:120px; height:30px; background:pink;}
div { width:120px; height:30px; margin:10px; float:left;
background:yellow;}
</style>
</head>
<body>
<p>クリック</p>
<div>クリック</div>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素に指定イベントに対して、実行していた関数を
削除する(liveで設定したもの)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
die(["イベントタイプ"], [関数])
となります。
以下の例では停止ボタンを押すと<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(){
$(“div”).bind(“click”, function(event){
$(this).after(“<div>新たなdiv要素</div>”);
});
$(“p”).live(“click”, function(){
$(this).after(“<p>新たなp要素</p>”);
});
$(“button”).click(function(){
$(“p”).die();
$(this).text(“pを停止しました”);
});
});
</script>
<style>
p {width:120px; height:30px; background:pink;}
div { width:120px; height:30px; margin:10px; float:left;
background:yellow;}
</style>
</head>
<body>
<p>クリック</p>
<div>クリック</div>
<button>停止</button>
</body>
</html>
- アーカイブ
- 最近の投稿
- タグ
- カテゴリー