[💻] Jquery

제이쿼리란??

웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리

📌 제이쿼리 연결할때 연결필수

<script  src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>

<script src="./jquery-1.12.4.min.js"></script>

✏ jquery검색해서 버전 선택하면 됨

→ cdn 1.X버전이 제일 무난하다

복사해서 비트스터디에 넣어보고 주소를 검색해서 나온걸 다른이름으로 저장해서 내가 쓸 파일이랑 연동하기

🔑 중요 단축키

console.log(' '); -> ctrl + shift + L

alert( ); -> ctrl + shift + A

보기좋게 정리 -> ctrl + shift + 9

if,else -> ifel

$('. ') -> ctrl + shift + W

function( ){ } -> ctrl + shift + F =실행하다

🔑 $(function ( ){ }; -> 딱 한번만 선언됨, 모든 문서를 로드후에 실행

자바 국룰→ 자바를 제일 마지막에 실행시킴으로 제일 밑(body밑)에다 두는게 좋다

✏ es버전

[es6] 구형브라우저에서는 안됨
       1.const - 상수,고정변수,변하지않는 값
       2.let - 제할당가능
         let x = 5
             x = 6

[es5] 오래된거라 잘안씀
       3.var - 변수 선언문

---

📃 여러 기능

✏ document에 직접적으로 내용 바꾸기

$('.name').text('바꾸자')
$('.name').html('<h1>assdas</h1>') -> h1태그로 assdas 추가

✏ 변수 선언해서 꾸며주기

w = $('.name').width();  //순수 width
w = $('.name').innerWidth(); //패딩포함
w = $('.name').outerWidth(); //패딩+보더포함
		console.log(w);

✏ 숨김 이벤트

$('.name').hide().show(); ->.은 그리고 라는 뜻, 잘안씀

		hide – display: none
		
		show - display: block ,inline...원래 상태로 보여주는거임

$('.name').fadeOut(); ->서서히 사라짐, 0.3초가 기본값임, 잘안씀

$('.name').fadeOut().fadeIn(1000); -> 사라졌다 나타남, 1000은 1초

착각할수있다!

show는 원래 상태로 보여주는거지 무조건 block이 되는게 아니다!!

.hide() –> display: none

.show() → display: block ,inline

🔥 css꾸미기

$('.name').css({width:100,height:1000});

$('.name').animate({width:100+'%'},1000); ->‘%’를 따옴표로 감싼 이유는 문자형식이라서

$('.name').addClass('aaa').removeClass('aaa');

console.log($('.name').hasClass('aaa')); 
-> 글래스 aaa를 가졌냐고 질문하는 것, true랑 false로만 대답해줌

💡 .addClass('aaa').removeClass('aaa')는 클래스 선택자이기 때문에 다른애들처럼 ‘ ’안에 . 안 넣음

• 클래스를 따로 안만들었어도 클래스를 줄 수 있다

• 쉽게 생각해서 클래스를 그냥 추가해준거임,

removeClass안에 클래스를 안주면 모든 클래스가 다사라짐

✏ 조건문

if ($('.name').hasClass('aaa')) {
    console.log('yes');
} else {
     console.log('no');
 }

if (조건:참일때) {
     실행
} else { 그렇지 않을 때 실행
   }

→ 클래스 name에 aaa가 있다면 yes 없다면 no가 나와라

✏ 기본 변수들

변수

변수 x = 1;

x=변수여서 ""들어가지않음, 변수는 한글도 가능

문자형(String )

"ㅇㄴㄷㄹ",'ㅇㄴㄹ' → "",’’들어감

숫자형(number)

1,2,3.. number숫자 → "" 들어가지 않음

숫자랑 문자랑 합쳐지면 문자가됨

논리형(Boolean)

데이터는 주로 2개의 데이터를 비교할 때 나오는 결과

true,false만 나옴 → "" 들어가지않음

💡 < if( ! 조건문) > !가 붙으면 조건문은 반전

Object, 연산자

x=1 대입연산자

x==1 x는 1과 일치하냐

x===1 x는 1과 데이터타입(숫자,문자)까지 일치하냐

< 초과
> 미만
<= 이상
>= 이하
&& - 그리고 ->모든게 참이여야함

|| -> 또는 or ->(백스페이스 밑에 돈모양 + shift) 하나만 참

• [문제] 사람 = { 나이:68, 성별:'남자', 목뒤에점:true, }
  // 나이 50이상 성별 남자 목뒤에 점 체포,안녕히가세요를 표현하시오
  

    if (사람.나이 >= 50 && 사람.성별 =='남자' && 사람.목뒤에점 ==true) {
        console.log('체포');
    } else {
        console.log('안녕히가세요');
    }

---

🍺많이쓰는 실전 팁

📌 aside 메뉴

1. animate을 이용하여 수치 입력하기 +클릭이벤트

$(function () {
            
            $('.btn-menu').click(function(e){
                e.preventDefault();//링크이동막기
                $('.menu-area').animate({left:0},300)
            })

            $('.btn-close').click(function(e){
                e.preventDefault();//링크이동막기
                $('.menu-area').animate({left:-100+'%'},300)
            })
    });

클래스에 직접 움직이라고 준다.
아이디보다 높기 때문에 !important줘야하는데 쓰는순간 망조ㅠ
-> 왜냐면 important가 모든애들을 다 이겨버리기 때문에 안쓰는게 좋다.

⭐a태그 이벤트 막기⭐

a태그에 이벤트를 걸때는 a태그가 갖고있는(새로고침되는) 이벤트를 막아줘야한다.

1. a태그에 #을 넣어준다. (맨위로 가서 별로 안좋음)
2. <a href="javasceipt:;" class="btn-menu">메뉴</a> →추천하지 않음
   <a href="javasceipt:void(0);" class="btn-menu">메뉴 →추천하지 않음
3. function(e){ e.preventDefault(); } →추천⭕, 링크이동 막아주기

• ! important는 최대한 쓰지 않도록한다.

2.⭐클래스 추가⭐ -> 추천👍

$(function () {
            
            $('.btn-menu').click(function(e){
                e.preventDefault();//링크이동막기
                $('.menu-area').addClass('active')
            })

            $('.btn-close').click(function(e){
                e.preventDefault();//링크이동막기
                $('.menu-area').removeClass('active')
            })
    });

클래스를 추가하는게 더 좋음, 나중에 미디어쿼리를 줄 때 편하다.

• 움직이려는 영역에 속도 transition: 0.5s;를 주고 .active{ left: 0; } 엑티브란 클래스를 만들어서 넣었다 뺐다 해준다

📌 아코디언

1. 호버시 다같이 슬라이드

$(function () {
            $('.gnb > li').hover(function(){//마우스올렸을때
                $('.gnb ul').stop().slideDown();
            }, function(){//땠을때
                $('.gnb ul').stop().slideUp();
            })
        });

• .stop()을 넣어줘야지 마우스를 여러번 호버해도 버벅이지 않는다.
• 호버되어 숨겨진 이벤트는 display:none을 해줘야한다
  → 시각장애인들 탭 이동땜에
• 서브메뉴들은 붕떠있어야한다.

.slideUp → 선택한 요소의 CSS height 속성값을 높여가며 사라지게 한다.
.slideDown → 선택한 요소의 CSS height 속성값을 낮춰가며 나타나게 한다.

2. 호버시 내가 선택한 객체가 슬라이드

$(function () {
            $('.gnb > li').hover(function(){//마우스올렸을때
                $(this).children('ul').stop().slideDown();
            },
            function(){//땠을때
                $('.gnb ul').stop().slideUp();
            })
        });

• this → 내가 호버한 이것
  
  

📌 탭 메뉴-1

1. ID이용

<div class="tap-nav">
        <a href="#tab1" class="active">디테일</a>
        <a href="#tab2">리뷰</a>
        <a href="#tab3">문의</a>
    </div>

    <div class="tab-cont">
        <div id="tab1" class="cont active">내용1</div>
        <div id="tab2" class="cont">내용2</div>
        <div id="tab3" class="cont">내용3</div>
    </div>

• 아이디를 이용하여 연결해준다 → 아이디는 #

$(function () {
            $('.tap-nav a').click(function(e){ //e->event
                e.preventDefault();

                변수 = $(this).attr('href'); /*href의 속성의 값(#tab1)  */ ->내가 클릭한 태그의 값
                $(this).addClass('active').siblings().removeClass('active');

                $(변수).addClass('active').siblings().removeClass('active'); ->내용물
                /* 나를 제외한 클래스 없애기 */
            })
        });

클릭할때마다 값이 달라져야함으로 변수를 만들어주는거

• 클릭할때마다 값이 달라져야함으로 변수를 만들어 주어야한다.
• [ .attr ] 의미는 attribute (모든속성)
• siblings → 형제
  
  

💡🤔

• 왜 add랑 remove랑 같이 써놓은걸 두번 쓸까?
  -> 클릭하려는 애가 'active' 클래스를 추가해주고 나말고 다른애들은 갖고있으면 안되기 때문에 나를 제외한 클래스를 없애주는 거다.
  
  

1. data-target이용

<div class="tap-nav">
        <a href="#" data-target="#tap1" class="active">디테일</a>
        <a href="#" data-target="#tap2">리뷰</a>
        <a href="#" data-target="#tap3">문의</a>
    </div>

    <div class="tab-cont">
        <div id="tap1" class="cont active">내용1</div>
        <div id="tap2" class="cont">내용2</div>
        <div id="tap3" class="cont">내용3</div>
    </div>

$(function () {
            $('.tap-nav a').click(function(e){
                e.preventDefault();

                변수 = $(this).data('target');/* 임의로 a속성준거? 데이타 셋? 이거의 타겟이 누구다라고 임의로 설정*/
                $(this).addClass('active').siblings().removeClass('active');

                $(변수).addClass('active').siblings().removeClass('active');
            })
        });

📌 탭메뉴-2

<ul class="gnb">
        <li>
            <a href="" class="link-gnb">대메뉴</a>
            <ul class="sub">
                <li><a href="">서브1</a></li>
                <li><a href="">서브2</a></li>
                <li><a href="">서브3</a></li>
            </ul>
        </li>
        <li>
            <a href="" class="link-gnb">대메뉴</a>
            <ul class="sub">
                <li><a href="">서브1</a></li>
                <li><a href="">서브2</a></li>
                <li><a href="">서브3</a></li>
            </ul>
        </li>
</ul>

$(function () {
            $('.gnb .link-gnb').click(function(e){
                e.preventDefault();
                
                // $('.sub').stop().slideUp();
                // $(this).siblings('.sub').stop().slideDown();
				//->얘네는 다시 클릭하면 안닫힘
                
                /* 현재 css의 상태 */
                if ($(this).siblings('.sub').css('display') == 'none') {
                    $('.sub').stop().slideUp();/* 다 닫힘 */
                    $(this).siblings('.sub').stop().slideDown();
                    
                } else {
                    $('.sub').stop().slideUp();
                }
            })
        });

$('.sub').stop().slideUp(); 가 없으면 메뉴 클릭시 다른메뉴들은 닫히지 않고 어느 메뉴를 클릭해도 다같이 닫힌다.

⭐ 항상 컴퓨터가 읽히는 순서 생각해서 코드짜기

💡🤔

• 'display') == 'none' 확인하려는 이유는?
  → 내가 클릭하려는 애가 열렸는지 안열렸는지 확인할라고
  
  

