トップページへ戻る

１、jQueryセレクタの練習

すべての要素を選ぶ

メソッドチェインについて。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
h3 { 
	margin: 0; 
}
div,span,p {
	padding: 10px;
	margin: 10px;
	background-color: #EEEEEE;
}
</style>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(function(){
	$("button").click(function(){
	var elementCount = $("*").css("border","3px solid red").length;
	$("body").append("<h3>" + elementCount + " 個の要素が見つかりました</h3>");
	});
});
</script>
</head>
<body>
<div>DIV</div>
<span>SPAN</span>
<p>P <button>Button</button></p>
</body>
</html>

要素セレクタ（特定のタグだけを選択する）

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
div,p {
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
}
div#main {
	width: 400px;
}
</style>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(function(){
	$("button").click(function(){
		$("div,p").css("border","3px solid red");
	});
});
</script>
</head>
<body>
<div id="main">
<div id="notMe">
<p>id="notMe"　これは選ばれる</p>
</div>
<div id="myDiv">id="myDiv"　選ばれます</div>
<div id="notMe2">
<p>id="notMe"　選ばれる</p>
</div>
<button>Button</button>
</div>
</body>
</html>

クラスセレクタ（クラスを指定して選択する）

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
div,span {
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
}
p.en {
	background-color: #FFee33;
}
</style>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(function(){
	$("button").click(function(){
		$(".select p").css("border","3px solid red");
	});
});
</script>
</head>
<body>
<div class="select">
<p>ここが選ばれます</p>
</div>
<div class="myDiv">これは、選ばれません</div>
<div class="select">
<p>ここが選ばれます</p>
</div>
<div class="select">
<p class="en">ここが選ばれます</p>
</div>
<button>Button</button>
</body>
</html>

IDセレクタ (IDのものだけを選択する）

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
div,span {
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
}
</style>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(function(){
	$("button").click(function(){
		$("#myDiv").css("border","3px solid red");
	});
});
</script>
</head>
<body>
<div id="notMe">
<p>id="notMe"　これは選ばれないIDです</p>
</div>
<div id="myDiv">id="myDiv"　これだけが選ばれます（IDはbody内に一個しか無い）</div>
<div id="notMe2">
<p>id="notMe"　これは選ばれません</p>
</div>
<button>Button</button>
</body>
</html>

複数のセレクタ（いくつかの要素やID、クラスなどをカンマ区切りで指定して選択する）

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
div,span {
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
}
</style>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(function(){
	$("button").click(function(){
		$("#notMe,#notMe2,#myDiv").css("border","3px solid red");
	});
});
</script>
</head>
<body>
<div id="notMe">
選ばれます
</div>
<div id="myDiv">選ばれます</div>
<div id="notMe2">
選ばれます
</div>
<button>Button</button>
</body>
</html>

子要素の選択(二つ別々に選ぶ場合、半角区切りで、タグやクラス、IDを書く。一個のまとまりとして選ぶ場合は、「>」で区切る）

どう違うのかは、実行するとよく分かります。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
div {
    margin: 10px;
	padding: 10px;
    background-color: #EEEEEE;
}
</style>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#t1").click(function(){
		$("#notMe div div").css("border","3px solid red");
	});
   $("#t2").click(function(){
		$("#notMe > div > div").css("border","3px solid red");
	});
});
</script>
</head>
<body>
<div id="notMe">
	<div>
		<div>
		ここが選ばれます<div>ここも選ばれます</div>
		</div>
	</div>
	<div>ここは選ばれません</div>
</div>
<div id="myDiv">選ばれません</div>
<div id="notMe2">
	<p>これは選ばれません</p>
</div>
<button id="t1">Type1</button>
<button id="t2">Type2</button>
</body>
</html>

兄弟要素の選択（例の場合、id="ch"と同じ階層にあるdivをすべて選択）

兄弟要素とは、同じ階層にある要素のことです。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
div,span {
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
}
</style>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(function(){
	$("button").click(function(){
		$("div ~ div").css("border","3px solid red");
	});
});
</script>
</head>
<body>
<div id="notMe">
	<div id="ch">
		<div>
		選ばれない<div>選ばれない</div>
		</div>
	</div>
	<div>ここが選ばれる</div>
   <p>選ばれない</p>
	<div>ここが選ばれる</div>
</div>
<button>Button</button>
</body>
</html>

直後の兄弟要素の選択（例の場合、id="ch"の直後の兄弟要素がdivのものを一個選択）

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
div,span {
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
}
</style>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(function(){
	$("button").click(function(){
		$("#ch + div").css("border","3px solid red");
	});
});
</script>
</head>
<body>
<div id="notMe">
	<div id="ch">
		<div>
		選ばれない<div>選ばれない</div>
		</div>
	</div>
	<div>ここが選ばれる</div>
	<p>選ばれない</p>
　　<div>選ばれない</div>
</div>
<button>Button</button>
</body>
</html>

フォームの中の、リストやチェックボックスの「選ばれている項目」の選択。クリックごとに、現在選択されている項目をチェック。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
div,span {
    padding: 10px;
    margin: 10px;
    background-color: #EEEEEE;
}
</style>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(function(){
	$("input:checkbox").click(function(){
		var j="";
		$("input:checked").each(function(){
			j+=$(this).val()+" : " ;
		});
		$("#mess").html(j);
	});
	$("select").change(function(){
		var j="";
		$("option:selected").each(function(){
			j+=$(this).val()+" : " ;
		});
		$("#mess2").html(j);
	});
});
</script>
</head>
<body>
<form>
<input type="checkbox" value="yamada" />
<input type="checkbox" value="morita" />
<input type="checkbox" value="kusunoki" />
<input type="checkbox" value="saito" />
<input type="checkbox" value="yamamoto" />
<select multiple="multiple">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
</form>

<div id="mess"></div>
<div id="mess2"></div>
</body>
</html>

課題１

上の例をjq10〜18.htmlとして、public_html/tomcat/mobile2011に保存して、動作を確認しておいてください。

正常に動くことを確認しておいてください。