BlueⓘBlog » jQuery

jQuery 1.4 공식 릴리즈 소식

Blueⓘ — Thu, 04 Feb 2010 05:52:11 +0000

jQuery 1.4가 공식 릴리즈 되었습니다. 2010년 1월 14일이니 좀 됐군요…

1.4버젼이 공식 릴리즈 되면서 jQuery API 페이지의 변화가 보이는군요…(jQuery 1.4가 릴리즈 되었는데 홈페이지의 변화 부터 봅니다 ㅡㅡ;) 그동안 좀 보기 어려웠다고 할만한 API페이지가 조금 더 보기 쉽게 변화 되었습니다. 워낙 다른 API에 비해 메뉴얼이 어려워서 진입장벽이 있다고 생각하는 jQuery이기때문에 API 페이지에 신경쓴건 좋았다고 평하고 싶습니다.

jQuery 1.4 Release Note

우선 jQuery 1.4에서 변화된 내용을 살펴보면…

좀 더 쉬운 setter 함수
.css()와 .attr()의 성능 향상
빠른 element 생성
기타 등등

입니다… 뭐 워낙 많아서… 번역하기 힘듭니다 ^^ http://jquery14.com/day-01/jquery-14 에 접속하시면 직접 보실 수 있습니다. 게을러서 죄송합니다 ㅠ.ㅠ

뭐 전체적으로 성능이 무척 향상 되었고 괜찮은 기능좀 넣었다 라고 보시면 될거 같습니다.

이 글이 도움이 않되셨더라도 왼쪽 아래에 있는 손 모양의 추천을 눌러주세요...^^

[jQuery Plug-in] 이미지 크롭 플러그인 – jCrop

Blueⓘ — Mon, 16 Nov 2009 06:39:06 +0000

오늘 소개해드릴 플러그인은 jCrop이라는 이미지 크롭 플러그인입니다.

jCrop은 사용자가 올린 이미지 또는 기타 등등의 이유로 사용자 직접 크롭핑 할 부분을 선택하여 크롭핑을 할 수 있도록 도와주는 jQuery 플러그인입니다.

아래는 jCrop의 Live Demo입니다.

<html>
<head>
	<script src="js/jquery.Jcrop.js"></script>
	<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
	<script>
		jQuery(document).ready(function(){
			jQuery('#cropbox').Jcrop({
				aspectRatio: 1,
				onSelect: updateCoords,
				setSelect: [ 100, 100, 200, 200 ]
			});
 
		});
	</script>
</head>
<body>
	<center><img src="/include/postExamples/jCrop/demos/demo_files/flowers.jpg" id="cropbox" /></center>
</body>
</html>

다운로드 : jquery.Jcrop-0.9.8.zip

이 글이 도움이 않되셨더라도 왼쪽 아래에 있는 손 모양의 추천을 눌러주세요...^^

[예제] 이미지 크롭(Crop) 스크립트

Blueⓘ — Thu, 05 Nov 2009 05:59:14 +0000

다음은 이미지 Crop을 해주는 스크립트를 제공해주는 사이트를 소개하려고 합니다.
jQuery의 플러그인형태로 개발되었으며 크롭후 서버사이드에서 php를 통해 썸네일을 생성하는 부분까지 제공해주는군요.

사이트 주소는 http://deepliquid.com/content/Jcrop.html 입니다.

다운로드는 하단의 링크를 통해 다운로드 받으실수 있습니다.

아래의 PHP소스는 서버사이드에서 이미지중 크롭핑된 부분을 썸네일화 하는 부분입니다.

$targ_w = $targ_h = 150;
$jpeg_quality = 90;
 
$src = 'demo_files/flowers.jpg';
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
 
imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'], $targ_w,$targ_h,$_POST['w'],$_POST['h']);
 
header('Content-type: image/jpeg');
imagejpeg($dst_r, null, $jpeg_quality);

아래는 이해를 돕기위한 이미지 ^^

이 글이 도움이 않되셨더라도 왼쪽 아래에 있는 손 모양의 추천을 눌러주세요...^^

jQuery Core – jQuery(=$) – 작성중

