Học jquery cơ bản nâng cao p6 làm việc với Selections

Làm việc với Selections
Như bài trước chúng ta đã tìm hiểu các selections trong jquery nếu bạn chưa biết về jquery selector hãy đọc lại bài trước để có thể tiếp tục theo dõi bài này nhé : Học jquery từ cơ bản đến nâng cao p5 Selecting Elements

Getters Setters
Một phương thức dùng để set một giá trị nó có tên thường giống với phương thức dùng để get (đọc). Khi một phương thực dùng để set giá trị nó được gọi là setter. Khi một phương thức get (read) giá trị nó được gọi là getter. Setters sẽ áp dụng lên tất cả các thành phần được chọn. Getters sẽ chỉ lấy duy nhất giá trị của thành phần chọn thôi.

// .html() method sử dụng như là một setter:
$( "h1" ).html( "hello world" );

// .html() method sử dụng như là một getter:
$( "h1" ).html();
Setters trả về một đối tượng jquery ( jquery object), cho phép bạn tiếp tục gọi thêm các phương thức khác tiếp theo. Getters trả về bất cứ cái gì chúng ta get, vì vậy bạn không thể gọi các phương thức tiếp theo sau giá trị trả về từ getter.

$( “h1″ ).html().addClass( “test” );

Chuỗi method (chaining)
Xem ví dụ dưới đây bạn sẽ hiểu về nó thực ra việc sử dụng cái này rất tiện một cái rất hay của đa số các ngôn ngữ lập trình giống như objective c thì sử dụng được gọi là block trong objective c.

$( “#content” ).find( “h3″ ).eq( 2 ).html( “new text for the third h3!” );

Nếu bạn gọi một method mà method (phương thức) trả về một object jquery (đối tượng jquery) thì bạn có thể gọi tiếp các method tiếp tục vào ngay sau nó không dừng tạo thành một chuỗi như ví dụ trên kĩ thuật này được gọi là “chaining”.

$( “#content” ).find( “h3″ ).eq( 2 ).html( “new text for the third h3!” );

Bạn có thể viết code dễ đọc hơn như sau:

$( "#content" )
.find( "h3" )
.eq( 2 )
.html( "new text for the third h3!" );
jQuery cung cấp method .end() một menthod cho phép bạn thực hiện trong chuỗi để trở về selection ban đầu sau đó để áp dụng các menthod khác xem ví dụ dưới đây để hiểu rõ hơn về nó:

$( "#content" )
.find( "h3" )
.eq( 2 )
.html( "new text for the third h3!" )
.end() // Restores the selection to all h3s in #content
.eq( 0 )
.html( "new text for the first h3!" );

Kĩ thuật chaining jquery là rất mạnh và sử dụng thường xuyên trong viết code jquery bạn sẽ không thấy làm lạ khi gặp nó trong một thư viện nào đó của javascript hay các plugin của jquery. Hãy đọc nó thật kĩ và tìm hiểu nó sẽ giúp ích rất nhiều cho bạn trong việc học jquery.

Xin chân thành cảm ơn bạn đã đọc!

Nếu thấy hay hãy chia sẻ giúp mình đến các bạn khác.
- Nguồn: vnfit.com/hoc-jquery-co-ban-nang-cao-p6-lam-viec-voi-selections/