javascript - 不同类型的 jQuery 选择器

Question

$(“#foo .bar”) 和 $(“#foo”).find(“.bar”) 有什么区别？

$('#foo').on('click', function(){
  $(this).find('.bar').css('background-color', 'yellow');
})

$('#foo_two .bar_two').on('click', function(){
  $(this).css('background-color', 'red');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "foo">
    <p class= 'bar' style='background: green'> Hello there</p>
</div>

<div id = 'foo_two'>
    <p class = 'bar_two' style='background: orange'> Hello there</p>
</div>

在片段中，我试图概述我认为的差异，但现在似乎不知道发生了什么......

Answer 1

$('#foo').on('click', function(){

表示父级#foo是点击目标元素

$('#foo_two .bar_two').on('click', function(){

...如果你敢的话，请点击父级#foo_two! http://jsfiddle.net/0qcssuue/2/

^{(.bar_two 现在绑定(bind)了 click 事件。#foo_two 只是帮助 jQuery 和 JS 解析器找到它的子 .bar_two 元素)}

总而言之，函数内的 $(this) 引用了目标选择器。
第一种情况是 #foo,
第二个是 #foo_two .bar_two (#foo_two 的子级 .bar_two)

在您的情况下，您可能没有注意到差异，因为父元素将子元素包裹得太近，以至于每次点击似乎都针对相同的选择器。向父级添加一些填充(就像在我的演示中一样)可以使差异更加明显。