처음부터 차근차근

jQuery 사용방법 본문

웹개발기초

jQuery 사용방법

HangJu_95 2023. 5. 4. 15:35
728x90

jQuery를 사용하는 이유는??

 - Javascript만 사용하면 복잡하니까 jQuery도 사용하는 것!

 - jQuery는 미리 작성된 Javascript 코드 라이브러리다.

 

예시로

 - document.getElementById("element").style.display = "none";

로 javascript는 작성해야 하지만

 

jQuery로 보다 직관적으로 쓸 수 있다.

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

 

jQuery를 사용방법은 먼저 improt를 해준다

python의 라이브러리와 비슷한 개념으로 알면 된다.

 

연습으로 먼저 text를 삽입하는 방법을 알아보자

<!DOCTYPE html>
<html>

<head>
    <title>자바스크립트 문법 연습하기!</title>
</head>
<style>
    .button-part {
        display: flex;
        height: 50px;
    }
</style>
<script>
        function checkResult() {
            let a = ['사과', '배', '감', '귤']
            $('#q1').text(a[1])
            $('#q1').css('color', 'red')

            let b = { 'name': '영수', 'age': 30 }
            $('#q2').text(b['name'])


            let c = [
                { 'name': '영수', 'age': 30 },
                { 'name': '철수', 'age': 35 }

            ]
            $('#q3').text(c[1]['age'])

    }
</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>

<script> ~ </script> 내부에 checkResult() 라는 함수를 입력하였으며,

$('#아이디값')으로 어떤 html 태그를 바꿀 것인지 지정해줄 수 있다.

예시로 

 

        function checkResult() {
            let a = ['사과', '배', '감', '귤']
            $('#q1').text(a[1]) q1부분의 text를 a[1]으로 변경
            $('#q1').css('color', 'red') q1 부분의 color를 red로 변경

이런식으로 웹페이지를 바꿀 수 있다.

'웹개발기초' 카테고리의 다른 글

jQuery append 사용법  (0) 2023.05.04
Javascript의 반복문, 조건문  (0) 2023.05.04
웹개발에 Javascript를 쓰는 이유  (0) 2023.05.04
Bootstrap 사용방법  (0) 2023.05.04
HTML 주석  (0) 2023.05.04
'웹개발기초' Related Articles more