Hacosa jquery 1th

HACOSA jQuery STUDY#1. jQuery 기초

소개• Why jQuery ?

‒ 일단 무료 , 오픈소스‒ 작은 용량 (min : 18KB, uncompressed : 114KB)‒ 수많은 사용자 커뮤니티‒ 웹 브라우저간의 차이를 자체적으로 표준화‒ 플러그인의 다양성‒ 잘 정리된 API 문서 ‒ 브라우저보다 앞선 W3C 명세 수용‒ 사용자인터페이스 제공

소개• jQuery 철학 · 특징

‒ Write less, do more ( 적게 작성하고 , 보다 많이 한다 . )‒ CSS Selector 로 요소를 찾아 Method 로 작업을 수행 ‒ 요소의 집합에 대해 여러 Method 를 chain 으로 연결‒ Wrapper 와 암시적 반복 사용

jQuery(‘div’).hide();// div 요소를 찾아서 > 숨긴다

jQuery(‘div’).text(‘new content’);// div 요소를 찾아서 > 내부 텍스트를 바꾼다

jQuery(‘div’).hide();jQuery(‘div’).text(‘new content’);jQuery(‘div’).addClass(‘updatedContent’);

chain

jQuery(‘div’).hide().text(‘new content’).addClass(‘updatedContent’);

<html><body>  <div>old content</div> <div>old content</div> <div>old content</div> <div>old content</div> <script> jQuery(‘div’).hide().text(‘new Content’).addClass(“updatedContent”); // 위 코드 실행 시 4 개의 div 를 내부적으로 순회함 // -> 반복문이 명시되어 있지 않으나 , 반복이 이루어짐 ( 암시적 반복 ) </script></body></html>

소개• jQuery API 구성

