[jQuery] 자주 사용하는 기능 정리

아직 일본은 jQuery가 파워가 있는 듯하다.

js와 react만 공부해서는 취업에 불리할 것 같아 울며 겨자 먹기로 공부하는 중이다.

 

이 글은 유튜버 '깡코딩' 님의 제이쿼리 "이거 보면 끝! 자주 사용하는 제이쿼리 정리(입문자용)"이라는 강의를 토대로 정리한 글이다.

---

---

기본 설정

jQuery는 JavaScript와 완전 다른 언어가 아니라, js를 보다 편하게 사용하기 위해 제작된 라이브러리이다.

이를 사용하기 위해서는 필요에 따라서 아래의 방법 중 한 가지 간단한 사전작업이 필요하다.

• jQuery 홈페이지에서 파일 다운로드한 후 프로젝트 폴더에 삽입
• jQuery cdn 검색 후 필요한 코드 script 태그로 불러오기

현재 jQuery는 1,2,3 번대 버전이 존재하며, 각각 지원하는 기능이나 호환 가능한 브라우저에 차이점이 있으니 필요에 따라 사용해야 한다.

onload, ready

onload는 html의 DOM요소 및 이미지 요소들이 모두 로드된 이후에 jQuery 코드를 실행시켜 준다.

window.onload = function(){
  console.log('onLoad');
}

ready는 html의 DOM요소가 모두 로드된 이후에 jQuery 코드를 실행시켜 준다.

onload 보다는 조금 빨리 실행되는 격이다.

$(document).ready(function(){
  console.log('ready');
})

// 아래와 같이 줄여서 표현 가능하다.

$(funcntion(){
  console.log('ready');
})

Selector

요소 선택자는 기존의 js 코드에 비해 매우 축약되었다.

$("요소") <-- 요소 자리에는 css선택자와 같이 #,. 등 사용이 가능하다.

<ul id="list-container">
  <li class="lists">items</li>
  <li class="lists">items</li>
  <li class="lists">items</li>
  <li class="lists">items</li>
  <li class="lists">items</li>
</ul>

// ul 을 선택하고 싶은 경우
$("ul") or $("#list-container") ...

// li 를 선택하고 싶은 경우
$("li") or $(".lists") $("ul li") ...

마지막의 $("ul li")와 같이 선택자를 연쇄적으로 지정하는 것도 가능한데, 이를 메소드체이닝(method chaining)이라고 한다.

parent, children

children - 선택한 요소의 자식 요소를 받아온다.

$("#list-container").children();

parent - 선택한 요소의 부모요소를 받아온다.

$("#list-container").children().parent());

find

선택한 요소 안에 원하는 요소가 있는지 찾아준다.

$("#list-container").find("li");

ep(index)

선택한 요소 안의 자식 요소 중 index번째 요소를 찾아준다.

단, index는 0부터 시작한다. ex) ep(1)의 경우 2번째 요소.

<ul id="list-container">
  <li class="lists">items</li>
  <li class="lists">items</li>
  <li class="lists">hi</li>
  <li class="lists">items</li>
  <li class="lists">items</li>
</ul>

// 'hi' 라는 내용을 담고 있는 li 요소를 불러와야 할 경우.

$("#list-container li").eq(2);

index

index 안에 들어있는 요소의 순서값을 찾아준다.

$("#list-container li").on("click", function () {
  var i = $("#list-container li").index(this);
  console.log(i);
});

addClass, removeClass, hasClass, toggleClass

addClass - 클래스를 추가해 준다.

$("#list-container li").eq(0).addClass("first-child");

removeClass - 클래스를 제거해 준다.

$("#list-container li").eq(0).removeClass("lists");

hasClass - 클래스가 존재하는지 확인해 준다.

$("#list-container li").eq(0).hasClass("lists");

// lists 라는 클래스가 존재하면 true 존재하지 않으면 false 값을 반환한다.

toggleClass - 클래스를 상황에 맞게 추가/제거해준다.

$("#list-container li").on("click", function () {
  $("#list-container li").eq(1).toggleClass("second-child");
});

// 임의의 li 태그를 클릭시, 두번째 li 태그의 class 값에 second-child라는 값이 추가, 제거된다.

remove, prepend, append, appendTo, wrap

remove - 지정한 요소를 삭제해 준다.

$("#list-container li").eq(0).remove();

// 0번째 li태그 제거

prepend - 지정한 요소 시작 부분에 요소를 추가해 준다.

$("#list-container").prepend("<li>add first li</li>");

// 0번 li요소 다시 추가

append - 지정한 요소 끝부분에 요소를 추가해 준다.

$("#list-container").append("<li>add last li</li>");

// 마지막 li 요소 추가

appendTo - append와 동일한 기능. 순서만 조금 다르다.

$("<li>add append to li</li>").appendTo("#list-container");

// 부모와 자식의 위치가 바뀌었다.

wrap - 지정한 요소를 감싸주는 요소를 추가해 준다.

$("#list-container").wrap("<div></div>");

// list-container를 div태그로 감쌌다.

css, attr, removeAttr

css - 요소의 스타일 속성을 추가해 준다.

$("#list-container li").eq(0).css({ color: "red" });

// 객체로 전달하거나

$("#list-container li").eq(1).css("color", "blue");

// 함수의 파라미터 전달과 같이 사용 가능하다.

attr - 요소의 다양한 속성을 추가해 주거나 불러온다.

$("#list-container li").eq(0).attr("id", "red-li");

