Frontend/jQuery

[jQuery] 이벤트:: input(focus, blur,change,select)

보호되어 있는 글입니다.

[jQuery] 메서드 :: remove(), empty(), detach(),clone(),each()

보호되어 있는 글입니다.

[jQuery] 메서드 :: get/set , p 태그, 속성,

요소에 내용 또는 값 얻어오기/세팅하기 1) 요소에 작성된 내용만 얻어오기/세팅하기 [JS] : innerText --> get innerText = "내용"; --> set [jQuery] : .text() --> get .text("내용"); --> set 2) 요소에 작성된 HTML코드 자체를 얻어오기/세팅하기 [JS] : innerHTML --> get innerHTML = "HTML코드"; --> set [jQuery] : .html() --> get .html("HTML코드"); --> set 3) input 태그의 값 얻어오기/세팅하기 [JS] : value --> get value = "값"; --> set [jQuery] : val(); --> get val("값"); --> set jQ..

[jQuery] 순회(탐색) 메서드 :: Sideways 탐색 메서드

Sideways(옆으로, 옆에) 탐색 메서드 $("선택자").sibling([매개변수]); - 선택된 요소의 형제(같은 레벨 위치의 요소) == 들여쓰기가 같은 요소 - 매개변수가 있으면 모든 형제 중 매개변수와 일치하는 요소만 반환 $("선택자").next(); - 선택된 요소의 다음 형제 요소 (1개) $("선택자").nextAll(); - 선택된 요소의 다음 모든 형제 요소 (n개) $("선택자").nextUntil(매개변수); - 선택된 요소의 다음 형제부터 매개변수 요소 전까지 반환 $("선택자").prev(); - 선택된 요소의 이전 형제 요소 (1개) 반환 $("선택자").prevAll(); - 선택된 요소의 이전 모든 형제 요소 반환 (n개) $("선택자").prevUntil(매개변수); ..

[jQuery] 순회(탐색) 메서드 :: Descendants (자손) 탐색 메서드

Descendants (자손) 탐색 메서드 $("선택자").children([매개변수]); - 선택된 요소의 모든 자식 요소를 반환 - 매개변수가 있으면 일치하는 자식 요소만을 반환 $("선택자").find(매개변수); - 선택된 요소의 모든 후손 중 매개변수와 일치하는 요소를 모두 반환 div (great-grand parent) ul (grand parent) li (direct parent) span div (grand parent) p (direct parent) span 테스트

[jQuery] 순회(탐색) 메서드 :: Ancestors (조상) 탐색 메서드

Ancestors (조상) 탐색 메서드 - 선택된 요소의 상위 요소를 찾기 위한 메서드 $("선택자").parent(); - 선택된 요소의 바로 위 상위 요소 (현재 요소를 감싸고 있는 요소) $("선택자").parents([매개변수]); - 선택된 요소의 모든 상위 요소를 반환 - 매개변수 == CSS 선택자 -> 선택된 요소의 모든 상위 요소 중 매개변수와 일치하는 요소만 반환 $("선택자").parentsUntil(매개변수); - 선택된 요소부터 매개변수 요소까지 범위의 상위요소를 반환 div (great-grand parent) ul (grand parent) li (direct parent) span div (grand parent) p (direct parent) span

[jQuery] 선택자

jQuery 선택자 작성법 : $("선택자") "선택자"의 작성 방법은 CSS 선택자 방식을 따른다. ****** (경고) ****** JS와 jQuery 요소 선택 방법에 따라서 뒤에 작성되는 코드 방식이 결정된다. JS방식 요소 선택 -> JS 코드 작성 jQuery방식 요소 선택 -> jQuery 코드 작성 (서로 섞어서 사용되어지지 못한다.) -> 한 줄에 JS, jQuery 혼용 X -> 서로 다른 줄에 각각 사용 O 특징 jQeury는 Javascript로 만들어진 라이브러리이다. == jQuery는 JS 코드이다 == jQuery와 JS는 혼용이 가능하다. 태그 선택자 [JS] document.getElementsByTagName("태그명"); [jQuery] $("태그명"); 테스트1 테스..

[jQuery] 개요

jQuery 란? : 기존에 복잡했던 클라이언트 측 HTML 스크립팅(JS)을 간소화 하기 위해 고안된 Javascript Library 이다. : jQuery는 적은양의 코드로 빠르고 풍부한 기능을 제공한다. (단점. jQuery 라이브러리를 다운 받아 사용 -> 속도가 조금 느림) jQuery 라이브러리 연결 방법 jQuery 라이브러리는 .js 확장자로 작성되어 있어 script 태그를 이용하여 연결할 수 있다. 1) jQuery 라이브러리를 다운로드 받아서 직접 연결 - 장점 : 서버 컴퓨터에 라이브러리가 존재하기 때문에 연결 속도가 빠름 - 단점 : 폴더 구조 변경 시 경로가 꼬이게되는 문제가 발생할 수 있다. - jQuery 공식 홈페이지 : https://jquery.com/ - jQUery..