jQuery사용법
기존 Javascript에서 사용한 것을 jQuery로 바꾸면서 기르자.Javascript-> jQuery
const bnoVal = document.querySelector(“input[name=bno]”).value;-> const bnoVal = $(“input[name=bno]”). val();->$():jQuery적용시킨다는 뜻.()안의 내용으로 바뀐 반도 되고 객체도 되고 id도 되고…
document.getElementById(‘result’). innerText=currNum;->$(‘#result’). text(currNum);->text():id가 result인 곳에 currNum가 갖고 있는 text을 넣겠다는 의미.
document.getElementById(‘minus’). addEventListener(‘click’, function(){->$(‘#minus’). on(‘click’, function(){->on():이벤트 부여. 행사 방법은 종류가 많으나 on()에 통합하도록 권장한다.
modal.style.display=”none’;->modal.css(“display”,”none”);->css():css을 줄 수 있다.
document.querySelector(‘. li.first’). classList.add(‘fs-5’);->$(‘. li.first’). addClass(‘fs-5’);->adClass():class를 추가할 수 있다.
console.log(document.getElementById(‘ulID’). id);->console.log($(‘#ulID’). attr(“id”);->attr():attribute중 인자의 값을 독미입메루(인자 값 하나만)
let selIdx=selectTag.options.selectedIndex;let selValue=selectTag.options[selIdx]. value;->let selValue=selectTag.find(‘option:selected’). val();->인덱스를 찾아 그 인덱스 값을 찾은 위의 2곳을 1줄로 요약 가능
document.getElementById(‘ul2’). innerHTML=lis;->$(‘#ul2’). html(lis);->html():innerHTML역할
document.getElementById(‘ol’). innerHTML+=lis;->$(‘#ol’). append(lis);->지정된 파라미터 내 뒤에 추가
. prepend():지정된 파라미터 내 앞에 추가.before(): 지정한 파라미터 외의 앞에 추가. after(): 지정한 파라미터 외의 뒤에 추가. remove(a, b): 지정한 파라미터와 안의 내용까지 모두 삭제(a와 b에 적용시킴).empty() 지정한 파라미터 안의 내용만 삭제
높이관련 height() : content 높이inner Height() : padding까지 포함한 높이 outer Height() : border포함 높이 outer Height(true) : margin 포함 높이(width도 마찬가지)
부모 자식 관련 parent() : 내 어머니 parents() : 내 어머니를 포함 위 전부 parents Until(지정) : 내 어머니를 포함부터 지정까지 (js의 closest() children() : 내 바로 아래 아이 오브젝트만 find() : 내 아래 태그 중 특정 태그
형제관련 siblings() : 나를 중심으로 나의 옆의 태그들 next() : 나의 다음 태그 next All() : 나의 다음 모든 next Until (지정) : 나의 다음부터 지정까지 prev () : 나의 앞태그 prev All() : 나의 앞쪽의 모든것 prev Until (지정) : 나의 앞부터 지정 ) : 나의 앞부터 지정
필터링 $() .first() : $() 요소 중 첫 번째 $() .last() : $() 요소 중 마지막 $() .eq(숫자): $() 요소 중 숫자 번째 $() filter(지정): $() 요소 중 지정된 것만 $() Not(지정): $() 요소 중 지정되지 않은 것만 $() 요소 중 지정