Question

~号在jQuery中是什么意思

if ($name.val() == "") {
$name.find("~span").remove();
$name.after("<span>*</span>");
return false;
}
代码中的find("~span")里的~号是什么意思啊,find("span")我知道是什么意思,可是加上~号我就不知道了

Answer 1

f = '<form id="f"><input name="1"/><input name="2"/><input name="3"/></form><input name="outer_1"/>';
$('body').append(f);
$('#f').find('~input');

看，会选择到 <input name="outer_1"/>，
所以你给的例子就是选择到与 $name 元素相邻的 span

与 $('#f~input') 一样，$name.find("~span") 也可以改成 $($name + '~span')

你可以在 console 执行代码

追问

$name.find("span")是查找$name元素的子元素中的span标签,加上~号后就变成查找$name元素的同辈标签了?
好吧,$name.find("~span")和$name.nextAll("span")差不多....这种绕弯的写法压根是拿来刷jQuery选择器熟练度的,实际上是没人用得..

Answer 2

prev ~ siblings

找到所有与表单同辈的 input 元素
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

$("form ~ input")

追问

"form ~ input"和"~span",一个放两个参数,一个放一个参数,意思能一样?

Answer 3

$name后面同辈的span标签，例如：
$('A~B')查找A元素后面的兄弟节点，不包括非直接子节点
例子：找到所有与表单同辈的 input 元素
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" /> ]