Blueⓘ — Wed, 15 Jul 2009 02:22:11 +0000

jQuery의 기본중 기본인 jQuery Core의 jQuery메소드에 대한 강좌를 진행하겠습니다.

jQuery(=$)메소드는 jQuery Core의 핵심 메소드로 jQuery 또는 $로 사용 할 수 있습니다. 다음은 그 예제 입니다.

jQuery('#textBox');
$('#textBox');

위 예제는 textBox라는 ID를 가진 HTML객체를 jQuery를 이용하여 찾는 예제입니다. 앞에 설명한대로 jQuery와 $가 동일하다고 하였기에 각각의 명령은 동일한 결과를 가집니다.

jQuery(=$)

문법
- jQuery(expression [, context])
- jQuery(html, [ownerDocument])
- jQuery(elements)
- jQuery(callback)

Blueⓘ의 요약 설명

jQuery메소드는 4개가 오버라이드 되어 있습니다… 처음에는 똑같은 메소드가 4개 존재하여 습득하는데 어려움이 있을것이라 생각하고 계실지 모르겠지만, 간단하게 요약하면 jQuery메소드는 HTML안에서 내가 원하는 Element를 최대한 쉽고 빠르게 컨트롤 하기 위해 존재하는 메소드입니다. 즉 4개의 오버라이드된 메소드 역시 그런 역활을 담당하기 위해서 존재하므로 Element 컨트롤용이라고 생각하시면 두려움이 좀 사라질까요? ^^

각각의 jQuery 메소드의 사용 문법을 한글로 표기하자면 다음과 같습니다.

1. jQuery(“검색하고자하는 selector 표현식” [, "검색 대상 구문"])
2. jQuery(“Document에 추가할 HTML형식의 문자열” [, "추가 대상 Document"])
3. jQuery(“검색하고자 하는 Element”)
4. jQuery(“콜백 메소드”)

자 그럼 위의 4개의 메소드를 예제를 통해 익혀보도록 하겠습니다.

위 4개의 메소드를 익히는동안 우리를 도와줄 HTML군을 소개해드리겠습니다.

<html>
<head>
	<title>jQuery Core - jQuery(=$)</title>
	<script type="text/javascript" src="/js/common/jquery-1.3.2.min.js"></script>
</head>
<body>
	<h3>Examples for jQuery</h3>
	<div id="myDiv">Hello, jQuery
		<ul class="ulOfDiv">
			<li>What is jQuery Core</li>
		</ul>
	</div>
	<p id="myP">Hello, jQuery
		<ul class="ulOfP">
			<li>What is jQuery Core</li>
		</ul>
	</p>
	<p>Thanks, Blueⓘ</p>
</body>
</html>

jQuery(expression [, context])

jQuery(expression [, context])는 jQuery를 이용하여 여러분이 원하는 객체를 찾도록 도와주는 메소드입니다. 인자로는 expression이 있고 context는 옵션인자로 입력하지 않아도 무방합니다.

그럼 각 인자를 살펴보도록 하죠.

