영삼넷IT 강국 = 김영삼 블로그에 오신걸 환영합니다.

$('#iframeID').contents().find('#someID').html();

전 이걸 몰라서 헤멨는데 다른분은 다 아시고 계신건가요? -0-;;

http://plugins.jquery.com/project/csv2table

== Mini sample 1 ==
<div id="view1"></div>
<script type="text/javascript">
$(function(){
    $('#view1').csv2table('./data/Book12.csv');
});
</script>

function parse($text) { 
    // Damn pesky carriage returns... 
    $text = str_replace("\r\n", "\n", $text); 
    $text = str_replace("\r", "\n", $text); 
 
    // JSON requires new line characters be escaped 
    $text = str_replace("\n", "\\n", $text); 
    return $text; 
} 

function ajax_email_ch() {
 var email1 = $("#email1").val();
 var email2 = $("#email2").val();

 var email_ch = email1 + "@" + email2;
   if(email_ch.match(/\w+[/\w.]*@[/\w.]+\.\w+/)) {
     이메일이 맞을경우...
   }
 }

찾아봐도 없어서 간단히 만들어봤습니다.
제가 사용하려고 만든거라 정리되지 않았는데...
쉬운 소스이니 변형하셔서 사용하셔여~.~

$(document).bind("contextmenu", function(e){
    alert("오른쪽마우스금지입니다.");
    return false;
 });

지원 OS : 모든 환경(웹)

개발환경 : 자바스크립트

사용제한 : MIT Style(jqGrid 라이센스에 따름)

제작자 : 컴포지트

자료설명 :

jqGrid 3.5 기준으로 작성되었습니다.
MIT 라이센스에 따라 배포 및 수정이 자유롭게 적용됩니다.

실무에서 jqGrid를 사용하기 위해 번역했습니다.
혹시라도 번역이 안된 부분이나 오역이 발생할 수도 있으니 양해 바랍니다.
(되도록 모두 한글화하도록 노력하였습니다.)

jqGrid 스크립트 파일을 불러오기 전에 이 파일을 넣어주시면 됩니다.
jqGrid 폴더에 i18n 폴더가 있는데 거기가 여러 번역 스크립트가 있는 곳입니다.
그곳에 살포시 넣어주시면됩니다.

UTF-8로 인코딩 하였으니 다른 인코딩에도 별 무리는 없을 것입니다.
만약 한글이 깨진다면 스크립트 태그에 charset='utf-8' 을 추가해주면 될겁니다.
자바스크립트 특성상 아스키 문자 외엔 모두 유니코드로 취급하니 한글 인코딩에
조금만 신경써준다면 한글이 깨지는 일은 없을 겁니다.

한글은 영어 문자보다 클 수 있기 때문에 Grid 레이아웃이 깨지는 경우가 있습니다.
가능하면 DOCTYPE를 명시해 주시고(HTML 종류 상관없음), 인코딩 메타태그를 넣어주세요.
그러면 레이아웃이 깨지는 일은 없을 것입니다.

jQuery 플러그인(Link1)으로도 존재합니다만...

간단한 스크롤 기능이면 되는데 굳이 플러그인을 쓸필요가 없다고는 하지만
플러그인에서 따로 분리해도 될테니... ㅡ_

여하튼...

function tested() {
  var tested = $('#tested');
  tested.animate({marginTop:'-25px'}, 200, null, function() {
    tested.css('marginTop', '0px').append(tested.find('> li:first'));
  });
}
setInterval('tested()', 3000);

결과 : 다운로드1

----    ----    ----    ----

많은 분들이 포스팅 하시고..
예전부터 가라로 작업을 많이 했던 부분인데

최근 작업하는 업체중 까다로운 부분이 있어
작업후에 올려봅니다..

사용법은 아래와 같으며 주 사용문구는

 $("input[type=file]").filestyle({
  image: "../img/search_bt.gif",
  imageheight : 18,
  imagewidth : 90
 });

입니다.


그외에 width가 들어가지만 소스내용중 어차피 마진레프트로 빼는 부분이 있기에
소스상에선 삭제처리 해두었습니다.



<script src='../jq/jquery.js' type='text/javascript'></script>
<script src='../jq/jquery..js' type='text/javascript'></script>

<script>
$(function(){ 
 $("input[type=file]").filestyle({
 image: "../img/search_bt.gif",
 imageheight : 18,
 imagewidth : 90
 });
});
</script>

<input type="file" name="file01" size="10">

jQuery.each(callback)

each 메소드를 하는 하는 경우 for문과 같은 제어 문에서 사용되는 break , continue 의 쓰임이 필요 하다.
each에서는 return true(continue) 와 return false(break) 를 이용해서 break, continue와 같은 동작을 일으킬수 있다.

$('#loop').each(function(i){
if( i == 0 ) return true; //continue;
return false;//break;
});

이 글은 번역한 것입니다. 원문은 여기에서 확인하실 수 있습니다. 겸손한 자바스크립트를 구현하기엔 jQuery가 가장 적절하고 바람직하다는 생각에 옮겨봅니다. 저도 Quark씨처럼 당장의 편리함을 따른 것보다 jQuery의 철학을 따르는 것이 더 바람직하다고 생각합니다. 항상 디커플링을 지향하는 것이 생산성 문제를 개선하고 미래에 적응하는 것을 가능케 하기 때문입니다.

 오역된 부분이 있을 지도 모르겠습니다.-_-;; 교과서 영어가 아니라-_-;; 나름대로 의역을 하긴 했는데 어렵네요.

----여기부터는 번역입니다.

 jQuery는 겸손한(unobtrusive) 자바스크립트를 위한 자바스크립트 라이브러리다. jQuery는 태생적으로 Behavior driven development 방법론을 지향하고 CSS 셀렉터를 사용하여 HTML 문서를 훓는 방법(traversing)을 방법에 기반한다. 반면에 Prototype은 태생적으로 Class driven development를 지향하고 쉽게 자바스크립트 개발할 수 있도록 해준다. Prototype 라이브러리는 Ruby on Rails에서 아주 잘 지원되고 많은 헬퍼 함수들을 가지고 있다.

 세달 전에 마음을 jQuery로 굳히기까지 나는 항상 Prototype 라이브러리를 사용해왔다. jQuery은 나를 매우 고무시겼다. 여기에 그 이유가 있다.

  1. BDD(Behavior driven development)
  jQuery를 사용하면 CSS로 HTML 엘리먼트의 스타일을 정의하는 것 처럼 HTML 엘리먼트의 행동들을 분리하여 정의할 수 있다. 클릭했을 때 경고창을 띄우는 예제를 보자.

$(element).click(function(){
  alert("warning");
});

  이제 복잡한 예제를 살펴보자. speciallinks 클래스들의 모든 엘리먼트에 다음과 같은 행위를 집어넣자.
    1. href를 "javascript:void(0);"로 변경하고
    2. 클릭시 로그를 남기고
    3. onhover시(mouse over시) 배경색을 변경한다.

