如何从已有jQuery对象出发执行jQuery元素选择操作

jQuery 原生支持在已选中元素的范围内查找内部元素，无需将jQuery对象转换为原生DOM节点调用原生方法，共有两种标准实现写法：

• 使用 .find() 方法：这是最常用的范围查找方法，会在当前jQuery对象匹配元素的后代节点中，筛选符合传入选择器规则的元素，返回值为包装好的jQuery对象，可直接链式调用其他jQuery方法。
  注意：和原生querySelector()只返回第一个匹配元素不同，.find()默认返回所有匹配的后代元素集合，如果只需要获取第一个匹配项，可以在结果后链式调用.first()方法。
  示例代码：

  // 先获取外层元素的jQuery对象
  let $element = $('[css selector]');
  // 在该元素内部查找匹配选择器的后代元素（所有匹配项）
  let $innerElements = $element.find('[other css selector]');
  // 仅获取第一个匹配项，对应原生querySelector的返回逻辑
  let $firstInnerElement = $element.find('[other css selector]').first();
  

• 给$()选择器函数传入上下文参数：你之前预想的第二种写法参数顺序写反了，jQuery选择器函数的第二个参数为查找上下文，传入已获取的jQuery对象或原生DOM元素作为上下文时，就只会在该上下文的子树范围内查找匹配选择器的元素，效果和.find()完全一致。
  示例代码：

  let $element = $('[css selector]');
  // 指定在$element范围内查找目标元素
  let $innerElements = $('[other css selector]', $element);
  

注意：你预想的element.select()写法并不存在，jQuery没有提供名为select的元素查找方法，不要和原生DOM的相关API混淆。

你之前用到的element[0].querySelector('[other css selector]')写法，拿到的是原生DOM节点，无法直接调用jQuery提供的事件绑定、样式修改等方法，而上述两种标准jQuery写法返回的都是jQuery对象，不需要额外包装即可直接使用jQuery的所有能力。
如果仅需要查找当前元素的直接子元素（不递归遍历所有后代节点），可以使用.children()方法，传入选择器参数即可完成匹配。

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