자바스크립트 + 제이쿼리 입문 day 7

자바스크립트 + 제이쿼리 입문 day 7

---

 

jquery 사용하는 법 

 

jquery.com > download > cdn > google cdn 에서 스니펫 복사하여 붙여넣기 

 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

 

 

스크립트에서 사용하기 => 달러 표시 

 

<script>
      //$('선택자').메서드()
      $('div').css('border', '1px solid red')
      $('div > p').css({
            border : '1px solid blue',
            padding : '1px'
      })
    </script>

 

만약에 cdn을 호출하지 않았다면 콘솔창에서 $를 인식하지 못하는 에러를 띄운다. 

 

---

jquery 에서 css를 사용하는 법 

 

 <script>
      //$('선택자').메서드()
      $('div').css('border', '1px solid red')
      $('div > p').css({
            border : '1px solid blue',
            padding : '1px',
            'font-size' : '2rem',
            // 'background-color' : '#ddd',
            backgroundColor : '#ddd'
      })
    </script>

 

 

eq : nth of = 형제 요소들 중에서 몇 번째를 선택할 것인지 

 

     .eq(0).css('color', 'red')    // .을 이어서 사용 가능 : 앞전 것들이 3개가 존재 
      .eq(1).css('color', 'green')  // 여기서 다시 .을 쓰면 이번에는 하나만 존재 => 선택자가 3개에서 한 개로 바뀐 상황임

 

 

last-child

last 

둘다 가능 

 

      $('div > p:last-child').css('color', 'blue')
      $('div > p:last').css('color', 'green')

 

p태그 0, 2번째에 class를 주고 주지 않은 1번째를 선택해 색깔 변경하기 

    <div>
      <p class="a">선택자 01</p>
      <p>선택자 02</p>
      <p class="a">선택자 03</p>
    </div>
    
    $('div p').not(' .a').css('color', 'purple')

 

 

 

변수에 담아서 사용하기 

   const elP = $('div p');
        elP.css('color', 'black');

 

---

태그 가져오기 

- 부모 : parent

- 자식 : find

- 형제 : siblings

 

- eq : 태그 구조 => 형제들 중 n 번째 

 

- 선택자 제외하기 = not 

 

//$('선택자').메서드()
      $("div").css("border", "1px solid red");
      $("div > p")
        .css({
          border: "1px solid blue",
          padding: "1px",
          "font-size": "2rem",
          // 'background-color' : '#ddd',
          backgroundColor: "#ddd",
        })

        .eq(0)
        .css("color", "red") // .을 이어서 사용 가능 : 앞전 것들이 3개가 존재
        .eq(1)
        .css("color", "green"); // 여기서 다시 .을 쓰면 이번에는 하나만 존재 => 선택자가 3개에서 한 개로 바뀐 상황임

      // 둘다 가능
      $("div > p:last-child").css("color", "blue");
      $("div > p:last").css("color", "green");

      $("div p").not(" .a").css("color", "purple");

      const elP = $("div p");
      elP.css("color", "black");

      const elP2 = "p";
      $(`div ${elP2}`).css("color", "red");

        

      // 선택자 찾기 
        $('div').find('.a').css('background','yellow')      // 자식
        
        $('p').parent().css('border-width', '10px')         // 부모 
        $('p').parents('body').css('background', '#ddd')

        $('p').siblings('.a').css('background', 'red');     // 형제

 

---

 

이미지를 fade 해보자 

 

display none 처리하기 

   $('fade img').not(':first-child').hide();

 

 

fade out 함수를 사용하기 

        $('.fade img').eq(0).fadeOut(1000);

=> fade out : opacity 1 ~ 0 으로 바꾸고, 마지막에 display:none으로 바꾼다. 

 

 

계속 바뀌는 화면 만들기 

// 일정 시간 마다 바뀌게 하기
      let idx =0; 
      setInterval(function () {
                
        
        $(".fade img").eq(idx).fadeOut(1000);
        idx++;
        if (idx==3){
            idx = 0;
        }
        $(".fade img").eq(idx).fadeIn(1000);

      }, 2000);

 

함수로 정리하기 

 

이때 play()로 넣는 것이 아니라 play로 넣는 것이 중요하다 ! 

 

()를 쓰면 실행을 하게 되는데 그것이 아니라 함수 자체를 넣게 되고 setInterval이 2초마다 실행을 하도록 한다. 

 

     let idx = 0;

      let play = function(){
        $(".fade img").eq(idx).fadeOut(1000);
        idx++;
        if (idx == 3) {
          idx = 0;
        }
        $(".fade img").eq(idx).fadeIn(1000);
      }

      setInterval(play, 2000);

 

 

 

start 와 stop 구현하기 

 

  <script>
      $(".fade img").not(":first-child").hide();

      $(".fade img").eq(0).fadeOut(1000);
      $(".fade img").eq(1).fadeIn(1000);


      let imgLoop;
      $(".start").click(function() {
        loop = setInterval(play, 2000);
      });

      $(".stop").click(function() {
        clearInterval(loop);
      });

      // 일정 시간 마다 바뀌게 하기
      let idx = 0;

      let play = function(){
        $(".fade img").eq(idx).fadeOut(1000);
        idx++;
        if (idx == 3) {
          idx = 0;
        }
        $(".fade img").eq(idx).fadeIn(1000);
      }


      
    </script>

 

 

next 와 prev 구현하기 

 

let play = function (state = true) {
        $(".fade img").eq(idx).fadeOut(1000);
        idx++;
        if (state == true) {
          if (idx == 3) {
            idx = 0;
          }
          state = false;
        }

        if (state == true) {
          idx--;
          if (idx == 0) {
            idx = 2;
          }
          state = false;
        }
        $(".fade img").eq(idx).fadeIn(1000);
      };