[Jquery] Jquery 기초

Study/Javascript, Jquery, CSS  2015. 7. 4. 09:00

안녕하세요 명월입니다.


저번 포스트까지 우리는 Javascript를 통해 웹 문서를 동적으로 움직이게 하는 것에 대해 공부하였습니다.

Javascript에서 Object에 접근하기 위해 Object의 Id가 필요했습니다. 물론 id가 아닌 name과 class로도 접근이 가능하지만 보통 id로 object로 접근을 하는 경우가 많기 때문에 id로 접근을 한다고 했을 때 Object의 id가 필요합니다.


예전처럼 웹 문서가 단순하고 객체의 수가 적으면 Object마다 id를 선언해 처리해도 문제가 없습니다.

점점 웹 문서가 복잡해지고 한 페이지 안에 많은 정보를 넣으려는 노력으로 웹 문서 크기는 예전에 비해 커지고 커진 웹문서의 Object에 ID를 선언한다라는 것은 불가능에 가까워 질 것입니다.


그래서 나온 Javascript라이브러리가 Jquery입니다.Jquery는 Css의 선택자를 이용하여 Object 직접 참조가 가능하게 하고 가독성을 높였기에 기존 Javascript에 비하면 유용하게 사용할 수 있는 라이브러리 입니다.


Jquery는 아래의 웹 주소에서 다운로드를 할 수 있고 메뉴얼을 참조할 수 있습니다.


링크 - Jquery 홈페이지

Jquery 홈페이지

현재는 Jquery 1.11.3 버전까지 출시되어있습니다... 버전을 상관할 만큼의 복잡한 모듈을 만드는 것이 아니니 아무 버전이나 받아도 상관없습니다.

압축 모듈도 비압축과 압축 모듈이 있는데 이것도 상관없으니 아무거나 다운 받으면 되겠습니다.


Jquery 라이브러리를 다운 받고 아래 이미지와 같은 위치에 js파일을 복사해 두겠습니다.

jquery

여기까지가 Jquery에 대한 설정이고 이제부터는 웹 문서에서 Jquery를 사용하겠습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-1.11.3.min.js" language="javascript"></script>
<script language="javascript">
	function check(){
		var data = $("input#textObject").val();
		$("span#result").html(data);
	}
</script>
</head>
<body>
	<input type="text" id="textObject" value=""><br />
	<input type="button" value="check" onclick="check();"><br />
	<span id="result"></span>
</body>
</html>

위 소스 그리드의 소스는 전 포스트에서 연습했던 소스 형태를 다르나 똑같은 결과를 내보내는 프로그램입니다.

jquery example

결과를 보니 전 포스트에서 연습했던 javascript 프로그램과 큰 차이가 없습니다.

그럼 다음 예제 확인하겠습니다.


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-1.11.3.min.js" language="javascript"></script>
<script language="javascript">
	function check(){
		var data = $("input#textObject").val();
		$("span#result").html(data);
	}
</script>
</head>
<body>
	<input type="text" id="textObject" value=""><br />
	<input type="button" value="check" onclick="check();"><br />
	<span id="result"></span><br />
	<span id="result"></span><br />
	<span id="result"></span><br />
	<span id="result"></span><br />
	<span id="result"></span><br />
</body>
</html>

이번 소스에서는 span Object를 여러 개 만들었습니다. 버튼을 클릭하면 check함수에서 css의 선택자와 같이 모든 span Object를 선택 html를 변경하는 함수를 사용하였는데 결과를 확인해 보겠습니다.

Jquery

프로그램 실행 결과 Jquery에서 CSS의 선택자를 이용하여 해당 요소를 선택하여 일괄처리를 했습니다.Javascript에서 위와 같은 결과를 얻기 위해서면 span에 id를 선언하고 각각 id로 호출한 다음 처리를 해야 하는 식으로 소스를 작성해야 합니다.이번에는 출력을 일괄처리 하지 말고 입력을 일괄처리 하겠습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-1.11.3.min.js" language="javascript"></script>
<script language="javascript">
	function check(){
		$("input[type=text]").each(function(idx){
			$("body > div > span:nth-child("+((idx*2)+1)+")").html($(this).val());
		});
		
	}
