1.J쿼리란?
-자바스크립트를 이용해 가공한 라이브러리로써, Behavior driven development 방법론을 지향하고 CSS셀렉터를 사용하여 HTML문서를 훑어보는 방법을 기반한다.
2.Prototype(프로토타입)이란?
-Class driven development지향하고 라이브러리는 Ruby on Rails에서 아주 잘 지원되며, 많은 헬퍼 함수를 가지고 있다.
사용 방법 비교)
| JQUERY의 경우 | Prototype의 경우 | |
|
var a = $("user-box"); a.style.cssText += "background-color:red;"; | |
$("div#tabs1").show(); |
$$("div.tabs").invoke("hide"); $$("div.tabs").each(function(x){ Element.hide(x); }); $("tabs1").show(); |
①예제는 element(user-box)의 배경화면을 빨강색으로 바꾸는 CSS 수정하는 예제이다.
②예제는 tabs클래스에 속하는 tabs1, tabs2, tabs3가 있을 때, 사용자가 링크를 클릭했을 때 tabs1이 보여지는 예제이다.
비교대상 Prototype 자바스크립트 프레임워크는 AJAX 프레임워크와 다른 유틸리티들을 제공한다.
(Prototype.js라는 이름의 단일 자바스크림트 파일로 구성되어 있다.)
---------------------------------------------------------------------------------------------
응용편
1.클릭했을 때 경고창을 띄우는 예제
| $(element).click(function(){ alert("warning"); }); |
2.speciallinks클래스들의 모든 엘리먼트에 다음과 같은 행위를 집어넣자.
ⓐhref를 "javascript:void(0);"로 변경하고
ⓑ클릭시 로그를 남기고
ⓒonhover시 (mouse over시) 배경색을 변경한다.
| $("div.speciallinks").attr("href","javascriptLvoid(0)") .click(function() {console.log("div.speciallinks clicked");}) .hover(function(){$(this).addClass("hovered");}, function(){$(this).removeClass("hovered");}); |
[출처 : http://dogfeet.tistory.com/29 ]
