<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 操作类数组的工具方法 </title>
</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">经典Java EE企业应用实战</div>
<div id="android">疯狂Android讲义</div>
</div>
<script type="text/javascript" src="../jquery-1.8.0.js">
</script>
<script type="text/javascript">
// 获取div之内所有的div元素，并迭代处理每个元素
$("div>div").each(function(i)
{
this.innerHTML += " 添加的内容" + i;
});
// 返回div之内的所有div元素的个数，下面将输出6
alert($("div>div").length);
// 获取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")));
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 操作类数组的工具方法 </title>
</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">经典Java EE企业应用实战</div>
<div id="android">疯狂Android讲义</div>
</div>
<script type="text/javascript" src="../jquery-1.8.0.js">
</script>
<script type="text/javascript">
// // 对div之内的div元素的第四个元素设置字体为24
$("div>div").eq(3).css("font-size" , "24pt");
// 对div之内的div元素进行过滤，必须满足id为ajax
$("div>div").filter("#ajax").css("background-color" , "#aaa");
// 对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元素映射成另一个数组，它的值是[0,1,2,3,4,5]
$("div>div").map(function(i)
{
return i;
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 操作类数组的工具方法 </title>
</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">经典Java EE企业应用实战</div>
<div id="android">疯狂Android讲义</div>
</div>
<script type="text/javascript" src="../jquery-1.8.0.js">
</script>
<script type="text/javascript">
// 获取body>div之内所有内容（包括节点和文本），实际返回div下的6个子div。
$("body>div").contents().css("background-color" , "#ddd");
// 获取id为ajax节点的下一个兄弟节点
$("#ajax").next().css("border" , "2px dotted black");
// 获取id为ajax节点后面的、id为android的节点之前的所有兄弟节点
$("#ajax").nextUntil("#android").css("font-size" , "20pt");
// 获取id为ajax节点的上一个兄弟节点
$("#ajax").prev().css("border" , "2px solid black");
// 获取id为ajax节点的之前的、id为java的节点之后的所有兄弟节点
$("#ajax").prevUntil("#java").height(50);
// 获取获取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>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 操作类数组的工具方法 </title>
</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">经典Java EE企业应用实战</div>
<div id="android">疯狂Android讲义</div>
</div>
<script type="text/javascript" src="../jquery-1.2.6.min.js">
</script>
<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>