</script>
</head>
<body>
	<input type="text" id="textObject" value=""><br />
	<input type="text" id="textObject" value=""><br />
	<input type="text" id="textObject" value=""><br />
	<input type="text" id="textObject" value=""><br />
	<input type="text" id="textObject" value=""><br />
	<input type="button" value="check" onclick="check();"><br />
	<div>
		<span id="result"></span><br />
		<span id="result"></span><br />
		<span id="result"></span><br />
		<span id="result"></span><br />
		<span id="result"></span><br />
	</div>
</body>
</html>

입력시의 일괄 처리는 CSS만으로는 한계가 있기 때문에 Jquery의 함수 each를 사용해서 입력을 일괄로 처리하겠습니다.each 함수는 자바의 foreach와 비슷한 개념으로써 배열로 값을 받을 때 iterator처리, 즉 반복처리를 하는 함수 입니다.

Jquery Example

이번에는 최근의 웹페이지에서 많이 사용되는 동적처리에 대해 공부해 보겠습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-1.11.3.min.js" language="javascript"></script>
<style>
	body > table{
		border-top : 1px solid #000;
		border-left : 1px solid #000;
		padding : 0px;
		border-spacing:0px;
		width:100%
	}
	body > table > thead > tr >  th,
	body > table > tbody > tr >  td{
		border-right : 1px solid #000;
		border-bottom : 1px solid #000;
		height:20px;
	}
</style>
<script language="javascript">
	function add(){
		var dom = $("template > table> tbody").html();
		$("body > table > tbody").append(dom);
	}
</script>
</head>
<body>
	<input type="button" value="add" onclick="add()">
	<table>
		<thead>
			<tr>
				<th>No</th>
				<th>Contents</th>
			</tr>
		</thead>
		<tbody></tbody>
	</table>
	<template>
		<table>
			<tbody>
			<tr><td></td><td></td></tr>
			</tbody>
		</table>
	</template>
</body>
</html>

위 소스는 add버튼을 누르면 table > tbody 부분에 template 요소 밑의 테이블 칸을 가져와서 추가하는 처리 입니다.

Jquery Example

이번에는 웹 문서의 요소의 동적 요소가 아니라 함수를 바인딩 하는 처리를 작성하겠습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jquery-1.11.3.min.js" language="javascript"></script>
<style>
	body > table{
		border-top : 1px solid #000;
		border-left : 1px solid #000;
		padding : 0px;
		border-spacing:0px;
		width:100%
	}
	body > table > thead > tr >  th,
	body > table > tbody > tr >  td{
		border-right : 1px solid #000;
		border-bottom : 1px solid #000;
		height:20px;
	}
</style>
<script language="javascript">
	function add(){
		var dom = $("template > table> tbody").html();
		$("body > table > tbody").append(dom);
	}
	$(function(){
		$("input[type=button]").bind("click",function(){
			add();
		});
	});
</script>
</head>
<body>
	<input type="button" value="add">
	<table>
		<thead>
			<tr>
				<th>No</th>
				<th>Contents</th>
			</tr>
		</thead>
		<tbody></tbody>
	</table>
	<template>
		<table>
			<tbody>
			<tr><td></td><td></td></tr>
			</tbody>
		</table>
	</template>
</body>
</html>

Jquery example

아까와 같은 동작이 이루어 집니다.Jquery를 이용하여 웹의 동적화까지 공부했습니다. 이 동적인 처리를 익히게 되면 사양의 처리에 따라 이벤트를 달리 처리하거나 또는 다른 데이터 표시를 할 수 있게 됩니다.이로써 웹페이지의 트래픽을 줄이고 좀 더 유용하게 쓰였으면 좋겠습니다.

'Study > Javascript, Jquery, CSS' 카테고리의 다른 글

[HTML] 메타 태그(SEO 최적화 포함)  (0) 2020.01.12
[HTML] Html의 태그 구조  (1) 2020.01.09
[Jquery] Jquery의 이벤트(Event) 관련 함수 - 2 (Mouse Events)  (0) 2016.03.30
[Jquery] Jquery의 이벤트(Event) 관련 함수 - 1 (Attachment)  (2) 2016.03.29
[Jquery, CSS] Jquery의 CSS 관련 함수  (0) 2016.03.28
[Jquery] Attributes 관련 함수  (0) 2016.03.27
[Jquery] Selector (선택자)  (0) 2016.03.26
[Jquery] Ajax(비동기 통신)와 Json  (0) 2015.07.05