jquery层级选择器

层级选择器

层级共包括后代元素、子元素、相邻元素和同级元素四种。

后代选择器
后代选择器$(‘ancestor descendant’)选择给定的祖先元素的所有后代元素，并返回集合元素

<div id="test">
    <div>
        <div>1</div>
        <div>2</div>
    </div>
</div>
<script>
$('#test div').css('margin','10px');
console.log($('#test div').length);//3
</script>

对应DOM的getElement类方法

Array.prototype.forEach.call(document.getElementById('test').getElementsByTagName('div'),function(item,index,arr){
    item.style.margin = '10px';
});

或者使用querySelectorAll()方法

Array.prototype.forEach.call(document.querySelectorAll('#test div'),function(item,index,arr){
    item.style.margin = '10px';
});

子元素选择器

子元素选择器$(‘parent > child’)选择所有指定’parent’元素中指定的’child’的直接子元素，并返回集合元素

<div id="test">
    <div>
        <div>1</div>
        <div>2</div>
    </div>
</div>
<script>
$('#test > div').css('margin','10px');
console.log($('#test > div').length);//1
</script>

对应DOM的querySelectorAll()方法

Array.prototype.forEach.call(document.querySelectorAll('#test > div'),function(item,index,arr){
    item.style.margin = '10px';
});

一般兄弟选择器
一般兄弟选择器$(‘prev ~ siblings’)选择’prev’元素之后的所有同级的’siblings’元素，并返回集合元素

<ul>
    <li id="test">1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
$('#test ~ li').css('color','red');
console.log($('#test ~ li').length);//2
</script>

对应DOM的querySelectorAll()方法

Array.prototype.forEach.call(document.querySelectorAll('#test ~ li'),function(item,index,arr){
    item.style.color = 'red';
});

相邻兄弟选择器
相邻兄弟选择器$(‘prev + next’)选择所有紧跟在’prev’元素后的’next’元素，并返回集合元素

<ul>
    <li id="test">1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
$('#test + li').css('color','red');
console.log($('#test + li').length);//1
</script>

对应DOM的querySelectorAll()方法

Array.prototype.forEach.call(document.querySelectorAll('#test + li'),function(item,index,arr){
    item.style.color = 'red';
});