jQuery

zooyeong·2023년 3월 22일

jquery

8주차

목록 보기

2/6

📌jQuery() 함수

모든 시작은 jQuery() 함수를 통해 이루어진다. 괄호 앞의 'jQuery' 문자열은 jQuery를 사용한다는 일종의 선언이다. jQuery() 함수의 3가지 입력 인자 유형은 다음과 같다.

선택자 입력 인자 jQuery('body p');
HTML 입력 인자 jQuery('<h1>h1태그</h1>').appendTo('body')
함수 입력 인자 jQuery(function() {});

jQuery() 함수의 단축형으로 $ 기호를 사용할 수 있다. 코드 안의 jQuery() 함수 식별이 어렵고 불편하기 때문에 $()로 표시한다.

📌jQuery 선택자 유형

💡위치필터 기본 선택자

*필터(filter)는 선택자에 의해 선택된 엘리먼트들 중에서 필터 조건에 맞는 엘리먼트들로 선택 대상을 좀 더 제한하는 선택자 유형이다.

형식	기능(요소는 0부터 시작)
:first	선택된 요소들 중에 첫 번째 요소를 선택
:last	선택된 요소들 중에 마지막 요소를 선택
:odd	선택된 요소들 중에 홀수 번째 요소를 선택
even	선택된 요소들 중에 짝수 번째 요소를 선택
eq(n)	선택된 요소들 중에 n번째 요소를 선택 ex) $('li:eq(4)') 다섯번째 li 태그를 가리킴
lt(n)	선택된 요소들 중에 n보다 앞의 요소들을 선택
gt(n)	선택된 요소들 중에 n보다 뒤의 요소들을 선택
not()	선택된 요소들 중에 필터링 조건을 만족하지 않는 요소들을 선택

💡위치필터 계층 선택자

형식	기능(요소는 1부터 시작)
:first-child	선택된 요소들 중에 부모의 첫 번째 자식 요소 선택
:last-child	선택된 요소들 중에 부모의 마지막 자식 요소 선택
:nth-child(odd)	선택된 요소들 중에 부모의 홀수 번째 자식 요소들을 선택
:nth-child(even)	선택된 요소들 중에 부모의 짝수 번째 자식 요소들을 선택
:nth-child(n)	선택된 요소들 중에 부모의 n번째 자식 요소 선택
:nth-child(Xn+Y)	선택된 요소들 중에 부모의 Y번째 부터 시작해서 X배수 번째에 있는 자식 요소 선택
:only-child	선택된 요소들 중에 형제 요소가 없는 유일한 자식 요소 선택

📌jQuery 스타일 관련 메소드

$().css(CSS속성명) : 선택된 요소에 적용된 CSS스타일 속성값을 반환
$().css(CSS속성명, CSS속성값) : 선택된 요소에 CSS스타일 적용
$().css({CSS속성명:CSS속성값, CSS속성명:CSS속성값}) : 중괄호{}를 통해 여러개의 CSS스타일 적용
$().addClass(CSS클래스명) : 선택된 요소에 class 속성값을 적용
$().removeClass(CSS클래스명) : 선택된 요소의 class 속성값을 제거
$().toggleClass(CSS클래스명) : 선택된 요소에 class 속성값이 존재하면 제거, 없으면 추가

💬 CSS 속성에 접근할 때는 .css()

//ex)
$('.box').css("backgroundColor", "red");
$('.box').css({
  backgroundColor : "red",
  width : "100px",
  height : "100px"
});

💬 HTML 속성에 접근할 때는 .attr()

//ex)
$('a').attr("href", "https://www.daum.net");
$('img').attr({
  src : "../images/fish.png",
  width : 100,
  height : 100,
  alt : "물고기그림"
});

->.css처럼 .attr도 여러 속성을 중괄호 {}를 통해 적용할 수 있다.
기존 자바스크립트에서는 css에 접근할 때 여러 요소들의 속성을 적용하려면 for문을 써야했다. jQuery는 여러 요소들의 속성도 한 번에 변경할 수 있다.~~(아래 코드 참조)~~

//JS로 처리하는 방법
const lis = document.querySelectorAll('#targetul li');
for(let el of lis){
  el.style.color = 'red';
}

//jQuery로 처리하는 방법
$('#targetul li').css('color', 'red');

📌DOM 트리 관련 메소드

💡DOM 필터링 메소드

$().filter() : 선택된 요소들 중에 필터링 조건을 충족하는 요소를 반환
$().first() : 선택된 요소들 중에 첫 번째 요소를 반환
$().last() : 선택된 요소들 중에 마지막 요소를 반환
$().eq(n) : 선택된 요소들 중에 n번째 요소를 반환
$().has() : 선택된 요소들 중에 특정 자손 요소를 갖는 요소를 반환

