這個JQuery代碼如何被翻譯？

Question

我想知道這段代碼是如何翻譯的。我不確定它做了什麼。

$("div") 
    .first() 
    .parent() 
    .find(".projects") 
    .css("color","red") 
    .fadeOut(200); 

Answer 1

$("div") 
    .first() 
    .parent() 
    .find(".projects") 
    .css("color","red") 
    .fadeOut(200); 

此代碼使用鏈接。

1. 它發現內DOM所有的div
2. 所有的div，它正在使用first
3. 然後得到的父的第一個div DIV使用parent
4. 然後讓所有的.projects元素使用find
5. 然後使用'css'更改這些元素的CSS
6. 然後慢慢隱藏這些元素（200 ms）使用fadeout

它是利用鏈接在這裏，這意味着它不會做一遍又一遍的DOM搜索，一旦搜索，然後嘗試應用在它的所有方法。

鏈接意味着每個函數都會返回一個包含所有搜索或篩選結果的jQuery實例，以便您可以在該jQuery實例上調用另一個函數。

鏈接是一個很好的方法，但它確實需要大量的時間和減慢應用......這從SO參考可幫助this

希望它可以幫助

Answer 2

這被稱爲jQuery中的鏈接。

該代碼的行爲如下。

$("div") // select `div` elements from dom 
    .first() // select the first `div` element from the list returned by previous call 
    .parent() // it will select its first level parent 
    .find(".projects") // find any inner element which has class `.project` 
    .css("color","red") // css will applied to the selected element 
    .fadeOut(200); // then it will fade out. 

jquery在那裏庫中實現鏈接，這樣一個函數將在另一個函數上工作。

如果您想要在自己的庫中應用鏈接，則需要返回this，以便其他函數能夠理解您要返回的內容。

Answer 3

.first() 

要找到第一元件。 Exampe

.parent() 

用於選擇父項。 Example

.find() 

用於查找元素。 Example

.css() 

用於添加css。 Example

.fadeOut() 

用於看不見的元素。Example

Answer 4

這可以通過你徹底研究...

$("div") // select div elements 
    .first() // get the first div element from all of the div elements from previous call 
    .parent() // get the parent element of the first div 
    .find(".projects") // find the element with the class name "projects" within the div element 
    .css("color","red") // change the color of that element to red 
    .fadeOut(200); // hide that element by fading it to transparent with a duration of 200 

---

文檔（這是我強烈建議你看一下）：

.first() .parent() .find() .css() .fadeOut()

---

希望這會有所幫助。