📌 스크롤이벤트

<header>
  헤더
</header>

<main>
  <div>1@@2</div>
  <div>1@@2</div>
  <div class="here">1@@2</div>
  <div>1@@2</div>
  <div>1@@2</div>
</main>

• 실행하고자하는 here은 미리 넣어놓기

$(function () {
            
            $(window).scroll(function(){

                curr = $(this).scrollTop(); /* 현재 스크롤바의 위치 */
                target = $('.here').offset().top; /* 문서전체에서 태그의 시작위치 */
                $('header').text('현재스크롤:'+curr);

                if (curr >= target) {
                    $('header').addClass('hide')
                } else {
                    $('header').removeClass('hide')
                }
            })

            $(window).trigger('scroll'); /* 첫화면에서 바로 체크 */

        });

.trigger – 화면 시작하자마자 실행하라는 뜻, 혹시 중간에 새로고침하면 스코롤이벤트가 실행안될까봐

📌 swiper

-> 다양한 프레임워크에서 이미지나 페이지의 슬라이딩 혹은 스와이핑을 역동적으로 사용할 수 있게 도와주는 널리 사용되는 슬라이더 플러그인 중의 하나입니다.

✔swiper의 장점

👉 최소한의 구성으로 네비게이션 구현이 가능하여 간편하다
👉 Swiping 기능이 내재되어 있어 반응형 사이트에서 사용하기 좋다

