티스토리 뷰

유료강의/국비지원

웹퍼블리셔 기본 8일차 - js파일 로드, 자주 쓰는 제이쿼리 메소드

2021bong 2021. 9. 30. 19:06 
li p.active { /*자기 자신의 클래스를 가리킬 때*/
  display: block;
  background-color: #f8e7ee;
}

li p .active { /*자식 요소의 클래스를 가리킬 때*/
  display: block;
  background-color: #f8e7ee;
}

 

js 파일이 html 파일보다 먼저 읽혀서 원하는데로 실행이 안될 때

// 지금 많이 사용하지는 않지만 알고 있기

$(document).ready(function(){
  // 문서가 로드된후에 실행
});

$(function(){
  //간략하게 쓸 때
});

 

<!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>
  <script defer src="methods.js"></script> <!-- defer 입력 -->
</head>

<!-- 요즘은 이 방법을 자주 쓴다 -->

 

 

안보였다 클릭하면 보이게 하기

.show(); 사용

// 안보였다 클릭하면 보이게 하기
$('.faq li').click(function(){
 $(this).find('p').show(); // .show(); = display:block
 //li 안에 모든 요소들 중 p요소를 찾아서 display:block 
 //.find(); = 안에 있는 모든 요소들 중에 찾음

 $(this).children('p').show();
 //li 안에 자식요소들 중 p 요소를 찾아서 display:block 
 //.children(); = 자식요소들 중에 찾음
});

.slideDown(); 사용

$('.faq li').click(function(){
 $(this).find('p').slideDown(); 
 // .slideDown();의 주요 기능 3가지
 // display: block
 // opacity: 0 => opacity: 1
 // height: 0 => height:100%
 // 그 외에도 overflow, padding, margin 등등이 있음
});

.slideToggle(); 사용

$('.faq li').click(function(){
 $(this).find('p').slideToggle(); //.slideToggle();
 // p요소가 1번 클릭 => slideDown(), 2번 클릭 => slideUp()를 다 해줌
});

.fadeIn(); 사용

$('.faq li').click(function () {
  $(this).find('p').fadeIn(); //.fadeIn();
  // p요소가 서서히 opacity: 0 => opacity: 1 로 변하면서 나타남
});

.fadeToggle(); 사용

$('.faq li').click(function () {
  $(this).find('p').fadeToggle(); //.fadeToggle();
  // p요소가 1번 클릭 => fadeIn(), 2번 클릭 => fadeOut()를 다 해줌
});

.addClass(); 사용

$('.faq li').click(function () {
  $(this).find('p').addClass('active'); //.addClass('class-name');
  // p요소에 active 클래스 추가 (준비해 둔 css 코드 사용)
});

.toggleClass(); 사용

$('.faq li').click(function () {
  $(this).find('p').toggleClass('active'); //toggleClass('class-name');
  // 1번 클릭 => active 클래스 추가, 2번 클릭 => active 클래스 삭제
});

 

 

메소드를 활용한 예제 만들어보기

버튼을 누르면 움직였다가 돌아오기

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=\, initial-scale=1.0">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
  <style>
    .box {
      border: dashed 1px #000;
      width: 100px;
      height: 100px;
      transition: 0.5s;
    }

    .box.move {
      transform: translateX(-200px);
    }
  </style>

  <article class="toggle">
    <div class="box"></div>
    <button>토글</button>
  </article>

  <script>
    $('.toggle button').click(function () {
      $('.box').toggleClass('move');
    });
  </script>
</body>

</html>

+클릭하고 바로 클래스값으로 받아와서 적용시키면 되는데 이전 예제때문에 헷갈려서 굳이 따라가면서 .find()로 찾고 있었음ㅠㅠ 정신차려....

 

 

 

+

숙제

누를 때마다 메뉴가 따라오게 하기

<!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>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<style>
  .tab a {
    display: inline-block;
    padding: 15px;
    background: #000;
    color: #fff;
  }

  .content {
    position: relative;
  }

  .content div {
    position: absolute;
    left: 0;
    top: 0;
    display: none;
    padding: 200px;
    border: 1px solid #000;
  }

  .tab a.active {
    background: #f00;
  }

  .content div.active {
    display: block;
  }
</style>

<body>
  <article class="tab">
    <h2>Tab</h2>
    <nav>
      <a class="active">HOME</a>
      <a>COMPANY</a>
      <a>SERVICE</a>
    </nav>
    <div class="content">
      <div class="active">HOME PAGE</div>
      <div>COMPANY PAGE</div>
      <div>SERVICE PAGE</div>
    </div>
  </article>
<script>
$('.tab a').click(function(){
  let index = $(this).index();
  $('.tab a').removeClass('active');
  $('.tab a').eq(index).addClass('active');
  
  $('.content div').removeClass('active');
  $('.content div').eq(index).addClass('active');
})
</script>

</body>

</html>
728x90

'유료강의 > 국비지원' 카테고리의 다른 글

웹퍼블리셔 기본 10일차 - 문자열 함수  (0) 2021.10.06
웹퍼블리셔 기본 9일차 - 브라우저 메소드  (0) 2021.10.05
웹퍼블리셔 기본 7일차 - 제이쿼리 메소드 및 활용  (0) 2021.09.29
웹퍼블리셔 기본 6일차 - 날짜함수, 제이쿼리  (0) 2021.09.28
웹퍼블리셔 기본 5일차 - switch 문, selector, 날짜함수  (0) 2021.09.27
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함