jQuery의 .hide ()와 표시하도록 CSS 설정의 차이점 : 없음

어느 쪽이 더 나을까? .hide()작성하는 것보다 빠르지 만 .css("display", "none")차이점은 무엇이며 둘 다 실제로 HTML 요소에 대해 무엇을합니까?

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

"일치하는 요소는 애니메이션없이 즉시 숨겨집니다. 이는 display 속성 값이 jQuery의 데이터 캐시에 저장되어 나중에 표시 할 수 있다는 점을 제외하고는 .css ( 'display', 'none') 호출과 거의 같습니다. 요소에 표시 값이 인라인 인 경우 숨겨져 표시되면 다시 한 번 인라인으로 표시됩니다. "

따라서의 이전 값으로 되돌릴 수있는 것이 중요한 경우 이전 상태를 기억하는 방식으로 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 .hide는 1/4 초 동안 요소를 플래시 한 다음 숨 깁니다.

페이지가로드 될 때 요소를 표시하지 않으려는 경우 CSS를 사용하고 display : none을 설정하고 jQuery .hide ()를 사용할 수 있습니다. 요소를 토글 할 계획이라면 jQuery 토글을 사용할 수 있습니다.

두 브라우저 모두 AFAIK에서 모든 브라우저에서 동일하게 작동합니다. Chrome 및 Firefox에서 확인되었으며 둘 다 요소 display:none의 style속성에 추가 됩니다 .

기본 숨기기 방법을 사용하면 차이가 없습니다. 그러나 jquery는 요소에 영향을주는 다양한 숨기기 방법을 제공합니다. 자세한 설명은 아래 링크를 참조하십시오 .Jquery에서 숨기기 효과