$("div.speciallinks").attr("href","javascript:void(0)")
  .click(function() {console.log("div.speciallinks clicked");})
  .hover(function(){$(this).addClass("hovered");},
       function(){$(this).removeClass("hovered");});

  2. MVC + J
    MVC 프레임웍은 웹 개발 환경을 Model-View-Controller로 나누었다. MVC 프레임워크에서 뷰는 HTML, CSS, Javascript의 부분으로 나누어지고 GUI 개발은 이 세부분이 하나로 결합하여 완성된다. 게다가 Ruby on Rails에서의 Prototype 라이브러리는 HTML과 JavaScript도 함께 합쳐버린다(meshup). 뷰를 개발하면서 JavaScript를 분리하는 BDD 방법론을 따르려 한다면 jQuery가 매우 적절하다. 나는 Ajax에서 MVC + J가 매우 강력하다는 것을 깨닭았다.

    나는 JQuery를 사용하여 나의 HTML 파일을 매우 깨끗하게 만들었고 모든 JavaScript 코드를 .js에 넣음으로써 HTML 엘리먼트의 행위를 모두 .js 파일에 정의하였다.

  3. 액션 체인(Chaining of actions)
    액션 체인은 DRY 원칙을 따를 뿐만 아니라 JavaScript 코드의 가독성을 증가시킨다. 만약 엘리먼트에 오퍼레이션들을 삽입하려면 다음과 같이 할 수 있다.

$("div.message").show()
  .append("<p>Action has been executed successfully")
  .addClass("flash");
// 각 함수는 라인으로 구분��여 사용한다.

    이 것은 jQuery의 모든 메소드가 query 객체를 반환하기 때문에 가능하다. 그리고 뒤따르는 메소드들이 선택된 HTML 엘리먼트에 체인 형식으로 적용된다.

   4. CSS 셀렉터 문제(CSS Selector rocks)
      CSS 셀럭터 HTML DOM을 사용하기에 매우 강력한 도구이다. jQuery는 HTML 문서의 엘리먼트를 식별하기 위해 CSS 셀러터를 이용하고 이를 위해 HTML 태그의 id 속성을 관리해야 하는 지루한 작업을 회피하게 해준다. 대부분의 id 속성은 CSS 셀렉터를 올바르게 사용하여 회피할 수 있다. Prototype의 $$ 함수는 CSS 셀렉터를 지원하지만 CSS 셀렉터의 능력을 모두 이끌어내지 못한다. 나는 Prototype에서 id 속성을 사용하는 것이 최선이라는 것을 알게 됐다.

   5. 엘리먼트의 존재 유무를 검사할 필요가 없다.
     프로토타입으로 액션으로 적용하기 전에 항상 엘리먼트가 존재하는지 확인해야 했다. 예를 들어 나는 사용자가 로그인 했을 때만 사용자가 명시한 내용을 보여주고 싶었다. 사용자가 로그인 했다면 렌더링된 페이지에 div{id='user-box'}같은 엘리먼트가 있다는 것을 검사해야 했다. 프로토타입에서는 그렇게 해야 했다.

if ($('user-box')!=null) {
    // jQuery에서는 이 if 블럭이 필요없다.
    $("user-box").style.backgroundColor = "red";
}

   6. Aids development process
     jQuery를 사용하면 HTML 코드가 간결해지고 거의 건드릴 필요가 없다. 나의 웹 디자이너는 쉽게 html과 stylesheet를 수정할 수 있고 Prototype 라이브러리를 몰라도 된다.

예제들:
  여기에는 jQuery와 프로토타입의 차이점을 강조하는 몇 가지 예제가 있다(물론, 이 코드가 최상의 코드는 아니다).

Example1:
 이 Tab 예제는 tabs 클래스에 속하는 3 개의 tab이 있고 id는 각각 tabs1, tabs2, tabs3이다(ids=>["tabs1","tabs2","tabs3"]). 사용자가 "show first tab" 링크를 클릭했을 때 #tab1만 보여진다.

 jQuery의 경우

$("div.tabs").hide();
$("div#tabs1").show();

    
  Prototype의 경우

$$("div.tabs").invoke("hide");
     //이거��
$$("div.tabs").each(function(x){
  Element.hide(x);
});
// 그리고 다음과 같은 코드로 마무리한다.
$("tabs1").show();

Example2:
엘리먼트의 CSS를 수정하는 예제

  jQuery의 경우

$("#user-box").css("background-color","red")

  Prototype의 경우    

var a = $("user-box");
a.style.cssText +=
       "background-color:red;";

Remy Sharp의 발표자료에서 다른 예제들도 볼 수 있다(http://ajaxian.com/archives/prototype-and-jquery-a-code-comparison).

Prototype이 좋은 이유
  1. Ajax 요청에서 div의 내용이 부분적으로 변경돼야 할때 JavaScript 행위는  activated/reactivated돼야 한다. jQuery에서는 이를 위한 많은 코드를 만들지 않아도 된다. 하지만 나는 Ajax로 로드된 이 부분을 항상 마음속으로만 새겨야 한다. Prototype에서는 로드된 HTML 엘리먼트들에 관련된 JavaScript 코드가 포함된다.
  2. Ruby on Rails의 Prototype 헬퍼들은 정말 대단하고 JavaScript와 Ajax를 만들때 많은 부분에서 매우 편리하다.
  3. Prototype은 자바스크립에서도 Ruby같은 문법을 사용할 수 있게 해준다. 개발을 쉽고 빠르게 할 수 있도록 배열, 객체 등의 기능을 변경해준다.
  4. jQuery에서는 JavaScrpt 파일이 모두 다운로드되고 DOM 생성된 후에만 엘리먼트의 행위를 사용할 수 있다. 연결이 느릴 때는 기다려야만 하기 때문에 매우 고통스럽다.

결론:
  jQuery와 Prototype은 둘 다 매우 굉장하다. 나는 더 적은 코드로 더 많은 일을 하면서 직관적이고 겸손하게 유지해야 한다는 jQuery의 철학이 큰 차이를 만든다고 생각한다. 그러나 나는 Prototype이 매우 그립다. jquery-rails가 통합되길 기다리고 있다. 결국 이 고지는 점령될 것이다. 나는 사람들이 이 변화를 감지하고 있다는 소식을 들을 때마다 기쁘다.

ps> 이 두 라이브러리를 함께 사용하려면 여기를 보라.

강력한 jQuery Selector.
javascript 의 원래 문법에 비해 너무도 강력한 css style 의 selecting 을 지원한다.
하지만 css 엔진을 이용하는 것이 아니고,
원래의 javascript 접근방식으로 재해석하여 동작하는 것이므로,
jQuery 가 어떻게 selecting 해 올지 예상하는것이 필요하다.
그렇지 않으면 모든 dom 객체를 수십번 훑는 막장 코드가 나올지도 모른다.

일단 js 에서 dom 객체를 선택하는 방법을 생각해 보자.

document.name
getElementById()
getElementsByName()
getElementsByTagName()
getElementsByClassName()

getElementsByClassName() 의 경우 최신의 몇몇 브라우저에서만 지원된다.

때문에, $('.class') 로 selecting 한다면
대부분의 브라우저에서는 getElementsByTagName('*') 을 실행하고야 말 것이다.

getElementsByTagName() 의 경우 document 만이 아니고,
모든 dom 객체에 정의되어 있다는 점도 중요하다.

또 중요한 것은 getElementsByAttribute() 라는 것은 없다는 것이다.


/* hasClass() 는 className 이 맞는지 검사하는 임의의 함수라 생각하자.
== 로는 안되므로 조금 복잡한 비교가 필요하다. */

1) 목표물이 모여있다면, 상위 block 에 id 를 주고 $('#yourblock .class') 로 접근한다.
예상) var yourblock = document.getElementById('yourblock');
var tags = yourblock.getElementsByTagName('*');
var classes = [];
for(i = 0; i < tags.length; i ++) {
if(hasClass(tags.className, 'class')) classes.push(tags[i]);
}
- 아직 많이 복잡해 보인다.

