jQuery의 .hide()와 표시할 CSS 설정의 차이: 없음

jQuery의 .hide()와 표시할 CSS 설정의 차이: 없음

저는 어느 쪽이 더 나을까요..hide()쓰는 것보다 빠릅니다..css("display", "none"), 하지만 HTML 요소에 실제로 어떤 차이가 있으며 둘 다 무엇을 하고 있을까요?

.hide()에 대한 jQuery 페이지에서:

"매칭된 요소들은 애니메이션 없이 바로 숨겨질 것입니다.이는 디스플레이 속성의 값이 jQuery의 데이터 캐시에 저장되어 나중에 디스플레이를 초기 값으로 복원할 수 있다는 점을 제외하고는 .css('display', 'none')를 호출하는 것과 거의 같습니다.요소의 표시 값이 inline이면 숨어서 표시됩니다."

따라서 이전 가치로 되돌릴 수 있는 것이 중요한 경우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좀 더 안전한 요소의 속성은 저장된 속성을 다시 사용할 수 있습니다.그래서... 추가적인 작업이 필요합니다. 하지만 수많은 요소를 사용하지 않는 한 속도 차이는 무시할 수 있을 겁니다.

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. 이것은 자바스크립트에서 다음을 하는 것과 같습니다.

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

그.hide()기능은 콜백 기능, 속도 등을 확인하기 때문에 실행에 더 많은 시간이 소요됩니다.

둘 다 사용하는 것은 좋은 답입니다. 둘 중 하나의 문제가 아닙니다.

두 가지를 모두 사용하는 장점은 페이지가 로드되면 CSS가 요소를 즉시 숨긴다는 것입니다.jQuery.hide는 요소를 0.5초간 플래시한 다음 숨깁니다.

페이지가 로드될 때 요소가 표시되지 않도록 하려면 CSS를 사용하고 display:none & set display:jQuery .hide()를 사용하면 됩니다.요소를 토글할 계획이라면 jQuery 토글을 사용할 수 있습니다.

둘 다 모든 브라우저, AFAIK에서 동일하게 작동합니다.Chrome과 Firefox에서 확인, 둘 다 부록display:none에게style요소의 속성입니다.

기본 숨김 방법을 사용해도 차이가 없다는 것을 확인합니다.하지만 jquery는 요소에 효과를 주는 다양한 숨김 방법을 제공합니다.자세한 설명은 아래 링크 참조: Jquery에서 숨김 효과

언급URL : https://stackoverflow.com/questions/4396983/difference-between-jquery-s-hide-and-setting-css-to-display-none