코딩기록
자바스크립트 함수 및 정보 정리 - 1 본문
getElementByClassName
getElementByClassName(‘title1’)[x] = 찾은것 중 위에서 x번째 찾기
이벤트 리스너 = 감시자 역할(keydown, mouseover 등)
document.getElementById("close").addEventListener('click', function() {
document.getElementById("alert-box").style.display = "none";
});
function은 콜백함수(파라미터 자리에 들어가는 함수)
토글 함수: 클래스명을 붙였다 뗐다 해줌
document.getElementById("navButton").addEventListener("click", function() {
document.getElementsByClassName("list-group")[0].classList.toggle('show');
})
쿼리셀렉터
document.querySelector('.list-group') // . -> css 요소 맨 위에 것을 찾아줌
document.querySelector('#list-example') // # -> id 요소 맨 위에 것을 찾아줌
document.querySelectorAll('.list-group')[3] // 모든 css 요소 중 4번째 것을 찾아줌
JQuery
document.querySelector('#list-example').addEventListener
=> $(‘#list-example’).on
querySelectorAll 과 동일해서 일치하는 모든 내용 수정함
JQuery cdn 가서 minified 버전 붙여넣기
거의 모든 라이브러리는 <body> 끝나기 전에 넣는거 권장
<예시>
$('.hello').html('바보');
$('.hello').css('color', 'red');
$('.hello').addClass('show'); // removeClass(), toggleClass() 등
document.getElementById("test-btn").addEventListener()
->
$('#test-btn').on('click', function() {
$('.hello').fadeOut(); // slideUp 등 애니메이션 사용 가능
})
$('셀렉터')로 찾으면 JQuery 함수만 붙일 수 있음
부트스트랩 starter template 사용하면 편하게 양식 설정 가능
'프론트엔드 > JavaScript' 카테고리의 다른 글
| HTML 요소(Element) 선택하는 방법 (0) | 2024.01.29 |
|---|---|
| 내부 .js파일에서 외부 링크의 .js 라이브러리 불러오기 안됨 오류 해결 (0) | 2024.01.11 |
| 자바스크립트 함수 및 정보 정리 - 2 (1) | 2023.12.31 |
| 1. 자바스크립트 기본 문법 (1) | 2023.12.26 |
