JS 3

[HTML] html data-속성 사용법

✔️ 데이터셋 속성HTML의 데이터셋 속성은 커스텀 사용자 속성을 DOM 요소에 저장하는데 표준화된 방법을 제공한다.일종의 html 변수 역할이라고 말할 수 있다.HTML5부터 데이터 속성이 생기며 데이터 속성은 HTML 요소의 'data-'로 시작하는 속성을 말한다.데이터 속성의 목적은 특정한 데이터를 DOM 요소에 저장해두기 위함이다.'data-'로 시작하며 브라우저는 이러한 데이터 속성에는 어떠한 행동도 관여하지 않기 때문에 개발자는 요소에 특정한 데이터를 저장하고 싶은 경우 자유롭게 사용할 수 있다.data-* 전역 특성은 사용자 지정 데이터 특성(custom data attributes)이라는 특성 클래스를 형성할 수 있다.속성명은 value이지만, HTML 표준 속성이 value 속성과는 상관..

JavaScript/STUDY 2024.08.29

[jQuery] jQuery 함수 - attr, val, data 등

attr()- 엘리먼트의 속성 값을 가져오거나 변경할 수 있는 함수하나의 인자를 주면 해당 속성 값만을 조회하고, 두 개를 주면 해당 속성 값을 변경한다.TestContent prop()- 엘리먼트의 속성 값을 가져오거나 변경한다는 점에서 attr()과 유사하지만,아무 속성 값이 아니라 true와 false 값만 가지는 속성 값을 관리한다.TestContent addClass()- 클래스가 없는 엘리먼트에 class 속성을 추가한다.TestContent  removeClass()- 클래스가 있는 엘리먼트의 class 속성을 삭제한다.TestContent val()- 엘리먼트가 가지고 있는 value 속성(값)을 관리한다.인자를 넣지 않으면 value를 가져오고 인자를 넣어주면 value를 인자 값으로 변..

JavaScript/STUDY 2024.08.29

[jQuery] 요소 추가, 제거 - hide(), remove(), show() 사용법

✔️ 요소 추가prepend()- 선택한 요소 안의 첫 부분에 내용 삽입$(function() { $(".box").prepend("추가 문자");}); append()- 선택한 요소 안의 끝 부분에 내용 삽입$(function() { $(".box").append("추가 문자");}); before()- 선택한 요소 앞에 내용 삽입$(function() { $(".box").before("추가 문자");}); after()- 선택한 요소 뒤에 내용 삽입$(function() { $(".box").after("추가 문자");});  ✔️ 요소 제거remove()- 선택한 요소를 제거 (자식 요소도 함께 제거된다.)$(".box").remove(); ❗remove()는 매개변수를 가질 수 있다.$(".bo..

JavaScript/STUDY 2024.08.29