jQuery

김혜원·2022년 10월 26일

🧩 jQuery 가져오는 방법

jQuery 해당 사이트에 들어가서 주황색 다운로드 버튼을 눌러준다

맨 아래로 내려가 jQuery CDN을 클릭한다

어떤걸 눌러도 상관 없음 주소를 복사해온다

body의 제일 밑 하단에 해당 주소를 스크립트 태그 안에 복붙 작성한다
  <body>

      <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </body>

🧩 js 파일에서 시작 선언문

html 안에 스크립트를 작성하거나 따로 js 파일을 만들어서 작성을 하거나
항상 시작 선언문은

	$(function(){
     	이 안에 작성
    });

이 뜻은 모든 문서 로드 후에 실행하라는 뜻!! 이 스크립트의 위치가 어디든 읽히게 된다

  $(document).ready(function(){
   		이 안에 작성
  });

이것도 같은 의미이다 ㅇㅇ 나는 간단한 첫번째를 사용한다

🧩 기본 사용법

jQuery는 $('')를 이용하여 css선택자를 적용한다 문장 맨 뒤에 세미콜론;은 필수이다

<head>
	<style>
        .box{
            width: 100px;
            height: 100px;
            background: #f00;
            padding: 100px;
            border: 1px solid #000;
        }
        .box.active{
            background: #00f;
        }
    </style>
</head>
<body>
	<div class="box">box</div>
    
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    	$(function(){
        
        	$('.box').hide(); => 숨겨짐
            $('.box').show(); => 나옴 hide로 none 상태였던걸 풀어주는 것 뿐. block이 되는 것은 아님
            $('.box').text(); => 텍스트 입력 가능
            $('.box').html(); => 텍스트 뿐 아니라 태그 입력 가능
            $('.box').fadeOut();
            $('.box').fadeIn();
            // 스르륵 나오거나 사라지는 효과
            $('.box').css('color','#f00');
            $('.box').css({color :'#f00',background : '#0ff'})
            // 첫번째는 하나만 변경 가능 두번째는 복수 선택 변경 가능
            // 두번째 background-color는 따옴표 필수 backgroundColor는 따옴표 없이 가능
            // 두번째 px는 쓰지 않아도 상관없지만 %는 따옴표를 붙여서 작성해야 함
            $('.box').animate({width:200}).animate({height:200});
            $('.box').animate({width:200,height:200});\
            // 연달아서 쓰거나 한번에 작성하면 동시에 스르륵 변하게 됨
            // 괜찮은 라이브러리가 많기 때문에 잘 사용되지 않음
        	$('.box').addClass();
            $('.box').removeClass();
            // 클래스를 달아주거나 없어주는 용도
            $('.box').hasClass(); 
            // boolean 클래스의 유무확인 이 자체로는 어떠한 것도 변화되는 것이 없다
            
            isActive = $('.box').hasClass('active');
            // 작동유무를 확인할 때 isActive 변수명이 많이 쓰임
            console.log(isActive);
            // 콘솔로그를 활용하여 개발자 모드 콘솔에서 클래스의 유무를 확인 할 수 있다
            
            ifelse문
            if(조건 : 참) {
            	실행
            } else { 그렇지 않으면
            	실행
            }
            
            if(isActive) {
            	console.log(1);
            } else { 
            	console.log(2);
            }
            // isActive자체가 active라는 클래스가 있다라는 조건이기 때문에 
            // active가 들어가 있다면 1이 출력. 아니면 2가 출력이 된다
            
            w = $('.box').width(); => 본연의 width값만 출력
            w = $('.box').innerWidth(); => 패딩이 포함된 width값 출력
            w = $('.box').outerWidth(); => 보더까지 포함된 width값 출력
            console.log(w);
            
            x = 1; // 대입
            x == 1; // 비교
            x === 1; // 데이터타입까지 일치
            
           	// object
            // 객체. 데이터 저장. 변수의 선언하는 방식이 다른 것 뿐
            
            human = {
                gender: 'male',
                age : 20,
                height: 200
            }
            
            // human이 15살 이상이고 gender가 male이면서 height이 200이라면
            // 맞습니다 출력
            // 아니면 틀렸습니다 출력
            
            if (human.age >= 15 && human.gender == 'male' && human.height == 200) {
            	console.log('맞습니다');
            } else {
            	console.log('맞습니다');
            }
            
            // || 또는
            // && 그리고
            // undefined 값이 없을때. 값을 할당하지 않은 것
            // null 변수 조차 없는 것
        });
    </script>
</body>