jQuery元素选择标签练习 - 20191220

<div id="a1">我是ID</div>
<div class="a2">我是class</div>
<div class="a2">我是class</div>
<div>我是div标签</div>
<div>我是div标签</div>
<div>我是div标签</div>
<section>
<p>我1级是P标签</p>
<p>我1级是P标签</p>
<p>我1级是P标签</p>
    <div><p>我2级是P标签</p></div>
    <div><p>我2级是P标签</p></div>
    <div><p>我2级是P标签</p></div>
</section>
<section></section>
<p>我是P标签</p>

var idElement =  $('#a1'),   // 获取id为a1的元素
classElement = $('.a2'), // 获取所有class为a2的元素
divElement = $('div'),  // 获取所有div元素
pElement = $('section p'), // 获取section内的所有p后代元素
pElement2 = $('section > p'), // 获取section内的所有p标签子元素;
div_pElement = $('#a1 ~ section'), // 获取#a1起始位置向后的所有section同级元素，不包含其他元素
nextElement = $('div + section'); // 获取div后的第一个section同级元素
console.log(idElement);
console.log(classElement);
console.log(divElement);
console.log(pElement);
console.log(pElement2);
console.log(div_pElement);
console.log(nextElement);

总结

1. div + p div ~ section 都是同级选择器，不会返回子元素，也不包含起始元素
2. div > p 和 div p 两者的区别是，前者是子元素选择，后者是后代选择