[포스코x코딩온] 웹 풀스택 과정 2주차 회고 | jQuery

jQuery 사용

자바스크립트 라이브러리인 jQuery를 사용하면, 자바스크립트를 더 간편하게 사용할 수 있다.
jQuery는 파일을 다운받거나 CDN으로 불러올 수 있다.
1) 파일 다운로드
https://jquery.com/download/ 링크에서 원하는 버전을 선택하여 다운 받으면 된다.
2) CDN
https://releases.jquery.com/ 원하는 버전을 선택하여, script 코드를 복사한 뒤 필요한 곳에 붙여넣으면 된다.

 

jQuery 기초

jQuery()의 축약 형태인 $으로 jQuery를 불러온다.

$( 선택자 ).동작함수();

 

jQuery 메소드

1) 값 가져오기 / 설정하기

• $().val() 선택자로 요소를 불러 값을 가져온다.

// document로 불러오기
let value = document.getElementById("input").value;
// jquery로 불러오기
let value = $("input").val();

• $().val(값) 선택자로 요소를 불러 값을 넣어준다. (value는 속성이지만, val()은 함수이기 때문에 parameter로 값을 넣어주어야 하겠지)

// document로 불러오기
document.getElementById("input").value = "안녕";
// jquery
$("input").val("안녕");

2) css 스타일 변경하기

• $().css("속성", "속성값") 선택한 요소에 대하여, 원하는 스타일 속성을 지정할 수 있다.
  !! document.querySelector으로 태그를 불러오면 하나만 선택되지만, jQuery로 태그를 불러오면 해당하는 모든 태그가 한번에 선택됨 => 하나만 선택하려면 id, class 이용해야 함

// document
let div = document.querySelector("div");
div.style = "border: 1px solid black";
// jquery
$("div").css("border", "1px solid black");

3) 속성 변경하기

• $().attr("속성", "속성값") 선택한 요소에 대하여, 원하는 속성을 선택하여 지정할 수 있다.

// document
let a = document.querySelector("a");
a.setAttribute("href", "https://naver.com");
// jquery
$("a").attr("href", "https://naver.com");

4) Text 변경하기

• $().text("글자") 선택한 요소 내 텍스트를 변경할 수 있다.

// document
let div = document.querySelector("div");
div.innerText = "안녕하세요";
// jquery
$("div").text("안녕하세요");

• $().html("html") 선택한 요소 내 html을 변경할 수 있다.

// document
let div = document.querySelector("div");
div.innerHTML = "<b>안녕하세요</b>";
// jquery
$("div").html("<b>안녕하세요</b>");

5) 요소 추가/삭제

• 요소 생성은 jquery로 할 수 없다!
• $().append() 선택된 요소의 마지막 자식요소로 추가한다.

let li = document.createElement("li");
li.innerText = "append 되었습니다";

// document
document.querySelector("ul").append(li);
// jquery
$("ul").append(li);

• $().prepend() 선택된 요소의 첫번째 자식요소로 추가한다.

let li = document.createElement("li");
li.innerText = "prepend 되었습니다";

// document
document.querySelector("ul").prepend(li);
// jquery
$("ul").prepend(li);

• $().before() 선택된 요소의 앞에 형제요소로 추가한다.

let li = document.createElement("li");
li.innerText = "before 되었습니다.";

// document
document.querySelector("#li2").before(li);
// jquery
$("#li2").before(li);

• $().after() 선택된 요소의 뒤에 형제요소로 추가한다.

let li = document.createElement("li");
li.innerText = "after 되었습니다.";

// document
document.querySelector("#li2").after(li);
// jquery
$("#li2").after(li);

• $().remove() 선택한 요소를 삭제한다. (parameter로 선택자를 넘겨주면, 선택한 요소 중 그 조건을 만족하는 요소만 삭제)

// document
document.querySelector("ul").remove();
// jquery
$("ul").remove();

