Sự khác biệt giữa jQuery của. DA () và cài đặt CSS để hiển thị: không có

153

Tôi nên làm gì tốt hơn? .hide()nhanh hơn viết ra .css("display", "none"), nhưng sự khác biệt và cả hai thực sự đang làm gì với phần tử HTML?

— beowow89
nguồn

208

Từ trang jQuery về. Leather () :

"Các phần tử phù hợp sẽ bị ẩn ngay lập tức, không có hình động. Điều này gần tương đương với việc gọi .css ('display', 'none'), ngoại trừ giá trị của thuộc tính hiển thị được lưu trong bộ đệm dữ liệu của jQuery để sau đó hiển thị 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ị, một lần nữa nó sẽ được hiển thị nội tuyến. "

Vì vậy, nếu điều quan trọng là bạn có thể trở lại giá trị trước đó display, bạn nên sử dụng tốt hơn hide()vì cách đó được ghi nhớ trạng thái trước đó. Ngoài ra, không có sự khác biệt.

Hiển thị đoạn mã

$(function() {
    $('.hide').click(function(){
        $('.toggle').hide();
        setDisplayValue();
    });
    $('.show').click(function(){
        $('.toggle').show();
        setDisplayValue();
    });
});

function setDisplayValue() {
    var display = $('.toggle')[0].style.display;
    $('.displayvalue').text(display);
}

div {
    display: table-cell;
    border: 1px solid;
    padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
    <button class="hide">Hide</button>
    <button class="show">Show</button>
</p>

<div class="toggle">Lorem Ipsum</div>

<p>
    The display value of the div is:
    <span class="displayvalue"></span>
</p>

Mở rộng đoạn trích

— Stephan Muller
nguồn

Vấn đề khi sử dụng. DA là sau khi tải lại trang web, phần tử ẩn vẫn tìm trong 2 giây

— TM

34

.hide()lưu trữ thuộc tính trước đó display ngay trước khi cài đặt nó none, vì vậy nếu đó không phải là thuộc tính tiêu chuẩn displaycho phần tử mà bạn an toàn hơn một chút, .show()sẽ sử dụng thuộc tính được lưu trữ đó làm những gì cần quay lại. Vì vậy, ... nó thực hiện một số công việc bổ sung, nhưng trừ khi bạn đang thực hiện hàng tấn các yếu tố, sự khác biệt về tốc độ sẽ không đáng kể.

— Nick Craver
nguồn

13

Nhìn vào mã jQuery, đây là những gì xảy ra:

hide: function( speed, easing, callback ) {
    if ( speed || speed === 0 ) {
        return this.animate( genFx("hide", 3), speed, easing, callback);

    } else {
        for ( var i = 0, j = this.length; i < j; i++ ) {
            var display = jQuery.css( this[i], "display" );

            if ( display !== "none" ) {
                jQuery.data( this[i], "olddisplay", display );
            }
        }

        // Set the display of the elements in a second loop
        // to avoid the constant reflow
        for ( i = 0; i < j; i++ ) {
            this[i].style.display = "none";
        }

        return this;
    }
},

— Spiny Norman
nguồn

12

Họ là những điều tương tự. .hide()gọi một hàm jQuery và cho phép bạn thêm một hàm gọi lại cho nó. Vì vậy, với .hide()bạn có thể thêm một hình ảnh động chẳng hạn.

.css("display","none") thay đổi thuộc tính của phần tử thành display:none . Nó giống như khi bạn làm như sau trong JavaScript:

document.getElementById('elementId').style.display = 'none';

Các .hide()chức năng rõ ràng phải mất nhiều thời gian để chạy vì nó kiểm tra cho các chức năng gọi lại, tốc độ, vv ...

— hạt giống
nguồn

4

Sử dụng cả hai là một câu trả lời tốt đẹp; nó không phải là một câu hỏi hoặc.

Các lợi thế của việc sử dụng cả hai là CSS sẽ ẩn phần tử ngay lập tức khi tải trang. JQuery. Leather sẽ flash phần tử trong một phần tư giây rồi ẩn nó.

Trong trường hợp khi chúng tôi muốn phần tử không được hiển thị khi tải trang, chúng tôi có thể sử dụng CSS và đặt hiển thị: none & sử dụng jQuery. Suede (). Nếu chúng tôi dự định chuyển đổi phần tử, chúng tôi có thể sử dụng chuyển đổi jQuery.

— Catto
nguồn

1

Cả hai đều làm như vậy trên tất cả các trình duyệt, AFAIK. Đã kiểm tra trên Chrome và Firefox, cả hai đều gắn display:nonevào stylethuộc tính của thành phần.

— Klemen Slavič
nguồn

-5

Xem không có sự khác biệt nếu bạn sử dụng phương pháp ẩn cơ bản. Nhưng jquery cung cấp phương thức ẩn khác nhau mang lại hiệu ứng cho phần tử. Tham khảo liên kết dưới đây để được giải thích chi tiết: Hiệu ứng cho Hide in Jquery

— pilesal nilesh
nguồn