‒ jQuery 온라인 문서 (http://docs.jquery.com/Main_Page) 참고

http://docs.jquery.com/Main_Page

HTML 페이지에 jQuery 라이브러리 코드 넣기

• jQuery 파일 얻기‒ Google CDN 활용‒ jQuery.com 으로부터 최신 버전을 직접 다운로드 후 자체

서버에서 호스팅

와 같이 외부 자바스크립트 파일 삽입 방법과 동일

<script type=“text/javascript” src=“http://ajax.googleapis....../jquery.min.js”>

</script>

DOM 로드 후 페이지 로드 전 jQuery 실행

• 모든 DOM 탐색과 조작은 DOM 이 완전하게 로드 되는 것을 요구

• window.onload 이벤트 사용시 모든 자원을 포함하여 전체 문서가 완전히 로드 되어야 onload 이벤트가 발생하므로 방문자로 하여금 지나치게 많은 시간을 기다리게 만듦

• DOM 자체가 탐색과 조작을 위한 준비를 끝냈음을 알리는 이벤트가 필요

• ready() Method ‒ DOM 이 탐색 및 조작될 준비가 되면 실행되는 스크립트 코드를 가짐<script type=“text/javascript”> jQuery(document).ready(function(){ alert(jQuery(‘p’).text()); });</script>

DOM 로드 후 페이지 로드 전 jQuery 실행

• ready() 이벤트는 <head> 요소 안에 놓여있는 경우에만 필요

• ready() 이벤트 사용 보다 모든 자바스크립트와 인라인 코드를 </body> 바로 앞에 놓는 것을 선호‒ 1. 최근의 최적화 기술은 자바스크립트가 페이지 끝부분에서

브라우저에 의해 로드 되는 경우 페이지의 로드가 더 빨라진다고 함‒ 2. ready() 이벤트를 사용하지 않는 것이 결과적으로 적은 양의

코드를 사용하게 되며 , 적은 양의 코드는 많은 양의 코드보다 훨씬 빨리 실행됨

셀럭터와 jQuery 함수를 이용하여 DOM 요소 선택하기

• CSS Selector / 사용자정의 Selector<html><head></head><body> <a href=“#” id=“link1”>link1</a> <a href=“#” id=“link2”>link2</a> <a href=“#” class=“link”>link3</a> <a href=“#” class=“link”>link4</a> <a href=“#”>link5</a> <script type=“text/JavaScript”> // CSS Selector alert(jQyery(‘a’).length); alert(jQuery(‘#link1’).length); alert(jQuery(‘.link’).length); // 사용자정의 Selector alert(jQuery(document.getElementsByTagName(‘a’)).length); </script></body></html>

=> 차례대로 5, 1, 2, 5 가 뜨게 됨

특정 컨텍스트 안에서 DOM 요소 선택하기

• CSS 표현식을 갖는 jQuery 는 두번 째 매개변수를 가질 수 있는데 , 이 매개변수는 어떤 컨텍스트에 대해서 표현식을 기반으로 DOM 요소를 찾아야 하는지를 알려주는 역할을 한다 .

HTML Source 는 교재 p.65 참고

<script type=“text/javascript”> // 컨텍스트 래퍼 사용 // wrapper set (<form>) 안에서 input 요소 참조 alert(jQuery(‘input’, $(‘form’)).length);

// 컨텍스트로 DOM 참조 // 첫번째 form 요소에서 input 요소 참조 alert(jQuery(‘input’, document.forms[0]).length);

// 표현식 사용 // body 요소 내의 모든 input 요소 참조 alert(jQuery(‘input’, ’body’).length);</script>

DOM 요소의 래퍼 집합 필터링하기• 선택된 DOM 요소들 가운데서 지정된 표현식과 일치하지

않는 요소를 제외• filter([selector|function|element|jQuery Object]) Method

<a href=“#” class=“external”>link</a><a href=“#” class=“external”>link</a><a href=“#”>link</a><a href=“#” class=“external”>link</a><a href=“#” class=“external”>link</a><a href=“#” >link</a><a href=“#”>link</a><a href=“#” class=“additional”>link</a><a href=“#” class=“additional”>link</a>

<script type=“text/javascript”> alert(jQuery(‘a’).filter(‘.external’).length); // 모든 a 요소 중 classname 이 external 인 것을 제외

alert(jQuery(‘a’).filter(‘.additional’).length);</script>

현재 선택된 래퍼 집합에서 자손 요소 찾기

• find([selector|jQuery Object|element]) Method

<script type=“text/javascript”> alert(jQuery(‘p’).find(‘em’).length); // p 요소 안의 em 요소 참조</script>

파괴적인 변경 이전의 선택상황으로 돌아가기

• 파괴 메소드 ?? (filter(), find() 등 ) 이 사용되기 이전의 DOM 요소 집합을 반환

• end()

• 파괴 메소드란 ?‒ jQuery 요소집합에 변경을 가하는 모든 종류의 메소드‒ add(), filter(), find(), map(), nextAll() 등등… .

HTML Source 는 p.70~71 참고

<script type=“text/javascript”> alert(jQuery(‘p’).filter(‘.middle’).length); // P 요소 내의 middle 클래스를 가진 요소 반환

alert(jQuery(‘p’).filter(‘.middle’).end().length); // filter() 메소드의 수행을 취소하고 filter 메소드가 적용되기 이전의 요소 집합인 jQuery(‘p’) 까지를 반환

</script>

현재 셀렉션 이전에 셀렉션 추가하기• 이전의 선택 집합과 현재의 선택 집합을 결합• andSelf()

<div> <p> Paragraph </p> <p> Paragraph </p></div>

<script type=“text/JavaScript”> jQuery(‘div’).find(‘p’).andSelf().css(‘border’, ’1px solid #000’); // 현재 집합인 div > p 요소에 바로 이전 집합인 div 요소를 추가함 // andSelf() 미적용시에는 div > p 요소에만 border 가 적용</script>

컨텍스트를 기반으로 DOM 탐색하기

• 현재 선택된 DOM 요소의 컨텍스트를 기반으로 DOM 탐색‒ .next() : 현재 선택된 요소의 다음 요소‒ .prev() : 현재 선택된 요소의 이전 요소‒ .parent() : 현재 선택된 요소의 부모 요소‒ .parent() .children() : 현재 선택된 요소의 부모 요소의 자식

요소‒ .nextAll() : 현재 선택된 요소 다음의 모든 요소‒ .prevAll() : 현재 선택된 요소 이전의 모든 요소‒ 그 외 기타 등등 여러 가지 존재 (jQuery Document 참고 )

DOM 요소를 생성하고 추가하고 다루기

• jQuery() method 에 HTML 문자열을 전달하여 DOM 요소를 생성할 수 있다 .

•

• 생성된 DOM 요소는 appendTo(), append(), prepend(), prependTo() 등 여러 조작 method 를 통해 문서에 삽입 시킨다 .

•

<script type=“text/javascript”> jQuery(‘<p> 하하하 </p>’);</script>

<html><body> <div id=“a”> 이거 다음에 생길거임 </div></body><html><script type=“text/javascript”> jQuery(‘<p> 하하하 </p>’).appendTo(‘body’);</script>

DOM 요소 제거하기• 선택된 요소 집합과 자식들을 DOM 에서 제거• remove([selector])

<script type=“text/javascript”> jQuery(‘a’).remove(); // 선택된 <a> 요소들이 모두 제거 됨</script>

DOM 요소 교체하기• replaceWith([newContent | function])• 조건에 맞는 요소들을 new Content 로 대체•

• replaceAll([target])‒ replaceWith 를 모티브로 하여 만들어진 Method‒ 소스와 타겟이 replaceWith 와 반대

<div class="container"> <div class="inner first">Hello</div> <div class="inner second">And</div> <div class="inner third">Goodbye</div></div><script type=“text/JavaScript”> jQuery(‘div.second’).replaceWith(‘<h2>New Heading</h2>’);</script>→<div class="container"> <div class="inner first">Hello</div> <h2>New heading</h2> <div class="inner third">Goodbye</div></div>

DOM 요소 복제하기• clone([withDataAndEvents,][deepWithDataAndEvents])• 선택된 요소 집합을 복사• withDataAndEvents 를 true 로 설정하면 바인딩된 이벤트

핸들러까지 복제 가능• clone() 은 복제만 담당하므로 append() 등의 조작 메소드로 문서에

삽입• <div class="container“>

<div class="hello">Hello</div> <div class="goodbye">Goodbye</div></div><script type=“text/JavaScript”> jQuery(‘.hello’).clone().appendTo(‘.goodbye’);</script>

→<div class="container"> <div class="hello">Hello</div> <div class="goodbye"> Goodbye <div class="hello">Hello</div> </div></div>

DOM 요소 어트리뷰트를 가져오고 설정하고 제거하기

• 어트리뷰트 가져오기‒ attr([attributeName])‒

• 어트리뷰트 설정‒ attr([attributeName, value]) ‒ attr([attributeName, function(index, attr)])

‒ attr([map])

var href = jQuery(‘a’).attr(‘href’);

var href = jQuery(‘a’).attr(‘href’, ’http://www.naver.com’);

var href = jQuery(‘a’).attr(‘title’, function(){ return this.href + ‘ 로 이동’ ;});

var href = jQuery(‘a’).attr({ href : “http://www.naver.com”, title : “ 네이버 바로 가기”});

DOM 요소 어트리뷰트를 가져오고 설정하고 제거하기

• 어트리뷰트 제거‒ removeAttr([attributeName])

jQuery(‘a’).removeAttr(‘href’);

HTML 콘텐트 가져오기 및 설정하기• html()

‒ 일치하는 요소 내부의 html 을 문자열로 반환

• html(htmlString)‒ 일치하는 요소 내부의 html 을 문자열로 설정

<div class="demo"> <div class="demo-box">Demonstration Box</div></div><script type=“text/JavaScript”> jQuery(‘div.demo’).html();</script>

: <div class="demo-box">Demonstration Box</div>

<div class="demo">Demonstration Box</div><script type=“text/JavaScript”> jQuery(‘div.demo’).html(‘hehehe’);</script>

: <div class="demo"> hehehe </div>

텍스트 콘텐트를 가져오고 설정하기• text()

‒ 선택된 요소 안에 포함되는 텍스트를 반환 ( 자식 요소까지 포함 )

• text(textString)‒ 선택된 요소 안에 문자열 설정

<div class="demo">Demonstration Box</div> <ul> <li>list item 1</li> </ul></div> <script type=“text/JavaScript”> jQuery(‘div.demo’).text();</script>

: Demonstration Box list item 1

<div class="demo">Demonstration Box</div> <ul><li>list item 1</li></ul></div> <script type=“text/JavaScript”> jQuery(‘div.demo’). text('<p>This is a test.</p>');</script>: <div class="demo-container"><p>This is a test.</p></div>

전역적인 충돌 없이 $ 별칭 사용하기• Prototype 등과 같이 $ 별칭을 사용하는 스크립트를 병행 사용 시 충돌 가능성이 있다 .

• (function($){// $ 를 사용한 jQuery 구문

})(jQuery);

END

Education

Hacosa jquery 1th