2) 한 종류의 태그라면 태그명을 표기해 주는것이 좋다. $('#yourblock a.class')
예상) var yourblock = document.getElementById('yourblock');
var tags = yourblock.getElementsByTagName('A');
var classes = [];
for(i = 0; i < tags.length; i ++) {
if(hasClass(tags[i].className, 'class')) classes.push(tags[i]);
}
- 별 차이가 없지만 * 이 A 가 되어 많이 줄어들었다.

3) 여기저기 흩어져 있다면, 차라리 name 을 줄 수 있는 a 태그 같은것을 이용한다.
getElementsByName() 은 모든 브라우저에 있고,
href 속성을 주지 않으면 a 로써의 특징적인 link 로써의 기능이 활성되지 않으므로 쓸만하다.
$('a[name=class]')
예상) var names = document.getElementsByName('class');
var aclass = [];
for(i = 0; i < names.length; i ++) {
if(names[i].tagName == 'A') aclass.push(names[i]);
}

4) 찾고자 하는것이 하나이면 더 이상 찾지 않도록 수량을 지정해 준다.
$('#id div.block:first a:first')
$('#id ul.block > li') #ul li ul li 같은 다중 ul li 처럼 깊은곳의 li 를 제외하기 위해 .class 를 주는 것 보다는 > 지시자로 깊이를 확정해 버리는 것이 좋다.
/* MySQL 도 unique 한 자료를 select 할 때에 limit 1 을 주면 더 빠르다. */

