코딩애플 자바스크립트 기초 정리

9/10 자스정리
$('#test').addClass('yellow-bg');

element.innerHTML = "<div style='color:red'>A</div>";
위와 같이 element.innerHTML 속성에 html코드를 입력하면,
html element가 element안에 포함되게 됩니다.
위 예제에서 'innerHTML()'을 클릭하면,
입력된 html태그가 해석되어 빨간색A 가 나타나는 것을 확인 할 수 있습니다.

자바스크립트는
document.getElementsByClassName('greeting')[0].innerHTML = '안녕';
document.getElementsByClassName('greeting')[1].innerHTML = '안녕';
document.getElementsByClassName('greeting')[2].innerHTML = '안녕';
제이쿼리는
$('.greeting').html('안녕');
$('.greeting').eq(0).html('안녕');

버튼경우
자바스크립트
document.getElementsByClassName('btn')[0].addEventListener( 띄어주셈~)';
document.getElementsByClassName('btn')[1].addEventListener( 띄어주셈~)';
document.getElementsByClassName('btn')[2].addEventListener( 띄어주셈~)';

제이쿼리
$('.btn').on('click', function() {
   띄어주셈~~
})
btn클래서안에 h4속성을 클릭했을 때 적용하려면
$('.btn').on('click', 'h4', function() {
   띄어주셈~~
})

버튼눌렀을때 요소사라지게 하는거 자바스크립트 vs 제이쿼리

자바스크립트에서는
document.getElementsByClassName('btn')[0].addEventListener( 'click', function(){
documnet.getElementsByClassName('greeting')[0].style.display = 'none'
});

자바스크립트에서는
$('.btn').on('click', function() {
 $('.greeting').hide();
});

제이쿼리 slideup() 함수도 있다.

fadein() , fadeout(), slidedown()