뚝딱햄 탈출기

[JavaScript] jQuery 제이쿼리 본문

web

[JavaScript] jQuery 제이쿼리

hyrmzz1 2023. 10. 9. 21:59

jQuery란?

HTML 요소들을 조작하는 편리한 JavaScript 라이브러리.

 

JavaScript와 다른 특별한 소프트웨어가 아니라 미리 작성된 코드를 모아둔 것이다. (라이브러리니까!)

직접 JS 코드를 작성해 모든 기능을 구현할 수도 있으나, 이 경우 코드가 복잡하고 브라우저 간 호환성을 직접 고려해야 하는 등의 문제가 있으므로 전문 개발자가 작성한 라이브러리를 가져와 사용하면 편리하다.

jQuery 사용법

jQuery를 사용하려면 미리 작성된 JavaScript 코드를 임포트해와야 한다.

 

내 컴퓨터에 해당 파일을 저장해 사용할 수도 있으나, 부트스트랩 CSS 파일을 가져올 때와 마찬가지로 온라인 상의 파일을 참조할 수도 있다.

<head> 내에 아래 코드를 넣으면 된다. (부트스트랩을 쓸 때 이미 임포트해왔던 4개의 파일 중 하나이다.)

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" 
	integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
	crossorigin="anonymous"></script>

 

임포트 후 jQuery를 사용할 수 있는데,
CSS와 마찬가지로 특정 요소를 가리켜야 조작할 수 있다.

CSS에서는 선택자로 주로 class를 사용하나, jQuery에서는 선택자로 고유한 하나의 요소를 가리키는 id를 주로 사용한다.

Bootstrap과 jQuery를 함께 사용할 때

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
    integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous" />
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
    integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
    crossorigin="anonymous"></script>

위 코드로 import 해줘야 사용가능!

bootstrap import 코드로는 둘의 작동이 부딪히는지 jQuery가 적용되지 않는다.

jQuery와 순수 JavaScript 코드 비교

// element란 id를 가진 요소 감추기

// 순수JS
document.getElementById("element").style.display = "none";

// JQ
$('#element').hide();

자주 사용되는 jQuery

값 가져오기

// <input id = "post-url">의 값 가져오기

// id 값이 post-url인 곳을 가리키고, val()로 값을 가져온다.
let url = $('#post-url').val();
url	// id 값이 post-url인 input 박스 안에 적혀있는 내용 출력.

// input 박스에 적혀있는 글을 바꾸고 싶다면
$('#post-url').val("새 글입니다.");

요소 숨기기 / 나타내기

// <div id = "post-box"> 를 숨기기
$('#post-box').hide();

// <div id = "post-box"> 를 나타내기 (보이게 하기)
$('#post-box').show();

개발자도구의 Element 탭에서 해당 div에 적용 된 CSS 중 display 속성을 통해 div가 없어진 상태일 땐 none, div가 나타난 상태일 땐 block 인 것을 확인할 수 있다.

CSS 속성 값 가져오기

Element 탭을 보지 않고도 직접 CSS의 display 속성이 변하는 것을 볼 수 있다.

$('post-box').hide();
$('post-box').css('display');	// none

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

태그 내 텍스트 입력하기

input 박스 안에는 .val() 메서드를 이용해 값을 입력할 수 있으나,

대부분의 경우는 시작태그와 종료태그 사이에 있는 텍스트가 화면에 표시된다. 이 텍스트는 .text() 메서드를 이용해 접근할 수 있다.

// <button id = "btn-posting-box" type = "button">포스팅박스 열기</button> 의 텍스트 바꾸기
let btn-text = $('#btn-posting-box').text();
btn-text	// '포스팅박스 열기' 가 출력됨.
$('#btn-posting-box').text('포스팅박스 닫기');	// 버튼 내의 텍스트 변경됨.

태그 내 html 입력하기

특정 태그 안에 새로운 html 요소를 동적으로 추가하고 싶을 때는 .append() 메서드를 사용한다.

<div id = "cards-box" class "card-columns">
	<div class = "card"> ... </div>
	<div class = "card"> ... </div>
	<div class = "card"> ... </div>
	<div class = "card"> ... </div>
	<div class = "card"> ... </div>
	<div class = "card"> ... </div>
</div>

위의 <div id = "cards-box">에 텍스트를 넣어보자.

// 카드들 뒤에 텍스트 삽입
$('#cards-box').append("추가 텍스트");

위의 코드를 실행하면 아래와 같이 텍스트가 추가된다.

<div id = "cards-box" class "card-columns">
	<div class = "card"> ... </div>
	<div class = "card"> ... </div>
	<div class = "card"> ... </div>
	<div class = "card"> ... </div>
	<div class = "card"> ... </div>
	<div class = "card"> ... </div>
	추가 텍스트
</div>

 

새로고침 후, <div id = "cards-box">에 버튼을 넣어보자.

백틱(`)을 사용한다. 백틱에 관한 내용은 아래 포스팅 참고

2023.08.08 - [Programming language/JavaScript] - [JavaScript] 템플릿 리터럴 : 문자열 내에 변수 삽입, 백틱(`)

 

[JavaScript] 템플릿 리터럴 : 문자열 내에 변수 삽입, 백틱(`)

템플릿 리터럴은 문자열 내에 변수를 쉽게 삽입하기 위해 사용. 일반적인 문자열과 달리 백틱(`) 문자로 감싸지며, '${}' 안에 변수명을 작성해 사용한다. const student = { id: "hyrmzz1", grade: 4 }; const gre

hyrmzz1.tistory.com

// 카드들 뒤에 버튼 삽입
let temp_html = `<button>추가 버튼</button>`;	// 백틱 사용해야 함.
$('#cards-box').append(temp_html);

위의 코드를 실행하면 아래와 같이 버튼이 추가된다.

<div id = "cards-box" class "card-columns">
	<div class = "card"> ... </div>
	<div class = "card"> ... </div>
	<div class = "card"> ... </div>
	<div class = "card"> ... </div>
	<div class = "card"> ... </div>
	<div class = "card"> ... </div>
	<button>추가 버튼</button>
</div>

 

여러 줄의 html인 <div class = "card">를 넣어보자.

let img_url = 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/368px-Google_2015_logo.svg.png';
let link_url = 'https://google.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);

페이지 로딩이 완료되면 실행하기

페이지가 로딩되자마자 특정 기능이 실행되기를 원한다면 아래와 같이 작성해주면 된다.

<script>
	$(document).ready(function(){
		alert('페이지가 로딩되었습니다.')
		}
	);
</script>
저작자표시 비영리 변경금지

'web' 카테고리의 다른 글

[기술면접대비] 브라우저의 동작 원리와 페이지 렌더링 과정  (0) 2024.03.14
[기술면접대비] BOM, DOM, Virtual DOM  (0) 2024.03.13
Ajax : 개념, 실습  (0) 2023.10.09
부트스트랩 Bootstrap : 개념, 실습  (2) 2023.10.08
[html] 로그인 화면 만들기 : form, input, label, button, submit  (0) 2023.10.08
'web' Related Articles more
Comments