jQuery vs js
3개의 요소를 한 번에 바꾸는 경우 -- jquery는 한번에 가능
3개의 요소에 이벤트리스너 적용하는 경우 JS 불가능 Jqeury 가능 + 세분화( 추가 셀렉터 ) 가능
<body>
<p id = 'target'> this123 </p>
<p id = 'target'> this123 </p>
<p id = 'target'> this123 </p>
<script>
//vanila
arr = document.getElementsById('target')
for (var i=0; i<arr.length; i++){
arr[i] = "this321"}
//jquery
$(#target).html('this321')
</script>
<body>
<button class="btn">button</button>
<button class="btn"><h4>123</h4>button</button>
<button class="btn">button</button>
<script>
//vanila -- impossible!!!
arr = document.getElementsByClassName('btn')
for (var i=0; i<arr.length; i++){
arr[i].addEventLister('click',function(){})
}
//jquery
$(.btn).on('click',function (){})
// additional selector
$(.btn).on('click','h4',function (){})
</script>
모달
fadeIn()/ fadeOut()
slideDown() slideUP()
~toggle() slideToggle(), fadeToggle() .toggle()-- 폈다 껏따
$(".nav-sub-button").on("click", function () {
$(".nav-sub").slideToggle();
});
.val() input 값 가져오기
$('form').on('submit', function(e){})
폼이 전송될때 이벤트 실행 + 에러/false 발생하면 전송 방지
> $('form').on('submit', function(e){
e.preventDefault();
})
('form').on('input', function(e){})
값이 바뀌었을 때
.jpeg)
기록을 통해 한 걸음씩 성장ing!