// id, class, stlye 등 다양한 값을 추가해줄 수 있다.

removeAttr - 요소의 원하는 속성을 제거해 준다.

$("#list-container li").eq(0).removeAttr("id");

// 제거하고자하는 속성값만 전달하면 된다.

each

each - js 배열의 forEach와 같은 기능을 한다. 원하는 요소 안에서 반복적으로 코드를 실행하고 싶을 때 사용한다.

$("#list-container li").each(function (index, list) {
  console.log(index, list);
});

width, height, outerWidth, outerHeight

width - 선택한 요소의 margin, padding 값을 제외한 넓이값을 반환한다.

 

height -선택한 요소의 margin, padding 값을 제외한 높이값을 반환한다.

 

outerWidth - 선택한 요소의 margin, padding 값을 포함한 넓이값을 반환한다.

 

outerHeight -선택한 요소의 margin, padding 값을 포함한 높이값을 반환한다.

$("#list-container li").css({ padding: "24px" });

console.log($("#list-container li").eq(0).width());

console.log($("#list-container li").eq(0).outerWidth());

console.log($("#list-container li").eq(0).height());

console.log($("#list-container li").eq(0).outerHeight());

// li요소에 24px 만큼의 패딩값을 주었고, 그 후 각각 width, height, outerWidth, outerHeight 값을 알아보았다.

offset, position

offset - 선택한 요소의 left, top 좌표를 반환한다.

 

position - 선택한 요소의 부모요소를 기준으로 left, top 좌표를 반환한다.

 

console.log($("#list-container").offset().top);

console.log($("#list-container").position().top);

// ul 태그를 기준으로 확인해보았다.
// ul 태그는 기본적으로 margin값이 포함되어있었기에 offset().top은 16을 출력했고,
// ul 태그의 부모태그는 body태그이기 때문에 position().top은 0을 출력했다.

text, html

text - 선택한 요소의 텍스트만 변경한다. (태그 삽입 불가)

$("#list-container li").eq(0).text("change text");

html - 선택한 요소의 html 구조를 변경한다.

$("#list-container li")
  .eq(1)
  .html("<p><b>change to Bold text and p tag</b></p>");

// p태그와 그 안에 b 태그를 추가하였다. 결과적으로 기존의 일반 텍스트가 p태그 안의 굵은 글씨체의 문구로 대체된다.

fadeOut, fadeIn, hide, show, animate

fadeOut - 선택한 요소를 숨긴다.

$("#list-container li").eq(0).fadeOut(1000);

// 1초에 걸처 해당 요소를 숨긴다.

fadeIn - 숨긴 요소를 다시 나타낸다.

$("#list-container li").eq(0).fadeIn(1000);

// fadeOut과 반대로 1초에 걸처 다시 나타난다.

hide - 선택한 요소가 아래에서 위로 사라진다. == slideUp

$("#list-container li").eq(1).hide(1000);

$("#list-container li").eq(2).slideUp(1000);

show - 선택한 요소가 위에서 아래로 나타난다. == slideDown

$("#list-container li").eq(1).show(1000);

$("#list-container li").eq(2).slideDown(1000);

// hide 또는 slideUp으로 숨은 요소가 위에서 아래로 다시 나타난다.

animate - 선택한 요소의 다양한 css 애니메이션 설정이 가능하다.

$("#list-container li").eq(1).css({
  backgroundColor: "red",
});

// css 요소로 배경화면을 설정해 요소의 변화를 조금 더 쉽게 관찰할 수 있다.

$("#list-container li").eq(1).animate(
  {
    height: "300px",
  },
  1000
);

// 요소의 높이를 300px로 1초에 걸쳐 변화시킨다.
// ** duration 뒤에 콜백함수를 넣어 사용하는 것도 가능하다.

scrollLeft, scrollTop

scrollLeft - 가로 스크롤바의 위치값을 반환한다.

 

scrollTop - 세로 스크롤바의 위치값을 반환한다.

$("#list-container li").css({
  marginBottom: "100vh",
});

// li 각 요소에 margin값을 추가해주어 scroll 가능하게 만들었다.

$(window).on("scroll", function () {
  console.log($(window).scrollTop());
});

// 스크롤 이벤트를 추가하여 현재 스크롤의 위치값을 파악한다.
// scrollLeft() 또한 같은 원리로 작동한다.

event

기존의 바닐라자바스크립트에 비해 코드 양이 줄었다.

$("#list-container li").click(function () {
  console.log("click");
});

$("#list-container li").on("click", function () {
  console.log("on click");
});

// 위와 같이 두가지 형태로 표현 가능하다.
// 요소.event(function(){}) || 요소.on('이벤트', function(){})
// 편한대로 사용할 수 있다.

$(window).resize(function () {
  console.log("resize");
});

$(window).on("resize", function () {
  console.log("on resize");
});

// 이벤트에는 click, scroll, resize 등 여러가지가 존재한다.

$("#list-container li").off();

$(window).off();

// .off() 를 통해 추가한 이벤트를 제거할 수 있다.

---

글을 정리하는데 시간이 엄청 오래 걸렸다 ㅜ

 

그래도 이번 기회를 통해 jQuery가 어떤 방식으로 작동하는지 대충 알게 된 것 같아서 좋다.

 

마지막으로 양질의 강의를 무료로 제공해 주신 깡코딩님에게 감사인사를 올린다.

 

https://youtu.be/Ko7wP7pohso