Sự khác biệt giữa jQuery .hide () và .css (“display”, “none”)

Có sự khác biệt nào giữa

jQuery('#id').show() and jQuery('#id').css("display","block")

và

jQuery('#id').hide() and jQuery('#id').css("display","none")

jQuery ('# id'). css ("display", "block")

Các displaybất động sản có thể có nhiều giá trị có thể, trong đó có block, inline, inline-block, và nhiều hơn nữa .

Các .show()phương pháp không thiết lập nó nhất thiết phải đến block, mà đúng hơn là reset nó với những gì bạn định nghĩa nó (nếu có).

Trong mã nguồn jQuery, bạn có thể thấy cách họ đặt thuộc displaytính thành "" (một chuỗi trống) để kiểm tra xem nó là gì trước bất kỳ thao tác jQuery: liên kết nhỏ nào .

Mặt khác, ẩn được thực hiện thông qua display: none;, vì vậy bạn có thể xem xét .hide()và .css("display", "none")tương đương với một số điểm.

Bạn nên sử dụng .show()và .hide()dù thế nào đi nữa để tránh bất kỳ gotcha nào (thêm vào đó, chúng ngắn hơn).

Sự khác biệt giữa show () và css ({'display': 'block'})

Giả sử bạn có điều này ngay từ đầu:

<span id="thisElement" style="display: none;">Foo</span>

khi bạn gọi:

$('#thisElement').show();

bạn sẽ nhận được:

<span id="thisElement" style="">Foo</span>

trong khi:

$('#thisElement').css({'display':'block'});

làm:

<span id="thisElement" style="display: block;">Foo</span>

vì vậy, có một sự khác biệt.

Sự khác biệt giữa hide () và css ({'display': 'none'})

tương tự như trên nhưng thay đổi chúng thành hide () và hiển thị ':' none '......

Một điểm khác biệt khác Khi .hide()được gọi là giá trị của thuộc tính hiển thị được lưu trong bộ đệm dữ liệu của jQuery, vì vậy khi .show()được gọi, giá trị hiển thị ban đầu được khôi phục!

Có có sự khác biệt trong việc thực hiện của cả hai: jQuery('#id').show()là chậm hơn so với jQuery('#id').css("display","block")như trong trường hợp cựu việc làm thêm là để được thực hiện để lấy tình trạng ban đầu từ bộ nhớ cache jquery như hiển thị được không phải là một thuộc tính nhị phân nó có thể được inline, block, none, tablevv tương tự là trường hợp với hide()phương pháp.

Xem: http://jsperf.com/show-vs-addclass

không khác nhau

Không có tham số, phương thức .hide () là cách đơn giản nhất để ẩn một phần tử:

$ ('. target'). hide (); Các phần tử phù hợp sẽ bị ẩn ngay lập tức, không có hoạt ảnh. Điều này gần tương đương với việc gọi .css ('display', 'none'), ngoại trừ việc giá trị của thuộc tính hiển thị được lưu trong bộ đệm dữ liệu của jQuery để hiển thị sau này có thể được khôi phục về giá trị ban đầu. Nếu một phần tử có giá trị hiển thị là nội tuyến, sau đó bị ẩn và hiển thị, nó sẽ một lần nữa được hiển thị nội tuyến.

Tương tự về chương trình

Có một sự khác biệt.

jQuery('#id').css("display","block") sẽ luôn đặt phần tử bạn muốn hiển thị dưới dạng khối.

jQuery('#id').show() will et là kiểu hiển thị ban đầu của nó là gì, chẳng hạn như display: inline.

Xem Jquery Doc

Bạn có thể xem mã nguồn (đây là v1.7.2).

Ngoại trừ các hình ảnh động mà chúng ta có thể thiết lập, điều này cũng giữ trong bộ nhớ phong cách hiển thị cũ (mà không phải là trong mọi trường hợp block, nó cũng có thể inline, table-cell...).

xem http://api.jquery.com/show/

Không có tham số, phương thức .show () là cách đơn giản nhất để hiển thị một phần tử:

$ ('. target'). show ();

Các yếu tố phù hợp sẽ được hiển thị ngay lập tức, không có hoạt ảnh. Điều này gần tương đương với việc gọi .css ('display', 'block'), ngoại trừ việc thuộc tính hiển thị được khôi phục về bất kỳ thứ gì ban đầu. Nếu một phần tử có giá trị hiển thị là nội tuyến, sau đó bị ẩn và hiển thị, nó sẽ một lần nữa được hiển thị nội tuyến.