jQuery入門 No.32
- 2009 08月28日
- コメントは受け付けていません。
───────────────────────────────
jQuery入門 No.32
───────────────────────────────
───────────────────────────────
■目次
───────────────────────────────
1)条件にマッチした子要素を選択する
2)指定要素の次の要素を選択する
3)指定要素の次以降にある兄弟要素を全て選択する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■条件にマッチした子要素を選択する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
find(条件)
となります。
以下の例では、<p></p>の子要素のspan部分を
探して、文字色を赤にしています。
例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(){
$(“p”).find(“span”).css(‘color’,'red’);
});
</script>
</head>
<body>
<p><span>こんにちは。</span>お元気ですか？</p>
<p>はい。 <span>元気</span>です。</p>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■指定要素の次の要素を選択する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
next([条件])
となります。
以下の例ではdisabled=”disabled”のボタンの次の<span></span>部分に
「ボタンは押せません」を表示しています。
例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[disabled]“).next().text(“ボタンは押せません”);
});
</script>
</head>
<body>
<div><button disabled=”disabled”>１</button> – <span></span></div>
<div><button>２</button> – <span></span></div>
<div><button disabled=”disabled”>3</button> – <span></span></div>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■指定要素の次以降にある兄弟要素を全て選択する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
nextAll([条件])
となります。
以下の例ではボタンを押すと、
div class=”yellow”の次の要素で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(){
$(“button”).click(function() {
$(“div.yellow”).nextAll(“div”).css(“border”, “3px solid red”);
});
});
</script>
<style>
div {width:100px; height:100px; margin:10px;
float:left;background:blue;}
.yellow {width:80px; height:80px; margin:10px;
float:left; background:yellow;}
.green {width:40px;height:40px; margin:5px;
float:left; background:green;}
</style>
</head>
<body>
<div></div>
<div class=”yellow”></div>
<div></div>
<div class=”green”></div>
<button>変更</button>
</body>
</html>
jQuery入門 No.31
- 2009 08月21日
- コメントは受け付けていません。
───────────────────────────────
jQuery入門 No.31
───────────────────────────────
───────────────────────────────
■目次
───────────────────────────────
1)条件にマッチした要素を要素集合に追加する
2)マッチした要素の子要素から、条件式にマッチする要素を選択する
3)指定要素から最も近い親要素を選択する
4)マッチした要素の、全ての子要素を選択する(テキストノードを含む)
5)編集後記
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■条件にマッチした要素を要素集合に追加する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
add(条件)
となります。
以下の例では、変更ボタンを押すと<div></div>部分は
赤い枠線が付き、<div></div>部分、<p></p>の背景が
ピンクになります。
css(“border”, “2px solid red”)
部分は<div></div>部分のみに、
css(“background”, “pink”)
部分は
<div></div>部分と追加された<p></p>部分にも設定されます。
例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() {
$(“div”).css(“border”, “2px solid red”).add(“p”)
.css(“background”, “pink”);
});
});
</script>
<style>
div { width:60px; height:60px; margin:10px; float:left;}
p { width:60px; height:60px; margin:10px; float:left;color:blue;}
</style>
</head>
<body>
<div>ここはdivです</div>
<p>ここはｐです</p>
<div>ここはdivです</div>
<button>変更</button>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■マッチした要素の子要素から、条件式にマッチする要素を選択する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
children(条件)
となります。
以下の例では<div class=”yellow”></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(){
$(“button”).click(function() {
$(“div”).children(“div.yellow”).css(“border”, “5px solid red”)
});
});
</script>
<style>
div {width:150px; height:150px; margin:10px;
float:left;background:blue;}
.yellow {width:80px; height:80px; margin:10px;
float:left; background:yellow;}
.green {width:40px;height:40px; margin:5px;
float:left; background:green;}
</style>
</head>
<body>
<div>親<div class=”yellow”>子<div class=”green”>孫</div></div></div>
<button>変更</button>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■指定要素から最も近い親要素を選択する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
closest(条件)
となります。
以下の例では、<li></li>部分をクリックすると
背景が変わります。
例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(){
$(“#test”).click(function(e) {
$(e.target).closest(“li”).toggleClass(“hilight”);
});
});
</script>
<style>
li{width:200;background: #EEEEEE; padding:2px;margin:2px;}
li.hilight { background: pink; }
</style>
</head>
<body>
<div id=”test”>
<ul>
<li><b>クリック！</b></li>
<li>クリック！ <b>クリック！</b></li>
</ul>
</div>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■マッチした要素の、全ての子要素を選択する(テキストノードを含む)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
contents()
となります。
以下の例では背景が黄の文字だけ太字になります。
例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(){
$(“button”).click(function() {
$(“div.yellow”).contents().wrap(“<b/>”);
});
});
</script>
<style>
div { width:70px; height:70px; margin:10px; float:left;
border:3px; background:pink;}
.yellow {background:yellow;}
.green {background:green;}
</style>
</head>
<body>
<div>テスト</div>
<div class=”yellow”>黄色</div>
<div class=”green”>緑色</div>
<button>変更</button>
</body>
</html>
jQuery入門 No.30
- 2009 08月07日
- コメントは受け付けていません。
───────────────────────────────
jQuery入門 No.30
───────────────────────────────
───────────────────────────────
■目次
───────────────────────────────
├ 要素が条件にマッチする場合trueを返却する
├ 要素を指定した関数で変換する
├ 要素が条件にマッチしない場合trueを返却する
├ 指定された範囲の要素を選択する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素が条件にマッチする場合trueを返却する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
is(条件)
となります。
以下の例ではクリックすると最初のもの、青か赤のもの
それ以外のもので<p></p>部分にそれぞれ違う文章を表示します。
例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”).click(function () {
if ($(this).is(“:first-child”)) {
$(“p”).text(“最初のdivです”);
}else if ($(this).is(“.blue,.red”)) {
$(“p”).text(“青か赤のdivです”);
} else {
$(“p”).text(“普通のdivです”);
}
});
});
</script>
<style>
div { width:40px; height:40px; margin:5px; float:left;
border:3px; background:pink;}
.blue { background:blue; }
.red { background:red; }
p {clear:left;}
</style>
</head>
<body>
<div></div>
<div></div>
<div class=”blue”></div>
<div class=”red”></div>
<div></div>
<p></p>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素を指定した関数で変換する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
map(変換関数)
となります。
以下の例ではinputのvalueを取得して,で区切って
<p></p>部分に追加しています。
例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(){
$(“p”).append( $(“input”).map(function(){
return $(this).val();
}).get().join(“, “) );
});
</script>
</head>
<body>
<p><b>inputの値は:</b></p>
<form>
<input type=”text” name=”name” value=”花子”/>
<input type=”text” name=”kana” value=”ハナコ”/>
<input type=”text” name=”url” value=”http://www.bface.net/”/>
</form>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■要素が条件にマッチしない場合trueを返却する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
not(条件)
となります。
以下の例ではclassがblueでないものの枠線を赤に設定しています。
例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”).not(“.blue”)
.css(“border-color”, “red”);
});
</script>
<style>
div { width:60px; height:60px; margin:10px; float:left;
background:yellow; border:2px solid white; }
.blue { background:blue; }
.pink{ background:pink; }
p {clear:left;}
</style>
</head>
<body>
<div></div>
<div></div>
<div class=”blue”></div>
<div></div>
<div class=”pink”></div>
<div></div>
</body>
</html>
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■指定された範囲の要素を選択する
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
記述方法
slice(開始インデックスナンバー, [終了インデックスナンバー])
となります。
終了インデックスナンバーの前までを指定します。
（省略可能です）
以下の例では数字の１から３まで書いてある部分が黄色になります。
例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”).slice(1,4).css(“background-color”, “yellow”);
});
</script>
<style>
div { width:40px; height:40px; margin:5px; float:left;
text-align:center;border:3px; background:pink;}
</style>
</head>
<body>
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
</html>
- アーカイブ
- 最近の投稿
- タグ
- カテゴリー