jQuery 同级选择器

同级选择器语法

$('selector1 ~ selector2')

同级选择器语法解析

jQuery的同级选择器中，selector1和selector2使用“~”符号隔开，该符号在键盘上一般位于“Esc”的下方，键入的时候，需要将输入法切换为英文，然后摁住shift的同时摁下该键即可输入。该选择器用于选择selector1选择到的HTML元素的同级的所有被selector2匹配选择的元素，而什么是同级呢，可以理解为selector1和selector2互为兄弟元素，具体的可参考下方的实例代码。

同级选择器实例代码

如下实例代码，在div中定义了多个子元素，其中一个div子元素还包含了另一个子元素p，然后通过jQuery的同级选择器匹配class属性值为z的所有同级的p元素，因为另一个元素p是class属性值为z的元素的兄弟元素div的子元素，因此不会被匹配选择：

<div>
  <span class="z">span</span>
  <p>span的同级元素p</p>
  <div>
    <p>非span的同级元素</p>
  </div>
</div>



<button id="test" class="btn">jQuery</button>

<script>
  $('#test').click(function(){
    $('.z ~ p').css("font-size","3.5em");
  })
</script>

试一试

免责声明：内容仅供参考，不保证正确性！