Frontend/Javascript

[Javascript] JQuery 시작하기

worldcenter 2024. 8. 11. 23:16

 

JQuery 란 Javascript를 보다 쉽게 사용하기 위해 이미 만들어진 Javascript를 가져다 사용할 수 있는 라이브러리 입니다.

JQuery를 사용하기 위해서는 JQuery CDN을 Import 해 와야 합니다.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SPARTAFLEX</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    ...
</head>

 

다음과 같이 Javascript로 길게 써야 하는 코드를 간단하게 작성할 수 있습니다.

# 바닐라 자바스크립트
document.getElementById('hello').innerHTML = '안녕';
# JQuery
$('#hello').html('안녕');

 

 

JQuery 연습하기(1)

<!DOCTYPE html>
<html>

<head>
    <title>자바스크립트 문법 연습하기!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<style>
    .button-part {
        display: flex;
        height: 50px;
    }
</style>
<script>
    function checkResult() {
        let c = [
            { 'name': '영수', 'age': 30 },
            { 'name': '철수', 'age': 35 }
        ]
        $('#q1').text(c[1]['name']);
    }
</script>

<body>
    <div class="top-part">
        <h1>자바스크립트 문법 연습하기!</h1>
    </div>
    <hr />
    <br>
    <h2>1. 함수</h2>
    <div class="button-part">
        <button onclick="checkResult()">결과 확인하기!</button>
    </div>
    <div class="list-part">
        <h2>2. 리스트</h2>
        <div id="q1"></div>
    </div>
    <div class="dict-part">
        <h2>3. 딕셔너리</h2>
        <div id="q2"></div>
    </div>
    <div>
        <h2>4. 리스트 딕셔너리</h2>
        <div id="q3"></div>
    </div>
</body>

</html>

 

 

JQuery 연습하기(2)

<!DOCTYPE html>
<html>

<head>
    <title>자바스크립트 문법 연습하기!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<script>
    function checkResult() {
        let people = [
            { 'name': '서영', 'age': 24 },
            { 'name': '현아', 'age': 30 },
            { 'name': '영환', 'age': 12 },
            { 'name': '서연', 'age': 15 },
            { 'name': '지용', 'age': 18 },
            { 'name': '예지', 'age': 36 }
        ]

        $('#q2').empty();

        fruits.forEach(a => {
            let name = a['name'];
            let age = a['age'];
            let temp_html = `<p>${name}는 ${age}살입니다.</p>`;
            $('#q2').append(temp_html);
        });

    }
</script>

<body>
    <div class="top-part">
        <h1>자바스크립트 문법 연습하기!</h1>
    </div>
    <hr />
    <br>
    <h2>1. 함수</h2>
    <div class="button-part">
        <button onclick="checkResult()">결과 확인하기!</button>
    </div>
    <div class="list-part">
        <h2>2. 붙이기</h2>
        <div id="q1">
            <p>사과</p>
            <p>귤</p>
            <p>감</p>
        </div>
    </div>
    <div class="list-part">
        <h2>3. 붙이기</h2>
        <div id="q2">
            <p>영수는 24살입니다.</p>
            <p>세종은 30살입니다.</p>
            <p>수영은 20살입니다.</p>
        </div>
    </div>
</body>

</html>