본문 바로가기

프론트엔드(Front-End)/jQuery3

[jQuery] - 클래스(Class), 부모 - 형제 노드(태그) 제어 jQuery에서 선택된 노드(태그)들에 대한 클래스들을 직접 제어, 선택된 노드의 부모 노드, 자식 노드, 형제 노드들에 대한 각 노드들을 제어할 때 자주 사용되는 메서드를 알아보도록 하겠습니다. 1. 클래스 제어 메서드 : addClass(), removeClass(), toggleClass() 문법) 1. $("선택자").addClass("class01"); // class01 값은 예시입니다. 2. $("선택자").removeClass("class01"); 3. $("선택자").toggleClass("class01"); - addClass() 메서드는 선택된 노드에 매개변수로 입력된 클래스를 추가합니다. - removeClass() 메서드는 선택된 노드에 매개변수로 입력된 클래스를 삭제합니다. - .. 2022. 7. 20.
[jQuery] - 선택자(Selector), val(), attr(), html(), CSS 속성 제어 이번엔 jQuery에서 자주 쓰이는 선택자(Selector) 지정, 여러 가지 노드의 속성을 제어할 수 있는 val(), attr(), html()과 CSS 스타일 속성 제어 메서드에 대해 알아보겠습니다. 1. jQuery에서 자주 쓰이는 선택자(Selector) 선택자(Selector)란, 말 그대로 선택을 해 주는 요소를 의미하며, 웹 페이지의 구조, 데이터에 대한 노드(태그)에 접근하여 노드에 대한 속성값들을 제어하기 위해 선택자를 지정합니다. 자주 쓰이는 선택자는 아래와 같고, 선택자 지정 시 $로 시작하여 표기합니다. 1. $("태그에 대한 ID name") 2. $("태그에 대한 Class name") 3. $("특정 요소[ Attribute name = Attribute value]") ex.. 2022. 7. 20.
[jQuery] - jQuery의 정의, 사용 방법 프론트엔드 사이드에서 웹 페이지의 동적인 요소들을 제어해 줄 수 있는 Javascript라는 프로그래밍 언어가 존재했습니다. 이번엔 해당 언어의 라이브러리 중 하나인 jQuery(제이쿼리)에 대해 알아보겠습니다. 1. Javascript와 jQuery(제이쿼리)의 연관성 위에서 말씀드린 것처럼, Javascript는 경우 주로 웹 페이지 또는 응용 프로그램의 다양한 제어를 위해 개발된 스크립트 언어이며 jQuery는 이러한 Javascript를 더욱 더 간결하게 사용할 수 있도록 설계된 크로스 플랫폼 기반의 Javascript 라이브러리입니다. ※ 여기서 크로스 플랫폼 (Cross Platform)이란? 쉽게 말하면 여러 종류의 컴퓨터가 존재해도 모두 동일하게 동작할 수 있다는 의미입니다. 2. jQue.. 2022. 7. 19.