jQuery层次选择器选择元素使用介绍_jquery

复制代码 代码如下: 1.层次选择器： 通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解 根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中，在过滤选择器中有可以分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种 注：ancestor descendant与parent>child所选择的元素集合是不同的，前者的层次关系是祖先与后代，而后者是父子关系；另外，prev+next可以使用.next()代替，而prev~siblings可以使用nextAll()代替。 --> 标记，其中第二块 中，添加1个 标记，在该 标记中又新增1个 标记，全部元素初始值均为隐藏，然后通过jQuery层次选择器，显示相应的页面标记。--> 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} $(function () { $('#divMid').css('display', 'block'); $('div span').css('display', 'block'); //显示div中所有的 标记 }) $(function () { $('#divMid').css('display', 'block'); $('div>span').css('display', 'block'); //显示 中子 标记 }) $(function () { $('#divMid+div').css('display', 'block'); //显示ID为divMid元素后的下一个 $('#divMid').next().css('display', 'block'); }) $(function () { $('#divMid ~ div').css('display', 'block'); //显示ID为divMid元素后的所有 $('#divMid').nextAll().css('display', 'block'); }) $(function () { $('#divMid').siblings('div').css('display','block'); //显示ID为divMid元素的所有相邻 }) /* siblings()方法与选择器prev~siblings 区别在于，前者获取全部的相邻元素，不分前后，而后者仅获取标记后面全部相邻元素，不能获取前面部分*/ Left Right_1 Right_2

jQuery层次选择器选择元素使用介绍_jquery

Articles Liés