Question

关于jquery的问题： prev + next、prev ~ siblings有何不同？

Answer 1

你好，他们的差别是：

prev + next

  匹配所有紧接在 prev
元素后的 next 元素

如：HTML

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

Jquery：
$("label + input")

结果：[ <input name="name" />, <input name="newsletter" /> ]

而 prev ~ siblings则是匹配 prev 元素之后的所有siblings 元素，就是同辈元素。

如：HTML
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jQuery:
$("form ~ input")

结果：[ <input name="none" /> ]

希望对您有帮助。

追问

手册上摘抄的例子有什么用？如果手册我能看得懂我会来这里提问吗。

追答

这些例子还看不懂吗？这不很好的说明他们的区别了嘛。你自己多写几个例子自己感受就知道了，别人再怎么说你也感受不到。所以，Jquery就得一个一个方法的自己练。

追问

你说不明白就不要说，摘抄手册例子没用。

追答

懒得理你。

Answer 2

这个是css选择器。

如果你了解了css里+和~是什么意思的话，jquery里也是一个意思。

<style>
/* 紧接着div的p */
div + p {
    background: blue;
}
</style>
<div>div</div>
<p>我是蓝的, 因为我紧接着div</p>
<p>我不是蓝的, 因为我上面是p</p>

<style>
/* p的上面有div */
div ~ p {
    background: blue;
}
</style>
<div>div</div>
<strong>我是strong</strong>
<p>我是红的, 因为我上面有div</p>
<p>我是红的, 因为我上面有div</p>