jquery newbie: cách thực hiện nhiều hành động trên cùng một phần tử DOM hiệu quả?

Question

thời gian gần đây tôi đã học (ở đây trên stackoverflow:)) mà khi sử dụng jquery mỗi khi tôi viết

$("...") 

tìm kiếm DOM được thực hiện để xác định vị trí các yếu tố phù hợp. Câu hỏi của tôi rất đơn giản: làm thế nào để tôi thực hiện hiệu quả một loạt các hành động (sử dụng các phương thức tốt đẹp của các đối tượng jquery) trên một phần tử DOM mà tôi đã đặt với jquery? Hiện tại, tôi đang làm (ví dụ):

var previousHtml = $("#myDiv").html(); 
$("#myDiv").addClass("tangoClass"); 
$("#myDiv").html("bla bla bla"); 
//... 

Về cơ bản, tôi luôn đề cập đến phần tử bằng cách viết $ ("# myDiv"). Làm thế nào tôi có thể liên tục thao tác một phần tử DOM (sử dụng các hàm jquery, chứ không phải là vani Javascript) một cách hiệu quả? Điều sau có tránh các tìm kiếm DOM tốn kém không?

var myDiv = $("#myDiv"); 
var previousHtml = myDiv.html(); 
myDiv.addClass("tangoClass"); 
myDiv.html("bla bla bla"); 

Hoặc tôi nên thay vì cố gắng chaining các jquery gọi càng nhiều càng tốt, ví dụ:

var previousHtml = $("#myDiv").addClass("tangoClass").html(); //saves me 1 $("#myDiv") call 
$("#myDiv").html("bla bla bla"); 

Cảm ơn bạn cho bất kỳ cái nhìn sâu sắc. :)

lara

Answer 1

Chưa có ai liên kết với jQuery Performance Rules, vì vậy tôi sẽ thuyết phục vì đây là một bài viết tuyệt vời và phải đọc cho các nhà phát triển jQuery mới!

Như bạn sẽ thấy nó xác nhận sự nghi ngờ của bạn: caching your jQuery objects bằng cách lưu trữ chúng trong các biến chỉ hiệu quả như chuỗi.

Answer 2

Có, tôi muốn giới thiệu để sử dụng chaining, bởi vì phương pháp jQuery thường trở lại các yếu tố bạn thay đổi, vì vậy nó không cần phải được nhìn lên trong DOM một lần nữa. Và tôi cũng thấy nó dễ đọc hơn (bạn biết những hoạt động nào thuộc về yếu tố nào).

Answer 3

Mỗi lần bạn sử dụng hàm jQuery, nó trả về đối tượng jQuery đầy đủ từ truy vấn ban đầu. Điều này cho phép bạn chuỗi hành động với nhau, vì vậy truy vấn thực tế chỉ xảy ra lần đầu tiên.

Từ ví dụ của bạn, có vẻ như bạn chưa bao giờ sử dụng trước đó, vì vậy bạn không cần phải lấy nó chút nào. Tôi nghĩ bạn chỉ có thể làm điều này:

$("#myDiv").html('bla bla bla').addClass('tangoClass'); 

Answer 4

cả hai đều giống nhau.

var myDiv = $("#myDiv"); // $("#myDiv") runs document.getElementById, 
         // wraps the DOMElement, returns the wrapper. 
myDiv.addClass("tangoClass"); // obviously reuses the object 
myDiv.html("bla bla bla"); // ditto 

chaining là giống hệt nhau vì phương pháp jQuery trở this, đối tượng mà họ đang gắn liền với:

myDiv 
    .addClass("tangoClass") 
    .html("bla bla bla") 
; 

bạn có thể kiểm tra điều này với (myDiv === myDiv.html("bla bla bla"))

để trả lời câu hỏi của bạn "mà Tôi nên sử dụng ": DRY (Không lặp lại chính mình) sẽ đề nghị chuỗi. chỉ cần không quên khả năng đọc (không gộp nhiều cuộc gọi phương thức thành một dòng; công thức của tôi để dễ đọc ở trên)

Answer 5

Tùy thuộc vào các hàm bạn đang gọi trên phần tử đó, vì không phải tất cả các hàm sẽ trả về DOM thành phần. Tuy nhiên, nếu tất cả các hàm bạn phải gọi sẽ luôn trả về phần tử DOM, thì chắc chắn nó sẽ làm cho mã của bạn dễ đọc hơn.

Answer 6

Chỉ vì không ai đề cập đến nó, sử dụng phương pháp đầu tiên của bạn cũng sẽ hoạt động và lưu tìm kiếm DOM.

Tuy nhiên, chuỗi, như những người khác đã nói, sẽ là cách "thích hợp" hơn khi sử dụng cùng một yếu tố và áp dụng các hành động khác nhau cho nó.

Chúc may mắn!

Answer 7

Tôi cũng đồng ý chaining đó là phương pháp tốt nhất để sử dụng, nhưng cái gì khác không ai có địa chỉ ở đây đang sử dụng .andSelf() (1) và .end() (2) trong khi chaining.

Sau đây thêm lớp "biên giới" vào cả hai div và p chứa bên trong.

$("div").find("p").andSelf().addClass("border"); 

Sử dụng .end() "reset" bộ chọn

$("div") 
    .find("p").addClass("myParagraph").end() 
    .find("span").addClass("mySpan"); 

---

Cập nhật: .andSelf() đã bị phản đối và về cơ bản được đổi tên thành .addBack(), sử dụng nó theo cách tương tự.