初級jQueryの使用
24748 ワード
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="../Scripts/jquery-1.7.1.min.js"></script>
<link href="../Themes/default.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {// ， ，
$(".level1>a").click(function () {
//$(this).addClass("current")
// .next().show()
//.parent().siblings().children("a").removeClass("current")
//.next().hide();
$(this).next().show()// ul
.parent().siblings()// li
.children().next().hide();//
return false;
});
$("#cr").click(function () {
if ($(this).is(":checked")) {
alert(" ！");
}
});
});
//$(".demo").click(function () {// ， ready（） ， body
// alert("jQuery Demo！");
//});
function demo() {
alert(" !");
};
</script>
</head>
<body>
<div class="box">
<ul class="menu">
<li class="level1">
<a href="#none"> </a>
<ul class="level2">
<li><a href="#none"> </a></li>
<li><a href="#none"> </a></li>
<li><a href="#none"> T </a></li>
<li><a href="#none"> T </a></li>
</ul>
</li>
<li class="level1">
<a href="#none"> </a>
<ul class="level2">
<li><a href="#none"> </a></li>
<li><a href="#none"> </a></li>
<li><a href="#none"> </a></li>
<li><a href="#none"> </a></li>
</ul>
</li>
<li class="level1">
<a href="#none"> </a>
<ul class="level2">
<li><a href="#none"> </a></li>
<li><a href="#none"> </a></li>
<li><a href="#none"> </a></li>
<li><a href="#none"> </a></li>
</ul>
</li>
</ul>
<!-- <ul class="menu">
<li class="level1">
<a href="#none"> </a>
<ul class="level2">
<li><a href="#none"> </a></li>
<li><a href="#none"> </a></li>
<li><a href="#none"> T </a></li>
<li><a href="#none"> T </a></li>
</ul>
</li>
<li class="level1">
<a href="#none"> </a>
<ul class="level2">
<li><a href="#none"> </a></li>
<li><a href="#none"> </a></li>
<li><a href="#none"> </a></li>
<li><a href="#none"> </a></li>
</ul>
</li>
<li class="level1">
<a href="#none"> </a>
<ul class="level2">
<li><a href="#none"> </a></li>
<li><a href="#none"> </a></li>
<li><a href="#none"> </a></li>
<li><a href="#none"> </a></li>
</ul>
</li>
</ul>-->
</div>
<div>
<input type="checkbox" id="cr" /><label for="cr"> .</label>
<p class="demo">jQuery Demo</p>
<script type="text/javascript">
$(".demo").click(function () {
alert("jQuery Demo！");
});
</script>
<p class="demo" onclick="demo();"> </p>
<div id="tt">test</div>
<script type="text/javascript">
$('#tt').css("color", "red");// .attr
</script>
<table id="tb">
<tbody>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<input type="checkbox" value="1" name="check" checked="checked" />
<input type="checkbox" value="2" name="check" />
<input type="checkbox" value="3" name="check" checked="checked" />
<input type="button" value=" " id="btn" />
<script type="text/javascript">
//
//window.onload = function () {//
// var btn = document.getElementById("btn"); // id btn (button)
// btn.onclick = function () { // onclick
// var arrays = new Array(); //
// var items = document.getElementsByName("check"); // name check (checkbox)
// for (i = 0; i < items.length; i++) { //
// if (items[i].checked) { //
// arrays.push(items[i].value); // . push() javascript .
// }
// }
// alert(" ：" + arrays.length);
// }
//}
//
$("#btn").click(function () {
var items = $("input[name='check']:checked");
var array = [];
//array = eval(items);
$('input:checkbox:checked').each(function () {
array.push($(this).val());
});
alert(" ：" + items.length+array[0]);
})
</script>
<form>
<label>Name:</label>
<input name="name" />
<p>
<label>Newsletter:</label>
<input name="newsletter" />
<input name="newsletter" />
</p>
<input name="newsletter" />
</form>
<script type="text/javascript">
var tid = $("form > input");
var i = tid;
</script>
<input name="none" />
</div>
</body>
</html>