html层次选择器>号的意思,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