[jQuery] 제이쿼리(jQuery) 기초

07 Oct 2021 - Less than 1 minute read

HTML / CSS Method

---

• .css()

   $("selector").css({
       "property": "value",
       "property": "value"
   });
  
  
   // ex)
   // $("p").css({
   //     "color": "#f80",
   //    "font-size": "20px"
   // });
  

• .html()

    $(selector).html(content);
  
  
    // ex)
    // $("p").html("<mark>제이쿼리</mark>");
  

• .text() : == document.~~.innerText

    $(selector).text(content);
  
  
    // ex)
    // $("p").text("제이쿼리");
  

슬라이드 업 / 다운 / 토글

---

See the Pen Slide Up / Down by Jinsol (@losuif) on CodePen.

• • mouseover() : 마우스를 대상에 올리면 이벤트 발생

  • mouseout() : 마우스를 대상에서 벗어나면 이벤트 발생

• slideToggle : slideUp + slideDown

페이드 인 / 아웃

---

See the Pen by Jinsol (@losuif) on CodePen.

슬라이드

---

See the Pen by Jinsol (@losuif) on CodePen.

• .animate(A, B, C)

  • A > CSS, 대체로 위치에 관련된 CSS 사용 (margkn, left, top, translate, …)

  • B > ms(1/1000초), 애니메이션 적용 시간

  • C > 콜백(Call-Back)함수 / 익명함수로 작성, 애니메이션이 종료된 직후 실행하는 코드

• setInterval(A, B)

  • 애니메이션 자동화

  • A > 반복 실행할 커스텀 함수 (자동화 대상 지정)

  • B > ms