JS (6) 썸네일형 리스트형 jQuery 베이직(셀렉터, 메소드) 셀렉터 영원히 안녕 document.getElementBy어쩌구('') $('#아이디이름') $('.클래스이름') 메소드(함수) 쌩자바스크립트랑 약간 다름 많으니까 외우지 말고 구글링 $('#아이디이름').text('바보'); $('#아이디이름').html('태그 포함해서 모든 내용 변경'); $('#아이디이름').css('color', 'blue'); jQuery 설치 CDN (content delivery network) 구글에 jQuery CDN 검색 후 버전 골라서 -> HTML 파일에 스크립트 태그 복붙해주기 다운 받기 CDN 스크립트 태그 내의 src 주소로 접속 -> js 파일 하나가 열리는데, 우클릭 해서 작업 폴더에 저장한 다음 addEventListener HTML에 자바스크립트를 넣는 onclick은 옛날 방식임 document.getElementId('아이디이름').addEventListener('click', function(){ 코드; }); 여러 이벤트들 있음 click mouseover scroll (요소에 스크롤 바가 있어야 함) keydown (input 같은 거여야 함) function(함수) 긴 코드를 한 단어로 축약 function 한단어(){ 긴 코드; } 불러올 때는 한단어(); 파라미터, 변수 function 창열기(파라미터){ document.getElementById('아이디이름').style.display = 파라미터; } 창열기('none'); 창열기('block'); 두 개 이상 사용 가능 소괄호 내에 콤마로 구분해주기 function 더하기(변수, 변수2){ 변수 + 변수2; } 더하기(3, 4); onclick UI (onclick) -미리 만들어 놓고 -display: none이나 visibility: hidden으로 숨기기 -버튼 눌렀을 때 보이게 onclick 모든 HTML 태그 내 속성에 onclick 추가할 수 있음 : 누르게 되면, onclick 내부의 자바스크립트를 실행함 눌러라 document.getElementById('아이디').style.display = 'block' 자바스크립트를 이용해 HTML을 조작, 변경(셀렉터, 메소드) 내부 글자 바꾸기 document.getElementById('아이디이름').innerHTML = '바꿀내용'; 내부 글자의 색상 바꾸기 document.getElementById('아이디이름').style.color = 'blue'; 셀렉터 HTML 요소를 찾기 위해 사용 getElementById() 메소드 HTML 요소의 어떤 속성을 변경할지 결정하기 위해 사용 innerHTML style.color (이외에 굉장히 많음. 외우지 말고 검색하기) 이전 1 다음