• ctrl + b –빨간 체크부분 없애기

• plugin - 기능하나를 위한 코드의 집합

✏ 사용법

1. 스크립트 src, css link 가져온다.
   -> 필수, 없으면 실행 안됨

2. 마크업

3. 스크립트 실행문 가져옴
   -> 스와이퍼 주소 가져올 때 제이쿼리보다 밑에 두는게 좋음

4. 알맞은 옵션 추가한다.

🔑 옵션

loop : true // 슬라이드가 무한으로 재생
allowTouchMove : false // 마우스 드래그가 가능하도록 기본 설정이 되어 있지만 false로 적용하여 드래그를 방지

autoPlay : 자동재생 옵션
delay : 2500 // 2.5초 후에 다음 슬라이드 진행
speed : 500 // 0.5초의 속도로 슬라이드 진행
disableOnInteraction : 스와이프 후 자동재생이 비활성화 되지 않음

el : 엘리먼트
pagination: el은 페이지네이션으로 쓸 클래스명이고, 타입도 설정할 수 있다
navigation: 네비게이션 화살표. el은 네비게이션 클래스명을 설정해주면 되는데 변경하지 않고 기존설정대로 사용하려면 swiper-button-prev, next를 써 주면 된다.
slidesPerView : 화면에 몇 개 보이게 할꺼냐
ex) 화면에 1.5개씩 2.5개씩

• 스와이퍼 자체에 position – relative 들어있음

🔑 슬라이드 작동 안될때 확인해야 할 것

1. 클래스명 오류
2. 구조 오류
3. 오타
4. 스크립트와 정상적으로 연결되었는가
5. swiper이름 중복된 것 아닌가