[JQury] 제이쿼리 사용법

JQuery

JQuery는 HTML의 클라이언트 사이드 조작을 단순화하기 위해 개발된 크로스 플랫폼의 자바스크립트 라이브러리이다.

그냥 간단하게 말하자면, DOM 조작에 있어 여러 기능을 탑재했고 사용이 간편한 자바스크립트의 라이브러리라고 볼 수 있다.

 

처음에는 document. window. 같은 함수들을 이용하면 얼마든지 DOM 조작이 가능한데 굳이 왜 써야하나 싶었는데, 위의 방식보다 더 다양한 기능들을 제공하고 있었고 사용하다보니 편하다는 생각이 들어 포스팅을 작성하게 되었다.

 

JQuery를 사용했을 때의 장점은 다음과 같다.

• 웹 페이지의 DOM을 쉽게 검색하고 조작할 수 있다.
• 웹 페이지의 종류와 무관하게 호환성이 좋다.
• 메소드 체이닝이 짧고, 코드의 유지관리가 용이하다.
• 오픈소스이기에 누구나 자유롭게 사용이 가능하다.

 

 

선언법

 

일단 JQuery는 아무 작업 없이 HTML 파일에서 사용할 수 있는 게 아니고, 별도로 가져와서 선언해야 한다.

 

인터넷이 안되는 환경, 혹은 내부망에서 배포할 프로그램을 만들 예정이라면 다운을 받아서 사용하여도 좋지만,

굳이 연습을 하는 데 다운을 받아 사용하고 싶은 생각은 없어 웹에서 곧바로 받아오도록 하자.

 

JQuery의 버전을 받아올 수 있는 웹 페이지는 다음 사이트에 설명되어 있다.

https://code.jquery.com/

jQuery CDN

그리고 그 설명을 기반으로 HTML의 헤더 부분에 스크립트를 선언하자.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

 

 

요소 검색

 

일단 DOM 요소를 먼저 불러올 것이다.

DOM 요소에 id가 있다면 더할나위 없지만, 그렇지 않은 경우도 반드시 존재한다.

하지만 이 때에도 굳이 요소에 id를 부여하지 않더라도 DOM 요소를 가져올 수 있는 방법은 얼마든지 존재한다.

 

예를 들어 다음의 코드가 있고, 각 DOM 요소를 가져와야 한다고 가정하자.

<div id="testDiv1"></div>
<div class="testDiv2"></div>
<div name="testDiv3"></div>

 

JQuery에서는 #을 사용해 id를, .을 사용해 클래스를, 그 외에는 []로 기타 요소를 검색할 수 있다.

방법은 아래와 같다.

$("#testDiv1").text("div1");		//id 기반 추출
$(".testDiv2").text("div2");		//class 기반 추출
$("div[name=testDiv3]").text("div3");	//기타 속성 기반 추출

 

위와 같이 입력하면 다음의 화면이 출력됨을 확인할 수 있다.

결과

저 [] 안에는 비단 name 뿐 아니라 rowgroup과 같은 DOM 요소의 여러 속성들이 들어갈 수 있다.

그리고 만약 id가 아닌 class 등으로 검색을 할 때, 동명의 class들이 존재하는 경우가 발생한다면, :eq(i)를 사용하여 몇 번째를 지정할 지 선택할 수 있다.

$(".content_div:eq(3)") //content_div 클래스를 가진 요소 중 3번째 요소 선택

 

참고로 document, window 와 같은 요소를 검색할 때에는 태그는 물론 ""도 붙여줄 필요가 없다.

$(window).on('load', function() {
	console.log("load 되었습니다.")
})

$(document).ready(function() {
	console.log("ready 되었습니다.")
})

$(function() {
	console.log("document ready는 이렇게도 사용이 가능합니다.")
})

 

 

텍스트 값 넣기

 

JQuery로 DOM 요소를 불러왔다면, 당연히 DOM 요소를 조작하여 새로운 값을 입력하거나, 그 값을 받아오는 작업이 가능해진다.

 

먼저 값을 넣는 작업이다.

일반적으로 출력에 사용되는 값들은 text("str")을 이용하면 쉽게 값을 동적으로 입력할 수 있다.

