JQuery 개념

FrontEnd/JQuery

by H_Develop 2022. 7. 11. 16:25

자바스크립트에서 함수나 객체를 모아 놓은, 라이브러리 파일(함수나, 객체를 하나의 파일로 생성해두고 변경없이 불러 사용할 수 있는 코드블럭)이다.

JQuery처럼 많이 사용되는 라이브러리로 React 와 D3가 있다.

Node.js와 같은 수십종의 자바스크립트 라이브러리가 용도에 따라 이용되고 있다.

React (Front end)와 D3

React는 통합 개발 환경을 제공하는 자바스크립트 프레임 워크이고,

D3는 동적이고 인터액티브(Interactive)하게 데이터 시각화(Data Visualization)를 지원하는 자바스크립트 라이브러리이다.

JQuery 기능

자바스크립트의 코드를 JQuery를 사용하여 몇 줄로 줄일 수 있다.

코드가 간결해지고, 프로그래밍을 쉽고 편리하게 처리해준다.

JQuery는 기본적으로 세가지 기능을 제공한다.

1. DOM 요소들을 선택하는 제이쿼리 선택자(Selector)

선택자는 CSS의 선택자와 유사하게 DOM 요소를 쉽고 편리하게 선택하게 해준다.

JQuery 선택자를 이용하면 자바스크립트의 DOM 메써드를 이용하는 것 보다 훨씬 쉽게 DOM을 다룰 수 있다.

2. DOM 트리와 요소를 조작하는 JQuery 메써드(Method)

DOM 트리의 계층 구조를 변경하고 요소들을 추가, 수정, 삭제할 수 있는 다양한 메써드를 제공한다.

3. 웹에서 발생되는 이벤트를 처리하는 JQuery 이벤트(Events)

선택된 요소에 대해 마우스나 키보드 조작에 의해 발생하는 이벤트를 처리해주는 기능이 제공된다.

제이쿼리의 기본 구조

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<script src="js/jquery-3.6.0.min.js"></script> // 제이쿼리 불러오기
</head>	
<body>
	<p>단락입니다.</p>
    <button>배경 색상 변경하기</button>
<script>
	$("button").click(function(){
    // button은 제이쿼리 함수, click()는 제이쿼리 이벤트
    	$("p").css("background-color","yellow");
    // p는 제이쿼리 함수, css()는 제이쿼리 메써드
    });
</script>
</body>  
</html>

- 위 코드의 내용

1. 제이쿼리 불러오기.

a) 파일 직접 불러오기

http://jquery.com에서 압축파일을 다운받은 뒤, 압축을 풀어서 C:\js 폴더(아무곳에 저장해도 괜찮다.)에 저장하고,

- 파일 경로를 정확히 잘 설정해주어야 한다. ( 경로 /jquery-3.6.0.min.js )

b) 네트워크 상의 제이쿼리 파일 불러오기

CDN(Content Delivery Network)를 통해서 제이쿼리 파일을 제공받을 수 있는데, CDN JS 사이트 (http://cdnjs.com)에서

'jquery'로 검색해서 얻은 URL을 사용하면 된다.

( http://jquery.com에서 Download the uncompressed, development jQuery 3.6.0클릭해서 주소를 <script src="여기에"></script>작성해주면 된다. )

or 구글의 CDN 호스트를 이용해서
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js“> </script> 해주면 된다.

2. JQuery 함수

JQuery("선택자")로 괄호 안의 요소를 선택하거나 $("선택자")하는데,

JQuery("선택자")의 축약 형태인 표기법으로 대부분 사용한다.

3. JQuery 이벤트

$("button").click(function() {

자바스크립트_코드1;

자바스크립트_코드2;

...

});

‘배경색상 변경하기’를 클릭하면 click() 메써드가 실행되어서 function() 다음의 { }에 있는 자바스크립트 코드가 실행된다.

4. JQuery Method

$("p").css("background-color","yellow") 제이쿼리 함수

$("p")는 웹 페이지에서 <p>요소를 선택한 뒤,

css("background-color","yellow")를 적용하여 background-color 의 속성 값에 yellow를 설정한다.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>      <!-- JQuery 불러오기 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <p>단락입니다.</p>
    <button>배경 색상 변경하기</button>

    <script>
        
        $("button").click(function() {           //button은 제이쿼리 함수, click()은 제이쿼리 이벤트
        $("p").css("background-color","yellow"); // p도 제이쿼리 함수, css()는 제이쿼리 메써드
        });
        
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="C:\UI\JQuery/jquery-3.6.0.min.js"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script>

        $("button").click(function(){
        $("p").css("color","red");
        });

    </script> -->
</head>
<body>
    <!-- <script>

        $("button").click(function(){
        $("p").css("color","red");
        });

    </script> -->
    <p>안녕하세요</p>
    <p>반갑습니다.</p>
    <button>글자 색상 변경하기</button>
    <script>

        $("button").click(function(){
        $("p").css("color","red");
        });

    </script>
</body>
</html>

주석처리된 두 위치는 작동하지 않는다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="C:\UI\JQuery/jquery-3.6.0.min.js"></script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        $(document).ready(function() {		// $(function() { }); 식으로 처리해도 된다. (줄여쓰는 방법)
            $("button").click(function(){
                $("p").css("color","red");
                });
        });
    </script>
</head>
<body>

    <p>안녕하세요</p>
    <p>반갑습니다.</p>
    <button>글자 색상 변경하기</button>

</body>
</html>

위에 사용하기 위해서는, $(document).ready(function() {});를 사용해서 사용할 함수를 감싸주면 된다.
준비가 끝났을 때, 실행시킨다는 함수.

'FrontEnd > JQuery' 카테고리의 다른 글

parent(), find(), siblings() (0)	2022.07.12
JQuery Selector ( 기본 선택자, 필터 선택자, 전체 선택자 ) (0)	2022.07.12
JQuery ( addClass(), removeClass(), css() ) (0)	2022.07.12
JQuery Method( append(), prepend(), befor(), after(), remove() ) (0)	2022.07.11
JQuery Method ( text(), html(), val(), attr() ) (0)	2022.07.11