您的位置：首页 > Web前端 > JQuery

使用jQuery层次选择器选择元素

2013-04-18 08:14 633 查看
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<!--

1.层次选择器： 通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中基类关系可以方便快捷地定位元素

jQuery选择器详解

根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中，在过滤选择器中有可以分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种

注：ancestor descendant与parent>child所选择的元素集合是不同的，前者的层次关系是祖先与后代，而后者是父子关系；另外，prev+next可以使用.next()代替，而prev~siblings可以使用nextAll()代替。

-->

<title></title>

<!-- 使用jQuery层次选择器选择元素：在页面中，设置4块<div>标记，其中第二块<div>中，添加1个<span>标记，在该<span>标记中又新增1个<span>标记，全部元素初始值均为隐藏，然后通过jQuery层次选择器，显示相应的页面标记。-->

<script src="jquery-1.9.1.js" type="text/javascript"></script>

<style type="text/css">

body{font-size:12px;text-align:center;}

div,span{float:left;border:solid 1 px #ccc;margin:8px;display:none}

.clsFraA{width:65px;height:65px}

.clsFraP{width:45px;height:45px;background-color:#eee}

.clsFraC{width:25px;height:25px;background-color:#ddd}

</style>

<script type="text/javascript">

$(function () {

$('#divMid').css('display', 'block');

$('div span').css('display', 'block'); //显示div中所有的<span>标记

})

$(function () {

$('#divMid').css('display', 'block');

$('div>span').css('display', 'block'); //显示<div>中子<span>标记

})

$(function () {

$('#divMid+div').css('display', 'block'); //显示ID为divMid元素后的下一个<div>

$('#divMid').next().css('display', 'block');

})

$(function () {

$('#divMid ~ div').css('display', 'block'); //显示ID为divMid元素后的所有<div>

$('#divMid').nextAll().css('display', 'block');

})

$(function () {

$('#divMid').siblings('div').css('display','block'); //显示ID为divMid元素的所有相邻<div>

})

/* siblings()方法与选择器prev~siblings 区别在于，前者获取全部的相邻元素，不分前后，而后者仅获取标记后面全部相邻元素，不能获取前面部分*/

</script>

</head>

<body>

<div class="clsFraA">

Left</div>

<div class="clsFraA" id="divMid">

<span class="clsFraP" id="Span1">

<span class="clsFraC" id="Span2"> </span>

</span>

</div>

<div class="clsFraA">

Right_1</div>

<div class="clsFraA">

Right_2</div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航