5) 굳이 jQuery 가 필요하지 않은 경우를 구분한다.
form id="frm" onsubmit="return ajaXing(this);"
function ajaXing(frm) {
이라면,
frm.name.value 로 접근이 되므로, 굳이 jQuery 로 다시 selecting 할 필요가 없다.
$() 에는 select query 만이 아니고, dom 객체도 직접 넣을 수 있으므로,
$(frm.name) 으로 이용할 수도 있다.



-- 상위의 this 접근
$('#id').each(function() {
$('input[name="chk[]"]).each(function() {

#id 가 form 이라면 여기서 그냥 this.form 으로 접근하면 될 것이다.
하지만 form 이 아니라면 상위의 this 로 접근하기가 곤란하다.

$('#id').each(function() {
var $$ = this;
$('input[name="chk[]"]).each(function() {

이제 상위의 this 는 $$ 로 접근할 수 있게 되었다.



-- var obj = $('#id');
jQuery 객체를 변수에 담아두면,
selecting 을 다시 하지 않으므로 재사용시 속도에 이득이 있다.
하지만, dom 객체를 감싸버렸기 때문에 원래 객체로의 접근성이 떨어지게 된다.
var obj = document.getElementById('test');
obj.testArr = document.getElementsByName('test');
라고 할 때
$(obj) 에서 testArr 를 직접 접근할 방법이 없다.
$(obj).each(function() {
this.testArr
이렇게 해야 한다.
때문에, 상황에 따라 적절한 선택이 필요하다.

http://docs.jquery.com/Selectors

현재 서비스되는 사이트에 적용하려고 급하게 만들었습니다;
간단하게 사용하실분만 사용하세요
jQuery 1.3.2 가 필요합니다
문제점이 무진장 많을 수 있습니다!

var top = 120; // Y값입니다 상단에서 얼마나 떨어진 위치에 고정할것인지..
var speed = 100; // 속도 값이 작을수록 빠르게 움직임
var banner = $("#banner"); // 움직이고 싶은 레이어의 ID값입니다 예) <div id = "banner"></div>

banner.css({'top':top}); // 초기 위치 지정

// IE에서는 속도를 빠르게 해줌 (좀 느린경향이 있는듯?)
jQuery.each(jQuery.browser, function(i, val){
    if(i=="msie" && val==true) speed = 10;
});

$(window).scroll(function(){
    var scrolledTop = document.body.scrollTop+top;
    banner.animate({"top":scrolledTop }, speed, "linear");
});

Trellis Development (a parent company of web-based products which I co-founded) has been developing a custom content management system which needed a form creation tool. I adapted a form builder that I created for a previous project as a jQuery 1.3 plugin. It loads in existing form structure data through an XML file (which would be generated on the server) and passes the changes as a serialized array back to the server.

View the Demonstration
Get source from github

I’ve forked the code from the cms to serve as a stand-alone plugin. It’s extremely easy to setup, as all you need to do is to activate it on an un/ordered list item element. Then, write your backend code to handle the incoming array as you need, and output the xml data for when the form loads.

<ul id="form-builder"></ul>

$(document).ready(function(){
	$('#form-builder').formbuilder({
		'save_url': 'save.php',
		'load_url': 'form-a.xml'
	});
});

The save_url is the url that the ajax will be sent to when the user saves the form. The form information is serialized so that the backend programming may handle it as an array.

The load_url is the url of an xml file that describes any existing form information, and the system uses it to restore the fields.

This requires jQuery 1.3+ and uses the scrollTo plugin for nice scrolling.

This is the first revision that’s external to our cms so I’ve labeled it 0.1.

Part 1: 브라우저로 데스크톱 응용 옮기기

Part 2: 내일 나올 웹 응용을 오늘 구현해보자

jQuery  Ajax 개발

3부: jQuery와 Ajax로 RIA 만들기

Ajax로 사이트 전면 개편, Part 1: Ajax와 jQuery로 기존 사이트 개선하기

Ajax로 사이트 전면 개편, Part 2: jQuery, Ajax, 툴팁, 라이트박스로 기존 사이트 개선하기

Ajax로 사이트 전면 개편, Part 3: jQuery, Ajax 탭, 회전식 슬라이드쇼로 기존 사이트 개선하기


Ajax로 사이트 전면 개편, Part 4: 기존 사이트를 jQuery와 Ajax forms를 사용하여 개선하기
 

이번 블로그에서는 jQuery 사용자 정의 메소드를 만드는 걸 해볼랍니다.
뭐.. 이제와서 사용자 정의 메소드를 만들어 보는게 참.. 거시기 합니다만.. 언제까지나 따라하기 신공으로는 필요한 모든걸 충족하기 힘들잖습니까?

jQuery 확장 메소드작성시 항상 주의해야 하는것은.

1. jQuery 확장 메소드는 jQuery 확장 집합을 반환해 주는것이 좋다.
2. jQuery 의 별칭인 $는 다른 javascript framework에서도 사용중이며, $.noConflict() 함수를 사용할수 있다.
3. 매개변수의 전달을 최소화하라.(기본값을 사용하라)

그럼 jQuery 확장 메소드를 만들어보자.

    (function($){

    })(jQuery);

위와 같은 준비 코드를 작성하라.
위의 코드는 주의 2 jQuery의 별칭인 $를 다른 javascript framework에서도 사용하고 있다는 예외 사항을 대비한 코드이다.
매개변수로 전달된 $는 jQuery 의 별칭임을 나타낸다.

hoverTable을 사용하기 위하여 함수를 선언하여 보자.
    (function($){
        $.fn.hoverTable = function(option){ //확장 메서드 선언
        };
    })(jQuery);

우선 이름은 hoverTable로 지었다.
특별히 설명할 부분은 없는듯 하니 다음으로 넘어가자.
다음은 매개변수은 option을 설정한다.
    (function($){
        $.fn.hoverTable = function(option){ //확장 메서드 선언
            var options = $.extend( {  //기본 옵션 설정
                "thead" : "thead",
                "tbody" : "tbody",
                "oddClass" : "odd",
                "evenClass" : "even",
                "hoverClass" : "hover"
            },option || {});
        };
    })(jQuery);

위와 같은 방법으로 option의 값에 기본값을 설정하였다.

• thead: thead 태그의 스타일
• tbody : tbody 태그의 스타일
• oddClass : tbody의 홀수 번째 tr의 스타일
• evenClass : tbody의 짝수 번째 tr의 스타일
• hoverClass : tbody의 마우스가 올라간 tr의 스타일

자.. 이제 매개변수 까지 지정 하였고 쭉쭉 진행해 보자.


    (function($){
        $.fn.hoverTable = function(option){ //확장 메서드 선언
           
            var options = $.extend( {  //기본 옵션 설정
                "thead" : "thead",
                "tbody" : "tbody",
                "oddClass" : "odd",
                "evenClass" : "even",
                "hoverClass" : "hover"
            },option || {});
           
            return this.each(function(){ // 여러개의 확장 집합에 대한 처리후 확장집합을 반환
            });
        };
    })(jQuery);
   
위와 같이 return 을 사용하여 반복문 this.each 를 실행하면 jQuery 확장 집합을 반환 할 수 있다.


    (function($){
        $.fn.hoverTable = function(option){ //확장 메서드 선언
           
            var options = $.extend( {  //기본 옵션 설정
                "thead" : "thead",
                "tbody" : "tbody",
                "oddClass" : "odd",
                "evenClass" : "even",
                "hoverClass" : "hover"
            },option || {});
           
            return this.each(function(){ // 여러개의 확장 집합에 대한 처리후 확장집합을 반환
                $(this).find('thead tr').addClass(options.thead); // 테이블 헤더 클래스 정의
                $(this).find('tbody').addClass(options.tbody); // 테이블 헤더 클래스 정의
                $(this).find('tbody tr:nth-child(odd)').addClass(options.oddClass); // 테이블 헤더 클래스 정의
                $(this).find('tbody tr:nth-child(even)').addClass(options.evenClass); // 테이블 헤더 클래스 정의
            });
        };
    })(jQuery);  
   
위의 추가된 4줄의 코드로 헤더와 body 의 홀수, 짝수 번째 줄의 스타일을 할당하였다.
기본적인 모양은 끝 났으니 이제 hover 동작을 넣어 보도록 하자.


    
    (function($){
        $.fn.hoverTable = function(option){ //확장 메서드 선언
           
            var options = $.extend( {  //기본 옵션 설정
                "thead" : "thead",
                "tbody" : "tbody",
                "oddClass" : "odd",
                "evenClass" : "even",
                "hoverClass" : "hover"
            },option || {});
           
            return this.each(function(){ // 여러개의 확장 집합에 대한 처리후 확장집합을 반환
                $(this).find('thead tr').addClass(options.thead); // 테이블 헤더 클래스 정의
                $(this).find('tbody').addClass(options.tbody); // 테이블 헤더 클래스 정의
                $(this).find('tbody tr:nth-child(odd)').addClass(options.oddClass); // 테이블 헤더 클래스 정의
                $(this).find('tbody tr:nth-child(even)').addClass(options.evenClass); // 테이블 헤더 클래스 정의
                function hover(event){  // 마우스 over / out 동작 function 정의
                    $(event.target.parentNode).toggleClass(options.hoverClass);
                }
                $(this).find('tbody tr').mouseover(hover); // mouseover 이벤트 설정
                $(this).find('tbody tr').mouseout(hover); // mouseout 이벤트 설정
                
            });
        };
    })(jQuery);
위의 코드에서 mouseover, mouseout 이라는 두 jQuery Event Helfer Method를 사용하였다.
                $(this).find('tbody tr').mouseover(hover); // mouseover 이벤트 설정
                $(this).find('tbody tr').mouseout(hover); // mouseout 이벤트 설정
은 다음과 같이 수정이 가능하다.

talt : 토글상태의 이미지 ALT 값.

가타 부타 말 할것 없이 소스부터 보자

    (function($){
        $.fn.hoverImg = function(option){ //확장 메서드 선언
           
            var options = $.extend( {  //기본 옵션 설정
                "src" : null
            },option || {});
           
            return this.each(function(){ // 여러개의 확장 집합에 대한 처리후 확장집합을 반환
                if( options.src == null) {options.src = $(this).attr("src");}
                var fnHover = function()
                {
                    var tmp = $(this).attr("src");
                    $(this).attr("src",options.src);
                    options.src = tmp;
                }
                $(this).hover(fnHover,fnHover);
            });
          }
    })(jQuery);   
   

option은 현재로써는 하나 뿐이다.

src : 롤오버될때 보여질 이미지 경로.

ex )  $("#toggle").hoverImg({"src":"pre_.gif"});

프로젝트중 달력 컨트롤을 사용해야 하는 경우가 많은듯하다..

그동안 사용하던 ASP.NET 의 calendar 컨트롤을 버리고 jQuery plugin중 하나인 jQuery Datepicker 를 사용하기로 결정을 내렸다.

이유는 jQuery 매번 달력 컨트롤을 비하인드에서 생성하는 것 보다. 간단한 선택을 할때는 jQuery를 사용하고 이벤트를 기록해야 하는 경우에는 다른 플러그인이나 또는 asp.net의 calender control을 사용하려는 계획이다.

날짜 선택에서는 jQeury datepicker가 가장 적합하다는 결론이라고나 할까??

먼저 홈페이지의 주소를 알려 주겠다 .  달력 컨트롤 말고도 상당히 괞찮은게 많다.. 꼭 들어가 보자!!

http://keith-wood.name/

먼저 특징을 알아보자.

1. 유연한 디자인 : jQuery 플러그인들의 특징이라면 특징인데.. 모든 플러그인의 디자인은 모두 css에 의존적이다. 의존적이라는 말은 모든 디자인은 css 만을 사용한다는 의미로써 코드와 디자인이 완전 분리되기 때문에 디자인이 상당히 유연해 진다.
2. 지역화 : 마치 닷넷의 지역화 코드처럼 지역화 코드 jQuery.datepick-ko.js 를 제공하여 한국어를 지원한다. 세계화 추세에 맞춘 서비스라 하겠다..(굉장히 좋은 아이디어라고 생각된다. )
3. 간단한 사용법 : 이것도 jQuery 플러그인들의 특징이라고 생각된다.

그럼 샘플 소스를 한번 보자. ( 홈페이지의 소스와 다를바 없다. 홈페이지 참조해라)

    $(function(){
        $('#defaultInlineDatepicker').datepick({"onSelect" : function(value,date,inst){
            alert("선택 : " + value);
        }});
        $('#defaultPopupDatepicker').datepick();

    });

<body>
<span id="defaultInlineDatepicker" class="datepicker"></span>

<input type="text" id="defaultPopupDatepicker" class="datepicker"/>
</body>

1. 페이지에 달력이 들어가 있는 defaultInlineDatepicker
2. 입력 컨트롤에 포커스가 가면 달력이 나타나는 defaultPopupDatepicker 

위의 두가지 방식중에 어떠한 것이 좋다고 말하기는 애매한듯하다. 둘의 사용법이 틀리다고 생각 된다. 입력 컨트롤에 값을 채워 넣는 방식은 검색의 조건이나 폼의 값으로 날짜를 셋팅하여야 할 때 사용되고 , 첫번째 방식은 날짜를 선택함으로써 바로 어떠한 다른 동작이 이루어질때 사용된다고 생각된다.

그런데.. 우리 보통 달력 이미지를 클릭해서 달력을 나타내지 않았었나? 그럼 그것도 추가해보자.

$('#btnPopDatepicker').click(function(){
        $('#defaultPopupDatepicker').trigger('focus');
 });

<img src="" alt="달력으로 날짜 입력" id="btnPopDatepicker" />

뭐.. 별꺼 없다.. 이미지 태그 하나 추가하였고. 그 이미지 클릭 이벤트에 defaultPopupDatepicker 컨트롤의 focus 이벤트의 trigger를 생성하였다.

참.. 쉽다... 하면 할수록.. jQuery 매력있다.. ♡

다른 속성은 차후 블로그에 추가하여 더 고급적으로 사용해 보도록 하자.

JQuery 책을 한번 쭉~~ 읽어 봤다..

예제로 올라와 있는 소스를 약간 변경해서 마우스 오버했을때 색상이 변경되도록 수정을 했다.

사용한건 hover 메소드와 toggleClass를 사용했다.

작성하면서 있었던 한가지 문제점은 hover 메소드를 bind 한 확장Element 집합은 table.hover tr 이었는데 event.target은 td 엘리먼트가 돌아오는 것이었다.

그래서 사용했던게 parentElement 속성을 사용했었으나! parentElemet 속성을 FF 에서 인식하지 못하는 문제가 발생하였다.

( IE, FF, OP 테스트 SF는 본인 PC가 이상해져서 테스트 못 함)

그래서 사용한것이 XPath 문법인 parentNode를 사용하여 tr 로 접근 하였다.

CSS 를 잘 정의하면 쉽게 기능을 붙여 나갈수 있을듯하다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

  <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>움직이는 얼루 무늬</title>
    <script type="text/javascript" src="../scripts/jquery-1.2.1.js">
    </script>
    <script type="text/javascript">
      $(function() {
        $("table.hover tr:nth-child(even)").addClass("striped");
        $("table.hover tr").hover(
            function(event){
                $(event.target.parentNode).toggleClass('striped1');
            },
            function(event){
                $(event.target.parentNode).toggleClass('striped1');
            }
        );
      });
     
    </script>
    <style>
      body,td {
        font-size: 10pt;
      }
      table {
        background-color: black;
        border: 1px black solid;
        border-collapse: collapse;
      }
      th {
        border: 1px outset silver;
        background-color: maroon;
        color: white;
      }
      tr {
        background-color: white;
        margin: 1px;
      }
      tr.striped {
        background-color: coral;
      }
      tr.striped1
      {
       background-color: #C0C0C0;
      }
      td {
        padding: 1px 8px;
      }
      table.hover{
      }
    </style>
  </head>

  <body>
    <table class="hover">
      <tr>
        <th>생산연도</th>
        <th>제조사</th>
        <th>모델</th>
      </tr>
      <tr>
        <td>1965</td>
        <td>Ford</td>
        <td>Mustang</td>
      </tr>
      <tr>
        <td>1970</td>
        <td>Toyota</td>
        <td>Corolla</td>
      </tr>
      <tr>
        <td>1979</td>
        <td>AMC</td>
        <td>Jeep CJ-5</td>
      </tr>
      <tr>
        <td>1983</td>
        <td>Ford</td>
        <td>EXP</td>
      </tr>
      <tr>
        <td>1985</td>
        <td>Dodge</td>
        <td>Daytona</td>
      </tr>
      <tr>
        <td>1990</td>
        <td>Chrysler</td>
        <td>Jeep Wrangler Sahara</td>
      </tr>
      <tr>
        <td>1995</td>
        <td>Ford</td>
        <td>Ranger</td>
      </tr>
      <tr>
        <td>1997</td>
        <td>Chrysler</td>
        <td>Jeep Wrangler Sahara</td>
      </tr>
      <tr>
        <td>2000</td>
        <td>Chrysler</td>
        <td>Jeep Wrangler Sahara</td>
      </tr>
      <tr>
        <td>2005</td>
        <td>Chrysler</td>
        <td>Jeep Wrangler Unlimited</td>
      </tr>
      <tr>
        <td>2007</td>
        <td>Dodge</td>
        <td>Caliber R/T</td>
      </tr>
    </table>
  </body>
</html>

이번에는 jquery 기반의 tab 플러그인을 사용하기 위해 테스트를 해 봤다.

http://stilbuero.de/jquery/tabs/

위의 사이트에서 참고 하여 가지고 왔다.

항상 그렇듯 가장 좋은 샘플은 Simple!!! 간단한 샘플이다.

그러나 대충 코드를 보니 심플과 페이드가 별 차이가 없는 듯 하다.

그래서 페이드를 선택!!

자 그럼 페이드만 남겨 놓은 소스를 음미해 보자

외부 링크되는 스크립트는 3가지이다.

<SCRIPT src="../lib/jquery.js" type=text/javascript></SCRIPT>
<SCRIPT src="jquery.tabs.pack.js" type=text/javascript></SCRIPT>

이미 알고 있듯이 jquery.js 는 라이브러리이며 tab 과 관련된 라이브러리는 jquery.tabs.pack.js 이다. 기억해 두자.

그리고 html 소스를 보자!

 <div id="container-4">
            <ul>
                <li><a href="#fragment-10"><span>One</span></a></li>
                <li><a href="#fragment-11"><span>Two</span></a></li>
                <li><a href="#fragment-12"><span>Three</span></a> </li>
            </ul>
            <div id="fragment-10">탭1</div>
            <div id="fragment-11">탭2</div>
            <div id="fragment-12">탭3</div>
        </div>

jquery  샘플들의 특징인 겸손한 html!!!!  말 그대로 완전 분리 되어 있다. 여기서 주목할 점은 href 의 경로가 #id 로 되어 있다는 점이다.

다들 알고 있겠지만 #id로 되어 있으면 해당하는 id 위치로 찾아가는 책갈피 기능이 된다. 그러므로 스크립트가 실행될 수 없다면 책갈피 위치인 div가 존재하는 곳으로 위치 이동을 하게 됨으로써 웹 접근성이 구현 되게 된다.

그럼 javascript를 보자.

<script type="text/javascript">
$(function() {

    $('#container-4').tabs({ fxFade: true, fxSpeed: 'fast' });

});
</script>

우오~ 간단 하다!!! 믓찌다!!! 이걸로 끝! 내면 될려나?

설명  쫌 붙여 보자.. 우선 화면을 꾸미기 위해서 class 들을 분류할 필요가 있다.

        navClass: 'tabs-nav',
        selectedClass: 'tabs-selected',
        disabledClass: 'tabs-disabled',
        containerClass: 'tabs-container',
        hideClass: 'tabs-hide',
        loadingClass: 'tabs-loading',

다음의 옵션을 가질수 있다.

navClass : 탭의 헤더 부분을 포함하는 UL 의 class , Default : tabs-nav

selectedClass : 선택된 탭 Li 태그의 class

disabledClass : 비활성화된 탭 Li 태그의 class

containerClass : 내용 div의 class

hideClass : 숨겨진 내용 div의 class

위의 옵션을 다양하게 조절하여 표현 할 수 있다.

음.. 다 맘에 드는데.. 하나가 없다.. click 에서만 셋팅이 된다는 것이다. 일반적인 요구사항 중에 mouseover가 발생 했을때 탭이 변경되도록 해 달라는 요청이 꽤 많은 것을 고려해서 tabs 플러그인을 수정해 보았다.

1. 옵션을 추가한다.

    settings = $.extend({
        initial: (initial && typeof initial == 'number' && initial > 0) ? --initial : 0,
        disabled: null,
        bookmarkable: $.ajaxHistory ? true : false,
        remote: false,
        spinner: 'Loading&#8230;',
        hashPrefix: 'remote-tab-',
        fxFade: null,
        fxSlide: null,
        fxShow: null,
        fxHide: null,
        fxSpeed: 'normal',
        fxShowSpeed: null,
        fxHideSpeed: null,
        fxAutoHeight: false,
        onClick: null,
        onHide: null,
        onShow: null,
        navClass: 'tabs-nav',
        selectedClass: 'tabs-selected',
        disabledClass: 'tabs-disabled',
        containerClass: 'tabs-container',
        hideClass: 'tabs-hide',
        loadingClass: 'tabs-loading',
        tabStruct: 'div',
        selectEvent : "click"
    }, settings || {});

2. 이벤트 바인딩 되는 곳을 settings 에서 불러온다.

        // attach click event
        tabs.bind(settings.selectEvent, function(e) {

3. 테스트 한다!

 $('#container-4').tabs({ fxFade: false, fxSpeed: 'fast',selectEvent:'mouseover' });

Fade 옵션을 false로 바꾸었다 mouseover를 했을때 바뀌는것은 굉장히 빠르게 움직여야 하기 때문에 Fade가 들어가면 좋지 않은듯하다.

===========================================================================================================================

요구사항 1. 탭이 좌측에 위치할 수 있어야 한다.

한참 소스를 수정하다가 생각하니.. navClass 라는 속성이 있던것이 생각이 났다.

그래서 navClass를 tabs-nav-left 라 하고 CSS를 정의 하였다.

.tabs-nav-left
{
  float:left; PADDING-RIGHT: 0px; PADDING-LEFT: 4px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none ;DISPLAY: inline-block
}

.tabs-nav-left  LI {
 MARGIN: 0px 0px 0px 1px; min-width: 84px
}

그리곤 script에서 tabs 정의

$('#container2').tabs({ navClass : "tabs-nav-left"});

저렇게 하면 좌측으로 탭이 가서 붙는다.

물론 .tabs-nav-left 의 하위 컨텐츠에 대한 스타일 시트는 모두 수정해 주어야 한다.

Another great Addon for Ext Framework again. Ext File Upload Form Widget is to provide an user interface for easy uploading of files to a server.

Files are first added to an “upload queue” and then they are uploaded to the server. Any file can be individually removed from the queue before upload or the whole queue can be cleared.

The result of upload is shown for each file by icons of success or failure and, in the case of failure, the server error message is
                                                          shown as the tooltip of the failure icon.

Requirements: Ext Framework
Demo: http://aariadne.com/uploadform/
License: LGPL License

There are a number of tools such as DataTables which provide enhanced access to HTML tables for Javascript capable browsers. However, these tools often lack keyboard accessibility. KeyTable addresses this by allowing Excel like cell navigation on any table.

KeyTable is a Javascript library which provides keyboard navigation and event binding for any HTML table. With KeyTable Excel style table navigation can be employed to provide features such as editing of a table without requiring a mouse. Simply navigate to the cell you wish to edit and hit return. This initialises the excellent jEditable plug-in for jQuery - make your edit and then hit return again to save.

Requirements: IE 6+, Firefox 3+, Safari 3+, Opera 9.6
Demo: http://www.sprymedia.co.uk/article/KeyTable
License: GPL or BSD License

TinyTable - Easy to Use Javascript Table Sorter

The iPod Drilldown and Flyout Styles Menu System can be used to create a simple dropdown menu for a single list of options, a flyout menu for a smaller hierarchical list of options where child menus are displayed next to the parent menu on mouseover, and two variations on the iPod style, one with a back button and another with a linked breadcrumb to let users easily traverse back up the hierarchy.

It provides easy navigation of complex nested structures with any number of levels. They also built in the ability to customize a menu’s appearance, including active and hover states, by passing in classes as options.

Requirements: jQuery Framework
Demo: http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/
License: MIT, GPL License

JQuery 사용해보기.

프로토타입, 도조 등 많은 비슷한 스크립트 라이브러리들이 있지만 요세 대세? 가벼우면서 막강한 JQuery를 사용해보자.

각 포털사이트에서 JQuery를 검색해보면 JQuery는 홈페이지에서 다운로드 할 수 있다.

 

해당 엘리먼트 접근하기

일반 : document.getElementById("id");

JQuery : $("#id");

   - 엘리먼트의 ID 접근시 #, class 접근시 .

 

해당 엘리먼트의 값 접근하기

일반 : document.getElementById("id").value;

JQuery : $("#id").val();

   - 엘리먼트의 값을 대입하고 싶다면 $("#id").val("값");

 

해당 엘리먼트의 개체를 비교하여 true/false를 알려주는 메소드

일반 : document.getElementById("id").checked;

JQuery : $("#id").is(':checked');

   - 체크박스 및 라디오버튼에 체크상태인지를 boolean 형으로 반환

   - $("#id").is(".orange, .blue, lightblue");  id의 class 속성중 orange, blue, lightblue 가 하나라도 있으면 true

 

해당 엘리먼트의 CSS 속성 부여하기

일반 : document.getElementById("id").style.border = "4px solid yellow");

JQuery : $("#id").css("border", "4px solid yellow");

    - 첫번째인자는 속성이름, 두번째인자는 속성값을 넣으면 된다.

 

해당 엘리먼트의 display 속성 부여하기

일반 : document.getElementById("id").style.display = "none";

JQuery : $("#id").hide(); , $("#id").show();

    - hide 숨김, show 보임, hide, show 안에 인자를 slow, normal, fast 중 하나로 보임숨김의 속도를 조절 할 수 있다.

    - 아니면 수치로 1000분의 1초로 할 수 있음. show(950)

 

체크박스의 전체선택 / 해제

일반

function selectAll() {
    var blnChecked = document.getElementById("allCheck").checked;      // 전체선택 체크박스의 상태
    checkBoxes = document.getElementsByName('delCheck');                // 태그이름중 delCheck인 엘리먼트를 배열로 얻음

 

    for(var i=0; i<checkBoxes.length; i++) {
     objCheck = checkBoxes[i];
        if (objCheck) {
            objCheck.checked = blnChecked;
  }
    }
}

 

JQuery

$(document).ready(function() {                    
  $('#allCheck').click(function() {                    // 전체선택 체크박스 선택 이벤트
    if($('#allCheck').is(':checked')){                // 전체선택 체크박스 체크상태
      $('.delCheck').each(function(){                // 여러개의 체크박스 의 class 속성의 값이 delCheck 인걸 가져옴
        $(this).attr('checked', 'checked');           // 가져온 체크박스를 checked
        });
     }else{                                                     // 전체선택 체크박스 미체크상태
       $('.delCheck').each(function(){
       $(this).attr('checked','');                         // 가져온 체크박스를 미체크상태로
       });
     }
   }); 
});

 

엘리먼트의 존재여부를 체크하기

JQuery : if($("#id").length > 0)     

    - 엘리먼트로 존재하지 않은 경우에도 빈 객체로 반환하기 때문에 JQuery는.. 객체의 길이를 체크해서 존재여부를 체크한다.

슬라이더는 웹어플리케이션에서 큰 기능성으로 어필하진 않지만 사용자 인터페이스의 직관성과 편의성을 높여 어플리케이션의 체감완성도를 높여 줄 수있다. 한마디로 그럴듯 해 보인다는 거다..

jquery로 구현하는 소스코드는 놀라울 만치 간결하고 명료하다. 구현 소스코드


커스터마이징을 위한 여러가지 옵션이 있다. 상세한 옵션은 다음 링크를 참조 할것.

jquery UI/Slider Document

jquery : 번갈아 가며 TR에 속성주기
<script type="text/javascript">
    $(document).ready(
        function() {
            $.each($('.tr_arr:odd'), function(i){ // 홀수 번째
                $(this).css("backgroundColor", "#FFFFFF");
            });
            $.each($('.tr_arr:even'), function(i){ //짝수 번째
                $(this).css("backgroundColor", "#F7F7F7");
            });
        });
</script>

<TABLE border=1>
<TR  class="tr_arr">
    <TD>data1</TD>
</TR>
<TR  class="tr_arr">
    <TD>data2</TD>
</TR>
<TR  class="tr_arr">
    <TD>data3</TD>
</TR>
<TR  class="tr_arr">
    <TD>data4</TD>
</TR>
</TABLE>

select box의 내용 가져오기
$("#select_box > option:selected").val();

select box의 값 설정
$("#select_box > option[@value=지정값]").attr("selected", "true")

jQuery 바로가기

이 글은 번역한 것입니다. 원문은 여기에서 확인하실 수 있습니다. 겸손한 자바스크립트를 구현하기엔 jQuery가 가장 적절하고 바람직하다는 생각에 옮겨봅니다. 저도 Quark씨처럼 당장의 편리함을 따른 것보다 jQuery의 철학을 따르는 것이 더 바람직하다고 생각합니다. 항상 디커플링을 지향하는 것이 생산성 문제를 개선하고 미래에 적응하는 것을 가능케 하기 때문입니다.

 오역된 부분이 있을 지도 모르겠습니다.-_-;; 교과서 영어가 아니라-_-;; 나름대로 의역을 하긴 했는데 어렵네요.

----여기부터는 번역입니다.

 jQuery는 겸손한(unobtrusive) 자바스크립트를 위한 자바스크립트 라이브러리다. jQuery는 태생적으로 Behavior driven development 방법론을 지향하고 CSS 셀렉터를 사용하여 HTML 문서를 훓는 방법(traversing)을 방법에 기반한다. 반면에 Prototype은 태생적으로 Class driven development를 지향하고 쉽게 자바스크립트 개발할 수 있도록 해준다. Prototype 라이브러리는 Ruby on Rails에서 아주 잘 지원되고 많은 헬퍼 함수들을 가지고 있다.

 세달 전에 마음을 jQuery로 굳히기까지 나는 항상 Prototype 라이브러리를 사용해왔다. jQuery은 나를 매우 고무시겼다. 여기에 그 이유가 있다.

  1. BDD(Behavior driven development)
  jQuery를 사용하면 CSS로 HTML 엘리먼트의 스타일을 정의하는 것 처럼 HTML 엘리먼트의 행동들을 분리하여 정의할 수 있다. 클릭했을 때 경고창을 띄우는 예제를 보자.

$(element).click(function(){
  alert("warning");
});

  이제 복잡한 예제를 살펴보자. speciallinks 클래스들의 모든 엘리먼트에 다음과 같은 행위를 집어넣자.
    1. href를 "javascript:void(0);"로 변경하고
    2. 클릭시 로그를 남기고
    3. onhover시(mouse over시) 배경색을 변경한다.

$("div.speciallinks").attr("href","javascript:void(0)")
  .click(function() {console.log("div.speciallinks clicked");})
  .hover(function(){$(this).addClass("hovered");},
       function(){$(this).removeClass("hovered");});

  2. MVC + J
    MVC 프레임웍은 웹 개발 환경을 Model-View-Controller로 나누었다. MVC 프레임워크에서 뷰는 HTML, CSS, Javascript의 부분으로 나누어지고 GUI 개발은 이 세부분이 하나로 결합하여 완성된다. 게다가 Ruby on Rails에서의 Prototype 라이브러리는 HTML과 JavaScript도 함께 합쳐버린다(meshup). 뷰를 개발하면서 JavaScript를 분리하는 BDD 방법론을 따르려 한다면 jQuery가 매우 적절하다. 나는 Ajax에서 MVC + J가 매우 강력하다는 것을 깨닭았다.

    나는 JQuery를 사용하여 나의 HTML 파일을 매우 깨끗하게 만들었고 모든 JavaScript 코드를 .js에 넣음으로써 HTML 엘리먼트의 행위를 모두 .js 파일에 정의하였다.

  3. 액션 체인(Chaining of actions)
    액션 체인은 DRY 원칙을 따를 뿐만 아니라 JavaScript 코드의 가독성을 증가시킨다. 만약 엘리먼트에 오퍼레이션들을 삽입하려면 다음과 같이 할 수 있다.

$("div.message").show()
  .append("<p>Action has been executed successfully")
  .addClass("flash");
// 각 함수는 라인으로 구분��여 사용한다.

    이 것은 jQuery의 모든 메소드가 query 객체를 반환하기 때문에 가능하다. 그리고 뒤따르는 메소드들이 선택된 HTML 엘리먼트에 체인 형식으로 적용된다.

   4. CSS 셀렉터 문제(CSS Selector rocks)
      CSS 셀럭터 HTML DOM을 사용하기에 매우 강력한 도구이다. jQuery는 HTML 문서의 엘리먼트를 식별하기 위해 CSS 셀러터를 이용하고 이를 위해 HTML 태그의 id 속성을 관리해야 하는 지루한 작업을 회피하게 해준다. 대부분의 id 속성은 CSS 셀렉터를 올바르게 사용하여 회피할 수 있다. Prototype의 $$ 함수는 CSS 셀렉터를 지원하지만 CSS 셀렉터의 능력을 모두 이끌어내지 못한다. 나는 Prototype에서 id 속성을 사용하는 것이 최선이라는 것을 알게 됐다.

   5. 엘리먼트의 존재 유무를 검사할 필요가 없다.
     프로토타입으로 액션으로 적용하기 전에 항상 엘리먼트가 존재하는지 확인해야 했다. 예를 들어 나는 사용자가 로그인 했을 때만 사용자가 명시한 내용을 보여주고 싶었다. 사용자가 로그인 했다면 렌더링된 페이지에 div{id='user-box'}같은 엘리먼트가 있다는 것을 검사해야 했다. 프로토타입에서는 그렇게 해야 했다.

if ($('user-box')!=null) {
    // jQuery에서는 이 if 블럭이 필요없다.
    $("user-box").style.backgroundColor = "red";
}

   6. Aids development process
     jQuery를 사용하면 HTML 코드가 간결해지고 거의 건드릴 필요가 없다. 나의 웹 디자이너는 쉽게 html과 stylesheet를 수정할 수 있고 Prototype 라이브러리를 몰라도 된다.

예제들:
  여기에는 jQuery와 프로토타입의 차이점을 강조하는 몇 가지 예제가 있다(물론, 이 코드가 최상의 코드는 아니다).

Example1:
 이 Tab 예제는 tabs 클래스에 속하는 3 개의 tab이 있고 id는 각각 tabs1, tabs2, tabs3이다(ids=>["tabs1","tabs2","tabs3"]). 사용자가 "show first tab" 링크를 클릭했을 때 #tab1만 보여진다.

 jQuery의 경우

$("div.tabs").hide();
$("div#tabs1").show();

    
  Prototype의 경우

$$("div.tabs").invoke("hide");
     //이거��
$$("div.tabs").each(function(x){
  Element.hide(x);
});
// 그리고 다음과 같은 코드로 마무리한다.
$("tabs1").show();

Example2:
엘리먼트의 CSS를 수정하는 예제

  jQuery의 경우

$("#user-box").css("background-color","red")

  Prototype의 경우    

var a = $("user-box");
a.style.cssText +=
       "background-color:red;";

Remy Sharp의 발표자료에서 다른 예제들도 볼 수 있다(http://ajaxian.com/archives/prototype-and-jquery-a-code-comparison).

Prototype이 좋은 이유
  1. Ajax 요청에서 div의 내용이 부분적으로 변경돼야 할때 JavaScript 행위는  activated/reactivated돼야 한다. jQuery에서는 이를 위한 많은 코드를 만들지 않아도 된다. 하지만 나는 Ajax로 로드된 이 부분을 항상 마음속으로만 새겨야 한다. Prototype에서는 로드된 HTML 엘리먼트들에 관련된 JavaScript 코드가 포함된다.
  2. Ruby on Rails의 Prototype 헬퍼들은 정말 대단하고 JavaScript와 Ajax를 만들때 많은 부분에서 매우 편리하다.
  3. Prototype은 자바스크립에서도 Ruby같은 문법을 사용할 수 있게 해준다. 개발을 쉽고 빠르게 할 수 있도록 배열, 객체 등의 기능을 변경해준다.
  4. jQuery에서는 JavaScrpt 파일이 모두 다운로드되고 DOM 생성된 후에만 엘리먼트의 행위를 사용할 수 있다. 연결이 느릴 때는 기다려야만 하기 때문에 매우 고통스럽다.

결론:
  jQuery와 Prototype은 둘 다 매우 굉장하다. 나는 더 적은 코드로 더 많은 일을 하면서 직관적이고 겸손하게 유지해야 한다는 jQuery의 철학이 큰 차이를 만든다고 생각한다. 그러나 나는 Prototype이 매우 그립다. jquery-rails가 통합되길 기다리고 있다. 결국 이 고지는 점령될 것이다. 나는 사람들이 이 변화를 감지하고 있다는 소식을 들을 때마다 기쁘다.

ps> 이 두 라이브러리를 함께 사용하려면 여기를 보라.