Lợi ích của việc sử dụng attr() trên addClass trong jquery

Question

Lợi ích của việc sử dụng attr() thay vì sử dụng addClass() trong jquery là gì?

Answer 1

Khi bạn sử dụng phương pháp attr để đặt lớp của bất kỳ phần tử nào, nó sẽ ghi đè lên tên lớp hiện có với bất kỳ giá trị nào bạn vượt qua làm đối số thứ hai theo phương thức attr.

Nếu bạn sử dụng phương thức addClass để thêm bất kỳ lớp nào vào phần tử, nó sẽ chỉ thêm lớp và cũng giữ lại các lớp hiện có. Nếu lớp thêm vào đã tồn tại thì nó sẽ bỏ qua nó.

Ví dụ:

<div id="div1" class="oldClass"></div> 

Sử dụng $('#div1').attr('class', 'newClass') sẽ cho

<div id="div1" class="newClass"></div> 

Trong trường hợp như sử dụng $('#div1').addClass('newClass') sẽ cho

<div id="div1" class="oldClass newClass"></div> 

Vì vậy, nó luôn luôn là adviseable sử dụng addClass/removeClass để manupulate lớp của các yếu tố html sử dụng jQuery. Nhưng cuối cùng nó phụ thuộc vào yêu cầu của bạn những gì để sử dụng khi nào.

Answer 2

attr (a, b) đặt thuộc tính "a" của phần tử thành "b".

addClass (a) thêm "a" lớp một yếu tố

ví dụ ...

Html

<div id="box" class="myClass"></div> 

Script

$("#box").attr("class", "myOtherClass"); 

quả

<div id="box" class="myOtherClass"></div> 

Và ...

Html

<div id="box" class="myClass"></div> 

Script

$("#box").addClass("myOtherClass"); 

Re Liên kết sult

<div id="box" class="myClass myOtherClass"></div> 

jQuery:

http://api.jquery.com/attr/

http://api.jquery.com/addClass/

Answer 3

.addClass() là MUCH tốt hơn cho hiệu suất.

Xem hướng dẫn này về hiệu suất jQuery: http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/

Một trong những bài viết yêu thích của tôi.

Answer 4

addClass() có nhiều lợi ích hơn thao tác lớp với attr('class'):

• Đó là ngữ nghĩa rõ ràng hơn.addClass và removeClass thao tác thuộc tính class của phần tử (hoặc thuộc tính className) và đó là về nó. Đó là một chút khó khăn hơn cho họ để làm cho mã nói dối với bạn. Nếu bạn nói $whatever.addClas("selected"), bạn sẽ gặp phải lỗi thời gian chạy, trong khi nếu bạn nói $whatever.attr('clas', 'selected'), nó sẽ không xuất hiện để làm bất cứ điều gì. Nó vẫn còn "làm việc" từ quan điểm của JS, mặc dù, bởi vì ai biết được? Bạn có thể muốn để đặt thuộc tính clas. Đó là loại điều xảy ra khi bạn cố gắng sử dụng một con dao quân đội Thụy Sĩ như một cái mở.

• Nó hoạt động với nhiều lớp. Nếu bạn sử dụng attr để thêm và xóa các lớp CSS và sẽ có nhiều hơn một lớp (thực tế là phổ biến), bạn phải thực hiện một số xử lý chuỗi để đảm bảo không làm phiền bất kỳ lớp nào được áp dụng khác hoặc có cùng một lớp lặp lại 50 lần. addClass và removeClass làm điều đó cho bạn.

• Dường như nó nhanh hơn rất nhiều.

tôi có thể không thực sự nghĩ về bất kỳ lợi ích của attr('class'...) qua addClass. Nói chung, attr là khi bạn không có một số cách tích hợp khác để thao tác thuộc tính. Trong trường hợp này, bạn nên sử dụng nó.

Answer 5

Lợi ích duy nhất của attr() Tôi biết nếu nó hoạt động với SVG, addClass() thì không.

Câu trả lời này có một số chi tiết https://stackoverflow.com/a/10257755/2393562