expression은 단어뜻을 보면 표현입니다. 즉 jQuery를 이용하여 원하는 객체를 찾도록 표현하라는것입니다. jQuery의 객체 탐색은 이 표현을 통해 이루어집니다. 보통 HTML태그를 통해서 찾기를 원한다면 jQuery(‘input’)과 같이 “input태그를 찾아라”라고 명령할수 있으며 ID값으로 찾기를 원한다면 jQuery(‘#아이디’)와 같이 찾을수 있습니다. 또한 class값으로 찾기를 원한다면 jQuery(‘.클래스’)로 찾을수 있습니다.

자 그럼 jQuery를 통해 첫번째 div태그를 찾아보도록 하겠습니다. 어떤 방법이 있을까요?

alert(jQuery('div').html());
alert(jQuery('#myDiv').html());

위의 예제에서 보듯이 두가지 방법으로 찾을 수 있겠죠? 첫번째는 태그를 통해서… 두번째는 태그안에 설정된 ID값을 통해서 찾아 보았습니다. 위 예제에서는 태그를 찾은다음 그 안에 있는 HTML값을 alert을 이용하여 출력하도록 한 예제입니다.

Blueⓘ의 사족

여기서 기존 JavaScript와 차이가 보입니다. 그럼 그 차이를 한번 보겠습니다.
alert(document.getElementByID('myDiv').innerHTML);
alert(jQuery('#myDiv').html());
위 예제는 jQuery를 사용하지 않고 DIV태그의 ID를 통해 객체를 찾은다음 그 객체 안에 존재하는 HTML을 출력하는 예제이며 아래는 jQuery를 이용해서 객체 안에 존재하는 HTML을 출력하는 예제입니다. 소스가 짧고 간편하게 처리 할 수 있어 좋긴 하지만 html()이라는 메소드는 도대체 무엇일까요? 옆에 있는 정아무개씨는 “내가 자바스크립트를 10년째 하지만 본적도 없는 메소드다”라고 합니다.

맞습니다. html()이라는 메소드는 jQuery의 메소드이지 기존 JavaScript의 메소드가 아닙니다. Prototype이라는 또다른 JavaScript프레임워크와 jQuery와 가장 큰 차이점중 하나가 이것입니다. Prototype은 객체를 찾은다음 순수한 JavaScript의 객체값을 넘겨주지만 jQuery는 탐색한 객체를 jQuery객체로 만들어서 리턴을 해줍니다.

그럼 좀더 알기 쉽게 하기위해 각각 어떤 객체를 넘겨주는지 알아보도록 하겠습니다. 아래 그림은 alert(jQuery(‘#myDiv’));와 alert(document.getElementById(‘myDiv’));로 각각 어떤 값이 리턴되어 넘어오는지 확인해본 결과 입니다.

jQuery를 통한 결과는 일반 Object를 getElementById를 통한 결과는 DivElement를 리턴 해주었습니다. 결국 jQuery를 이용한여 탐색은 객체는 기존 JavaScript의 상식으로는 처리 할 수 없다는 단점을 가지고 있습니다. 하지만 이런 단점들을 웃어넘길수 있을정도로 jQuery의 세계는 막강합니다.

그럼 두번째 P태그는 어떤 방식으로 찾을 수 있을까요? 벌써 응용력이 생기셨을거라 생각합니다. 답은 아래와 같습니다.

alert(jQuery('p').html());
alert(jQuery('#myP').html());

jQuery와 Prototype 같이 사용하는 방법

Blueⓘ — Tue, 14 Jul 2009 03:14:53 +0000

JQuery와 Prototype을 같이 써야 하는 경우가 발생 할 수 있습니다. Jquery와 Prototype모두 장단점이 있기때문이기도 한데 이렇게 두 API를 모두 사용 할 경우 $메소드가 중복되어 Javascript에러가 발생합니다.

이경우에는 prototype과 jquery를 인클루드 한다음 jQuery.noConflict();명령을 하단에 추가해주시면 됩니다.

jQuery.noConflict()는 jQuery에서 $메소드 사용을 하지 않겠다는 의미입니다.

그렇다면 “jQuery는 어떻게 사용하죠??” 하고 물으신다면 jQuery메소드를 사용하면 된다고 말씀드리겠습니다. 원래 jQuery에서 $(=jQuery)이므로 $를 사용하지 않는다면 jQuery사용시에는 jQuery메소드를 사용하시면 됩니다. 아래는 noConflict의 예제입니다.

<html>
<head>
	<script type='text/javascript' src="/js/prototype.js?ver=1.6"></script>
	<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
	<script type="text/javascript">
		jQuery.noConflict();
	</script>
</head>
<body>

</body>
</html>

다음은 jQuery의 $메소드 사용과 jQuery.noConflict를 사용하여 jQuery에서 $메소드를 사용 할 수 없을경우를 비교한것입니다.

// $메소드를 사용 할 수 있는 경우
$('#btn').click( function() { alert('ok'); } );
 
// $메소드를 사용 할 수 없는 경우(jQuery와 Prototype을 동시에 쓸 경우)
jQuery('#btn').click( function() { alert('ok'); } );

즉 $만 jQuery로 변경하시면 됩니다.