jQuery 3.x子选择器正确用法咨询：旧写法为何报错？

嘿，这个问题我熟！先给你拆解一下问题出在哪，再告诉你jQuery 3.x里正确的子元素选择姿势。

首先，你写的$('button[tooltip] ^ span')里的^完全用错啦！这个符号在jQuery选择器里是属性开头匹配的意思（比如input[name^='user']会选中name以user开头的输入框），根本不是子元素选择器，所以才会报语法错误，这是第一个坑。

然后回到你最初的问题：jQuery 3.x版本里，子元素选择器>其实依然完全有效，和1.10.2版本没有区别！你觉得它失效，大概率是这几个原因：

• DOM结构变化：目标span不再是button[tooltip]的直接子元素（比如中间多了一层div或者其他标签），这时候>就选不到了，因为它只匹配直接子元素。
• 选择器拼写有误：比如标签名、属性值写错了，导致选择器根本找不到父元素。
• 混淆了直接子元素和后代元素：如果要选所有后代（不管层级），应该用空格分隔的选择器$('button[tooltip] span')，而不是>。

那正确的直接子元素选择方式有两种：

1. 用>选择器（和你之前的写法一致，只要DOM结构正确就没问题）：

$('button[tooltip] > span')

这个写法会选中所有带tooltip属性的button的直接子元素span。

2. 用.children()方法，效果和>完全一样，有时候写起来更清晰：

$('button[tooltip]').children('span')

举个实际的DOM例子验证一下：

<button tooltip="tips">
  <span>我是直接子span，会被选中</span>
  <div>
    <span>我是孙子辈span，不会被`>`选中</span>
  </div>
</button>

用上面两种写法，都只会选中第一个span。

最后再提醒一下：jQuery 3.x对选择器的标准性要求更严格了，一些非标准的写法会被直接报错，但>是标准CSS选择器，完全没问题。如果还是选不到，先检查你的DOM结构是不是符合预期，或者用console.log($('button[tooltip]'))先确认父元素能被选中，再排查子元素的问题。

内容的提问来源于stack exchange，提问作者Farukh