[포스코x코딩온] 웹개발자 입문 과정 3주차 회고-03 | JQuery

1.jQuery란: 

: 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈소스 기반의 자바스크립트 라이브러리이다.
- 사용 방법: $(선택자).동작함수();
처음엔 jQuery가 많이 사용 되었으나 jQuery를 대체할 react 나 view 같은 가상 dom을 다루는 라이브러리들이 많이 생겼으며,
기본 자바스크립트도 많이 기능들이 생기기도 했고 jQuery가 무거워서 잘 안쓰이는 추세이다.

2.사용 방법
https://releases.jquery.com/ 에서 

1. 최신 버전의 minified 클릭

2. CDN 사용 - 해당 스크립트 복제 후 헤드에 넣어 사용

당연한 말이지만 이 과정이 없으면 적용이 안된다.

3.메소드
1) 값 가져오기 & 설정하기:
  - $(선택자).val(); 
      ex. var value =$('input').val();
  - $(선택자).val('설정할 값'); 
      ex. var value =$('input').val('설정완료');

// val()

function getValue() {

let value = $("input").val();

// let value = document.querySelector('input').value;

alert(value);

}

function setValue() {

$("input").val("설정!!!");

}

2) 텍스트 변경하기
  - $(선택자).text('글자');
      ex.$('span').text('jQuery로 바꿈');

//text() //innerText와 동일

function changeTextJS() {

let p = document.querySelector(".p-text");

p.innerText = "<b>js</b> 로 바꿨습니다.";

}

function changeTextJquery() {

$(".p-text").text("<b>jquery</b> 로 바꿨습니다.");

}

3) HTML 변경하기
  - $(선택자).html('html값');
      ex.$('span').html('<h1>jQuery</h1>');

//html()

function changeHtmlJS() {

let p = document.querySelector(".p-html");

p.innerHTML = "<b>js</b> 로 바꿨습니다.";

}

function changeHtmlJquery() {

$(".p-html").html("<b>jquery</b> 로 바꿨습니다.");

}

4) 속성 변경하기
  - $(선택자).attr('속성','속성값');
      ex.$('#li2').attr('style','color:red');

//attr()

function changeAttrJS() {

let a = document.querySelector("a");

a.setAttribute("href", "http://www.naver.com");

}

function changeAttrJquery() {

$("a").attr("href", "http://www.daum.net");

}

5) CSS 변경하기
  - $(선택자).css('속성','속성값');

// css()

function changeCssJS() {

let span = document.querySelector("span"); //first span

span.style = "font-size: 20px; color: red;";

}

function changeCssJquery() {

$("span").css("font-size", "40px");

$("span").css("color", "blue");

console.log($("span").css("color")); //속성값 가져오기

}

6) 요소 추가
  - $(선택자).append(요소);
  - $(선택자).prepend(요소);
  - $(선택자).before(요소);
  - $(선택자).after(요소);

// 요소 추가

// append()

function appendJS() {

let li = document.createElement("li");

li.innerText = "append()로 추가된 js";

let ul = document.querySelector(".colors");

ul.append(li);

}

function appendJquery() {

$(".colors").append("<li>append()로 추가된 jquery</li>");

}

// prepend()

function prependJS() {

let li = document.createElement("li");

li.innerText = "prepend()로 추가된 js";

let ul = document.querySelector(".colors");

ul.prepend(li);

}

function prependJquery() {

$(".colors").prepend("<li>prepend()로 추가된 jquery</li>");

}

//after()

function afterJS() {

let green = document.querySelector(".green");

let li = document.createElement("li");

li.innerText = "after() 형제요소로 추가된 js";

green.after(li);

}

function afterJquery() {

$(".green").after("<li>after() 형제요소로 추가된 jquery</li>");

}

//before()

function beforeJS() {

let green = document.querySelector(".green");

let li = document.createElement("li");

li.innerText = "before() 형제요소로 추가된 js";

green.before(li);

}

function beforeJquery() {

$(".green").before("<li>before() 형제요소로 추가된 jquery</li>");

}

7) 요소 삭제
  - $(선택자).remove();
  - $(선택자).empty();

//remove()

function removeJS() {

let li = document.querySelector("#li2");

li.remove();

}

function removeJquery() {

$("#li2").remove();

}

//empty() 자식 모두 지움 jquery만 있으나 js로 구현 가능

function emptyJS() {

let nums = document.querySelector("ul.nums");

nums.innerHTML = "";

}

function emptyJquery() {

$("ul.nums").empty();

8) 요소 탐색
  - $(선택자).parent();
  - $(선택자).parents();
  - $(선택자).children();
  - $(선택자).next();
  - $(선택자).prev();

//요소 선택

function findParent() {

//parent(): 부모 요소 반환

console.log($(".child2").parent());

}

function findParents() {

//parents(): 조상 요소 반환

//js 없음

console.log($(".child2").parents());

}

function findNext() {

//next() : nextSibling

console.log($(".child2").next());

}

function findprev() {

//prev() :previousSibling

console.log($(".child2").prev());

}

function findChildren() {

//children: 자식 요소 모두 반환, js에서의 children()과 동일

console.log($(".parent").children());

console.log(document.querySelector(".parent").children);

}

9) 클래스 추가, 삭제, 확인
  - $(선택자).addClass('클래스명');
  - $(선택자).removeClass('클래스명');
  - $(선택자).hasClass('클래스명');

  - $(선택자).toggleClass('클래스명');

function addClass() {

$("#hi").addClass("fs-50");

}

function removeClass() {

$("#hi").removeClass("fs-50"); // 특정 클래스 제거

$("#hi").removeClass(); //hi 클래스 모두 제거

}

function hasClass() {

//true 나 false로 반환

console.log($("#hi").hasClass("fs-50"));

}

function toggleClass() {

$("#hi").toggleClass("bg-pink"); //있으면 제거 없으면 추가

}

 

4.메소드 (addEventListener와 같은)

 

1) click()

  - $(선택자).click(function () {} );

$(".p-msg").click(function () {

$(".p-msg").css("color", "red");

});

2) on()

  - $(선택자).on('동작',function () {} ); 

     ex. $(".num").on("click", function () { $(this).css("color", "blue"); });

예시

//todolist

$("#todo-form").on("submit", function (e) {

e.preventDefault(); //이벤트 막기

const todo = $('input[name="todo"]').val();

$("ul.todos").append(`<li>${todo}</li>`);

$('input[name="todo"]').val(""); // 초기화

});

3) hover()

  - $(선택자).hover(function () {} , function () {}); 

$(".div-hover").hover(

function () {

$(this).addClass("hover1");

},

function () {

$(this).removeClass("hover1");

}

);

4) scroll()

  - $(window).scroll(function () {} ); 

$(window).scroll(function () {

console.log("scroll!!!!!!!!!!!");

});

5) keydown()

  - $(선택자).keydown(function (e) {} ); 

예시

$(".input-key").keydown(function (event) {

// console.log(event.code);

if (event.code === "ArrowUp") {

console.log("up");

} else if (event.code === "ArrowRight") {

console.log("right");

} else if (event.code === "ArrowLeft") {

console.log("left");

} else if (event.code === "ArrowDown") {

console.log("down");

} else {

console.log("others");

}

});