💡DOM 트리 엘리먼트 조작 메소드

$().append() : 선택된 요소의 마지막 자식 요소로 추가
$().prepend() : 선택된 요소의 첫 번째 자식 요소로 추가
$().remove() : 선택된 요소를 제거

📌이벤트 메소드

💡이벤트 단축형 메소드

$().click() : 마우스로 클릭할 때 동작
$().hover() : 마우스 포인터가 들어올 때 동작
$().toggle : 마우스를 클릭할 때 두 함수를 번걸아 동작
$().focus() : 포커스를 얻을 때 동작
$().blur)_ : 포커스를 잃을 때 동작
$().keydown() : 키보드를 눌렀을 때 동작
$().ready() : 브라우저에 문서가 읽혀질 때 동작

💬 $(document).ready와 $(document).on

$(document).ready는 DOM이 준비가 되었을 때 click 이벤트를 시작하겠다로 간주할 수 있다. 하지만 동적으로 생성되는 요소에는 반영되지 않는다. 동적으로 생성되는 요소는 버튼 등을 이용해 새로 추가된 태그나 요소 등을 예로 들 수 있다. 이러한 동적 요소에는 이벤트를 어떻게 할당하느냐가 문제인데, $(document).on을 통해 전달할 수 있다. $(document).on은 위 요소부터 아래 요소까지 이벤트가 전해 내려가기 때문이다.

📌사용자 정의 효과 생성

💡animate()

animate(프로퍼티, 초(ms), 함수) : 선택된 요소에 대해 직접 설정한 애니메이션 효과를 적용

🔥연습문제
버튼을 누르면 물고기가 좌우로 움직이게 만들기!

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      font-size: 9pt;
    }

    #panel {
      width: 600px;
      height: 300px;
      border: 1px solid #999;
      position: relative;
    }

    #bar {
      position: absolute;
      left: 50px;
      top: 190px;
      width: 500px;
      height: 20px;
      background: #F30;
    }

    #fish {
      position: absolute;
      left: 50px;
      top: 120px;
    }

    #nav {
      text-align: center;
      width: 600px;
    }
  </style>

  <head>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
      /*
      예제01: 물고기를 현재 위치에서 430px 위치로 부드럽게 움직이도록 시작 버튼을 만들어주세요.
       */

      $(document).ready(function () {
        // 물고기 노드 구하기.
        var $fish = $("#fish");
        let flag = true;

        $("#btnStart").click(function () {
          if(flag){
            $fish.animate({
              left: "430px"
            }, 1000);
            flag = false;
          } else {
            $fish.animate({
              left: "50px"
            }, 1000);
            flag = true;
          }
        });
        
    </script>

  </head>

<body>
  <div id="panel">
    <div id="bar"></div>
    <img src="fish1.png" id="fish">
  </div>

  <div id="nav">
    <button id="btnStart">
      물고기 움직이기
    </button>
  </div>
</body>

</html>

🔽실행 결과

이번엔 물고기의 방향을 바꿔주겠다!

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      font-size: 9pt;
    }

    #panel {
      width: 600px;
      height: 300px;
      border: 1px solid #999;
      position: relative;
    }

    #bar {
      position: absolute;
      left: 50px;
      top: 190px;
      width: 500px;
      height: 20px;
      background: #F30;
    }

    #fish {
      position: absolute;
      left: 50px;
      top: 120px;
    }

    #nav {
      text-align: center;
      width: 600px;
    }
  </style>

  <head>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>

      $(document).ready(function () {
        // 물고기 노드 구하기.
        var $fish = $("#fish");
        let flag = true;
        let leftVal = "50px";
        
      	// 버튼에 이벤트 걸기.
        $("#btnStart").click(function () {
          if(flag){
            $fish.attr("src", "fish1.png");
            $fish.animate({
              left: "430px"
            }, 1000, function(){ //콜백함수(마지막에 물고기 방향을 바꿔줌)
              $fish.attr("src", "fish2.png");
            });
            flag = false;
          } else {
            $fish.attr("src", "fish2.png");
            $fish.animate({
              left: "50px"
            }, 1000, function(){
              $fish.attr("src", "fish1.png");
            });
            flag = true;
          }
        });
        
      })

    </script>

  </head>

<body>
  <div id="panel">
    <div id="bar"></div>
    <img src="fish1.png" id="fish">
  </div>

  <div id="nav">
    <button id="btnStart">
      물고기 움직이기
    </button>
  </div>
</body>

</html>