본문 바로가기

분류 전체보기53

23.02.22(탐색 선택자, 요소조작함수, 이벤트(마우스,키보드)) 😀매개변수가 필요한 이유는 사용자의 움직임에 따른 정보를 받아서 함수에서 사용해야하기 때문에!! /* 제이쿼리 탐색 선택자 - 제이쿼리 탐색 선택자를 이용하면 직접 선택자를 이용해 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 정확히 선택할 수 있는 장점이 있음 탐색 선택자의 종류 * 위치 탐색 선택자 ==> 선택한 요소 중 위치를 기준으로 선택하는 선택자 * 속성 탐색 선택자 ==> 요소의 지정된 속성을 기준으로 선택하는 선택자 * 콘텐츠 탐색 선택자 ==> 요소 내에서 콘텐츠의 포함 여부를 따져서 선택하는 선택자 * 필터링 선택자 ==> 선택한 요소를 한 번 더 필터링하여 선택하는 선택자 */ /* 위치 탐색 선택자 1. 첫번째 요소 선택 : 전체 요소 중에서 첫번째 요소만 선택 형식) $("요소.. 2023. 2. 22.
23.02.21 (선택자) 😀구를 JQuery.com -> donwload -> Download the uncompressed, development jQuery 3.6.3 -> 오른쪽버튼 다른이름으로 저장 -> 이클립스에서 저장 -> javascrpt src로 연동 😀라이브러리(library)는 다른 프로그램들과 링크되기 위하여 존재하는, 하나 이상의 서브루틴(subroutine)이나 함수(function)들의 집합 파일 😀 /* 제이쿼리(JQuery)? - 제이쿼리는 웹 사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와 주는 오픈 소스 기반의 자바스크립트 라이브러리임. 제이쿼리의 특징 - 웹 사이트 상에서 요소를 쉽게 찾고 조작할 수 있음 - 거의 모든 웹 브라우저에 대응할 정도로 호환성이 좋음 - 애니메이션 등 다양한 기능.. 2023. 2. 21.
23.02.20 (노드찾기, 노드 중간 삽입, 노드복사, 노드이동) 😀자식(자손), 부모, 형제(이전,이후) 노드 찾기 onload = () => { let content = document.querySelector("#content"); // 문서에서 자식(자손)노드를 찾는 방법 let child = content.childNodes; // 노드의 부모 노드를 찾아 보자 let parent = content.parentNode; parent.style.border = "3px solid blue"; // 현재 노드에서 이전 형제 노드를 찾는 방법 let previous = content.previousElementSibling; // 현재 노드에서 이후 형제 노드를 찾는 방법 let next = content.nextElementSibling; } 주의 ) childN.. 2023. 2. 20.
23.02.17 (DOM 요소 만들고 추가하기, 수정하기, 없애기, 스타일, onsubmit) 😀/* vh : 현재 실행중인 스크린의 크기에 맞춰 상대적 크기 반환 */ 😀 title="" ==> 마우스 갖다 대면 나오는거 😀let result = document.querySelector("#txt1").value; // 값을 가져올 때는 value속성을 가져오면 됨 😀" onsubmit="return check()"> ==> submit버튼을 누르면 check함수를 호출해서 true면 action페이지로 이동 ==> onsubmit속성은 input submit을 제어해서 retrun false면 action이 작동하지 못하게 한다!! 😀//let t2 = document.querySelector("#t2").value; // #t2에는 값이 없기 때문에 value로 가져올 수가 없다!! 😀// .. 2023. 2. 17.