728x90 반응형 JavaScript12 jQuery 선택자 //태그 선택자 // jQuery 선택자는 css선택자와 같다!$("h5").css("color", "red");$("p").css("color", "blue");// 자바스크립트로 했을 때 //document.getElementsByTagName("p").style.color = "green";// -> 배열에 스타일을 적용할 수 없다!const arr = document.getElementsByTagName("p");for(let item of arr){ item.style.color = "green";}//h5, p 두 태그 동시에 배경색을 yellow으로 지정하기$("h5,p").css("backgroundColor", "yellow");// 클래스 선택자// 클래스 item인 요소의 글자색.. 2024. 6. 22. 함수 DOCTYPE html>html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>14_함수title> style> /*code태그*/ code{ color:red; font-size: 20px; font-weight: bold; } #btn1{ width:50px; height: 50px; border:1px solid black; font-size:30px; font-weight: bold; .. 2024. 6. 21. 요소 추가 제거 //추가 버튼이 클릭 되었을 때document.getElementById("add").addEventListener("click",function(){ //div 요소 생성 const div = document.createElement("div"); //div에 row 클래스 추가 div.classList.add("row"); //------------------------------ //input 요소 생성 const input = document.createElement("input"); //input in 클래스 추가 input.classList.add("in"); //input에 "type" 속성, "number" 속성 값 추가(type.. 2024. 6. 20. DOM DOCTYPE html>html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>DOMtitle> style> .area{ width:400px; height: 400px; border: 1px solid black; } .area >div{ width:100%; height:10%; box-sizing:border-box; border:2px.. 2024. 6. 20. 객체 //객체 생성document.getElementById("btn1").addEventListener("click",function(){ const div1 = document.getElementById("div1"); // {} 객체 리터럴 표기법으로 객체 생성 // **(중요) ** // 자바스크립트 객체의 Key는 무조건 string // "key" 또는 'key' // 또는 key(따옴표가 없어도 string으로 인식) const brand = "할리스" const product = { "pName" : "케이크", 'brand' : "스타벅스", flavor : ["초코","딸기", "치즈"], pric.. 2024. 6. 19. window 내장객체 // window.setTimeout(함수,지연시간(ms))document.getElementById("btn1").addEventListener("click", function(){ setTimeout(function(){ alert("3초후 출력 확인!") }, 3000)})let interval; //setInterval을 저장하기 위한 전역 변수//window.setInterval(함수,지연시간(ms))function clockFn(){ const clock = document.getElementById("clock"); clock.innerHTML = currentTime(); // 현재 시간 화면에 출력 // 지연 시간 마다 반복(첫 반복도 지연시간 후에.. 2024. 6. 19. 이전 1 2 다음 728x90 반응형