[javascript] Vanilla JavaScript와 jQuery를 언제 사용해야합니까?

• this.id (알다시피)
• this.value(대부분의 입력 유형. 내가 아는 문제 는 요소 에 속성이 설정되어 <select>있지 않거나 Safari에 라디오 입력 이없는 경우 IE 입니다.)value<option>
• this.className 전체 “클래스”속성을 가져 오거나 설정
• this.selectedIndex에 대해 <select>선택된 인덱스를 얻을 수 있습니다
• this.options에 대한 요소 <select>목록을 얻기 위해<option>
• this.text에 대해 <option>해당 텍스트 내용을 얻을 수 있습니다
• this.rows에 대한 요소 <table>의 컬렉션을 얻기 위해<tr>
• this.cells에 대해 <tr>세포를 얻는 데 (td & th)
• this.parentNode 직접적인 부모를 얻기 위해
• this.checked감사 @Tim Down 상태를 확인하려면checkbox
• this.selectedThanks @Tim Down 의 선택된 상태를 얻으려면option
• this.disabledThanks @Tim Down 의 비활성화 상태를 얻는 방법input
• this.readOnlyThanks @Tim Down 의 readOnly 상태를 얻으려면input
• this.href<a>요소에 대해href
• this.hostname<a>의 도메인을 얻기 위해 요소에 대해href
• this.pathname에 대해 <a>요소의 경로를 얻기 위해 그href
• this.search<a>쿼리 문자열을 얻기 위해 요소에 대해href
• this.src 유효한 요소에 대해 src

… 아이디어를 얻는 것 같아요.

성능이 중요한 경우가 있습니다. 루프에서 여러 번 반복해서 무언가를 수행하는 것처럼 jQuery를 버리고 싶을 수도 있습니다.

일반적으로 다음을 대체 할 수 있습니다.

$(el).attr('someName');

와:

위의 말은 잘못되었다. getAttribute대체는 아니지만 서버에서 전송 된 속성 값을 검색하면 해당 속성 setAttribute이 설정됩니다. 어떤 경우에는 필요합니다.

아래의 문장은 그것을 덮었습니다. 더 나은 치료를 위해이 답변 을 참조하십시오 .

el.getAttribute('someName');

… 속성에 직접 액세스하기 위해. 속성은 속성과 동일하지 않습니다 (때로는 서로 미러링하지만). 물론 setAttribute있습니다.

특정 유형의 모든 태그를 풀어야하는 페이지를받은 상황이 있다고 가정 해보십시오. jQuery를 사용하면 간단하고 쉽습니다.

$('span').unwrap();  // unwrap all span elements

그러나 많은 것이 있다면 약간의 원시 DOM API를 원할 수 있습니다.

var spans = document.getElementsByTagName('span');

while( spans[0] ) {
    var parent = spans[0].parentNode;
    while( spans[0].firstChild ) {
        parent.insertBefore( spans[0].firstChild, spans[0]);
    }
    parent.removeChild( spans[0] );
}

이 코드는 매우 짧으며 jQuery 버전보다 성능이 우수하며 개인 라이브러리에서 재사용 가능한 함수로 쉽게 만들 수 있습니다.

while때문에 외부에 무한 루프가있는 것처럼 보이지만 while(spans[0])“라이브 목록”을 처리하기 때문에를 수행 할 때 업데이트됩니다 parent.removeChild(span[0]);. 이것은 Array (또는 Array-like object) 대신 작업 할 때 그리워하는 아주 멋진 기능입니다.

답변

// poor
$(this).animate({'opacity':'0'}, function() { $(this).remove(); });

// excellent
var element = $(this);
element.animate({'opacity':'0'}, function() { element.remove(); });

// poor
$('.something').load('url');
$('.something').show();

// excellent
var something = $('#container').children('p.something');
something.load('url').show();