웹퍼블리셔 기본 9일차 - 브라우저 메소드

사용자 속성 data-

  <article class="tab">
    <h2>Tab</h2>
    <!--사용자속성을 이용해서 매칭-->
    <nav>
      <a data-index="0" class="active">HOME</a>
      <a data-index="1">COMPANY</a>
      <a data-index="2">SERVICE</a>
    </nav>
    <div class="content">
      <div data-index="0">HOME PAGE</div>
      <div data-index="2">SERVICE PAGE</div>
      <div data-index="1">COMPANY PAGE</div>
    </div> 
  </article>

+

특정한 데이터를 DOM 요소에 저장해두기 위함이 목적

데이터 속성의 장점 > 이전과 같이 hidden으로 태그를 숨여두고 데이터를 저장할 필요가 없다는 점

어느 엘리먼트에서나 data-로 시작하는 속성은 무엇이든 사용할 수 있음

한 태그에 여러 데이터 속성을 넣을 수 있음

<input type="text" data-value="1"  data-code="3">

대소문자 여부에 상관없이 xml로 시작하면 안 됨

세미콜론 포함 안됨

대문자를 포함 안됨

---

  <article class="fade">
    <div>
      <img src="https://dbscthumb-phinf.pstatic.net/5109_000_8/20200623172819929_V4QH0HM6B.png/npcnmlsqu15.png?type=m1500_q100" alt="다람">
      <img src="https://dbscthumb-phinf.pstatic.net/5109_000_8/20200623172832262_900CTRPPX.png/npcnmlsqu02.png?type=m1500_q100" alt="리키">
      <img src="https://dbscthumb-phinf.pstatic.net/5109_000_8/20200623172933663_WLFW9OBWC.png/npcnmlsqu17.png?type=m1500_q100" alt="쭈니">
    </div>
  </article>

 

.not()

$('.fade div img').not(':first').hide(); // img중에서 첫번째를 제외하고 display:none;
$('.fade div img').not(':last').hide(); // img중에서 마지막을 제외하고 display:none;
$('.fade div img').not(':odd').hide(); // img중에서 짝수번째를 제외하고 display:none;
$('.fade div img').not(':2').hide(); // img중에서 2번째를 제외하고 display:none;

//여러 값 사용가능

 

$('.fade div img').not(':first').hide(); // img중에서 첫번째를 제외하고 display:none;
$('.fade div img').eq(0).fadeOut(1000); // 0번째 이미지를 1초동안 fadeOut
$('.fade div img').eq(1).fadeIn(2000); // 1번째 이미지를 2초동안 fadeIn

 

setInterval()

//반복문
setInterval(function(){
 //안에 들어있는 명령을
},2000)
//2초주기로 계속해서 실행

 

//0, 1, 2번째 사진을 번갈아가면서 나오도록 하기
$('.fade div img').not(':first').hide(); // img중에서 첫번째를 제외하고 display:none;
$('.fade div img').eq(0).fadeOut(1000); // 0번째 이미지를 1초동안 fadeOut
$('.fade div img').eq(1).fadeIn(1000); // 1번째 이미지를 1초동안 fadeIn

let num = 0;
setInterval(function () {
  $('.fade div img').eq(num).fadeOut(1000);
  num++;
  if(num === 3){
    num = 0;
  }
  $('.fade div img').eq(num).fadeIn(1000);
}, 2000)

 

let num = 0;
setInterval(function () {
  fade();
}, 2000)

function fade() {
  $('.fade div img').eq(num).fadeOut(1000);
  num++;
  if(num === 3){
    num = 0;
  }
  $('.fade div img').eq(num).fadeIn(1000);
} // 함수로 선언

 

let num = 0;
setInterval(fade, 2000); // 함수라면 이렇게 표현도 가능

function fade() {
  $('.fade div img').eq(num).fadeOut(1000);
  num++;
  if(num === 3){
    num = 0;
  }
  $('.fade div img').eq(num).fadeIn(1000);
}

 

setInterval(fade, 2000); // 2초 후에 실행
setInterval(fade(), 2000); // 바로 실행

---

clearInterval()

let autoPlay = setInterval(fade, 2000);

clearInterval(autoPlay); // setInterval 함수를 멈추기

 

마우스를 올렸을 때 멈추기

$('.fade div').mouseenter(function(){
  clearInterval(autoPlay);
})

 

마우스를 내리면 다시 작동하게 하기

$('.fade div').mouseenter(function(){
  clearInterval(autoPlay);
})

$('.fade div').mouseleave(function(){
  autoPlay = setInterval(fade, 2000);
})

 

둘을 합해서 쓰기

$('.fade div').on({
  mouseenter : function(){
    clearInterval(autoPlay); // 인자 값이 있으면 function(){}안에 넣어줘야함
  },
  mouseleave : loop //()를 넣어주면 바로 실행
})
// 인자 값을 넣으려면 ()가 있어야 해서 바로 실행하니까 안으로 넣기

 

function clear(){
  clearInterval(autoPlay); // 이렇게 넣어서도 가능
}

$('.fade div').on({
  mouseenter : clear,
  mouseleave : loop
})

자주 써야하는 기능들은 함수로 표현하여 반복하여 쓸 수 있도록 하는 것이 좋다.

 

---

attr()

  <article class="attr">
    <figure><img src="https://dbscthumb-phinf.pstatic.net/5109_000_8/20200623172929010_RU4ZUOMZX.png/npcnmlcat23.png?type=m1500_q100" alt="잭슨"></figure>
    <div>
      <img src="https://dbscthumb-phinf.pstatic.net/5109_000_8/20200623172929010_RU4ZUOMZX.png/npcnmlcat23.png?type=m1500_q100" alt="잭슨">
      <img src="https://dbscthumb-phinf.pstatic.net/5109_000_8/20200623172934802_74U8OAWBC.png/npcnmlcat20.png?type=m1500_q100" alt="찰스">
      <img src="https://dbscthumb-phinf.pstatic.net/5109_000_8/20200623172858240_1XGKLAPQ6.png/npcnmlcat06.png?type=m1500_q100" alt="빙티">
    </div>
  </article>

 

//attr
$('.attr div img').click(function(){
  $('.attr div img').removeClass('active');
  $(this).addClass('active');
  let thumSrc = $(this).attr('src'); // src를 받아오기
  $('.attr figure img').attr('src',thumSrc); // 큰 이미지를 받아온 src로 변경해주기
})