http://jqueryui.com/ 에서는 여러가지 유용한 jquery ui 를 제공한다.

여기서 제공하는 ui만 잘 활용하더라도 멋진 웹을 만들수 있을거라는 생각이 든다.

간단한 사용법의 테스트차 적어본 소스이다 datepicker 메서드의 속성의 dateFormat만 적혀있지만 아마도 다른 속성들또한 여러가지가 있을것이다. 각 메서드에대한 속성의 종류와 설명은 위 홈페이지에 들어가면 설명이 나와있을것이다.

결과화면이다. 처음엔 input 타입이 text인 창만 하나 나오게 된다. text창에 클릭을 하게되면 밑에 달력모양이 뜨며 날짜를 선택할수있게 된다. 날짜를 선택하면 text창에 해당 날짜가 자동으로 입력되어진다.

jQuery 이외에도 여러 자바스크립트 프레임 워크가 있습니다.

여러 프레임워크를 함께 사용할 때는 프레임 워크간에 충돌이 발생할 수 있습니다.

jQuery 이외에 자주 사용하는 Prototype 프레임워크에서도 지금까지와 마찬가지로 식별자 $를 사용합니다. 따라서 jQuery 프레임워크와 Prototype 프레임워크를 함께 사용하면 프레임워크 간에 충돌이 발생합니다.

충돌을 방지 할 때 사용하는 메서드는 $.noConflict() 입니다.

$.noConflict() 메서드를 사용하면 더 이상 jQuery의 식발자 $를 사용할 수 없습니다.

$외에 간단하게 쓰고 싶다면 jQuery 객체를 다른 변수에 저장해서 사용하는 방법이 있습니다.

기존의 자바스크립트를 사용해 빈 객체를 생성하고 이후에 새 속성을 추가 할때는 위와 같은 방법을 사용합니다.

적은 수의 속성을 추가할때는 크게 문제가 되지 않지만 많은 수의 속성을 추가하고자 할때는 이방법을 사용하면 매우 귀찮고 코드가 지저분해 집니다. 이러한 문제를 해결하고자 만들어진 메서드가

$.extend(object, addObject, addObject, ....) 입니다.

첫번째 매개변수에는 객체를, 두번째 매개 변수 이후부터는 입력한 객체에 추가할 객체를 입력합니다.

$.extend 메서드를 사용하여 위와같이 object 객체에 합쳐진 것을 볼 수 있습니다.

jQuery를 사용해 배열을 관리할 때는 each() 메서드를 사용합니다.

each() 메서드는 매개 변수로 입력한 함수를 사용해 for in 반복문 처럼 객체나 배열의 요소를 검사하는 메서드 입니다.

each() 메서드는 다음과 같이 두 가지 형태를 갖습니다.

1. $.each(object, function(index, item){ })

2. $(selector).each(function(index, item){ })

$.each() 메서드의 첫번째 매개 변수 index는 배열의 인덱스 또는 객체의 키를 의미하며

매개 변수 item은 해당 인덱스나 키가 가진 값을 의미 합니다.

$() 메서드를 사용해 h1 객체를 선택하였고 addClass 클래스를 이용하여 문서 객체에 class 속성을 추가 합니다.

일반적으로 매개 변수 item을 사용할 수도 있지만, this 키워드도 많이 사용됩니다. this키워드와 item은 의미가 같습니다.