jquery(제이쿼리)를 티스토리 블로그에서 사용해보고자 마음 먹고 앞서 글에선 티스토리 블로그에 jquery(제이쿼리)를 티스토리에 불러오는 방법에 대해 포스팅했습니다. 어려울 것이라 생각했는데 시도를 해보니 그렇게 어렵지 않게 적용이 되었습니다. 오늘은 간단하게 jquery(제이쿼리)에 대해 정리를 해보고자 합니다.
jquery(제이쿼리)는 JavaScript Library입니다.
- JavaScript Library의 종류는 Prototype, Dojo toolkit, Extjs, Mochkit등 여러 종류가 있지만 현재는 kQUERY가 대세인거 같습니다.
- jquery(제이쿼리)는 JavaScript 프로그래밍을 매우 단순하게 해줍니다.
- jquery(제이쿼리)를 사용하지 않는다면 직접 코딩 해줘야 할 부분이 무척이나 많습니다. 간단한 예를 보도록 하겠습니다.
/** XHConn - Simple XMLHTTP Interface - **/
function XHConn() {
var xmlhttp, bComplete = false;
try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
catch (e) { try { xmlhttp = new XMLHttpRequest(); }
catch (e) { xmlhttp = false; }}}
if (!xmlhttp) return null;
this.connect = function(sURL, sMethod, sVars, fnDone) {
if (!xmlhttp) return false;
bComplete = false;
sMethod = sMethod.toUpperCase();
try {
if (sMethod == "GET") {
xmlhttp.open(sMethod, sURL+"?"+sVars, true);
sVars = "";
} else {
xmlhttp.open(sMethod, sURL, true);
xmlhttp.setRequestHeader("Method", "POST "+sURL+" HTTP/1.1");
xmlhttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
}
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && !bComplete) {
bComplete = true;
fnDone(xmlhttp);
}};
xmlhttp.send(sVars);
}
catch(z) { return false; }
return true;
};
return this;
}
var myConn = new XHConn();
if (!myConn) alert("XMLHTTP not available. Try a newer/better browser.");
var fnWhenDone = function (req) { alert(req.responseText); };
myConn.connect("mypage.php", "POST", "foo=bar&baz=qux", fnWhenDone);
이것은 Ajax 객체를 최소한으로 구현한 것입니다. 무척이나 복잡합니다.
JavaScript Library를 사용하면 다음과 같습니다.
method: "POST", parameters: "foo=bar&baz=qux“,
onSuccess(req){ alert(req.responseText); }
});
이렇게 간단하게 구현할 수 있습니다. 결과는 동일합니다.
jquery(제이쿼리)는 배우기가 무척이나 쉽습니다.
저 역시도 자바스크립트를 공부해보고 사용해봤지만 jquery(제이쿼리)를 접하고 난 후에는 jquery(제이쿼리)를 사용합니다. jquery(제이쿼리)를 사용하지 않는다면 직접 구현하는데 시간을 소비해야 하는데 그렇지 않고 다양한 기능을 쉽게 사용할 수 있습니다.
jquery(제이쿼리)는 자신의 블로그 스킨이나 웹페이지에 단 한줄만 추가하여 사용할 수 있습니다.
추가하는 방법은 [jquery(제이쿼리)]티스토리 블로그에 jquery(제이쿼리) 불러오기 보시면 됩니다.
이글을 보시는 분은 기본적으로 HTML, CSS, JavaScript에 대한 기본적인 사항을 아실 것이라 믿습니다.
JQuery의 특징?
- HTML 엘리먼트 선택
- HTML 엘리먼트 조작
- CSS 조작
- HTML 이벤트 함수
- javascript 효과 및 에니메이션
- HTML DOM traversal과 수정
- AJAX
- Utilities 등의 특징이 있습니다.
[jQuery 기본 예제]
다음 예제는 JQuery의 hide()메소드를 설명하는 것입니다. 이 hide()메소드는 문서내에 있는 모든 <p>태그를 감추는 기능을 합니다.
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function() {
$("p").hide();
});
});
</script>
</head>
<body>
<h2>이 부분은 타이틀입니다.</h2>
<p>이 부분은 단락입니다.</p>
<p>이 부분은 또다른 단락입니다.</p>
<button>Click me</button>
</body>
</html>
'IT > jquery' 카테고리의 다른 글
| jQuery element(요소)의 속성 관련 메서드 정리 (0) | 2012.12.13 |
|---|---|
| jQuery CSS 제어 메서드 정리 (1) | 2012.11.29 |
| [jQuery]jQuery Core 란? (0) | 2012.11.26 |
| jQuery 문법 (0) | 2012.11.23 |
| [JQUERY]티스토리 블로그에 JQUERY 불러오기 (0) | 2012.11.19 |
