js / jquery 정리

페이지 제작 하면서 헷갈렸던 js / jquery 문법? 다 정리해 보겠다. 기억나는 대로 추가하겠다.

 

• 변수 선언 방식
  • var - 유연한 변수 선언 방식으로, 중복 선언과 초기화가 가능하다. (마지막에 할당된 값이 저장됨)
  • let - 중복 선언이 불가하지만 값의 재할당이 가능하다. 
  • const - 중복 선언과 값의 재할당이 불가하며 선언과 동시에 값을 정의해야 한다.

 

• 웹 페이지 이동 
• location 객체 - 현재 활성화된 웹 페이지의 URL정보를 포함하는 window 객체의 프로퍼티
  • location.href - 전체 URL이 포함된 문자열
  • locaiton.pathname - /뒤 URL 경로 = URI
  • locaiton.reload() - 새로고침처럼 현재 리소스를 다시 불러옴
• history 객체 - 브라우저의 history 정보 = 사용자가 방문한 URL 정보를 저장하는 객체
  • history.back() - 이전 페이지로 돌아감

* property란? 보통 데이터 구조와 연관된 속성을 말한다. 이름과 값을 가지며 문자열의 길이를 가지고 있는 length를 예로 들 수 있다. 

 

• 부모 요소 (상위 요소) 선택

<main>
	<div id = "p1">
		<div id = "p2">
			<p id = "test"></p>
		</div>
	</div>
</main>

• parent() - $("test").parant() = p2 div 객체 (바로 위 부모 요소 반환)
• parents()  -$("test").parants() = p2, p1 div 객체 반환 (모든 부모 요소 반환)
• closest() - $("test").closest("div") = p2 div 객체 반환 ( 일치하는 부모 요소 중 가장 근접한 요소 반환)

 

• 선택자 (아이디가 p2인 div를 선택한다고 가정시)
  • getElementById(id) - getElementById("p2")
  • querySelector(selectors) - querySelector("main  #p1  #p2") 

getElementById는 HTMLCollection에 리턴되고, querySelector은 NodeList에 리턴된다. 둘의 차이점은 HTMLCollection의 항목은 name과 id 속성으로 접근이 가능하지만 NodeList의 항목은 인덱스 번호로만 접근이 가능하다. 

 

+

 

1. JavaScript 태그 선택자.

document.getElementById("Id"); // ID 선택자
document.getElementsByClassName("Class"); // Class 선택자
document.getElementsByTagName("div"); // 태그 선택자
document.querySelector(".class"); // css 선택자로 첫 번째 일치 요소
document.querySelectorAll("div .class"); // css 선택자로 일치하는 모든 요소 NodeList 반환

 

1-1. Jquery 태그 선택자

$("#Id"); // Id 요소 선택
$(".class"); // class 요소 선택
$("div"); // 특정 태그 모든 요소 선택
$("div .class"); // css 선택자로 요소 선택

 

2. JavaScript 함수

function showAlert(){
   alert("clicked");
}

document.getElementById("button").addEventListener("click",showAlert);

 

2-2. Jquery 함수

$(document).ready(function(){
   $("#button").click(function(){
      alert("clicked");
   });
   
   $("#container").on("click","#button", function(){
      alert("clicked");
   }
});

 

* on 메서드는 하나 이상의 이벤트를 한 번에 처리하거나 이벤트 위임을 통해 동적으로 생성된 요소에 이벤트를 바인딩할 수 있다. 나중에 추가된 요소에 이벤트를 등록하기 때문에 추가되는 요소의 부모에 이벤트 핸들러를 등록해야 한다.

 

3. JS 클래스 추가/삭제

document.getElementById("Id").classList.add("class");
document.getElementById("Id").classList.remove("class");

 

3-2. Jquery 클래스 추가/삭제

$("#Id").addClass("class");
$("#Id").removeClasss("class");

 

4. JS 요소 추가

var new = document.createElement("div");
new.textContent = "new";
document.getElementById("Id").appendChild(new);

 

4-2. Jquery 요소 추가

$("#Id").append("<div> new </div>");

 

5. JS CSS 변경 

document.getElementById("Id").style.color = "red";

 

5-2. Jquery CSS 변경

$("#Id").css("color","red");

 

6. JS 폼 요소 값 가져오기

document.getElementById("Id").value;

 

6-2. Jqeury 폼 요소 값 가져오기

$("#Id").val();