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元素的个数，下面将输出6alert($("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().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的值是$("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>
页:
[1]