jQuery操作种数组的工具方法
jQuery操作类数组的工具方法
jQuery对象提供了几个常用的方法来操作类数组：
<!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>
<title>操作类数组的工具方法</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
</head>
<body>
<div>
<div id="java">
Java
</div>
<div id="javaee">
Java EE
</div>
<div id="ajax">
Ajax
</div>
<div id="xml">
XML
</div>
<div id="ejb">
EJB
</div>
<div id="hibernate">
Hibernate
</div>
</div>
<script type="text/javascript">
//获取div之内所有的div元素，并迭代处理每个元素
$("div>div").each(function(i) {
this.innerHTML += " 添加的内容" + i;
})
//返回div之内的所有div元素的个数，下面将输出6
alert($("div>div").length);
//获取div之内的第四个div元素包装的jQuery，下面将输出“疯狂XML讲义...”
alert($("div>div").eq(3).html());
//获取div之内的第二个div元素，下面将输出“轻量级Java EE企业应用实战...”
alert($("div>div").get(1).innerHTML);
//获取id为java的div元素。注意：$("#java").get()返回一个数组
alert($("#java").get()[0].innerHTML);
//所有div元素之内，id为ejb的div的索引，下面将输出4.
alert($("div>div").index($("#ejb").get(0)));
</script>
</body>
</html>
操作类数组的工具方法(过滤)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>操作类数组的工具方法(过滤)</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
</head>
<body>
<div>
<div id="java">
Java
</div>
<div id="javaee">
Java EE
</div>
<div id="ajax">
Ajax
</div>
<div id="xml">
XML
</div>
<div id="ejb">
EJB
</div>
<div id="hibernate">
Hibernate
</div>
</div>
<script type="text/javascript">
//对div之内的div元素进行过滤，必须满足id为ajax
$("div>div").filter("#ajax").css("background-color", "#aaaaaa");
//对div之内的div元素进行过滤，要求div内的字符串长度大于8
$("div>div").filter(function() {
return this.innerHTML.length > 8;
}).css("border", "1px solid black");
//对div之内的div元素进行过滤，必须满足id不为ajax
$("div>div").not("#ajax").css("font-weight", "bold");
//对div之内的div元素进行过滤，取出索引从3到5的元素
$("div>div").slice(3, 5).height(40);
//将div之内的div元素映射成另一个数组，t的值是[0,1,2,3,4,5]
$("div>div").map(function(i) {
return i;
});
</script>
</body>
</html>
操作类数组的工具方法(导航)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>操作类数组的工具方法(导航)</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
</head>
<body>
<div>
<div id="java">
Java
</div>
<div id="javaee">
Java EE
</div>
<div id="ajax">
Ajax
</div>
<div id="xml">
XML
</div>
<div id="ejb">
EJB
</div>
<div id="hibernate">
Hibernate
</div>
</div>
<script type="text/javascript">
//获取div之内所有内容（包括节点和文本），实际返回div下的6个子div。
$("div").contents().css("background-color", "#dddddd");
//获取id为ajax节点的下一个兄弟节点
$("#ajax").next().css("border", "2px dotted black");
//获取id为ajax节点的上一个兄弟节点
$("#ajax").prev().css("border", "2px solid black");
//获取获取id为ajax节点的、id为java的兄弟节点
$("#ajax").siblings("#java").append("<b> 是ID为ajax的节点的兄弟节点（且其id为java）</b>");
//取出所有div元素的父元素，将会输出body元素、和一个div元素
$("div").parent().each(function() {
alert($(this).html());
});
</script>
</body>
</html>
操作类数组的工具方法(连接方法)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>操作类数组的工具方法(连接方法)</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.4.3.js"></script>
</head>
<body>
<div>
<div id="java">
Java
</div>
<div id="javaee">
Java EE
</div>
<div id="ajax">
Ajax
</div>
<div id="xml">
XML
</div>
<div id="ejb">
EJB
</div>
<div id="hibernate">
Hibernate
</div>
</div>
<script type="text/javascript">
//获取id为ajax节点的下一个兄弟节点，再将id为ajax的节点与此链为一体。
//实际返回id为ajax的节点、以及id为ajax的下一个节点
$("#ajax").next().andSelf().css("border", "2px solid black");
//先获取ajax节点的下一个节点，再次使用end()方法重新获取之前的ajax节点
//实际方返回的就是$("#ajax")的结果
$("#ajax").next().end().css("background-color", "#ffaaaa");
</script>
</body>
</html>