JQuery

document 객체 라이브러리이며 DOM 제어를 위한 라이브러리이다.

 

 

 

예시

$("#my-div").css("backgroundColor", "red");

css 메서드는 디자인을 바꾸는 style 속성을 변경하는 메서드이다.

$는 JQuery 메서드의 별칭이고 JQuery에서 html 요소를 선택하는 함수이다.

해당 코드는 아이디가 my-div인 요소를 선택해서 css 메서드로 배경색깔을 빨간색으로 바꾸는 코드이다.

 

 

jQuery("#my-div").css("backgroundColor", "red");

위에서 말한 것 처럼 $는 JQuery 메서드의 별칭이다. 따라서 다음과 같이 작성도 가능하다.

 

 

document.getElementById("my-div").style.backgroundColor='red';

위에서 작성한 JQuery 코드를 DOM 형식으로 작성한 결과이다.

'JQuery' 카테고리의 다른 글

[JQuery] val메서드, getter, setter  (0) 2024.11.18
[JQuery] ready 함수  (0) 2024.11.13
[JQuery] prev, prevAll, next, nextAll, siblings, even, odd  (0) 2024.11.11
[JQuery] 세팅과 사용  (1) 2024.11.07

https://cdnjs.com/libraries/jquery

 

jquery - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

JavaScript library for DOM operations - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make

cdnjs.com

여기서 주소 복사 후 주소창에 검색해서 다른이름으로 원하는 폴더 안에 저장한다.

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #my-div{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
    <!-- 받은 jquery 파일 불러오기 -->
    <script src="./js/jquery.min.js"></script>

    <script>
        // 색상을 빨강으로 변경
        function func() {
            $("#my-div").css("backgroundColor", "red");
        }
    </script>
</head>
<body>
    <div id="my-div">

    </div>
    <button onclick="func()">클릭하기</button>
</body>
</html>

 

스크립트로 받은 jquery 파일을 불러온다. 다음과 같이 jquery를 이용해 css를 건드려 div의 색상을 빨강으로 변경할 수 있다.

 

 

 

    <!-- 받은 jquery 파일 불러오기 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

 

만약 위 방법이 번거롭다면, 그냥 저 사이트에 있는 주소 그대로 복사 붙여넣기 해도 된다.

'JQuery' 카테고리의 다른 글

[JQuery] val메서드, getter, setter  (0) 2024.11.18
[JQuery] ready 함수  (0) 2024.11.13
[JQuery] prev, prevAll, next, nextAll, siblings, even, odd  (0) 2024.11.11
[JQuery] $ 메서드와 css 메서드 선택자  (0) 2024.11.08

MVC 패턴

MVC (모델 - 뷰 - 컨트롤러) 는 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴이다.

 

 

 

Model(모델) : 데이터와 비즈니스 로직을 처리한다. 사용자가 편집하길 원하는 모든 데이터를 의미한다.

View(뷰) : 사용자에게 보여지는 UI부분이다. 즉, 데이터를 시각적으로 표현하는 역할을 한다.

Controller(컨트롤러) : 사용자의 입력을 처리하고 모델과 뷰를 연결하는 역할을 한다.

 

 

쉽게 이야기하자면 모델은 요리사이다. 식재료(데이터)를 가지고 요리(처리 결과)를 만들어내는 역할을 한다.

 

뷰는 접시이다. 접시는 요리사가 만든 요리를 담아 손님(사용자)에게 보여주는 역할을 한다.

 

컨트롤러는 웨이터이다. 웨이터는 손님의 주문(사용자의 입력)을 받아 요리사에게 전달하고, 요리사가 만든 요리를 접시에 담아 손님에게 가져다주는 역할을 한다.

'기타' 카테고리의 다른 글

[네트워크] REST API  (0) 2025.09.08
알아두면 좋은 정규 표현식 모음  (0) 2024.12.31
알아두면 좋은 IT 용어  (1) 2024.08.17

+ Recent posts

티스토리툴바