[size=small][color=olive][b]1.2:层次选择器:
说明:层次选择器通过DOM元素的层次关系获得元素,其主要的层次
关系包括后代、父子、相邻、兄弟关系,通过其中的关系可以快速定
位元素:
ancetor descendant 根据祖先元素匹配所有的后代元素,返回集合元素;
parent>child 根据付元素匹配所有的子元素,返回元素集合;
prev+next 匹配第一个的紧接在prev元素后的相邻元素,返回元素集合;
prev~siblings 匹配元素之后所有的兄弟元素,返回元素集合;
注意:其中prve+next 可以使用.next()替代,而prve~siblings可以使用nextAll()替代;[/b][/color][/size]
说明:层次选择器通过DOM元素的层次关系获得元素,其主要的层次
关系包括后代、父子、相邻、兄弟关系,通过其中的关系可以快速定
位元素:
ancetor descendant 根据祖先元素匹配所有的后代元素,返回集合元素;
parent>child 根据付元素匹配所有的子元素,返回元素集合;
prev+next 匹配第一个的紧接在prev元素后的相邻元素,返回元素集合;
prev~siblings 匹配元素之后所有的兄弟元素,返回元素集合;
注意:其中prve+next 可以使用.next()替代,而prve~siblings可以使用nextAll()替代;[/b][/color][/size]
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
*{
text-align: center;
}
.y{
font-size: 14px;
background-color: purple;
}
</style>
<!-- ************************** 导入 *********************************** -->
<script type="text/javascript" src="js/jquery-1.8.3.js">
</script>
<!-- ************************************************************* -->
<script type="text/javascript">
//程序入口
$(document).ready(function() {
test();
});
//提示:JQuery中的调用关系和java中方法调用类似
function test(){
//$("#xx").css("background","yellow"); //匹配id=xx 后代所有元素
//$("#xx #xx2").css("background","red"); //匹配id==xx 后代 id==xx2的所有元素,包含关系
//$("#xx p").addClass("y"); //匹配id=xx 后代所有的<p>元素,包含关系
//$("#xx,#yy").addClass("y"); //匹配id=xx id=yy 后代所有元素
//$("#xx>#xx2").addClass("y"); //匹配id=xx 后代id=xx2的所有元素
//$("#xx>p").addClass("y"); //匹配当前ID 下的所有p元素
//$("#xx+div").addClass("y"); //匹配id=xx 紧相邻的div元素,注意:是紧挨着的
//$("#xx").next().addClass("y"); //匹配当前id元素的下一元素
//$("#xx+div").next().addClass("y"); //匹配id=xx 紧挨着的div紧挨着的div; (紧挨着) 加号后面指定紧挨着的元素类型
//$("#xx+div").nextAll().addClass("y"); //匹配id=xx 紧挨着的为div,以及该div后的所有元素
//$("#xx").next().next().nextAll().addClass("y");
//$("#xx").nextAll().addClass("y"); //匹配id=xx 之后的所有元素,并列的;
//$("#xx~div").addClass("y"); //匹配当前ID 后面的所有div
//$("#xx~").addClass("y"); //匹配当前ID后的所有元素
//$("#xx1").parent().next().addClass("y"); //匹配当前id的父元素的下一元素
}
</script>
</head>
<body>
<h3>层次选择器测试</h3>
<div id="xx">
<div id="xx1">xx的子元素xx1</div>
<div id="xx2">xx的子元素xx2</div>
<div id="xx3">xx的子元素xx3</div>
<p>我是p元素</p>
</div>
<p>我是p元素</p>
<div id="yy">
<div id="yy1">yy的子元素yy1</div>
<div id="yy2">yy的子元素yy2</div>
</div>
<div id="bb">我的ID 为 :bb</div>
<p>插一脚</p>
<div id="aa">我的ID 为 :aa</div>
</body>
</html>