<div id="testDiv"></div>
<p id="testP"></p>
<table>
	<tr>
		<td id="testTd"></td>
	</tr>
</table>

 

$("#testDiv").text("test div")
$("#testP").text("test p")
$("#testTd").text("test td")

결과

 

그리고 일반적으로 입력에 사용되는 값들은 val("str")을 사용하여 값을 동적으로 입력할 수 있다.

$("#testDiv").text("test div")
$("#testP").text("test p")
$("#testTd").text("test td")

 

$("#testInput").val("test input")
$("#testTextArea").val("test textarea")

 

결과

 

만약 값을 가져와야 하는 상황이라면, text와 val 함수의 파라미터로 아무것도 주지 않으면 값이 리턴된다.

var testDivText = $("#testDiv").text()
var testPText = $("#testP").text()
var testTdText = $("#testTd").text()

var testInputText = $("#testInput").val()
var testTextAreaText = $("#testTextArea").val()

 

 

라디오, 체크박스에 값 넣기

 

라디오와 체크박스가 체크되어있는에 대한 확인 및 동적 체크는 아래처럼 작동이 가능하다.

만약 체크되어 있다면 on을, 아니라면 null (undefined)를 반환한다.

<input type="checkbox" id="testCheckBox"> 
<input type="radio" id="testRadioButton1" name="radioGroup" checked> 
<input type="radio" id="testRadioButton2" name="radioGroup">

<input type="checkbox" id="testCheckBox2">
<input type="radio" id="testRadioButton3" name="radioGroup2" checked> 
<input type="radio" id="testRadioButton4" name="radioGroup2">

 

//확인 : 만약 체크되어 있다면 "on", 아니라면 undefined. 
console.log( $("#testCheckBox:checked").val() ) 
console.log( $("#testRadioButton1:checked").val() ) 
console.log( $("#testRadioButton2:checked").val() ) 

//확인 : true, false 반환
console.log( $("#testCheckBox2").is(":checked") )
console.log( $("#testRadioButton3").is(":checked") )
console.log( $("#testRadioButton4").is(":checked") )

//값 넣기 
$('#testCheckBox').eq(0).attr("checked", true) 
$('#testRadioButton2').eq(0).attr("checked", true)

$("#testCheckBox2").prop("checked", true)
$("#testRadioButton4").prop("checked", true)

 

 

이벤트 만들기

 

이벤트를 만드는 방식은 크게 어렵지 않다.

간단하게 keyup 이벤트와, click 이벤트를 만들어보자.

 

밑과 같은 코드를 만들면, inputArea에 키보드 입력을 하면 keyup 이벤트로 인해 하단의 outputArea에 inputArea의 글이 그대로 출력되고, 버튼을 누르면 하단에 버튼을 누른 만큼의 숫자가 나타나게 된다.

<textarea id="inputArea"></textarea>
<textarea id="outputArea" disabled></textarea>

<br>

<input type="button" id="testButton">
<div id="buttonIncrease">0</div>

 

$("#inputArea").keyup(function() {
	$("#outputArea").val( $("#inputArea").val() )
})

i = 0;
$("#testButton").click(function() {
	$("#buttonIncrease").text( ++i );
})

결과

 

추가로 위와 같은 방식은 곧바로 .click과 같이 하지 않고, .on("click", function() {}) 을 사용하여 만들 수도 있다.

 

이렇게 사용할 경우에는 json 형태로도 사용이 가능한데, 여러 개의 이벤트를 만들지 않고 한 번에 이벤트들을 선언할 수 있는 방식이다.

 

예를 들어 특정 div 안에 마우스가 위치하는지, 아닌지를 판별하는 요소를 만드려면 다음과 같이 만들면 된다.

<div id="mouseDetectArea">마우스 위치를 확인합시다.</div>

 

$("#mouseDetectArea").on({
    mouseenter: function() { // mouseenter 이벤트를 설정함.
        $("#mouseDetectArea").text("마우스가 안에 있네요.");
    },
    mouseleave: function() { // mouseleave 이벤트를 설정함.
        $("#mouseDetectArea").text("마우스가 밖에 있네요.");
    }
});

결과