• $().empty() 선택한 요소의 자식요소를 모두 삭제한다. (선택된 요소는 남아있음. 비어있을 뿐!)

// document
let standard = document.querySelector("li");
documnet.querySelector("ul").removeChild(standard);
// jquery
$("ul").empty(); // 선택된 요소의 모든 자식요소를 삭제함

6) 요소 탐색

• $().parent() 선택한 요소의 부모 요소를 반환한다.

// document
console.log(document.querySelector("input").parentNode);
// jquery
console.log($("input").parent());

• $().parents() 선택한 요소의 모든 조상 요소를 반환한다.

// jquery
console.log($("input").parents());

• $().next() 선택한 요소의 바로 다음에 위치한 형제 요소를 반환한다.(텍스트 노드는 가져오지 않는 메소드로, nextElementSibling과 동일한 기능)

// document
console.log(document.querySelector("input").nextElementSibling);
// jquery
console.log($("input").next());

• $().prev() 선택한 요소의 바로 이전에 위치한 형제 요소를 반환한다. (텍스트 노드는 가져오지 않는 메소드로, previousElementSibling과 동일한 기능)

// document
console.log(document.querySelector("input").previousElementSibling);
// jquery
console.log($("input").prev());

• $().children() 선택한 요소의 모든 자식 요소를 반환한다. (마찬가지로, 텍스트 노드는 가져오지 않아, childNode가 아니라 children과 동일한 기능)

// document
console.log(document.querySelector("input").children);
// jquery
console.log($("input").children());

7) 클래스 조작하기 (추가/삭제/확인/토글)

• $().addClass("클래스명") 선택한 요소에 클래스를 추가한다.
• $().removeClass("클래스명") 선택한 요소의 클래스를 삭제한다.
• $().hasClass("클래스명") 선택한 요소에 클래스가 있는지 여부를 확인한다. => Boolean 값 (t/f) 반환
• $().toggleClass("클래스명") 선택한 요소에 클래스가 있으면 삭제, 없으면 추가한다.
• $().switchClass("클래스명1", "클래스명2", [시간]) jQuery ui를 추가로 불러와야 사용 가능한 메소드로, 선택된 요소에 대하여 클래스1을 클래스2로 바꿔준다. (시간을 설정하면, 바뀌는 데 걸리는 시간을 정할 수 있다.)

$("div").switch("css1","css2", 3000); // 시간은 밀리초 단위임

8) 이벤트 리스너

이벤트가 발생했을 때, 특정 함수를 처리하도록 한다.

• $().on("이벤트명", 콜백함수) 선택한 속성에 대해, 이벤트가 발생했을 때 함수를 처리하도록 한다.

$("button").on("click",function(){
  alert("클릭");
});

• 자주 사용하는 이벤트는 따로 함수로 만들어져 있다. (click: $().click(funcion(){}), scroll: $().scroll(function(){}), mouseover: $().mouseover(function(){}), hover: $().hover(function(){}), keyup: $().keyup(function(){}), keydown: $().keydown(function(){}))

$("button").click(function () {
  alert("클릭");
});

• function의 parameter로 e(event를 의미)를 입력하면, 발생한 이벤트에 대한 정보를 알 수 있다.

$("input").keyup(function(e) {
  console.log(e);	// 발생한 이벤트에 대한 정보
  console.log(e.key);	// input에 keyup 이벤트로 입력한 것
  console.log(e.keyCode);	// 해당하는 key의 키보드에서의 코드
  console.log(e.currentTarget);	// 이벤트가 일어난 대상
  console.log(e.currentTarget.value);	// 이벤트가 일어난 대상의 value
});

• 로딩이벤트 $().ready(콜백함수) $() DOM 요소가 로드 된 후에 실행된다.

$(window).ready(function() {
  console.log("로드완료1");
})
//$(window).ready()를 축약하여 $()으로 쓸 수 있다.
$(function() {
  console.log("로드완료2");
})
$(document).ready(function() {
  console.log("로드완료3");
})