잇뉴얼 (IT_Manual)

[JQuery] 제이쿼리 임포트 & 사용방법 본문

Coding/JavaScript

[JQuery] 제이쿼리 임포트 & 사용방법

잇뉴얼 2022. 6. 3. 16:27
728x90
반응형

[JQuery] 제이쿼리 임포트 & 사용방법

자바스크립트를 공부하시는분이라면 '제이쿼리(JQuery)'를 들어보셨을껍니다. '제이쿼리'는 자바스크립트를 미리 작성해둔 라이브러리로 자바스크립트에서 복잡했던 코드를 간결하게 만들어주는 역할을 하는데요.

// 자바스크립트 코드
document.getElementById("element").style.display = "none";

// 제이쿼리 코드
$('#element').hide();

위의 코드를 보더라도, 제이쿼리의 코드가 간결하다는것을 확인할 수 있습니다. 단 이 '제이쿼리'를 사용하기 위해서는 코드를 임포트 해줘야 사용이 가능합니다.

▶ 제이쿼리 임포트 (import)
<head>
    <!-- jQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

위의 코드를 작성하지 않는다면, 제이쿼리코드 작성시 에러가 발생할 수 있으니, 꼭 작성을 해주세요.

▶ 제이쿼리 사용방법 예시

 

목표 : 입력한 텍스트를 경고창에 띄우기
HTML 코드
<body>
    <input id="input_text" type="text" placeholder="텍스트를 입력해주세요." value="텍스트가 없습니다.">
    <button onclick="alert_fun()">입력한 글자 확인</button>
</body>

일단 텍스트를 입력할 수 있는 <input>태그를 작성해줍니다. 그리고 이 태그에 접근을 할 수 있도록 'id'를 작성해준 다음, 만일 아무런 텍스트를 입력하지 않았을경우, '텍스트가 없습니다.'를 띄우기 위해 'value'를 작성해주었습니다. 그리고 아래쪽의 버튼을 클릭시 입력한 값을 경고창에 띄울수 있는 자바스크립트 함수를 불러오기 위해 'onclick'을 작성해두었습니다.

자바스크립트 (제이쿼리)
<head>
    <meta charset="UTF-8">
    <title>제이쿼리</title>
    <!-- jQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        function alert_fun() {
            let txt = $('#input_text').val();
            alert(txt)
        }
    </script>
</head>

일단 제이쿼리를 사용하기 위해 임포트 코드를 작성한 다음, <script>태그에서 함수를 선언했습니다. 그리고 함수안에 제이쿼리문을 작성해주었는데요. 해당 제이쿼리는 아까 작성해둔 <input>태그의 'value'값을 가져와 'txt'라는 변수에 할당을 해준 다음, 해당 변수를 'alert()'함수를 이용해서 경고창에 입력한 값을 띄우도록 코드를 작성했습니다. 제이쿼리랑 자바스크립트를 같이 사용한 코드입니다.

<input>태그에 텍스트 입력 후 버튼 클릭시 결과

 

반응형

'Coding > JavaScript' 카테고리의 다른 글

[JQuery] 제이쿼리를 이용한 HTML요소 추가 방법  (0) 2022.06.05
[JQuery] HTML 요소 숨기기 / 보여주기 (hide, show)  (0) 2022.06.03
[JavaScript] 자바스크립트 경고창 띄우기  (0) 2022.06.03
[JavaScript] 자바스크립트 배열 (Array)  (0) 2022.06.01
[JavaScript] 자바스크립트 클래스와 객체  (0) 2022.06.01
'Coding/JavaScript' Related Articles more
Comments