この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要素がすべてのdivの
2. 、それは次に、すべて.projectsの要素を取得parent
3. を使用してDIV first
4. が続いているの親を取得使用して、最初のdivを取っている見つけますその親の内部でfind
5. を使用してこれらの要素のCSSを変更します。
6. これらの要素をゆっくりと非表示にします（200 ms）、それは検索し、その上にすべてのメソッドを適用しようとしたら、それが何度も何度もDOM検索を行いませんを意味し、ここでは、連鎖使用しているfadeout

を使用。

連鎖は、各関数がすべての検索またはフィルタリング...結果を含む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は、1つの関数が別の関数で機能するように、そのライブラリにチェーンを実装しました。

自分のライブラリにチェーンを適用する場合は、thisを返す必要があります。これにより、別の関数が返すものを理解できるようになります。

Answer 3

.first() 

を役に立てば幸い役立つかもしれないから...この参照チェーンは非常に良いアプローチですが、それは多くの時間がかかりますし、アプリケーションが遅くなります素子。 Exampe

.parent() 

親を選択するために使用します。 Example

.find() 

要素の検索に使用します。 cssを追加するために使用Example

.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()

---

これが役に立ちます。