2010. 8. 1. 00:20
jQuery
- jQuery 를 로드 하는 방법
1. jQuery 를 다운 받아 경로 지정 후 사용 (http://jquery.com 에서 다운 로드 받으면 됨)
=> 선언 <script src="/경로명/jquery.min.js"></script>
2. jQuery 가 제공 되고 있는 사이트를 직접 Url 로 지정
=> 2.1 http://code.jquery.com/jquery.min.js"></script>
2.2 http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js - jQuery 의 위치는?
튀지 않는 (unobtrusive) 자바스크립트 방식을 사용하는 최근의 자바스크립트 어플리케이션들은 일반적으로 DOM이 완전 로드 되고 난 후에만 자바스크립트 코드를 수행한다. 그리고 실제로도 모든 DOM 탐색과 조작은 그들이 작동작하기에 앞서 DOM 이 완전하게 로드되는 것을 요구한다. DOM 은 다 로드 되었지만 swf 파일과 같은 모든 자원들을 아직 못한 시점을 알아내기 위한 방법이 필요. window.onload 는 자원이 다 로드된 후 발생함. 즉 DOM 그 자체가 탐색과 조작을 위한 준비를 끝냈을을 알려주는 이벤트는 = jQuery(document).ready(function(){})
실제론 ready() 이벤트는 자바스크립트가 페이지의 문서 흐름 상 가장 위쪽에 <head> 요서 안에 놓여 있는 경우에만 필요.
</body> 앞에 모든 자바스크립트와 인라인 코드를 둘 경우는?
1. 자바스크립트가 페이지의 끝부분에서 브라우저에 의해 로드되는 경우 페이지의 로드가 더 빨라진다. 문서의 상단에 자바스크립트를 둔다면 일종의 병목현상이 생길 수 있어서.
2. 빠른 웹 페이지가 목적이라면 간단하게 코드를 페이지의 하단으로 옮겨서 성능 향상을 이룰수 있는데.. <== 무신말이여?? - 셀렉터와 jQuery 함수를 사용 하여 DOM 요소 선택하기
jQuery() or $() - 특정 컨텍스트 안에서 DOM 요소 선택하기
CSS 표현식을 갖는 jQuery 함수는 두번째 매개변수를 가질 수도 있다. 이매개변수는 어떤 컨텍스트에 대해서 표현식을 기반으로 DOM 요소를 찾아야 하는지를 jQuery 함수에게 알려주는 역할을 한다.
ex ] jQuery('input',$('form')).length => form 안에 있는 input 을 찾게 된다. - DOM 요소의 래퍼 집합 필터링하기
filter 메서드는 지정된 표현식과 일치하지 않는 요소를 제외하는 역할을 한다.
ex ] jQuery('a'.filter('.external').length => class 명이 external 이 아닌 모든 요소는 제거. - 현재 선택된 래퍼 집합에서 자손 요소 찾기
jQuery.('p').find('em') == jQuery('em',$('p') == jQuery('p em') : 세개의 문장 다 동일한 결과 - 파괴적인 변경 이전의 선택상황으로 돌아가기
jQuery에서 제공하는 end() 메서드는 파괴메서드(find , filter 등) 사용 이전의 DOM 요소 집합을 반환하는 메서드이다.
end() 메서드는 이전에 파괴 작업이 수행된 것이 없다면 비어 있는 집합을 반환한다.
파괴 작업이란 일치된 jQuery 요소 집합에 변경을 가하는 모든 종류의 작업을 의미로서 jQuery 개체를 반환하는 모든 탐색 및 조작 메서드가 이에 해당한다.
ex ] add() , andSelf() , children() , closes() , filter() , find() , map() , next() , nextAll() , not() , parent() , prev() , prevAll() , siblings() , slice() , clone() , appendTo() , prependTo() , insertBefore() , insertAfter() , eplaceAll() 같은 메서드들이 파괴 메서드라고 할수 있다. - 현재 셀렉션에 이전 셀렉션 추가하기
andSelf() 메서드를 사용하는 경우 바로 이전 집합만이 현재 집합에 추가 된다. - 컨텍스트를 기반으로 DOM 탐색하기
eq() : 배열을 사용하다보니 DOM 의 첫요소는 '0' 부터 사용하게 됨.
jQuery('li:eq(1)') => li 요소들 중 2번째 껄 찾게 됨.
.next() : 바로 다음 요소
.nextAll() : 다음 요소 밑으로 전부
.prev() : 바로 이전 요소
.prevAll() : 이전 요소 앞에 전부 - DOM 요소를 생성하고 추가하고 다루기
jQuery는 지정된 매개변수에 따라 다양하게 동작하는 함수이다.
만일 HTML 텍스트 문자열을 함수에 제공한다면 , jQuery는 그러한 요소를 내부적으로 생성할 것이다. ex ] jQuery('<p><a>jquery</a></p>').appendTo('body'); 는 HTML 에 그대로 생성하게 된다.
jQuery('<p><a>jQuery</a></p>').find('a').attr('href','http://www.naver.com').end().appendTo('body'); => end() 메소드를 실행함으로 find()로 인한 파괴를 돌려 놓아야만 원래 요소에 .appendTo 메소드를 실행하여 정상적으로 추가 할수 있을 것이다. - DOM 요소 제거하기
remove() 메서드는 모든 앵커 요소를 DOM 에서 제거하기 위하여 사용된다.
ex ] jQuery('a).remove() 하게 되면 'a' 는 모두 DOM 에서 삭제 된다.
jQuery('a).remove('.remove')하게 되면 'a'요소의 class가 remove 인것만 삭제. - DOM 요소 교체하기
repplaceWith() : DOM 구조 교체작업
ex ] jQuery('li.remove').replaceWith('<li>remove</li>'); 'li' 요소의 class 가 .remove 인 클래스의 값을 <li>remove</li> 로 변경하자는 것임. - DOM 요소 복제하기
jQuery는 DOM요소를 복사하기 위해 clone() 메서드를 제공하고 있다. 이는 매우 직관적이 메서드 이며, 단지 jQuery 함수를 사용하여 DOM 요소를 선택한 다음 선택된 요소 집합에 대해 clone()메서드를 호출하기만 하면 된다. 결과는 원래 선택된 DOM 요소가 아닌 그 DOM 구조의 복사본이며, 그에 대해서 메서드 체인을 사용할 수도 있다.
ex ] jQuery('ul').clone().appendTo('body'); => 클론으로 카피하여 body에 붙여넣는 부분
jQuery('ul#a li') : ID 가 a 인 ul 의 li 요소를 찾는다
.click(function(){alert('List Item Clicked')}) : 클릭 이벤트를 추가
.parent() : 부모요소로 이동
.clone(true) : 요소를 복사
.find('li') : 현재 clone 으로 복사 해놓은 li 를 찾는다
.appendTo('#b') : 그후 ID 가 b 인 요소에 카피한다.
.end() : 파괴 메서드를 원복
.end()
.remove(); : 원래의<ul> 요소를 제거 함. - DOM 요소 어트리뷰트를 가져오고, 설정하고, 제거하기
- attr() 메서드로 값을 가져오거나 설정할 수 있다.
ex ] jQuery('a').attr('href','http://www.jquery.com').attr('href')
jQuery('a').attr({'href':'http://www.jquery.com','title':'jquery.com'}).attr('href') 처럼
여러개의 어트리뷰트도 한꺼번에 설정 가능하다.
- removeAttr('title') 과 같이 어트리뷰트도 삭제 가능하다.
- class 어트리뷰트는 여러개의 값을 가질 수 있기대문에 (예 : class="class1 class2 class3")와 같이 독특한 어트리뷰트 메서드도 관리 할 수 있다.
- addClass() 새로운 class값으로 class 어트리뷰트 값을 업데이트한다. 다시 말해서, 기존의 설정되어 있던 모든 클래스들을 그대로 남겨두고 그에 새로운 값을 추가하는 것이다.
- hasClass() 특정 클래스에 대한 class 어트리뷰트의 값을 확인한다.
- removeClass() class 어트리부ㅠ트에서 특정 클래스를 제거한다. 다만 기존에 설정되어 있던 모든 값들은 그대로 유지된다.
- toggleClass() 지정된 특정 클래스가 존재하지 않는다면 그를 추가하고, 이미 존재한다면 그를 제거한다. - HTML 콘텐트 가져오기 및 설정하기
jQuery에서는 HTML 코드 또는 DOM 구조를 가져오거나 설정하기 위한 메서드로 html()을 제공하고 있다.
jQuery('p').html('<strong>Hello World</strong>, I am a <em><p></em> element. '); - 텍스트 콘텐트를 가져오고 설정하기
jQuery('p').text('Hello World, I am a <p> element. ');
jQuery('p').text(); - 전역적인 충돌 없이 $ 별칭 사용하기
jQuery를 사용하는 것이 불편할 경우.. $ 별칭을 사용할수 있다.
(function($){ // 내부에서 $ 매개변수를 사용하는 함수를 생성
// 충돌에 대한 걱정 없이 내부 영역에서 $를 사용 할 수 있다.
})(jQuery);
위와 같이 사용하게 되면 private scope 를 갖는 함수에게 jQuery 에 대한 적역 참조를 전달하고 있다. 이렇게 하지 않고 그냥 전역 점위에서 $ 별칭을 사용한다면 HTML 문서안에 있는 다른 스크립트들이 절대 $ 문자를 사용하지 않도록 보장해야 할것이다. 그렇지 않으면 심각한 충도이 생길수도 있다.
* jQuery 관련 자료는 모두 O'REILLY 의 jQuery Cookbook 에서 발취하였습니다.
상업적 목적 또는 문제가 될 소지가 있는 곳에 사용하지 말아주세요