<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jQuery_5.aspx.cs" Inherits="Web_jQuery.jQuery_5" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var item = document.getElementById("tb");
var tbody = item.getElementsByTagName("tbody")[0];
var trs = tbody.getElementsByTagName("tr");
for (var i = 0; i < trs.length; i++) {
if (i % 2 == 0) {
trs[i].style.backgroundColor = "red";
}
}
});
</script>
<title></title>
</head>
<body>
<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>
</body>
</html>
根据表格id获取表格
在表格内获取<tbody>元素
tbody内获取<tr>元素
循环每个tr元素
对<tr>元素的索引值除以2，然后根据奇偶数设置表格背景颜色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var btn = document.getElementById("btn");
btn.onclick = function () {
var arrays = new Array();
var items = document.getElementsByName("check")
for (i = 0; i < items.length; i++) {
if (items[i].checked) {
arrays.push(items[i].value);
}
}
alert("选中的个数:" + arrays.length);
}
});
</script>
<title></title>
</head>
<body>
<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" />
</body>
</html>
新建一个空数组
获取name为“check”的多选框
循环判断多选框是否被选中，如果被选中则添加到数组中
获取输出按钮，然后为按钮添加 onclick 事件，则输出数组的长度则输出
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".level1>a").click(function () {
$(this).addClass("current")
.next().show()
.parent().siblings().children("a").removeClass("current")
.next().hide();
return false;
})
});
</script>
<title>链式导航</title>
</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>
</div>
</body>
</html>
实现分级菜单功能
时间： 2024-10-20 15:50:48