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으로 연결
jQuery(‘div’).hide();
// div 요소를 찾아서 > 숨긴다
‒ Wrapper와 암시적 반복 사용
jQuery(„div‟).hide();
jQuery(„div‟).text(„new content‟);
jQuery(‘div’).text(‘new content’);
<html>
jQuery(„div‟).addClass(„updatedContent‟);
// div 요소를 찾아서 > 내부 텍스트를 바꾼다
<body>
chain jQuey 기능으로 둘러싸인 아래 div 들을 “wrapper set”이라 함 //-->
<!--//
<div>old content</div>
jQuery(‘div’).hide().text(‘new content’).addClass(‘updatedContent’);
<script>
jQuery(„div‟).hide().text(„new Content‟).addClass(“updatedContent”);
//위 코드 실행 시 4개의 div를 내부적으로 순회함
// -> 반복문이 명시되어 있지 않으나, 반복이 이루어짐 (암시적 반복)
</script>
</body>
</html>

소개
• jQuery API 구성
‒ jQuery 온라인 문서(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 참고

// 컨텍스트 래퍼 사용
// 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=“#”>link</a>
<a href=“#” >link</a>
<a href=“#”>link</a>
<a href=“#” class=“additional”>link</a>
<a href=“#” class=“additional”>link</a>

alert(jQuery(„a‟).filter(‘.external’).length);
// 모든 a 요소 중 classname이 external 인 것을 제외

alert(jQuery(„a‟).filter(„.additional‟).length);
</script>

현재 선택된 래퍼 집합에서 자손 요소 찾기
• find([selector|jQuery Object|element]) Method

alert(jQuery(„p‟).find(‘em’).length);
// p 요소 안의 em 요소 참조
</script>

파괴적인 변경 이전의 선택상황으로 돌아가기
• 파괴 메소드?? (filter(), find() 등)이 사용되기 이전의 DOM
요소 집합을 반환
• end()
HTML Source는 p.70~71 참고

alert(jQuery(„p‟).filter(„.middle‟).length);
// P 요소 내의 middle 클래스를 가진 요소 반환

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

</script>

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

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

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

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 요소
를 생성할 수 있다.
• <script type=“text/javascript”>
jQuery(„<p>하하하</p>‟);
</script>

• 생성된 DOM 요소는 appendTo(), append(), prepend(),
prependTo() 등 여러 조작 method 를 통해 문서에 삽입 시
킨다.
• <html>
<body>
<div id=“a”>이거 다음에 생길거임</div>
</body>
<html>
jQuery(„<p>하하하</p>‟).appendTo(„body‟);
</script>

DOM 요소 제거하기
• 선택된 요소 집합과 자식들을 DOM에서 제거
• remove([selector])
jQuery(„a‟).remove();
// 선택된 <a> 요소들이 모두 제거 됨
</script>

DOM 요소 교체하기
• replaceWith([newContent | function])
• 조건에 맞는 요소들을 new Content 로 대체
• <div class="container">
<div class="inner first">Hello</div>
<div class="inner second">And</div>
<div class="inner third">Goodbye</div>
</div>
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>

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

DOM 요소 복제하기
• clone([withDataAndEvents,][deepWithDataAndEvents])
• 선택된 요소 집합을 복사
• withDataAndEvents를 true로 설정하면 바인딩된 이벤트 핸들러까지
복제 가능
• clone()은 복제만 담당하므로 append()등의 조작 메소드로 문서에 삽
입
• <div class="container“>
<div class="hello">Hello</div>
<div class="goodbye">Goodbye</div>
</div>
jQuery(„.hello‟).clone().appendTo(„.goodbye‟);
</script>

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

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

• 어트리뷰트 가져오기
‒ attr([attributeName])
‒ var href = jQuery(„a‟).attr(„href‟);

• 어트리뷰트 설정
‒ attr([attributeName, value])
var href = jQuery(„a‟).attr(„href‟, ‟http://www.naver.com‟);

‒ attr([attributeName, function(index, attr)])
var href = jQuery(„a‟).attr(„title‟, function(){
return this.href + „로 이동‟;
});

‒ attr([map])
var href = jQuery(„a‟).attr({
href : “http://www.naver.com”,
title : “네이버 바로 가기”
});

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

• 어트리뷰트 제거
‒ removeAttr([attributeName])
jQuery(„a‟).removeAttr(„href‟);

HTML 콘텐트 가져오기 및 설정하기
• html()
‒ 일치하는 요소 내부의 html을 문자열로 반환
<div class="demo">
<div class="demo-box">Demonstration Box</div>
</div>
jQuery(„div.demo‟).html();
</script>

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

• html(htmlString)
‒ 일치하는 요소 내부의 html을 문자열로 설정
<div class="demo">Demonstration Box</div>
jQuery(„div.demo‟).html(„hehehe‟);
</script>

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

텍스트 콘텐트를 가져오고 설정하기
• text()
‒ 선택된 요소 안에 포함되는 텍스트를 반환 (자식 요소까지 포함)
<ul>
<li>list item 1</li>
</ul>
</div>
jQuery(„div.demo‟).text();
</script>

: Demonstration Box list item 1

• text(textString)
‒ 선택된 요소 안에 문자열 설정
<ul><li>list item 1</li></ul>
</div>
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);

Hacosa jquery 1th

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to Hacosa jquery 1th

Similar to Hacosa jquery 1th (20)

More from Seong Bong Ji

More from Seong Bong Ji (13)

Hacosa jquery 1th