ความแตกต่างระหว่าง. leather () ของ jQuery และการตั้งค่า CSS เป็น display: none

ฉันควรทำยังไงดี? .hide()เร็วกว่าการเขียนออกมา.css("display", "none")แต่อะไรคือความแตกต่างและสิ่งที่ทั้งคู่ทำกับองค์ประกอบ HTML คืออะไร

จากหน้า jQuery เกี่ยวกับ. leather () :

"องค์ประกอบที่ตรงกันจะถูกซ่อนทันทีโดยไม่มีภาพเคลื่อนไหวซึ่งเทียบเท่ากับการเรียก. css ('display', 'none') ยกเว้นว่าค่าของคุณสมบัติการแสดงผลจะถูกบันทึกในแคชข้อมูลของ jQuery จะถูกเรียกคืนเป็นค่าเริ่มต้นหากองค์ประกอบมีค่าการแสดงผลแบบอินไลน์จะถูกซ่อนและแสดงผลองค์ประกอบนั้นจะถูกแสดงอีกครั้งแบบอินไลน์ "

ดังนั้นหากเป็นเรื่องสำคัญที่คุณจะสามารถเปลี่ยนกลับไปเป็นค่าก่อนหน้านี้displayได้คุณควรใช้hide()เพราะวิธีนี้จะจดจำสถานะก่อนหน้าได้ นอกเหนือจากนั้นไม่มีความแตกต่าง

$(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>

.hide()เก็บคุณสมบัติก่อนหน้า displayก่อนตั้งค่าnoneดังนั้นหากไม่ใช่displayคุณสมบัติมาตรฐานสำหรับองค์ประกอบที่คุณปลอดภัยกว่านี้สักหน่อย.show()จะใช้คุณสมบัติที่เก็บไว้เป็นสิ่งที่ควรกลับไป ดังนั้น ... มันไม่ทำงานบางอย่างที่พิเศษ แต่ถ้าคุณกำลังทำตันขององค์ประกอบที่แตกต่างความเร็วควรจะมีเพียงเล็กน้อย

ดูรหัส jQuery นี่คือสิ่งที่เกิดขึ้น:

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;
    }
},

พวกเขาเป็นสิ่งเดียวกัน .hide()เรียกใช้ฟังก์ชัน jQuery และให้คุณเพิ่มฟังก์ชันเรียกกลับได้ ดังนั้นด้วย.hide()คุณสามารถเพิ่มภาพเคลื่อนไหวเช่น

.css("display","none")display:noneเปลี่ยนแปลงแอตทริบิวต์ขององค์ประกอบไป มันเหมือนกับว่าคุณทำสิ่งต่อไปนี้ใน JavaScript:

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

.hide()ฟังก์ชั่นอย่างเห็นได้ชัดต้องใช้เวลามากขึ้นในการทำงานได้ในการตรวจสอบสำหรับฟังก์ชั่นการโทรกลับ, ความเร็ว, ฯลฯ ...

หากต้องการใช้ทั้งคู่เป็นคำตอบที่ดี มันไม่ใช่คำถามอย่างใดอย่างหนึ่งหรือ

ประโยชน์ของการใช้ทั้งสองเป็นที่CSS จะซ่อนองค์ประกอบทันทีเมื่อโหลดหน้าเว็บ jQuery. leather จะกะพริบองค์ประกอบสำหรับหนึ่งในสี่ของวินาทีจากนั้นซ่อนมัน

ในกรณีที่เราต้องการให้องค์ประกอบไม่แสดงเมื่อหน้าโหลดเราสามารถใช้ CSS และตั้งค่าการแสดงผล: ไม่มี & ใช้ jQuery .hide () หากเราวางแผนที่จะสลับองค์ประกอบเราสามารถใช้สลับ jQuery

ทั้งสองทำสิ่งเดียวกันบนเบราว์เซอร์ทั้งหมด AFAIK ตรวจสอบใน Chrome และ Firefox ทั้งสองผนวกdisplay:noneเข้ากับstyleแอตทริบิวต์ขององค์ประกอบ

ดูว่าไม่มีความแตกต่างถ้าคุณใช้วิธีซ่อนพื้นฐาน แต่ jquery มีวิธีการซ่อนที่หลากหลายซึ่งให้ผลกระทบกับองค์ประกอบ อ้างอิงลิงค์ด้านล่างสำหรับคำอธิบายโดยละเอียด: เอฟเฟกต์สำหรับซ่อนใน Jquery