jquery选择器空格与大于号、加号与波浪号的区别

 

CreateTime--2017年6月30日17:19:07
Author:Marydon

参考链接：https://my.oschina.net/jsonavaj/blog/62630

空格：$('parent child')表示获取parent下的所有的child节点，所有的子孙。
大于号：$('parent > child')表示获取parent下的所有child的儿子，第一代。
加号：$('pre + nextbrother')表示获得pre节点的下一个兄弟节点，相当于next()方法
波浪号：$('pre ~ brother')表示获取pre节点的后面的所有兄弟节点，相当于nextAll()方法。

举例：

HTML部分

<div id='a'>  
    <span>span1</span>  
    <div>  
        <span>span1.1</span>  
        <span id='span12'>span1.2</span>  
        <span>span1.3</span>  
        <span>span1.4</span>  
        <span>span1.5</span>  
        <span>span1.6</span>  
    </div>  
    <span>span2</span>  
    <div>  
        <span>span2.1</span>  
        <span>span2.2</span>  
        <span>span2.3</span>  
        <span>span2.4</span>  
        <span>span2.5</span>  
        <span>span2.6</span>  
    </div>  
    <span>span3</span>  
    <span>span4</span>  
</div>  
<hr/>  
<div id='b'>
        空格：  
</div>  
<hr/> 
<div id='c'>
    +：
</div>  
<hr/>  
<div id='d'>
    ~：  
</div>  
<hr/>  
<div id='e'>  
    >：  
</div>

　　javascript部分

/*这几个示例不能同时运行*/
 $(function () {
    // 后代选择器：获取id="a"标签的所有后代标签span
    $("#a span").clone().appendTo('#b');
    // 相邻元素选择器：获取id="span12"标签后的同级元素
//    $("#span12 + span").clone().appendTo('#c');
    // 同辈元素选择器：获取id="span12"标签后的所有同级元素
//    $("#span12 ~ span").clone().appendTo('#d');
    // 子选择器：获取id="a"的所有子元素
//    $("#a > span").clone().appendTo('#e'); 
//    $("#a").children('span').clone().appendTo('#b');
})