본문 바로가기

JavaScript3

<javascript & jquery> 탭메뉴 생성 앞서 간단한 CSS작업을 통한 탭메뉴 생성을 한 바 있다. 탭메뉴만들기(input태그/label태그의 활용) input태그는 사용자에게서 데이터를 받기 위해 사용되는 주태그이다. 이에 따라 다양한 속성을 가지고 있어서 상황에 맞게 사용할 필요가 있다. label태그는 input에 이름을 붙여주는 태그라고 생각 seon-xero.tistory.com 오늘은 jquery와 javascript를 활용한 탭메뉴 생성을 하려고 한다. 나의 경우 클래스추가 및 제어를 통해 탭메뉴가 이어지게 할 예정이지만 이 방법이 절대적인 것은 아니다. 제이쿼리와 자바스크립트에서의 클래스제어는 차이가 있다. 이전에 자바스크립트 관련 클래스추가 및 제어 관련 글은 작성한 적(하단에 참조로 남겨놓겠음)이 있으니 헷갈릴 경우 참고하면 .. 2024. 4. 13.
<Jquery> attr 속성 <javascript> setAttribute 속성 HTML의 속성을 제어하는데 있어서 jquery는 .attr()통해서 제어하고, javascript에서는 setAttribute를 활용하여 제어하게 된다. 나는 이 속성을 활용해서 이미지 속성 변경을 많이 하곤 하지만, 글의 전달을 위해 input태그를 통해 예제를 보여줄까 한다. - jquery와 javascript의 스타일 조건 동일 - button클릭 시 input의 placeholder(미리보기텍스트) 변경 1. jquery jquery의 경우 필수적으로 사용해야 하는 플러그인이 있음에 따라 코드기록으로 대체한다. * 버튼 클릭시 input.attr(변경할속성명:변경할속성값) = input.attr(placeholder:"미리보기가 변경되었습니다") attr(속성명,속성값) DOCTYPE html.. 2024. 4. 11.
<javascript> 객체요소의 선택 오늘 정리할 javascript의 내용은 html의 구조에서 부모요소, 자식요소, 형제요소를 각 선택하는 방법이다. 이전에 언급한대로 선택자의 경우 변수를 활용하여 진행되었다. 1. 부모요소의 선택 · 선택자.parentElement : 직계부모 · 선택자.closest('선택할 상위부모객체') : 직계부모제외 2. 자식요소의 선택 · 선택자. children - 이 때 자식요소를 배열값으로 가져오게 됨에 따라 for구문 활용 3. 형제객체의 선택 · 선택자.previousElementSibling : 기준객체 앞 형제요소 · 선택자.nextElementSibling : 기준객체 뒤 형제요소 HTML 삽입 미리보기할 수 없는 소스 2024. 4. 3.