不同類型的jQuery選擇器

$（「＃foo .bar」）和$（「＃foo」）。find（「.bar」）有什麼區別？不同類型的jQuery選擇器

$('#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>

在片段中，我試圖勾勒出了我認爲的不同，但似乎到現在還不知道是怎麼回事......

來源

2014-10-16 user3007294

到底綠色標籤的變化？沒有。都使用類欄搜索具有foo ID的元素的後代。 – j08691 2014-10-16 19:45:26

好的，謝謝。所以性能/瀏覽器版本不會受到任何用途的影響？ – user3007294 2014-10-16 19:46:47

沒有性能差異，真的。您還應該考慮閱讀[事件授權]（http://learn.jquery.com/events/event-delegation/）。 – taveras 2014-10-16 19:47:35

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

意味着父#foo是點擊目標元素

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

...如果你敢的話，請點擊父母#foo_two！ http://jsfiddle.net/0qcssuue/2/

^{（.bar_two現在已經綁定了click事件。#foo_two剛剛幫助jQuery的和JS解析器發現它是孩子.bar_two元）}

最後，函數內部的$(this)指的是有針對性的選擇。
在它的#foo第一種情況下，
第二它的#foo_two .bar_two（在#foo_two的孩子.bar_two）

在你的情況，你可以沒有注意到其中的差別引起家長被包裹因此關閉子元素每次點擊似乎都是針對同一個選擇器。向父級添加一些填充（如在我的演示中）使得區別更清晰。

來源

2014-10-16 19:47:27

ahhh完美！現在有道理。謝謝羅科！（說我還有9分鐘才能接受...） – user3007294 2014-10-16 19:49:22

@ user3007294;）np，不客氣！ – 2014-10-16 19:49:43

不同之處在於您將哪個對象附加到點擊事件的偵聽器。對於情況：

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

您正在收聽連接到 #foo對象。

對於情況：

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

您正在收聽連接到 #foo_two .bar_two對象

我調整自己的小提琴以示區別。當您單擊德DIV元素，但橙色標籤更改當您單擊p元素

http://jsfiddle.net/0qcssuue/3/

來源

2014-10-16 19:57:53 Cosmitar

不同類型的jQuery選擇器

回答

相關問題