JQuery

2022.04.28

 

JQuery란, HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔것. 라이브러리

 

JQuery 사용 예시

// js 코드만 사용
document.getElementById("element").style.display = "none";

// jquery 사용
$('#element').hide();

 jquery 사용시 코드가 짧아지고, 더 직관적임

 

JQuery 사용법

jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드입니다. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것입니다! (그렇게 때문에, 쓰기 전에 "import"를 해야합니다!)

https://www.w3schools.com/jquery/jquery_get_started.asp

jQuery Get Started

JQuery 구글 CDN 코드

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

코드를 복사하여 head 태그 사이에 붙여주면 JQuery 사용 준비 끝!

 

JQuery 지칭법

// id 지칭
$("#아이디 값")

// class 지칭
$(".클래스 값")

// css와 동일한 선택자 사용

 

JQuery 여러가지 사용법

// input 박스의 값을 가져오기
$('#post-url').val();

// input 박스의 값 수정
$('#post-url').val("바꿀내용");

// div 보이기 / 숨기기
$('#post-box').hide();
$('#post-box').css('display');

$('#post-box').show();
$('#post-box').css('display');

// 태그 내 텍스트 입력 / 바꾸기
$('#btn-posting-box').text('포스팅 박스 닫기');

 

JQuery로 태그 내 html 입력하기

// 버튼 넣기
let temp_html = '<button>나는 추가될 버튼이다!</button>';
$('#cards-box').append(temp_html);

// div 넣기
let img_url = 'https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg';
let link_url = 'https://naver.com/';
let title = '여기 기사 제목이 들어가죠';
let desc = '기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...';
let comment = '여기에 코멘트가 들어갑니다.';

let temp_html = `<div class="card">
                    <img class="card-img-top"
                        src="${img_url}"
                        alt="Card image cap">
                    <div class="card-body">
                        <a href="${link_url}" class="card-title">${title}</a>
                        <p class="card-text">${desc}</p>
                        <p class="card-text comment">${comment}</p>
                    </div>
                </div>`;
$('#cards-box').append(temp_html);

이때 주의 사항!

html에 문자 중간에 변수를 함께 넣을땐

변수를 먼저 선언 해 준뒤, ${변수명}으로 감싸주어야 들어갑니다

이때 전체를 '',"" 따움표가 아닌 `` 백틱을 써서 감싸 주어야 ${변수명}를 인식 함

그 외로 ${변수명}를 사용 하지 않더라도 `` 백틱을 사용하면 줄바꿈이나 띄어쓰기 중복도 그대로 삽입 가능하니 참고