jQuery入門 No.35
- 2009 09月18日
- コメントは受け付けていません。
───────────────────────────────
■目次
───────────────────────────────
1)DOM(Document Object Model)が読み込まれ準備が出来た時点で関数を実行
2)要素に指定イベントに対して、関数を実行するように設定する
3)要素に指定イベントに対して、関数を1回だけ実行するように設定する
4)指定されたイベントを実行する
5)編集後記
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■DOM(Document Object Model)が読み込まれ準備が出来た時点で関数を実行
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
ready(関数)
となります。
こちらは、これまでの例で毎回のように出てきていますね。
以下の例では$(document).ready(function(){…});
が該当します。
例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.blue”).css(“border”, “3px solid red”);
});
</script>
<style>
div { width:80px; height:80px; margin:10px; float:left;}
.green {background:green;}
.pink {background:pink;}
.blue {background:blue;}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素に指定イベントに対して、関数を実行するように設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
bind(“イベントタイプ”, [データ], 関数)
となります。
以下の例では、<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”);
});
});
</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>
<div>クリック</div>
<div>クリック</div>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素に指定イベントに対して、関数を1回だけ実行するように設定する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
one(“イベントタイプ”, [データ], 関数)
となります。
以下の例では、<div></div>をクリックすると、背景色が1度だけ変わります。
例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”).one(“click”, function(event){
$(this).toggleClass(“highlight”);
});
});
</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>
<div>クリック</div>
<div>クリック</div>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■指定されたイベントを実行する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
trigger(“イベントタイプ”, [データ])
となります。
以下の例では、「ここをクリックしてみてね」ボタンを
クリックすると、すべてのdivの背景色が変わります。
例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).toggleClass(“highlight”);
});
$(“button”).click(function() {
$(“div”).trigger(“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>
<div>クリック</div>
<button>ここをクリックしてみてね</button>
</body>
</html>
jQuery入門 No.34
- 2009 09月11日
- コメントは受け付けていません。
───────────────────────────────
jQuery入門 No.34
───────────────────────────────
───────────────────────────────
■目次
───────────────────────────────
1)兄弟要素を選択する
2)選択している要素集合に前に選択している要素集合を追加する
3)1つ前に選択した要素集合を選択する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■兄弟要素を選択する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
siblings([条件])
となります。
以下の例では、<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(){
$(“div.blue”).siblings().css(“border”, “3px solid red”);
});
</script>
<style>
div { width:80px; height:80px; margin:10px; float:left;}
.green {background:green;}
.pink {background:pink;}
.blue {background:blue;}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■選択している要素集合に前に選択している要素集合を追加する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
andSelf()
となります。
以下の例では、<div></div>の
親要素の<div></div>と、
<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.blue”).parent().andSelf().css(“border”, “3px solid red”);
});
</script>
<style>
div { width:80px; height:80px; margin:10px; float:left;}
.green {background:green;}
.pink {width:60px; height:60px; margin:10px;background:pink;}
.blue {width:40px; height:40px; margin:10px;background:blue;}
</style>
</head>
<body>
<div><div><div></div></div></div>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■1つ前に選択した要素集合を選択する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
end()
となります。
以下の例では<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.blue”).prev().css(“border”, “3px solid red”).end()
.css(“border”, “3px solid black”);
});
</script>
<style>
div { width:80px; height:80px; margin:10px; float:left;}
.green {background:green;}
.pink {background:pink;}
.blue {background:blue;}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
jQuery入門 No.33
- 2009 09月04日
- コメントは受け付けていません。
───────────────────────────────
jQuery入門 No.33
───────────────────────────────
───────────────────────────────
■目次
───────────────────────────────
1)親要素を選択する
2)祖先要素を選択する
3)指定要素の隣接兄要素を選択する
4)指定要素の兄要素を選択する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■親要素を選択する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
parent([条件])
となります。
以下の例では、<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(){
$(“div.blue”).parent().css(“border”, “3px solid red”);
});
</script>
<style>
div { width:80px; height:80px; margin:10px; float:left;}
.pink {background:pink;}
.blue {width:40px; height:40px; margin:10px;background:blue;}
</style>
</head>
<body>
<div><div></div></div>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■祖先要素を選択する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
parents([条件])
となります。
以下の例では、<div></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.blue”).parents(“div”).css(“border”, “3px solid red”);
});
</script>
<style>
div { width:80px; height:80px; margin:10px; float:left;}
.green {background:green;}
.pink {width:60px; height:60px; margin:10px;background:pink;}
.blue {width:40px; height:40px; margin:10px;background:blue;}
</style>
</head>
<body>
<div><div><div></div></div></div>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■指定要素の隣接兄要素を選択する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
prev([条件])
となります。
以下の例では<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.blue”).prev().css(“border”, “3px solid red”);
});
</script>
<style>
div { width:80px; height:80px; margin:10px; float:left;}
.green {background:green;}
.pink {background:pink;}
.blue {background:blue;}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■指定要素の兄要素を選択する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
prevAll([条件])
となります。
以下の例では以下の例では<div></div>の兄要素で
div要素に赤い枠線を設定しています。
例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.blue”).prevAll(“div”).css(“border”, “3px solid red”);
});
</script>
<style>
div { width:80px; height:80px; margin:10px; float:left;}
.green {background:green;}
.pink {background:pink;}
.blue {background:blue;}
</style>
</head>
<body>
<p>prevAllテストです</p>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
- アーカイブ
- 最近の投稿
- タグ
- カテゴリー