jquery api 레퍼런스 가이드

jQuery API 레퍼런스 가이드

iv

•목 차•

01장 __ jQuery 스크립트 살펴보기 1동적인 목차 .........................................................................................................1

jQuery 구하기 ..............................................................................................2

HTML 문서 준비 .........................................................................................3

jQuery 코드 작성 .........................................................................................5

예제 스크립트 분석 ............................................................................................6

셀렉터 표현식 ..............................................................................................7

DOM 탐색 메서드 .......................................................................................7

DOM 조작 메서드 .......................................................................................8

이벤트 메서드 ..............................................................................................8

이펙트 메서드 ..............................................................................................9

AJAX 메서드 ................................................................................................9

기타 메서드 ................................................................................................10

플러그인 API .............................................................................................10

정리 ................................................................................................................... 11

02장 __ 셀렉터 표현식 13CSS 셀렉터 ....................................................................................................... 13

T 엘리먼트 ........................................................................................13

#myid ID .............................................................................................14

.myclass 클래스 ..................................................................................15

E F 자손 엘리먼트 ..............................................................................16

v

E > F 자식 엘리먼트 ..........................................................................17

E + F 이웃 엘리먼트 ...........................................................................18

E ~ F 형제 엘리먼트 .........................................................................19

E, F, G 다중 엘리먼트 ........................................................................20

:nth-child(n/even/odd/expr) 순차 자식 .........................................21

:�rst-child 첫 번째 자식 ....................................................................23

:last-child 마지막 자식 ......................................................................23

:only-child 유일한 자식 ....................................................................24

:not(E) 부정 .......................................................................................24

:empty 자식 엘리먼트가 없는 엘리먼트 ..........................................25

* 전체 선택 .........................................................................................25

속성 셀렉터 ...................................................................................................... 26

[foo] 속성 표현식 ...............................................................................27

[foo=bar] 속성값 표현식 ...................................................................27

[foo!=bar] 값이 일치하지 않는 속성 ................................................28

[foo^=bar] 속성값 시작 단어 일치 여부 표현식 .............................28

[foo$=bar] 속성값 종료 단어 일치 여부 표현식 .............................29

[foo*=bar] 속성값 포함 여부 표현식 ...............................................29

[foo~=bar] 단어를 포함하는 속성 표현식 .......................................30

[foo|=bar] 머리글을 포함하는 속성 표현식 ....................................31

폼 셀렉터 .......................................................................................................... 32

사용자정의 셀렉터 .......................................................................................... 33

:eq(n) 인덱스 기반 선택 표현식 ........................................................33

vi

:gt(n) ~보다 큰 표현식......................................................................34

:lt(n) ~보다 작은 표현식 ....................................................................34

:�rst 첫 번째 엘리먼트 표현식 ..........................................................35

:last 마지막 엘리먼트 표현식 ............................................................35

:even 짝수 엘리먼트 표현식 ..............................................................36

:odd 홀수 엘리먼트 표현식 ...............................................................36

:parent 부모 엘리먼트 여부 표현식 ..................................................37

:contains(text) 텍스트 포함 표현식 ..................................................38

:has(E) 엘리먼트 포함 표현식 ...........................................................39

:visible 가시성 상태 표현식 ...............................................................40

:hidden 감춤 상태 표현식..................................................................40

:header 헤더 표현식 ...........................................................................41

:animated 애니메이션 동작 상태 표현식 .........................................41

:focus 포커스 엘리먼트 ......................................................................41

03장 __ DOM 탐색 메서드 43jQuery 메서드 ................................................................................................. 43

$() ................................................................................................................44

필터링 메서드 .................................................................................................. 48

.�lter() .........................................................................................................48

.not() ...........................................................................................................51

.has() ...........................................................................................................53

.eq() .............................................................................................................54

.�rst() ..........................................................................................................55

.last() ...........................................................................................................56

.slice() .........................................................................................................57

트리 탐색 메서드 ............................................................................................. 59

.�nd() ..........................................................................................................59

.children() ..................................................................................................61

vii

.parents() ....................................................................................................62

.parentsUntil() ...........................................................................................64

.parent() ......................................................................................................66

.closest() .....................................................................................................68

.o¨setParent() ............................................................................................70

.siblings() ....................................................................................................72

.prev() .........................................................................................................74

.prevAll() ....................................................................................................76

.prevUntil() ................................................................................................78

.next() .........................................................................................................80

.nextAll() ....................................................................................................82

.nextUntil() ................................................................................................84

기타 탐색 메서드 ............................................................................................. 86

.add() ..........................................................................................................86

.is() ..............................................................................................................88

.end() ..........................................................................................................90

.andSelf() ....................................................................................................92

.map() .........................................................................................................93

.contents() ..................................................................................................94

04장 __ DOM 처리 메서드 97기본 속성 .......................................................................................................... 98

.attr() (접근자) ...........................................................................................98

.attr() (설정자) ...........................................................................................99

.removeAttr() ...........................................................................................101

.prop() (접근자) .......................................................................................102

.prop() (설정자) .......................................................................................103

.removeProp() ....................................................................................104

viii

스타일 프로퍼티 ............................................................................................ 104

.css() (접근자) ..........................................................................................104

.css() (설정자) ..........................................................................................106

.height() (접근자) ....................................................................................108

.height() (설정자) ....................................................................................109

.innerHeight() .........................................................................................110

.outerHeight() ..........................................................................................111

.width() (접근자) .....................................................................................112

.width() (설정자) .....................................................................................113

.innerWidth() ..........................................................................................114

.outerWidth() ..........................................................................................115

.o¨set() (접근자) ......................................................................................116

.o¨set() (설정자) ......................................................................................116

.position() ................................................................................................117

.scrollTop() (접근자) ...............................................................................117

.scrollTop() (설정자) ...............................................................................118

.scrollLe«() (접근자) ...............................................................................118

.scrollLe«() (설정자) ...............................................................................119

클래스 속성 .................................................................................................... 120

.hasClass() ................................................................................................120

.addClass() ...............................................................................................121

.removeClass() .........................................................................................122

.toggleClass() ...........................................................................................124

DOM 대체 ..................................................................................................... 126

.html() (접근자) .......................................................................................126

.html() (설정자) .......................................................................................127

.text() (접근자) ........................................................................................129

.text() (설정자) ........................................................................................130

.val() (접근자) ..........................................................................................132

ix

.val() (설정자) ..........................................................................................133

.replaceWith()..........................................................................................134

.replaceAll() .............................................................................................136

DOM 내부 삽입 메서드 ............................................................................... 138

.prepend() ................................................................................................138

.prependTo() ............................................................................................140

.append() ..................................................................................................142

.appendTo() .............................................................................................144

DOM 외부 삽입 메서드 ............................................................................... 146

.before() ....................................................................................................146

.insertBefore() .........................................................................................148

.a«er() .......................................................................................................150

.insertA«er() ............................................................................................152

DOM 주변 삽입 메서드 ............................................................................... 154

.wrap() ......................................................................................................154

.wrapAll() .................................................................................................156

.wrapInner() ............................................................................................157

DOM 복사 메서드 ........................................................................................ 159

.clone()......................................................................................................159

DOM 제거 메서드 ........................................................................................ 161

.empty() ....................................................................................................161

.remove() ..................................................................................................162

.detach() ...................................................................................................164

.unwrap()..................................................................................................165

05장 __ 이벤트 메서드 167이벤트 핸들러 추가 ....................................................................................... 168

.bind() .......................................................................................................168

.unbind() ..................................................................................................174

x

.one() ........................................................................................................177

.trigger() ...................................................................................................178

.triggerHandler() .....................................................................................180

.live() .........................................................................................................181

.die() ..........................................................................................................184

.delegate() .............................................................................................185

.undelegate() ........................................................................................187

문서 로딩 ........................................................................................................ 189

.ready() .....................................................................................................189

.jQuery.holdReady() .............................................................................191

.load() .......................................................................................................192

.unload() ...................................................................................................194

.error() ......................................................................................................195

마우스 이벤트 ................................................................................................ 197

.mousedown() .........................................................................................197

.mouseup() ...............................................................................................200

.click() .......................................................................................................202

.dblclick() .................................................................................................204

.toggle() ....................................................................................................206

.mouseover() ............................................................................................208

.mouseout()..............................................................................................210

.mouseenter() ..........................................................................................212

.mouseleave() ...........................................................................................214

.hover() .....................................................................................................216

.mousemove() ..........................................................................................217

폼 이벤트 ........................................................................................................ 220

.focus() ......................................................................................................220

.blur() ........................................................................................................222

.change() ...................................................................................................224

.select() .....................................................................................................226

xi

.submit() ...................................................................................................228

키보드 이벤트 ................................................................................................ 230

.keydown() ...............................................................................................230

.keypress() ................................................................................................232

.keyup() ....................................................................................................234

브라우저 이벤트 ............................................................................................ 236

.resize() .....................................................................................................236

.scroll() .....................................................................................................237

06장 __ 이펙트 메서드 241기본 이펙트 메서드 ....................................................................................... 241

.show() ......................................................................................................242

.hide() .......................................................................................................244

.toggle() ....................................................................................................246

.slideDown() ............................................................................................250

.slideUp()..................................................................................................252

.slideToggle() ...........................................................................................254

.fadeIn() ....................................................................................................257

.fadeOut() .................................................................................................259

.fadeTo() ...................................................................................................261

.fadeToggle() ........................................................................................263

사용자 효과 .................................................................................................... 264

.animate() .................................................................................................264

.stop()........................................................................................................270

.delay() ......................................................................................................272

.queue() ....................................................................................................273

.dequeue() ................................................................................................275

.clearQueue() ...........................................................................................276

jQuery.fx.interval ....................................................................................277

xii

07장 __ AJAX 메서드 279저수준 인터페이스 ........................................................................................ 280

$.ajax() ......................................................................................................280

$.ajaxSetup() ............................................................................................286

간편 메서드 .................................................................................................... 287

$.get() ........................................................................................................287

.load() .......................................................................................................288

$.post() .....................................................................................................290

$.getJSON() ..............................................................................................292

$.getScript() .............................................................................................294

전역 AJAX 이벤트 핸들러 ............................................................................ 295

.ajaxComplete() .......................................................................................295

.ajaxError() ..............................................................................................297

.ajaxSend() ...............................................................................................299

.ajaxStart() ................................................................................................301

.ajaxStop() ................................................................................................302

.ajaxSuccess() ...........................................................................................304

jQuery.ajaxPre�lter() .........................................................................306

지연 객체 (Deferred Object) ....................................................................... 307

jQuery.Deferred() ...................................................................................307

deferred.done() .......................................................................................307

deferred.fail() ...........................................................................................308

deferred.isRejected() ..............................................................................309

deferred.isResolved() ..............................................................................310

deferred.promise() ..................................................................................310

deferred.reject().......................................................................................312

deferred.rejectWith() ..............................................................................312

deferred.resolve() ....................................................................................313

deferred.resolveWith() ...........................................................................313

xiii

deferred.then() ........................................................................................314

deferred.always() .....................................................................................315

jQuery.when() .........................................................................................316

도우미 메서드 ................................................................................................ 316

.serialize() .................................................................................................316

.serializeArray() ......................................................................................318

jQuery.parseJSON()................................................................................320

jQuery.parseXML() ................................................................................321

08장 __ 기타 메서드 323설정 메서드 .................................................................................................... 323

$.noCon²ict() ..........................................................................................324

DOM 엘리먼트 메서드 ................................................................................ 326

.size() ........................................................................................................326

.get() ..........................................................................................................327

.index() .....................................................................................................328

컬렉션 처리 메서드 ....................................................................................... 331

.each() .......................................................................................................331

$.grep() .....................................................................................................334

$.makeArray() .........................................................................................336

$.inArray() ...............................................................................................337

$.map() .....................................................................................................338

$.merge() ..................................................................................................340

$.unique().................................................................................................341

$.extend() .................................................................................................342

$.trim() .....................................................................................................344

$.param() .................................................................................................345

객체 타입 확인 메서드 .................................................................................. 347

$.isArray() ................................................................................................347

xiv

$.isFunction() ..........................................................................................347

$.isPlainObject() .....................................................................................348

$.isEmptyObject() ...................................................................................348

$.isXMLDoc()..........................................................................................349

데이터 관리 메서드 ....................................................................................... 350

.data() .......................................................................................................350

.removeData() .........................................................................................352

jQuery.hasData() .....................................................................................352

에러 처리 메서드 ........................................................................................... 353

jQuery.error() ..........................................................................................353

jQuery.isWindow() .................................................................................353

jQuery.now() ...........................................................................................354

jQuery.type() ...........................................................................................354

jQuery.sub() .............................................................................................355

09장 __ jQuery 프로퍼티 357전역 프로퍼티 ................................................................................................ 357

$.browser ..................................................................................................358

$.support ..................................................................................................359

jQuery 객체 관련 프로퍼티.......................................................................... 362

.length .......................................................................................................362

.selector ....................................................................................................363

.context .....................................................................................................364

jQuery.cssHooks .....................................................................................365

10장 __ 플러그인 API 367플러그인 활용 ................................................................................................ 367

플러그인 개발 ................................................................................................ 369

객체 메서드 ..............................................................................................369

xv

전역 함수 ..................................................................................................372

셀렉터 표현식 ..........................................................................................376

플러그인 관례 ................................................................................................ 378

$ 별칭의 사용 ...........................................................................................378

명명 규약 ........................................................................................................ 379

API 표준화 ..................................................................................................... 379

11장 __ 빨리 찾아보기 381셀렉터 표현식 ................................................................................................ 381

메서드 ............................................................................................................. 384

프로퍼티 ......................................................................................................... 393

부록A_온라인 참고자료 395jQuery 문서 ................................................................................................... 395

자바스크립트 레퍼런스 ................................................................................ 396

자바스크립트 코드 압축 도구 ...................................................................... 398

자바스크립트 코드 압축해제 도구 .............................................................. 399

(X)HTML 참고 자료 .................................................................................... 400

CSS 레퍼런스 ................................................................................................. 400

유용한 블로그 ................................................................................................ 401

jQuery를 사용 중인 웹 개발 프레임워크 .................................................... 405

부록B_개발 도구 407파이어폭스용 도구 ........................................................................................ 407

인터넷 익스플로러 개발 도구 ...................................................................... 409

사파리 개발 도구 ........................................................................................... 410

오페라용 도구 ................................................................................................ 411

기타 도구 ........................................................................................................ 411

xvi

•옮긴이 글•

웹이 탄생되고 나서 오늘날처럼 자바스크립트가 중요한 역할을 차지하고 있었던 때는 없었습니

다. 태어난 지는 오래됐지만 그동안 주목받지 못하다가 웹 개발에서 점점 더 중요한 자리를 차지

해 가고 있는 자바스크립트는 말랑말랑하면서도 환경에 따라 개발자의 애를 먹이기도 하지만 매

력으로 똘똘 뭉친 프로그래밍 언어입니다.

자바스크립트가 주목받기 시작한 시점부터 자바스크립트의 장점을 활용하고 단점을 보완해

서 개발자들에게 많은 도움을 주는 자바스크립트 프레임워크나 라이브러리가 출시됐고 몇 년

간 서로 경쟁하면서 더욱 강력한 기능과 쉬운 사용법으로 개발자들을 유혹하기 시작했습니다.

어느 정도 시간이 지난 지금, 전 세계적으로 가장 널리 사용되는 자바스크립트 라이브러리는

jQuery입니다. 이 매혹적인 라이브러리를 이용해 세계의 많은 프로젝트가 진행되거나 서비스되

고 있으며, 앞으로 모바일 분야나 HTML5 시장에서도 jQuery는 널리 쓰일 것으로 예상합니다.

이 책에서는 jQuery 라이브러리의 모든 기능을 각 기능별로 분류해서 하나씩 설명합니다.

jQuery를 페이지에 삽입하는 방법부터 AJAX를 이용해 효율을 높이는 방법까지 기능별 예제와

함께 살펴보면서 이해할 수 있게 구성돼 있습니다. 초보자분들은 이 책을 토대로 예제를 따라 하

면서 jQuery의 기능을 배울 수 있고, 능숙한 개발자분들은 복잡한 웹 애플리케이션을 구축하면

서 빠르게 확인하고 싶은 기능이 있거나 jQuery를 확장한 플러그인을 제작할 때 이 책을 참고할

수 있습니다.

xvii

번역 기간 동안 저 때문에 고생하셨던 위키북스 관계자 분과 처음으로 번역을 할 수 있게 도와

주신 NHN의 남덕현 님, 단어 하나하나 꼼꼼하게 리뷰해 주신 이대엽 님께 큰 감사 드립니다. 번

역하는 동안 옆에서 묵묵히 기다려주고 일까지 떠맡은 Bucket Labs의 심찬용 님, SK 커뮤니케이

션즈의 UI개발팀, 고맙습니다. 개발하는 데 모든 도움을 준 이노무브의 박상현 님, 코리아센터의

유성종 님, 치요캣의 박선희 님, SK 커뮤니케이션즈의 김홍기 님, 노경섭 님 감사합니다. 마지막으

로 사랑하는 희재와 가족들, 고맙습니다.

김정운

xviii

•저자 소개•

칼 스웨드버그 (Karl Swedberg)

칼 스웨드버그는 미시건의 그랜드 래피즈에 위치한 Fusionary Media에서 자바스크립트로 문제

를 해결하고 디자인을 구현하는 데 많은 시간을 쏟으며 웹 개발자로 근무하고 있다. jQuery 프로

젝트 팀의 멤버이자 jQuery 논의자로 활동하고 있으며, 각종 워크샵, 콘퍼런스, 유럽과 북미 지역

의 협업 트레이닝을 맡고 있다.

웹 개발을 하기 전에는 카피라이터나 고등학교 영어 선생님으로 일하거나 커피하우스를 운영하

기도 했다. 또 1990년대 마이크로소프트사 입사가 좌절된 즈음 할로우 바디 리켄베커 기타를 팔

면서 전문 음악가가 되겠다는 꿈을 접었다. 그러나 아직 어쿠스틱 기타를 가지고 있다.

나를 항상 제 정신으로 있게 해준 나의 아내 사라에게 감사하고, 또 나의 두 딸인 벤자민과 루

시아에게 감사하다. 전문적인 프로그래밍 지식을 가지고 나와 함께 이 책을 쓰는 일에 기꺼히

응해준 조나단 채퍼에게도 감사하다.

세계 최고의 자바스크립트 라이브러리를 만들고 커뮤니티를 활성화한 존 레식에게도 정말 감

사하다. Packt 출판사와 이 책의 리뷰어, jQuery 결사단, 그리고 많은 영감을 주고 도움을 준

다른 모든 사람들에게도 감사드린다.

xix

조나단 채퍼 (Jonathan Chaffer)

조나간 채퍼는 미시건의 그랜드 래피즈에 있는 Rapid Development Group에서 웹 개발자로 근

무하고 있으며, PHP와 MySQL, 자바스크립트를 중심으로 하는 여러 기술 분야의 프로젝트를

수행하고 있다.

조나단은 드루팔(Drupal) 커뮤니티에서 활발하게 활동하고 있으며(드루팔은 jQuery를 자바스크

립트 프레임워크로 적용했다) 드루팔의 인기 콘텐츠 구축 모듈인 Content Construction Kit의

개발자다.

조나단은 그랜드 래피즈에서 그의 아내 제니퍼와 함께 살고 있다.

지칠 줄 모르는 열정과 지원을 해준 나의 아내 제니퍼에게 정말 감사하다. 그리고 열정이 약해

졌을 때도 계속 글을 쓸 수 있게 해준 칼에게도 감사하다. 또한 기술적인 부분에 대한 지속적

인 영감을 제공해준 Ars Technica 커뮤니티에도 고마움을 전한다.

xx

조이딥 칸질럴 (Joydip Kanjilal)

마이크로소프트사의 ASP.NET MVP다. 그는 다수의 .NET 관련 책을 냈고 IT 업계에 발을 들

인 지 12년째이며, .NET과 .NET 관련 경력은 6년이다. 또한 www.asptoday.com, www.devx.

com, www.aspalliance.com, www.aspnetpro.com, www.mcpressonline.com, www.sql-

server-performance.com, www.sswug.com 등의 사이트에 많은 글을 기고하고 있다. 그 중 여

러 글이 마이크로소프트사의 ASP.NET 공식 웹 사이트인 www.asp.net에 채택됐다. 그는 www.

community-credit.com에서 여러 번 수상자로 선정된 바 있다. 그리고 2008년 11월과 12월의 2

주 동안 MSDN 개발자로 선정됐다.

조이딥 칸질럴은 아래의 책을 저술했다.

y ASP.NET 4.0 Programming(Mc-Graw Hill Publishing)

y Entity Framework Tutorial (Packt Publishing)

y Pro Sync Framework (APRESS)

y Sams Teach Yourself ASP.NET Ajax in 24 Hours (Sams Publishing)

y ASP.NET Data Presentation Controls Essentials (Packt Publishing)

현재 프리랜서로 활동하며 소프트웨어 컨설팅과 집필을 하고 있으며 수년간 다양한 분야의 솔

루션을 설계하고 아키텍처를 수립해오고 있다. 그는 C, C++, VC++, Java, C#, Microso« .NET,

AJAX, 디자인 패턴, SQL 서버, 운영체제, 컴퓨터 구조에 대한 지식이 있다. 블로그는 http://

aspadvice.com/blogs/joydip이고 많은 시간을 독서와 블로그 활동, 집필에 보낸다. 취미는 크리

켓 및 축구 관람과 체스다.

•기술 감수자 소개•

xxi

데이브 메스빈 (Dave Methvin)

PC Pitstop의 공동 설립자이자 최고 책임 개발자로 일하고 있다. 그는 PCPitstop.com 웹사이트

의 기술 관리를 하고 있으며 소프트웨어 개발도 관리하고 있다.

그는 PC Pitstop에 입사하기 전에 Windows Magazine과 PC Tech journal의 편집자

였고, Windows NT 네트워킹에 관한 책을 공동 저술했으며, 20여편이 넘는 기사와 논문

을 썼다. InformationWeek이라는 윈도우 관련 주제를 다루는 그의 블로그는 http://www.

informationweek.com에서 만날 수 있다.

데이브는 버지니아 대학에서 컴퓨터 공학 학사와 석사 학위를 취득했고 jQuery 커뮤니티에서

2006년부터 활동하며 Splitter와 같은 인기 있는 플러그인을 제작했다.

xxii

•서 문•

jQuery를 이용하면 웹 페이지에 역동적이고 사용자의 동작에 반응하는 요소들을 웹 개발자나

디자이너가 쉽고 간편하게 추가할 수 있다. 게다가 브라우저 간의 차이를 하나의 인터페이스로

통일해서 개발자의 개발 시간을 크게 줄여준다. 이 책에서는 jQuery를 철저하게 분석해 쉽게 설

명해 줄 것이다.

이 책에서는 jQuery의 모든 메서드와 함수, 셀렉터 사용법을 설명한다. jQuery에 대한 모든

설명과 더불어 자바스크립트와 다른 클라이언트 측 언어 간의 차이점에 대해 도움이 될 만한 설

명과 유용한 예제를 제공한다. 이 밖에도 jQuery의 플러그인 구조도 설명하고 있어 자신만의

jQuery 플러그인을 만드는 데도 도움될 것이다.

이 책과 함께 jQuery의 막강한 기능을 이용하면 그동안 하지 못했던 많은 것을 할 수 있을 것

이다.

이 책의 내용

1장, jQuery 스크립트 살펴보기

간단한 예제를 구현해 보고 코드를 하나씩 살펴보면서 jQuery로 할 수 있는 일을 알아보고 이

책에서 설명하고자 하는 방향을 알려준다.

2장, 셀렉터 표현식

jQuery 메서드를 사용해 페이지 엘리먼트를 다루기 전에 먼저 HTML 페이지의 엘리먼트에 접

근할 수 있는 jQuery 기능이다. 매우 중요한 부분이고 이 책의 핵심이다.

3장, DOM 탐색 메서드

2장에서 배운 셀렉터 표현식을 이용해 페이지 엘리먼트에 접근하는 메서드를 설명한다.

xxiii

4장, DOM 처리 메서드

엘리먼트를 조작해 HTML 구조를 변경하거나 조사하는 메서드를 설명한다.

5장, 이벤트 메서드

jQuery를 이용해 이벤트를 일으키고 이벤트에 반응하는 방법을 설명한다.

6장, 이펙트 메서드

jQuery에서 기본적으로 제공하는 애니메이션 효과뿐 아니라 새롭게 자신만의 효과를 만드는

방법을 설명한다.

7장, AJAX 메서드

페이지를 새로고침하지 않고 서버 측과 통신을 가능하게 하는 AJAX 기술을 간단하게 사용할

수 있는 jQuery 메서드를 알려준다.

8장, 기타 메서드

다른 범주에 속하지 않는 여러 가지 메서드를 설명한다.

9장, jQuery 전역 속성

브라우저 정보 등을 포함한 jQuery 속성을 설명한다.

10장, 플러그인 API

jQuery에 내장돼 있는 기본 기능 말고도 확장해서 쓸 수 있는 jQuery 플러그인의 사용법과

이전 장에서 설명한 jQuery 메서드를 사용해 새로 jQuery 플러그인을 개발하는 방법을 소

개한다.

11장, 빨리 찾아보기

모든 메서드 이름을 알파벳 순으로 정렬해 메서드 이름으로 메서드 설명을 빠르고 쉽게 확인

할 수 있다.

부록 A, 온라인 참고자료

jQuery와 자바스크립트, 웹 개발과 관련된 여러 유용한 온라인 사이트를 소개한다.

xxiv

부록 B, 개발 도구

jQuery를 이용해 개발할 때 디버깅에 용이한 여러 가지 도구를 소개한다.

선행 지식

이 책은 예제를 따라 개발해보는 튜토리얼이 아니라 메서드와 그 기능을 설명하는 레퍼런스

다. 튜토리얼이 목적이면 『jQuery 1.3: 작고 강력한 자바스크립트 라이브러리』가 좀 더 좋은 대

안이다.

jQuery의 개념을 이해하려면 자바스크립트에 대한 기본 지식이 있어야 하며, HTML과 CSS에

익숙하다면 좀 더 쉽게 이해할 수 있을 것이다.

jQuery는 http://jquery.com에서 내려 받을 수 있다. 예제를 구현하고 실행해보는 데는 간단한

텍스트 에디터와 웹 브라우저만 있으면 된다. 그러나 AJAX 예제는 아파치 웹 서버 등 서버 측 자

원에 접근할 수 있어야 한다.

대상 독자

레퍼런스는 개발 도중 jQuery가 제공하는 일부 메서드의 사용법을 빠르게 익히고 싶거나

jQuery의 기능을 한눈에 파악하고자 하는 웹 개발자에게 맞게 쓰여져 있다. 기본적인 HTML

과 CSS 지식이 있고, 자바스크립트 문법에 익숙하고 기본적인 jQuery에 관한 지식이 있다면 이

책이 매우 유용할 것이다.

표기 관례

이 책에서는 여러 형식으로 jQuery에 관한 설명과 예제 코드를 구분한다. 아래의 예문으로 코드

와 정보를 어떻게 구분하는지 알아보자.

설명하는 문장 안에 코드가 들어 있을 때는 다음과 같다.

“.removeAttr() 메서드는 자바스크립트의 removeAttribure() 함수를 사용한다.”

xxv

코드 블록은 다음과 같다.

<ul>

<li>list item 1</li>






</ul>

예제 코드 안에 중요한 부분이 있을 때는 해당 구문을 굵게 표시한다.

<head>

<meta http-equiv="Content-Type"

content="text/html; charset=utf-8"/>

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

<script src="jquery.plug-in.js"

type="text/javascript"></script>

<script src="custom.js" type="text/javascript"></script>

<title>Example</title>

</head>

예제 코드에서 새로 추가된 코드나 중요한 단어일 때도 굵게 표시하고, 예제 코드를 실행했을

때 나타나는 메뉴나 대화상자 메시지도 다음과 같이 굵게 표시한다.

“이 코드를 실행한 후 실행하기를 클릭하면 같은 같은 메시지가 출력된다.”

알아두기

주의해야 할 부분이나 중요한 추가 설명은 이와 같이 표시한다.

팁

팁이나 유용한 방법을 소개할 때는 이와 같이 표시한다.

xxvi

독자 의견

이 책에 대해 부족한 점이나 만족스러운 점, 혹은 마음에 들지 않는 부분과 관련된 의견은 언제

든지 환영한다. 독자의 의견은 언제나 좀더 나은 책을 만드는 데 늘 필요하다.

책에 대한 의견이 있는 분은 책 제목을 이메일 제목에 포함해 [email protected]으로

보내주길 바란다.

고객지원

Packt 책의 고객이 된 것을 진심으로 환영합니다.

이 책의 예제 코드 다운로드 주소

http://www.packtpub.com/files/code/0042_Code.zip

또는

http://wikimain.cafe24.com/wiki/data/jQuery API/jQuery Sample Code.zip

내려 받은 파일에는 예제소스의 간략한 사용법도 들어 있습니다.

정오표

저희가 세심한 주의를 기울여 내용의 정확성을 보장하려고 노력했는데도 실수가 발생해서 책 내

용에서 본문이나 코드에 실수나 오타 등이 발견될 수도 있습니다. 이런 실수나 오타 등을 저희에

게 알려주면 감사하겠습니다. 오탈자에 대한 피드백은 다른 독자에게도 도움이 되고 다음 판에

서 책을 개선하는 데도 크게 도움될 것입니다. 오탈자를 발견하면 http://www.packtpub.com/

support을 방문한 후 구입한 책을 선택하고 “Let us know” 링크를 클릭한 후 발견한 오탈자에

대한 내용을 입력하면 됩니다. 제출한 오탈자는 검증을 거친 후 웹사이트를 통해 수정한 내용이

올라오거나 책의 “정오표” 영역의 하단에 기존의 오탈자 목록과 함께 추가됩니다. 그리고 http://

www.packtpub.com/support에는 오탈자를 등록할 수 있고 이미 등록된 정오표도 확인할 수

있습니다.

xxvii

저작권 침해 / 표절 도용

인터넷상에 존재하는 자료의 저작권 침해는 모든 매체에서 끊임없이 일어나는 문제입니다.

Packt에서는 저작권과 특허를 매우 엄중하게 보호하고 있습니다. 인터넷상에서 어떠한 형태로

든 Packt의 저작물에 대한 불법 도용 사례를 발견할 경우 웹사이트의 주소나 이름을 보내주면

해당 웹사이트에 대해 조치를 취하겠습니다.

도용이 의심되는 경우를 발견하면 [email protected]으로 메일을 보내주기 바랍니다.

저작권을 보호하는 데 도움을 주시면 저희가 좀더 좋은 콘텐츠를 여러분에게 제공하는 것으

로 보답하겠습니다.

질문

책과 관련해서 불편한 사항이 있을 경우 [email protected]으로 알려주시면 문제를 해

결하고자 최선을 다하겠습니다.

jQue

ry A

PI

Refe

renc

e G

uide

1

01jQuery 스크립트 살펴보기

일반적인 jQuery 스크립트에서는 jQuery 라이브러리에서 제공하는 셀렉터(selector), DOM 처리

메서드, 이벤트 처리 메서드 등을 이용한다. jQuery를 시작하는 가장 좋은 방법은 먼저 jQuery

에서 제공하는 여러 가지 기능을 익히고 특성을 이해하는 것이다.

이 책에서는 jQuery 라이브러리에서 제공하는 메서드나 함수를 분류별로 모아 모두 설명한다.

jQuery 라이브러리에서 제공하는 메서드를 구분하는 방법은 여러 가지가 있겠지만 여기서는 성

격이 비슷한 메서드를 같은 분류로 묶어서 차례차례 설명하겠다. 이제부터 완벽하게 동작하는

예제와 함께 jQuery의 기능을 다양하게 활용하는 방법을 알아보자.

동적인 목차

jQuery를 이용하는 간단한 예제를 만들어보자. 예제에서는 몇 개의 제목이 포함된 HTML 문서

를 만든 다음 jQuery로 제목만 추출해서 모은 페이지의 목차를 오른쪽 상단에 위치시킬 것이다.

브라우저에서 예제를 확인하면 다음과 같다.

2 l jQuery API 레퍼런스 가이드

페이지 목차는 페이지가 로딩될 때는 접힌 상태로 있다가 마우스를 클릭했을 때 펼쳐진다.

동시에 본문에 기능을 하나 추가하겠다. 페이지를 로딩할 때는 본문을 소개하는 글이 보이지

않지만 본문의 Introduction을 클릭하면 현재 파일이 아닌 다른 파일에서 내용을 불러와 본문

에 출력한다.

이 예제를 구현하기에 앞서 jQuery 라이브러리와 스크립트를 본문에 삽입하는 방법부터 알아

보자.

jQuery 구하기

jQuery 공식 웹 사이트(http://jquery.com/)에서는 최신 버전의 소스코드와 jQuery에 관련된

소식을 제공한다. jQuery로 스크립트를 작성하려면 먼저 jQuery를 내려 받아야 한다. 다운로드

는 jQuery 사이트 첫 페이지의 오른쪽에 있다. jQuery 사이트에서는 여러 가지 버전의 jQuery

라이브러리를 제공하지만, 가장 적당한 버전은 압축되지 않은 최신 버전의 jQuery다. 이 책을 쓸

시점의 jQuery의 최신 버전은 1.6이다.

파일을 내려 받으면 설치 과정이 끝난다. jQuery를 이용하려면 웹 브라우저에서 접근 가능한

경로에 jQuery를 두면 된다. 자바스크립트는 인터프리트 언어이므로 jQuery나 자바스크립트

01 jQuery 스크립트 살펴보기 l 3

를 실행하려고 따로 컴파일하지 않아도 된다. HTML 페이지를 작성하다가 jQuery가 필요하면

HTML 문서에 간단하게 jQuery 파일의 경로만 <script> 태그로 삽입하면 된다.


HTML 문서 준비

거의 모든 jQuery 예제에서는 세 가지 부분을 작성해야 한다. 바로 HTML 문서와 HTML 문

서를 꾸밀 CSS 파일, jQuery 스크립트 자바스크립트 파일이다. 다음 예제는 책의 본문이 담긴

HTML 문서다.

<!DOCTYPE html>

<html lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf- 8">

<title>Doctor Dolittle</title>

<link rel="stylesheet" href="dolittle.css" type="text/css" media="screen" />


<script src="dolittle.js" type="text/javascript"></script>

</head>

<body>

<div class="container">

<h1>Doctor Dolittle</h1>

<div class="author">by Hugh Lofting</div>

<div id="introduction">

<h2><a href="introduction.html">Introduction</a></h2>

</div>

<div class="content">

<h2>Puddleby</h2>

<p>ONCE upon a time, many years ago when our

grandfathers were little children--there was a

doctor; and his name was Dolittle-- John Dolittle,

M.D. "M.D." means that he was a proper

doctor and knew a whole lot. </p>



</div>

</div>

</body>

</html>


알아두기

작업할 파일은 서버 측 디렉터리의 어디에 둬도 무방하다. 또 파일 안에 포함되는 다른 파일의

위치도 중요하지 않다. 이 책의 예제 코드에서 쓴 파일 경로는 거의 모두 절대경로(/images/

foo.png)가 아닌 상대경로(../images/foo.png)를 이용하므로 웹 서버가 아닌 로컬에서도

실행할 수 있다.

브라우저가 HTML 문서에 포함된 <head> 엘리먼트를 로딩하고 나면 곧바로 스타일시트를 불

러온다. 스타일시트는 예제 HTML 문서에서 동적으로 생성할 엘리먼트의 CSS 속성값을 변경해

서 결과적으로 문서의 모양을 바꾼다.

/** =page contents

************************************************************/

#page-contents {

position: absolute;

text-align: left;

top: 0;

right: 0;

width: 15em;

border: 1px solid #ccc;

border-top-width: 0;

background-color: #e3e3e3;

}

#page-contents a {

display: block;

margin: .25em 0;

}

#page-contents a.toggler {

padding-left: 20px;

background: url(arrow-right.gif) no-repeat 0 0;

text-decoration: none;

}

#page-contents a.arrow-down {

background-image: url(arrow-down.gif);

}

#page-contents div {

padding: .25em .5em .5em;

display: none;

background-color: #efefef;

}


/** =introduction

************************************************************/

.dedication {

margin: 1em;

text-align: center;

border: 1px solid #555;

padding: .5em;

}

브라우저는 HTML 문서를 로딩할 때 <head> 태그에 선언된 순서대로 스타일시트 파일을 불러

온 후 자바스크립트 파일을 불러온다. jQuery를 이용해서 작성한 스크립트의 위치가 jQuery 라

이브러리를 불러오는 구문보다 위에 있으면 스크립트가 정상적으로 작동하지 않을 수 있다. 브라

우저는 HTML 문서에 선언한 순서대로 스크립트를 실행하기 때문에 jQuery를 이용해 작성한

자바스크립트 구문이나 파일보다 jQuery를 먼저 불러와야 한다.

알아두기

일부 개발자들은 HTML 문서를 좀더 빠르게 로딩하려고 자바스크립트를 HTML 문서 하단

의 닫는 </body> 태그 바로 위에 두기도 한다. 브라우저는 문서 상단에 위치한 자바스크립

트를 처리하고 나서 HTML을 렌더링하기 때문에 자바스크립트를 문서 하단에 넣으면 HTML

을 렌더링하고 난 후에 바로 자바스크립트를 처리할 수 있어서 페이지 로딩이 좀더 빨라지는

듯한 효과를 얻을 수 있다. 이와 관련된 더 자세한 정보는 http://developer.yahoo.com/

performance/rules.html#js_bottom을 참고한다.

jQuery 코드 작성

우리가 작성할 코드는 HTML 문서에 <script src="dolittle.js" type="text/javascript"></

script> 구문으로 삽입한 파일에 들어간다. jQuery를 이용하는 코드는 페이지 내에서 갖가지

동적인 기능을 수행하는 데 비해 코드의 양이 상당히 적은 편이다.

jQuery.fn.toggleNext = function() {

this.toggleClass('arrow-down')

.next().slideToggle('fast');

return this;

};

$(document).ready(function() {

$('<div id="page-contents"></div>')

.prepend('<a class="toggler" href="#">Page Contents</a>')


.append('<div></div>')

.prependTo('body');

$('.content h2').each(function(index) {

var $chapterTitle = $(this);

var chapterId = 'chapter-' + (index + 1);

$chapterTitle.attr('id', chapterId);

$('<a></a>').text($chapterTitle.text())

.attr({

'title': 'Jump to ' + $chapterTitle.text(),

'href': '#' + chapterId

})

.appendTo('#page-contents div');

});

$('#page-contents > a.toggler').click(function() {

$(this).toggleNext();

return false;

});

$('#introduction > h2 a').click(function() {

$('#introduction').load(this.href);

return false;

});

});

이 코드만으로 목차를 동적으로 생성하고 외부 파일에서 소개글을 불러와 페이지에 동적으로

삽입하는 등 여러 가지 동작을 구현했다.

예제 스크립트 분석

위 예제 코드는 짧고 간단하지만 jQuery의 광범위한 기능을 모두 보여준다. 예제 코드를 작성하

는 동안 전체적인 jQuery 스크립트를 작성하는 법을 알아봤으니, 이제 코드를 하나씩 설명하면

서 jQuery 메서드를 살펴보자.

알아두기

여기서는 이 스크립트의 작동방식에 대해 자세하게 다루지 않겠다. 비슷한 예제 코드가

Learning jQuery 블로그의 http://www.learningjquery.com/2007/06/automatic-

page-contents에 있으니 작동 방식에 관해 좀더 자세히 알려면 위 링크를 참고한다.


셀렉터 표현식

HTML 문서를 동적으로 작동시키려면 먼저 동적으로 작동시키고자 하는 HTML 엘리먼트를

찾아야 한다. 예제 코드에서는 다음과 같은 구문으로 간단하게 문서 내에서 HTML 엘리먼트를

찾아냈다.

$('#introduction')

이것은 HTML 문서 내의 여러 HTML 엘리먼트 가운데 ID가 introduction인 엘리먼트를 찾

는 코드다. 하지만 가끔 좀더 복잡한 방법으로 HTML 엘리먼트를 찾아야 할 때도 있다.

$('#introduction > h2 a')

이 코드는 HTML 문서에서 ID가 introduction인 엘리먼트를 찾는다. 그런 다음 검색된 엘리

먼트 자식 엘리먼트 가운데 h2 태그 엘리먼트를 찾은 후에 자손 엘리먼트 가운데 앵커 태그 엘리

먼트를 선택하고 찾은 엘리먼트를 jQuery 객체로 감싸서 반환한다.

이와 같은 셀렉터 표현식을 이용하면 하나의 엘리먼트를 선택하거나 좀더 복잡한 표현식으로

다수의 엘리먼트를 찾을 수 있다. 2장, “셀렉터 표현식”에서는 이와 관련된 각종 표현식의 조합과

사용법을 설명한다.

DOM 탐색 메서드

때때로 이미 DOM 엘리먼트를 참조하는 jQuery 객체가 있지만 엘리먼트를 기준으로 이전이

나 다음 엘리먼트에 접근해야 하는 상황이 생길 수 있다. 이때 다시 셀렉터 표현식을 사용할 수

도 있지만 이미 참조하고 있는 엘리먼트를 기준으로 탐색 메서드를 사용해서 접근할 수도 있다.

jQuery에서는 이러한 메서드를 매우 많이 제공하는데, 이를 DOM 탐색 메서드라고 한다.


.next()

.slideToggle('fast');

위 코드에서 this는 jQuery로 얻은 jQuery 객체(jQuery 객체는 보통 DOM 엘리먼트를 지

칭)를 가리킨다. 예제에서 이 jQuery 객체는 예제 HTML에서 목차를 열고 닫는 링크를 가리킨

다. 이 엘리먼트를 대상으로 .toggleClass()를 호출하면 해당 엘리먼트를 조작할 수 있다. 하지만

.next() 메서드를 실행하면 목차 엘리먼트가 아닌 목차의 내용이 담긴 <div> 엘리먼트로 참조가

바뀌고 .slideToggle() 메서드는 새로 선택된 메서드를 대상으로 동작하게 된다. 이처럼 HTML


구조를 이용해 엘리먼트를 선택하는 것이 jQuery의 DOM 탐색 메서드다.

이러한 DOM 탐색 메서드를 이용하면 HTML의 DOM 트리 구조를 자유롭게 탐색할 수 있다.

이와 관련한 내용은 3장, “DOM 탐색 메서드”에서 더 자세히 설명한다.

DOM 조작 메서드

HTML 문서에서 엘리먼트를 찾고 탐색하는 것만으로는 부족하고 엘리먼트의 속성을 변경하는

등 엘리먼트를 조작할 수 있어야 한다.

$chapterTitle.attr('id', chapterId);

위 코드는 엘리먼트의 ID 속성값을 변경한다.

때로는 아래와 같이 엘리먼트를 추가할 수도 있다.

$('<div id="page-contents"></div>')

.prepend('<a class="toggler" href="#">Page Contents</a>')

.append('<div></div>')

.prependTo('body');

DOM 조작 메서드는 위 코드처럼 동적으로 엘리먼트를 추가하는 것뿐 아니라 엘리먼트를 삭

제하고, 무작위로 섞고, 새로운 엘리먼트를 삽입하는 등 많은 일을 할 수 있다. 위 코드는 <div

id='page-contents'>라는 엘리먼트를 생성하고 그 앞에 링크를 추가한 후 새로운 <div> 태그를

해당 엘리먼트 끝에 넣은 다음, 이것들을 모두 <body> 태그에 넣는다. 4장, “DOM 조작 메서드”

에서는 DOM 트리 구조를 변경하는 각종 메서드에 대해 자세히 설명하겠다.

이벤트 메서드

앞에서 설명한 메서드를 사용하면 페이지를 수정할 수는 있지만 사용자의 동작에 반응해서 변

경되거나 하지는 않는다. 이벤트 메서드를 사용하면 사용자의 동작에 반응해서 페이지가 동적

으로 변경되게 할 수 있다.



return false;

});

위 코드는 선택된 엘리먼트를 클릭할 때마다 실행되는 이벤트 핸들러 함수를 등록하는 코드


다. 클릭 이벤트는 여러 이벤트 가운데 가장 일반적인 이벤트에 해당한다. 5장에서는 이러한 이

벤트를 다양한 방법으로 처리하는 jQuery 메서드를 설명한다.

또한 5장에서는 .ready()와 같은 특별한 이벤트 메서드도 설명한다.

$(document).ready(function() {

// ...

});

.ready() 메서드로 핸들러 함수를 등록하면 HTML 문서가 로딩된 후 문서 안의 DOM 엘리

먼트에 접근 가능해질 때 등록한 핸들러 함수가 실행된다.

이펙트 메서드

이벤트 메서드가 사용자의 동작에 반응한다면 이펙트 메서드는 여기에 효과까지 줄 수 있다. 예

를 들어, 사용자의 입력을 받으면 엘리먼트를 즉시 감추고 보이게 하는 대신 서서히 나타나거나

서서히 사라지게 할 수 있다.


.next()

.slideToggle('fast');

이 메서드는 엘리먼트를 슬라이딩 효과와 더불어 감춰진 엘리먼트는 펼치고, 펼쳐져 있는 엘리

먼트는 감춘다. 6장, “이펙트 메서드”에서는 jQuery의 이펙트 메서드를 설명하고 더불어 새로운

효과를 만들어내는 방법을 자세히 설명한다.

AJAX 메서드

현재 많은 웹 사이트에서는 페이지를 새로고침하지 않고 콘텐츠를 새롭게 갱신하는 기술을 사용

한다. jQuery는 이러한 기술을 손쉽게 사용할 수 있게 AJAX 메서드를 제공한다. AJAX 메서드

를 이용하면 콘텐츠를 외부에서 불러올 수 있을 뿐 아니라 불러오는 과정을 제어하고 모니터링

할 수 있다.



return false;

});


.load() 메서드는 단 한 줄만으로 서버에 있는 다른 HTML 문서의 내용을 현재 HTML 문서

에 삽입한다. 또한 서버 측과의 통신 상태와 정보도 확인할 수 있다. 이와 관련된 좀더 자세한 내

용은 7장, “AJAX 메서드”에서 설명한다.

기타 메서드

jQuery에서 제공하는 여러 메서드 가운데 정확하게 분류를 나눌 수 없는 메서드도 있다.

jQuery 라이브러리에는 기본적인 순환문 같이 일반적으로 자주 사용되는 긴 자바스크립트 구

문을 짧게 작성할 수 있는 메서드가 포함돼 있다.

$('#content h2').each(function(index) {

// ...

});

.each() 메서드를 사용하면 셀렉터 표현식으로 얻은 엘리먼트를 차례로 순환하면서 각 엘리먼

트에 접근할 수 있다. 위 예제는 문서 내의 제목 부분을 모두 선택해서 차례대로 각 제목에 접근

하는 법을 보여준다. 8장, “기타 메서드”에서는 이처럼 유용한 jQuery 메서드에 대해 설명한다.

아울러 9장, “jQuery 프로퍼티”에서는 브라우저 속성 등 스크립트를 작성하는 데 유용한 여러

가지 전역 및 객체 프로퍼티 등을 설명한다.

플러그인 API

jQuery에서 제공하는 메서드만 써서 스크립트를 작성할 수 있는 것은 아니다. 플러그인 API를

이용하면 스크립트 작성에 필요한 새로운 함수를 자유롭게 만들어 마치 jQuery의 메서드를 사

용하는 것처럼 손쉽게 스크립트를 작성할 수 있다.

jQuery.fn.toggleNext = function() {


.next().slideToggle('fast');

return this;

};

위 코드는 .toggleNext()라는 새로운 jQuery 함수를 생성한다. .toggleNext() 함수는 다음

엘리먼트를 접고 펼치는 동작을 한다. 이렇게 새로 선언된 jQuery 함수는 다음과 같이 사용할 수

있다.


$('#page-contents > a.toggler).click(function() {

$(this).toggleNext();

return false;

});

선언된 jQuery 함수는 계속해서 다시 이용할 수 있다. 10장, “플러그인 API”에서는 새로운 함

수를 생성해서 jQuery를 확장하는 방법을 설명한다.

정리

지금까지 jQuery의 많은 기능을 활용해서 잘 작동되는 스크립트를 살펴봤다. 작성한 예제 코드

는 큰 규모는 아니지만 jQuery를 사용해서 웹페이지와 상호작용하는 것을 볼 수 있었고 jQuery

의 각종 기능을 비롯해 짧고 간결한 스크립트를 작성하는 방법을 전체적으로 설명했다. 셀렉터

표현식으로 HTML 문서 안의 엘리먼트를 선택할 수 있고, HTML 문서의 구조를 변경하고, 사

용자의 입력에 따른 반응을 구현하고, 반응 시에 애니메이션 효과를 추가하고, 페이지를 새로고

침할 필요 없이 외부 파일을 불러들여서 현재 문서에 추가하는 등의 기능을 구현했으며, 플러그

인의 형태로 새로운 jQuery 함수를 생성해서 이를 이용하는 방법을 알아봤다.

이어지는 장에서는 jQuery에서 제공하는 메서드와 셀렉터 표현식을 살펴보면서 각 메서드가

어떠한 기능을 제공하고 어떻게 사용하는지 설명하겠다. 각 메서드를 소개하면서 메서드의 문법

과 메서드를 사용할 때 필요한 매개변수와 메서드의 반환값을 설명하고 이를 좀더 쉽게 이해할

수 있게 간단한 예제 코드도 추가로 설명하겠다. 그리고 부록에서는 온라인에서 추가로 얻을 수

있는 자료를 비롯해 jQuery 플러그인 구조와 이를 기초로 작성된 많은 jQuery 플러그인을 사용

하고, 나아가 자신만의 플러그인을 만드는 방법을 설명하겠다.

jQue

ry A

PI

Refe

renc

e G

uide

13

02셀렉터 표현식

jQuery를 이용해 뭔가를 하려면 먼저 대상이 필요하다. 예를 들어 엘리먼트를 감추거나 나타나

게 하려면 대상 엘리먼트를 찾아야 한다. jQuery의 셀렉터 표현식을 사용해 대상 엘리먼트를 찾

아보자.

jQuery는 CSS 1-3 문법을 차용해서 페이지상의 엘리먼트에 접근하는 강력한 기능을 지원한

다. 이번 장에서는 jQuery가 지원하는 모든 셀렉터 표현식을 설명하겠다.

CSS 셀렉터

다음 CSS 셀렉터는 W3C에서 정의한 Cascading Style Sheet 규격(1-3)을 기반으로 한다. 해당

규격에 대한 더 많은 정보는 http://www.w3.org/Style/CSS/#specs에서 확인할 수 있다.

⊙ T 엘리먼트

태그 이름이 T인 모든 엘리먼트를 선택한다.

예제

• $('div')는 문서 안의 모든 div 엘리먼트를 선택한다.

• $('em')은 문서 안의 모든 em 엘리먼트를 선택한다.

설명

자바스크립트 내장 함수인 getElementsByTagName()을 이용해 표현식에 해당하는 엘리먼

트를 반환한다.


⊙ #myid ID

엘리먼트 ID가 myid인 페이지 내의 유일한 엘리먼트를 선택한다.

예제

• $('#myid')는 id="myid"인 유일한 엘리먼트를 선택한다.

• $('p#myid')는 id가 myid이면서 p 태그인 유일한 엘리먼트를 선택한다. 다르게 표현

하면 <p id="myid">를 반환한다.

설명

각 ID 값은 한 문서 내에서 딱 한 번만 사용해야 하는 값이다. ID 값이 같은 엘리먼트

가 여러 개 있는 문서를 대상으로 위 표현식을 사용하면 여러 엘리먼트 가운데 첫 번째

엘리먼트가 반환된다. 페이지 내에 ID가 같은 엘리먼트를 여러 개 지정하고 그중에서

첫 번째 엘리먼트를 찾고자 위와 같은 방법을 써서는 안 된다. 한 문서에 ID가 같은 여

러 엘리먼트를 선언하는 것은 잘못된 방법이므로 올바른 셀렉터 표현식의 결과를 얻을

수 없다.

두 번째 예제에서는 ID뿐 아니라 태그 이름도 함께 사용하고 있어서 혼란스러울 수도 있

다. 페이지 내에서 ID 값은 유일하기 때문에 굳이 태그 이름을 함께 써서 셀렉터 표현식

을 작성하지 않아도 된다. 하지만 개발 도중에 동적으로 생성되는 엘리먼트가 있을 때

jQuery 셀렉터 엔진이 잘못된 엘리먼트를 선택하는 것을 방지해야 하거나, 작성한 jQuery

스크립트 파일을 다른 파일에서도 사용하게 될 때는 두 번째 예제처럼 작성하는 경우도

있다. 예를 들어 문서 A에서는 <h1 id="title">로 작성하고 문서 B에서는 <h2 id="title">

로 작성한 후 두 문서에서 함께 사용하는 스크립트를 작성할 때는 위 예제처럼 좀더 구체

적인 셀렉터 표현식을 작성해서 정확하게 엘리먼트를 판별해야 할지도 모른다.

첫 번째 예제에서 jQuery는 자바스크립트의 기본 내장 함수인 getElementById()를 사용

해서 엘리먼트를 반환한다. 자바스크립트 내장 함수인 getElementById() 함수는 굉장히

효율적으로 동작한다. 두 번째 예제처럼 ID 값과 태그 이름을 함께 사용하면 jQuery 내

부에서는 태그 이름에 해당하는 엘리먼트를 추출한 다음 ID값으로 다시 필터링해서 대

상 엘리먼트를 반환한다.

02 셀렉터 표현식 l 15

알아두기

늘 그렇듯이 개발자의 시간은 무엇보다도 중요한 자원이다. 셀렉터 표현식을 작성하는 방법에

따라 성능 증가를 기대해 볼 수도 있으나 최적화된 셀렉터 표현식을 작성하느라 너무 많은 시

간을 허비하는 것은 바람직하지 않다.

⊙ .myclass 클래스

클래스가 myclass인 엘리먼트를 모두 선택한다.

예제

• $('.myclass')는 클래스가 myclass인 엘리먼트를 선택한다.

• $('p.myclass')는 p 태그 엘리먼트 가운데 클래스가 myclass인 엘리먼트를 선택

한다.

• $('.myclass.otherclass')는 클래스로 myclass와 otherclass가 모두 포함된 엘리

먼트를 반환한다.

설명

jQuery는 자바스크립트 내장 함수인 getElementsByClassName()를 지원하는 브라우저

에서는 getElementsByClassN3ame()을 사용하고, 그렇지 않은 브라우저에서는 각 엘리먼

트의 className 속성값을 검사해서 클래스 셀렉터를 구현한다.

세 번째 예제의 다중 클래스 문법은 인터넷 익스플로러 6 이하 버전을 제외한 최신 브라

우저에서 모두 지원한다. 이러한 이유로 jQuery를 이용하면 특히 여러 브라우저를 대상

으로 스타일을 적용하기가 아주 편리하다.


⊙ E F 자손 엘리먼트

E 표현식에 해당하는 엘리먼트의 자손 엘리먼트 가운데 F 표현식에 해당하는 엘리먼트를 선

택한다.

예제

• $('#container p')는 엘리먼트 ID가 container인 엘리먼트의 자손 엘리먼트 가운

데 태그 이름이 p인 엘리먼트를 선택한다.

• $('a img')는 <a> 엘리먼트의 자손 엘리먼트 가운데 <img> 엘리먼트를 모두 선택

한다.

설명

자손 엘리먼트는 특정 엘리먼트의 자식 엘리먼트, 자식의 자식 엘리먼트, 자식의 자식

의 자식 엘리먼트와 같이 해당 엘리먼트의 하위 노드의 모든 엘리먼트를 가리킨다. 예

를 들어, 아래 HTML 코드의 <img> 엘리먼트는 <span>, <p>, <div id="inner">, <div

id="container"> 엘리먼트의 자손 엘리먼트에 해당한다.

<div id="container">

<div id="inner">

<p>

<span><img src="example.jpg" alt="" /></span>

</p>

</div>

</div>


⊙ E > F 자식 엘리먼트

E 표현식에 해당하는 엘리먼트의 자식 엘리먼트 가운데 F 표현식에 해당하는 엘리먼트를 선

택한다.

예제

• $('li > ul')는 <li> 엘리먼트의 자식 엘리먼트 가운데 <ul> 엘리먼트를 선택한다.

• $('.myclass > code')는 클래스 이름이 myclass인 엘리먼트의 자식 엘리먼트인

<code> 엘리먼트를 선택한다.

설명

최근에 출시된 사파리, 파이어폭스, 오페라, 크롬, 인터넷 익스플로러 7 이상 버전의 웹

브라우저는 위와 같은 CSS 자식 셀렉터를 지원한다. 하지만 인터넷 익스플로러 6 이

하 버전의 브라우저는 자식 셀렉터를 지원하지 않는다. 첫 번째 예제는 중첩된 비순차

(unordered) 리스트를 선택할 때 좋은 방법이며 jQuery는 브라우저 버전에 상관없이 이러

한 작업을 가능하게 만들어준다.

자식 셀렉터 표현식인 (E > F)와 자손 셀렉터 표현식인 (E F)의 차이점은 자식 셀렉터 표

현식은 엘리먼트의 첫 번째, 즉 바로 하위 레벨에 있는 자손 엘리먼트만 선택한다는 점이

다. 아래의 <img> 엘리먼트는 <span>의 유일한 자식 엘리먼트에 해당한다.


<div id="inner">

<p>


</p>

</div>

</div>


⊙ E + F 이웃 엘리먼트

F 표현식에 해당하는 엘리먼트 가운데 E 표현식에 해당하는 엘리먼트의 바로 다음에 나오고

해당 엘리먼트와 부모 엘리먼트가 같은 엘리먼트를 모두 선택한다.

예제

• $('ul + p')는 <ul> 엘리먼트 바로 다음에 나오는 <p> 엘리먼트를 모두 선택한다.

• $('#myid + .myclass')는 id="myid"에 해당하는 엘리먼트 바로 다음에 나오는,

class="myclass"가 지정된 엘리먼트를 선택한다.

설명

이웃 엘리먼트 셀렉터인 (E + F)와 형제 엘리먼트 셀렉터인 (E ~ F, 이어서 설명하겠다)는

오직 DOM 트리에서 형제(부모 엘리먼트가 같은 엘리먼트를 가리킨다) 엘리먼트만을 대

상으로 한다. 아래 예제를 실행해보고 결과를 확인해 보자.


<ul>

<li></li>

<li></li>

</ul>

<p>

<img/>

</p>

</div>

• $('ul + p')는 <p>를 선택한다. 왜냐하면 <p>는 <ul> 엘리먼트의 바로 다음에 나오

고 두 엘리먼트는 부모 엘리먼트로 <div id="container">를 공유하기 때문이다.

• $('p + img')는 아무것도 선택하지 않는다. <p>는 <img>보다 DOM 트리에서 한 단

계 높은 엘리먼트다.

• $('li + img')는 아무것도 선택하지 않는다. <li>와 <img>는 DOM 트리에서 같은

단계이긴 하지만 부모 엘리먼트가 서로 다르다.


⊙ E ~ F 형제 엘리먼트

F 표현식에 해당하는 엘리먼트 가운데 E 표현식에 해당하는 엘리먼트 다음에 나오고 해당 엘

리먼트와 부모 엘리먼트가 같은 엘리먼트를 모두 선택한다.

예제

• $('ul ~ p')는 <ul> 엘리먼트의 형제 엘리먼트 가운데 <p> 엘리먼트를 모두 선택

한다.

• $('#myid ~ .myclass')는 id="myid"인 엘리먼트의 형제 엘리먼트 가운데

class="myclass"인 엘리먼트를 모두 선택한다.

설명

이웃 엘리먼트 셀렉터 표현식인 (E + F)와 형제 엘리먼트 셀렉터 표현식인 (E ~ F)는 성격

이 매우 비슷해서 이해하기가 어렵거나 혼동될 수도 있다. 하지만 두 셀렉터 표현식의 결

과는 다르다. 이웃 엘리먼트 셀렉터 표현식은 바로 이웃하는 엘리먼트를 선택하고 형제 엘

리먼트 셀렉터 표현식은 이웃하는 엘리먼트는 물론 DOM 트리구조상 같은 위치에 있는

모든 형제 엘리먼트를 검색해서 선택한다.

아래 HTML 코드를 살펴보자.

<ul>

<li class="first"></li>

<li class="second"></li>

<li class="third></li>

</ul>

<ul>

<li class="fourth"></li>

<li class="fifth"></li>

<li class="sixth"></li>

</ul>

• $('li.first ~ li')는 <li class="second">와 <li class="third">를 선택한다.

• $('li.first + li')는 <li class="second">만 선택한다.


⊙ E, F, G 다중 엘리먼트

E, F, G 셀렉터 표현식에 해당하는 엘리먼트를 모두 선택한다.

예제

• $('code, em, strong')은 모든 <code>, <em>, <strong> 엘리먼트를 선택한다.

• $('p strong, .myclass')는 <p> 엘리먼트의 자손 엘리먼트 가운데 <strong> 엘리먼

트와 클래스명이 myclass인 엘리먼트를 모두 선택한다.

설명

다중 셀렉터 표현식 조합은 서로 성격이 다른 엘리먼트들을 한 번에 선택할 때 매우 유용

하다. 이 셀렉터 표현식 조합의 대안인 .add() 메서드에 대해서는 3장, “DOM 탐색 메서

드”에서 설명하겠다.


⊙ :nth-child(n/even/odd/expr) 순차 자식

특정 엘리먼트의 n번째 자식 엘리먼트를 선택한다.

예제

• $('li:nth-child(2)')는 부모 엘리먼트에서 두 번째 자식 엘리먼트에 해당하는 모든

<li> 엘리먼트를 선택한다.

• $('p:nth-child(odd)')는 부모 엘리먼트에서 홀수(odd) 번째(첫 번째, 세 번째, 다섯

번째...)에 해당하는 <p> 엘리먼트를 선택한다.

• $('.myclass:nth-child(3n+2)')는 부모 엘리먼트에서 (3n + 2) 번째(두 번째, 다섯

번째, 여덟 번째...)에 해당하는 클래스명이 myclass인 엘리먼트를 선택한다.

설명

jQuery의 :nth-chold(n)은 CSS 규격에 엄격하게 맞춰 구현되어 n에 해당하는 값은 1부

터 시작한다. 하지만 셀렉터 표현식 이외의 jQuery 메서드에서는 n의 값이 일반 자바스크

립트의 계수 방식과 마찬가지로 0부터 시작한다. 그러므로 두 개의 <li>가 포함된 <ul>이

있을 때 $('li:nth-child(1)')은 첫 번째 <li>를 선택하지만 $('li:eq(1)')은 두 번째 <li>

를 선택한다.

:nth-child(n) 가상 클래스는 :eq(n)과 같은 표현식인 :nth(n)과 매우 비슷해서 혼동될

수 있다. 하지만 두 표현식을 사용한 결과는 크게 차이가 날 수 있다. 그러나 예제에서 보

았듯이 우연히 같은 엘리먼트를 선택하는 경우도 생길 수 있다. :nth-child(n)는 엘리먼

트가 부모 엘리먼트에서 n번째에 위치하며 셀렉터 표현식과 일치하는 엘리먼트를 선택한

다. :nth(n)는 셀렉터 표현식에 일치하는 엘리먼트 가운데 n번째 엘리먼트를 선택한다. 아

래 HTML코드와 몇 가지 셀렉터 표현식 예제를 토대로 차이점을 알아보자.

<div>

<h2></h2>

<p></p>

<h2></h2>

<p></p>

<p></p>

</div>


• $('p:nth(1)')은 두 번째 <p>를 선택한다(:nth(n)에서 n은 0부터 시작하기 때문).

• $('p:nth-child(1)')은 부모 노드의 첫 번째 자식 노드로 위치하는 <p> 태그가 없기

때문에 아무것도 선택하지 않는다.

• $('p:nth(2)')는 세 번째 <p>를 선택한다.

• $('p:nth-child(2)')는 첫 번째 <p>를 선택한다(부모 엘리먼트 입장에서 해당 엘리

먼트는 두 번째 자식 엘리먼트에 해당하기 때문).

:nth-child(n)은 n번째 엘리먼트는 물론 짝수(even) 번째나 홀수(odd) 번째에 해당하는

엘리먼트도 선택할 수 있다. 이는 HTML 테이블에서 각 열을 편하게 구분하고자 홀수 행

과 짝수 행의 배경색 등을 다르게 할 때 특히 유용하다.

$('p:nth-child(even)')은 첫 번째와 세 번째 <p> 엘리먼트를 선택한다. 이것은 두 엘리먼

트 부모 엘리먼트를 기준으로 두 번째와 네 번째(둘 다 짝수) 엘리먼트에 해당하기 때문

이다.

:nth-child() 표현식 예제 가운데 세 번째는 수학적인 조합을 사용하는 계산 조건식을

보여준다. 예를 들어, 정수를 반환하는 an+b와 같은 수식에서 a와 b를 정수로 선언하면

셀렉터는 n값을 0부터 증가시키면서 해당 수식의 결과 값을 :nth-child()에 대입해 엘리

먼트를 선택한다.

위와 같이 특이한 사용법에 대한 자세한 설명은 다음 W3C CSS 규격에서 찾아볼 수

있다.

http://www.w3.org/TR/css3-selectors/#nth-child-pseudo.


⊙ :first-child 첫 번째 자식

엘리먼트에서 첫 번째 자식에 해당하는 엘리먼트를 모두 선택한다.

예제

• $('li:first-child')는 모든 첫 번째 자식 <li> 엘리먼트를 선택한다.

• $('.myclass:first-child')는 모든 첫 번째 자식 엘리먼트 가운데 클래스명이

myclass 엘리먼트를 선택한다.

설명

:first-child는 :nth-child(1)을 간편하게 나타낸 표현식이다. :X-child 가상 클래스에 관

한 좀더 자세한 사항은 순차 자식 셀렉터(:nth-child)를 설명한 부분을 참고하기 바란다.

⊙ :last-child 마지막 자식

엘리먼트에서 마지막 자식 엘리먼트를 선택한다.

예제

• $('li:last-child')는 부모 엘리먼트에서 마지막으로 위치하는 <li>를 모두 선택

한다.

• $('.myclass:last-child')는 부모 엘리먼트의 마지막 자식 엘리먼트에 해당하고 클

래스명이 myclass인 엘리먼트를 반환한다.

설명

:X-child 가상 클래스에 관한 좀더 자세한 사항은 순차 자식 셀렉터(:nth-child)를 설명

하는 부분을 참고하기 바란다.


⊙ :only-child 유일한 자식

엘리먼트의 유일한 자식 엘리먼트(형제 엘리먼트가 없는 엘리먼트)를 선택한다.

예제

• $(':only-child')는 페이지 내에서 유일한 자식 엘리먼트를 모두 선택한다.

• $('code:only-child')는 페이지 내에서 유일한 자식 노드인 <code> 엘리먼트를 모

두 선택한다.

⊙ :not(E) 부정

E 셀렉터 표현식에 해당하지 않는 엘리먼트를 모두 반환한다.

예제

• $(':not(.myclass)')는 클래스명이 myclass가 아닌 엘리먼트를 모두 선택한다.

• $('li:not(:last-child)')는 페이지 내에서 <li> 엘리먼트 가운데 부모 엘리먼트에

서 마지막 자식 엘리먼트를 제외한 나머지 엘리먼트를 선택한다.


⊙ :empty 자식 엘리먼트가 없는 엘리먼트

텍스트 노트를 포함해서 자식 엘리먼트가 없는 엘리먼트를 모두 선택한다.

예제

• $(':empty')는 자식 노드가 없는 모든 엘리먼트를 모두 선택한다.

• $(':p:empty')는 페이지 내의 <p> 엘리먼트 가운데 자식 노드가 없는 엘리먼트를 모

두 선택한다.

설명

:empty(와 :parent) 표현식과 관련해서 한 가지 알아둬야 할 사항은 자식 엘리먼트에 텍

스트 노드도 포함된다는 점이다.

W3C에서는 <p> 태그에 단지 텍스트 노드라도 반드시 하나 이상의 자식 엘리먼트가 있어

야 한다고 권고한다. (http://www.w3.org/TR/html401/struct/ text.html#edef-P 참고)

반면 <input>, <img>, <br>, <hr>와 같은 태그는 정의상 자식 노드를 가질 수 없다.

⊙ * 전체 선택

모든 엘리먼트를 선택한다.

예제

• $('*')는 모든 엘리먼트를 선택한다.

• $('p > *')는 <p> 엘리먼트의 모든 자식 엘리먼트를 선택한다.

설명

전체 선택 표현식은 다른 표현식과 함께 복잡한 셀렉터 표현식을 구성할 때 매우 유용하

게 쓰인다.


속성 셀렉터

CSS 규격에 의하면 엘리먼트는 선언된 속성으로도 식별이 가능하다. 물론 사용 중인 브라우

저가 CSS 속성을 모두 지원하지는 못하더라도 엘리먼트 속성으로 엘리먼트를 식별하는 것은

jQuery의 강력한 기능이다.

다음과 같이 속성값이 여러 개의 빈 문자열로 나눠져 있으면 이를 유념해서 속성 셀렉터

표현식을 분리해서 작성해야 한다. 예를 들어, $('a[rel=nofollow]')는 <a rel="nofollow"

href="example.html">Some text</a>는 선택하지만 <a rel="nofollow self" href="example.

html">Some text</a>는 선택하지 않는다.

속성 셀렉터 표현식에 작은따옴표나 큰따옴표, 혹은 특수 문자를 함께 쓰려면 역슬래시 문자로

특수문자를 표현식에 넣을 수 있다. 다음 예제 표현식은 모두 같은 셀렉터 표현식으로 처리된다.

y 기본 표현: $('a[ref=nofollow self]')

y 작은따옴표 안에 큰따옴표가 사용될 때: $('a [ref="nofollow self"]');

y 큰따옴표 안에 작은따옴표가 사용될 때: $("a [ref='nofollow self']");

y 작은따옴표 안의 작은따옴표를 역슬래시로 처리: $('a [ref=\'nofollow self\']');

y 큰따옴표 안의 큰따옴표를 역슬래시로 처리: $("a [ref=\"nofollow self\"]");

위에 열거한 표현식은 모두 옳은 표현식이다. 각자 선호에 따라 어떠한 표현식을 쓸지 결정한

다. 이 책에는 예제 코드를 빨리 이해할 수 있게 따옴표를 쓰지 않았다.


⊙ [foo] 속성 표현식

foo라는 속성을 포함한 모든 엘리먼트를 반환한다.

예제

• $('[rel]')는 rel 속성을 지닌 엘리먼트를 모두 선택한다.

• $('[.myclass[style]']은 style 속성이 있고 클래스명이 myclass인 엘리먼트를 모두

선택한다.

⊙ [foo=bar] 속성값 표현식

foo 속성에 해당되는 값이 bar인 엘리먼트를 반환한다.

예제

• $('[name=myname]')은 name 속성값이 myname인 엘리먼트를 반환한다.

• $('a[rel=nofollow]')는 <a> 엘리먼트 가운데 rel 속성값이 nofollow인 엘리먼트를

모두 반환한다.

설명

위 속성 표현식에 대한 좀더 자세한 사항은 속성 셀렉터를 참고한다.


⊙ [foo!=bar] 값이 일치하지 않는 속성

foo에 해당하는 속성이 없거나 foo에 해당하는 속성값이 bar가 아닌 엘리먼트를 모두 선택

한다.

예제

• $('a[rel!=nofollow]')는 rel 속성이 없거나 rel 값이 nofollow가 아닌 모든 <a>를

선택한다.

• $('input[name!=myname]')은 name 속성이 없거나 name 값이 myname이 아닌 모든

<input>을 선택한다.

설명

위와 같은 각 속성 셀렉터 값은 하나의 문자열로 표현해야 한다. 즉, 첫 번째 예제로는

<a ref="nofollow self" href="example.htm">Some text</a> 같은 엘리먼트도 선택될

수 있다. 이 표현식과 관련된 대안은 단어를 포함하는 속성을 참고한다.

⊙ [foo^=bar] 속성값 시작 단어 일치 여부 표현식

foo 속성값이 bar로 시작하는 엘리먼트를 모두 선택한다.

예제

• $('[id^=hello]')는 ID 속성값이 hello로 시작하는 엘리먼트를 모두 선택한다.

• $('input[name^=my]')는 name 속성값이 my로 시작하는 <input> 엘리먼트를 모두

선택한다.

설명

이 셀렉터 표현식은 서버측 프레임워크(시스템 엘리먼트 ID를 만들어내는)에서 생성한

페이지상의 엘리먼트를 선택할 때 매우 유용하다.


⊙ [foo$=bar] 속성값 종료 단어 일치 여부 표현식

foo 속성값이 bar로 끝나는 엘리먼트를 모두 선택한다.

예제

• $('[id$=goodbye]')는 ID 값이 goodbye로 끝나는 엘리먼트를 모두 선택한다.

• $('input[name$=phone]')은 name 값이 phone으로 끝나는 <input> 엘리먼트를 모두

선택한다.

⊙ [foo*=bar] 속성값 포함 여부 표현식

foo 속성값 가운데 bar가 포함된 엘리먼트를 모두 선택한다.

예제

• $('[style*=background]')는 style 속성에 background라는 값이 포함된 모든 엘리

먼트를 선택한다.

• $('a[href=*example.com]')은 href 속성에 example.com이라는 값이 포함된 모든

<a> 엘리먼트를 선택한다.

설명

속성값 포함 여부 표현식은 jQuery에서 지원하는 여러 속성 표현식 가운데 가장 넓은

범위를 대상으로 검색한다. 이 표현식은 셀렉터에 지정한 문자열이 속성값의 어디에 나

타나든 표현식과 일치하는 것으로 간주한다. 따라서 $('p[class*=my]')라는 표현식은

<p class="yourclass myclass">Some text</p>와 <p class="myclass yourclass">Some

text</p>, <p class="thisismyclass">Some text</p>를 모두 선택한다.


⊙ [foo~=bar] 단어를 포함하는 속성 표현식

foo 속성값 가운데 bar라는 단어가 포함된 엘리먼트를 선택한다.

예제

• $('[class~=myclass]')는 클래스명에 myclass라는 값이 포함된 엘리먼트를 모두 선

택한다.

• $('a[rel~=nofollow]')는 rel 값에 nofollow라는 값이 포함된 <a> 엘리먼트를 모두

선택한다.

설명

이 셀렉터 표현식은 속성값 내의 각 단어를 대상으로 일치 여부를 검사하는데, 여기서 "

단어"는 공백으로 구분되는 문자열을 의미한다. 셀렉터 표현식은 속성값 내의 단어와 정

확하게 일치하는 경우에 선택되기 때문에 첫 번째 예제는 $(.myclass)와 동일하다.

이 셀렉터 표현식은 속성값 포함 여부 표현식과 비슷하지만 검색할 문자열이 단어 안에

포함돼 있는 것은 검색되지 않는다. 따라서 두 번째 예제를 실행하면 <a rel="nofollow"

href="example.html">Some text</a>와 <a rel="nofollow self" href="example.

html">Some text</a>는 선택되지만 <a rel="nofollowself" href="example.html">Some

text</a>는 선택되지 않는다.


⊙ [foo|=bar] 머리글을 포함하는 속성 표현식

foo 속성의 값이 bar이거나 bar와 하이픈(-)으로 시작되는 엘리먼트를 모두 선택한다.

예제

• $('[id|=hello]')는 ID 값이 hello이거나 hello-로 시작하는 엘리먼트를 모두 선

택한다.

• $('a[hreflang|=en]')는 hreflang 값이 en이거나 en-으로 시작하는 모든 <a>를 선택

한다.

설명

이 셀렉터는 다국어 지원을 위해 CSS 규격에 도입됐다. 두 번째 예제에 사용된 셀렉터

는 <a href="example.html" hreflang="en">Some text</a>뿐 아니라 <a href="example.

html" hreflang="en-UK">Some text</a>도 선택한다.


폼 셀렉터

아래의 셀렉터 표현식은 폼 엘리먼트의 현재 상태를 검사하는 데 유용하다. 폼 셀렉터를 사용할

때는 :text와 같이 속성 이름만으로 표현식을 작성하기보다는 태그 이름을 함께 쓰는 것이 좋

다(예를 들면, input:text는 :text보다 빠르게 처리된다).

y 폼 엘리먼트(:input): 모든 폼 엘리먼트(<input>(모든 타입), <select>, <textarea>,

<button>)를 선택한다.

y 텍스트 필드(:text): 모든 텍스트 필드(<input type="text">)를 선택한다.

y 비밀번호 필드(:password): 모든 비밀번호 필드(<input type="password">)를 선택한다.

y 라디오 버튼(:radio): 모든 라디오 버튼(<input type="radio">)을 선택한다.

y 체크박스(:checkbox): 모든 체크박스(<input type="checkbox">)를 선택한다.

y 제출 버튼(:submit): 모든 폼 제출 버튼(<input type="submit">)을 선택한다.

y 이미지 버튼(:image): 모든 이미지 타입 버튼(<input type="image">)을 선택한다.

y 초기화 버튼(:reset): 모든 초기화 버튼(<input type="reset">)을 선택한다.

y 표준 버튼(:button): 타입이 button인 모든 버튼 엘리먼트와 입력 엘리먼트(<input

type="button">, <button>)를 선택한다.

y 파일 업로드(:�le): 모든 파일 업로드 필드(<input type="file">)를 선택한다.

y 활성화된 폼 엘리먼트(:enabled): 활성화된 폼 엘리먼트(disabled 속성을 지정하지 않아

사용자가 조작 가능한 상태)를 선택한다.

y 비활성화된 폼 엘리먼트(:disabled): 비활성화된 폼 엘리먼트(disabled 속성을 지정해 사

용자가 조작할 수 없는 상태)를 선택한다.

y 체크된 박스(:checked): 체크된 모든 체크박스나 라디오버튼 엘리먼트를 선택한다.

y 선택된 옵션(:selected): 셀렉트 박스에서 선택된 엘리먼트(사실상 <option> 엘리먼트)를

선택한다.


사용자정의 셀렉터

이어서 CSS 규격에는 없지만 jQuery 라이브러리에는 구현돼 있어 엘리먼트를 선택할 때 도움이

되는 사용자정의 셀렉터 표현식을 설명한다.

⊙ :eq(n) 인덱스 기반 선택 표현식

표현식에 해당하는 엘리먼트 집합에서 n번째에 위치한 엘리먼트를 선택한다.

예제

• $('li:eq(2)')는 3번째 <li>를 선택한다.

• $('.myclass:eq(1)')는 클래스명이 myclass인 엘리먼트 가운데 두 번째 엘리먼트를

선택한다.

설명

셀렉터 표현식 가운데 :nth(n)은 :eq(n) 표현식과 같다.

이 표현식을 포함해서 다음에 소개할 인덱스 관련 셀렉터 표현식은 인덱스 관련 셀렉터

표현식의 앞 부분에 선언된 셀렉터 표현식으로 검색한 엘리먼트를 필터링하는 역할을 한

다. 인덱스 관련 셀렉터 표현식은 셀렉터 표현식으로 얻은 엘리먼트의 범위를 좀더 줄이

는 데 사용할 수 있다. 예를 들어, 먼저 (.myclass) 표현식으로 엘리먼트가 선택되어 4개

의 엘리먼트가 반환된다면 이러한 엘리먼트에는 순서대로 0에서 3까지 인덱스가 부여되

어 여기서 설명하는 인덱스 관련 셀렉터로 각 엘리먼트를 선택할 수 있다.

자바스크립트의 배열은 인덱스 값이 0부터 증가하므로 $('.myclass:eq(1)')은 클래스가

myclass인 엘리먼트 가운데 두 번째에 해당하는 엘리먼트를 선택하게 된다. 하지만 :nth-

child(n)은 인덱스 값이 1부터 증가하는데, 이것은 자바스크립트 배열이 아닌 CSS 규격

에 따라 인덱스 값을 지정하기 때문이다.


⊙ :gt(n) ~보다 큰 표현식

셀렉터 표현식으로 구한 엘리먼트 가운데 인덱스 값이 n보다 큰 엘리먼트를 선택한다.

예제

• $('li:gt(2)')는 모든 <li> 엘리먼트 가운데 인덱스 값이 2보다 큰, 즉 세 번째 이후

의 <li> 엘리먼트를 선택한다.

• $('.myclass:gt(1)')는 클래스가 myclass인 엘리먼트 가운데 인덱스 값이 1보다 큰,

즉 두 번째 이후의 엘리먼트를 선택한다.

설명

인덱스에 관한 자세한 사항은 앞에서 설명한 ‘인덱스 기반 선택 셀렉터’를 확인해 보자.

⊙ :lt(n) ~보다 작은 표현식

셀렉터 표현식으로 구한 엘리먼트 가운데 인덱스 값이 n보다 작은 엘리먼트를 선택한다.

예제

• $('li:lt(2)')는 모든 <li> 엘리먼트 가운데 인덱스 값이 2보다 작은, 즉 페이지에서

첫 번째와 두 번째에 위치하는 <li> 엘리먼트를 선택한다.

• $('.myclass:lt(1)')는 클래스가 myclass인 엘리먼트 가운데 인덱스 값이 1보다 작

은, 즉 페이지에서 첫 번째로 클래스가 myclass로 선언된 엘리먼트를 선택한다.

설명

인덱스에 관한 자세한 사항은 앞에서 설명한 ‘인덱스 기반 선택 셀렉터’를 참고한다.


⊙ :first 첫 번째 엘리먼트 표현식

셀렉터 표현식으로 구한 엘리먼트 가운데 첫 번째 엘리먼트를 선택한다.

예제

• $('li:first')는 첫 번째 <li> 엘리먼트를 선택한다.

• $('.myclass:first')는 첫 번째로 클래스가 myclass로 선언된 엘리먼트를 선택한다.

설명

:first 문법은 :eq(0)과 같고 이는 :lt(1)과도 같다.


⊙ :last 마지막 엘리먼트 표현식

셀렉터 표현식으로 구한 엘리먼트 가운데 마지막 엘리먼트를 선택한다.

예제

• $('li:last')는 마지막 <li> 엘리먼트를 선택한다.

• $('.myclass:last')는 클래스가 myclass로 선언된 마지막 엘리먼트를 선택한다.

설명

:first 표현식은 언제나 nth(0)이나 eq(0)과 같이 사용될 수 있지만 :last 표현식은 셀렉

터 표현식으로 얻은 엘리먼트의 마지막 인덱스 값이 정해져 있지 않으므로 표현식의 결과

가 늘 같지는 않다.



⊙ :even 짝수 엘리먼트 표현식

셀렉터 표현식으로 구한 엘리먼트에서 인덱스 값이 짝수인 엘리먼트를 선택한다.

예제

• $('li:even')은 모든 <li> 엘리먼트 가운데 인덱스 값이 짝수인 엘리먼트를 선택

한다.

• $('.myclass:even')은 클래스가 myclass인 엘리먼트 가운데 인덱스 값이 짝수인 엘

리먼트를 선택한다.

설명

선택된 엘리먼트의 인덱스 값과 관련한 더 자세한 사항은 인덱스 기반 선택 셀렉터를 참

고한다. 특히 0부터 증가하는 인덱스를 부여하는 방식에서는 비직관적이게도 :even이 선

택된 엘리먼트 집합에서 첫 번째, 세 번째, 다섯 번째 엘리먼트를 선택하는 식으로 동작한

다는 점을 염두에 둔다.

⊙ :odd 홀수 엘리먼트 표현식

셀렉터 표현식으로 구한 엘리먼트에서 인덱스 값이 홀수인 엘리먼트를 선택한다.

예제

• $('li:odd')는 모든 <li> 엘리먼트 가운데 인덱스 값이 홀수인 엘리먼트를 선택한다.

• $('.myclass:odd')는 클래스가 myclass인 엘리먼트 가운데 인덱스 값이 홀수인 엘

리먼트를 선택한다.

설명

선택된 엘리먼트의 인덱스 값과 관련한 더 자세한 사항은 인덱스 기반 선택 셀렉터를 참

고한다. 특히 0부터 증가하는 인덱스를 부여하는 방식에서는 비직관적이게도 :odd가 선

택된 엘리먼트 집합에서 두 번째, 네 번째, 여섯 번째 엘리먼트를 선택하는 식으로 동작한

다는 점을 염두에 둔다.


⊙ :parent 부모 엘리먼트 여부 표현식

텍스트 노드를 비롯해 다른 엘리먼트의 부모에 해당하는 엘리먼트를 선택한다.

예제

• $(':parent')는 텍스트 노드를 비롯해 다른 엘리먼트의 부모에 해당하는 엘리먼트

를 선택한다.

• $('td:parent')는 텍스트 노드를 비롯해 다른 엘리먼트의 부모에 해당하는 모든

<td> 엘리먼트를 선택한다.

설명

:parent(와 :empty)에는 한 가지 유의할 점이 있다.

W3C에서는 <p> 태그가 단지 텍스트 노드에 불과하더라도 반드시 하나 이상의 자식 엘리

먼트가 있어야 한다고 권고한다(http://www.w3.org/TR/html401/struct/text.html#edef-P).

반면 <input>, <img>, <br>, <hr> 태그는 정의상 자식 노드를 가질 수 없다.


⊙ :contains(text) 텍스트 포함 표현식

지정된 text를 포함하는 엘리먼트를 선택한다.

예제

• $('p:contains(nothing special)')은 nothing special이라는 텍스트가 포함된 <p>

엘리먼트를 반환한다.

• $('li:contains(second)')는 second라는 텍스트가 포함된 <li> 엘리먼트를 선택

한다.

설명

텍스트 포함 여부를 검사할 때는 대상 텍스트의 위치는 아무런 문제가 되지 않는다. 즉,

대상 텍스트가 자손 엘리먼트에 있든 엘리먼트의 사이에 있든 상관없이 텍스트 포함 여

부를 검사한다. 따라서 아래와 같은 구조에서도 첫 번째 예제를 실행하면 <p> 엘리먼트를

선택한다.

<p>This paragraph is <span>nothing <strong>special</strong></span></p>

속성값 셀렉터와 마찬가지로 :contains()의 괄호 안에 들어 있는 텍스트는 따옴표로 감싸

거나 그냥 입력해도 된다. 하지만 대소문자를 구분하므로 사용할 때 유의해야 한다.


⊙ :has(E) 엘리먼트 포함 표현식

E에 해당하는 엘리먼트가 포함된 모든 엘리먼트를 선택한다.

예제

• $('p:has(img)')는 자손 엘리먼트로 <img>가 있는 모든 <p> 엘리먼트를 반환한다.

• $('.myclass:has(#myid)')는 클래스가 myclass인 엘리먼트 가운데 ID가 myid인 자

손 엘리먼트를 포함하는 엘리먼트를 선택한다.

설명

이 표현식은 자식 엘리먼트뿐 아니라 자손 엘리먼트를 모두 검색해서 E 표현식과 일치하

는 엘리먼트를 모두 선택한다. 예를 들어, 첫 번째 예제의 셀렉터 표현식을 이용하면 아래

HTML의 <p> 엘리먼트를 선택할 수 있다.


<div id="inner">

<p>


</p>

</div>

</div>


⊙ :visible 가시성 상태 표현식

현재 보이는 모든 엘리먼트를 선택한다.

예제

• $('li:visible')은 보이는 모든 <li>를 선택한다.

• $('.myclass:visible')은 현재 보여지는 엘리먼트 가운데 클래스가 myclass인 모든

엘리먼트를 선택한다.

설명

:visible 셀렉터는 CSS 프로퍼티 중 display나 visible 프로퍼티에 의존하지 않고 현재

페이지상에 보이는 모든 엘리먼트를 선택한다. jQuery 내부에서는 엘리먼트의 현재 높이

와 너비를 검사해서 엘리먼트가 보이는지 여부를 판단한다.

아래의 몇 가지 경우는 감춤 상태로 취급된다.

• display 값이 none일 경우

• 폼 엘리먼트 속성이 type="hidden"인 경우

• 높이와 너비 값이 0인 경우

• 부모 등 해당 엘리먼트의 상위(조상) 엘리먼트가 감춰져 있어 함께 감춰진 경우

엘리먼트가 위의 네 가지 경우에 해당하면 :visible 표현식으로 선택할 수 없다.

⊙ :hidden 감춤 상태 표현식

현재 감춰져 있는 모든 엘리먼트를 선택한다.

예제

• $('li:hidden')은 감춰져 있는 모든 <li> 엘리먼트를 선택한다.

• $('.myclass:hidden')은 감춰져 있으면서 class가 myid인 모든 엘리먼트를 선택한다.

설명

:hidden 셀렉터는 현재 페이지상에 보이지 않는 모든 엘리먼트를 선택한다. 이 셀렉터의

판단 기준과 관련해서는 :visible 셀렉터를 설명한 부분을 참고한다.


⊙ :header 헤더 표현식

<h1>이나 <h2>와 같은 헤더 엘리먼트를 선택한다.

예제

• $(':header')는 모든 헤더 엘리먼트를 선택한다.

• $('.myclass:header')는 클래스가 myclass인 모든 헤더 엘리먼트를 선택한다.

⊙ :animated 애니메이션 동작 상태 표현식

현재 애니메이션 동작 중인 엘리먼트를 선택한다.

예제

• $(':animated')는 현재 애니메이션 동작 중인 모든 엘리먼트를 선택한다.

• $('.myclass:animated')는 현재 애니메이션 동작 중인 엘리먼트 가운데 클래스가

myclass인 엘리먼트를 선택한다.

⊙ :focus 포커스 엘리먼트 jQuery 1.6 이상

현재 포커싱돼 있는 엘리먼트를 선택한다.

예제

• $(:focus) : 문서 안에서 현재 포커싱된 엘리먼트를 선택한다.

설명

문서 내에서 현재 포커싱돼 있는 엘리먼트를 선택한다. $(:focus)는 $(*:focus)와 동작방

식이 같고, :focus는 가상 클래스다. jQuery 1.6 버전부터 사용할 수 있다.

jQue

ry A

PI

Refe

renc

e G

uide

43

03DOM 탐색 메서드

2장 ‘셀렉터 표현식’에서 설명한 각종 셀렉터 표현식 말고도 jQuery에는 HTML 문서 내 엘리먼

트에 접근할 수 있는 다른 여러 DOM 탐색 메서드가 있다. DOM 탐색 메서드는 코드 한 줄로 선

언하는 메서드 연쇄 호출을 지원해 간편하고 유연하게 문법을 구사할 수 있다.

$('div.section').addClass('lit').eq(1).addClass('profound');

때로는 셀렉터 표현식과 DOM 탐색 메서드 가운데 어느 것을 선택해서 쓸지는 취향의 문제지

만 HTML 구조가 셀렉터 표현식으로 접근하기 까다로울 때는 DOM 탐색 메서드와 셀렉터 표현

식을 함께 사용해서 엘리먼트를 좀더 쉽고 빠르게 선택할 수 있다.

jQuery 메서드

아래 메서드는 전체 jQuery 라이브러리의 근간을 이룬다. 이 메서드는 다른 모든 메서드를 연쇄

호출할 수 있는 jQuery 객체를 만들어준다. 이 메서드의 이름은 jQuery()이지만 라이브러리 전

체를 통틀어 사용되고 있는 것처럼 주로 $()이라는 별칭을 쓴다.


⊙ $()

특정 DOM 엘리먼트에 해당하는 새로운 jQuery 객체를 생성한다.

$(selector[, context])

$(element)

$(elementArray)

$(object)

$(html)

$(selector[, context])

• selector : 셀렉터 표현식을 포함한 문자열

• context (옵션) : 셀렉터가 검색할 DOM 범위

$(element)

• element : jQuery 객체로 확장할 DOM 엘리먼트

$(elementArray)

• elementArray : jQuery 객체로 확장할 DOM 엘리먼트로 구성된 배열

$(object)

• object : 다른 jQuery 객체로 복제할 기존 jQuery 객체

$(html)

• html : 새로운 DOM 엘리먼트로 생성할 HTML 코드

반환값

새로 만들어진 jQuery 객체

설명

첫 번째 버전의 $() 메서드에서는 셀렉터 표현식에 해당하는 엘리먼트를 HTML 문서에

서 선택하고 해당 엘리먼트를 참조하는 jQuery 객체로 확장해 반환한다.

$('div.foo');

03 DOM 탐색 메서드 l 45

2장 ‘셀렉터 표현식’에서는 이처럼 HTML 문서에서 원하는 엘리먼트를 찾는 다양한 방법

을 설명했다.

셀렉터 대상 범위

기본적으로 셀렉터는 DOM이 시작하는 부분인 문서의 가장 상위 엘리먼트부터 검색 대

상으로 삼는다, 그러나 $() 메서드에 특정 엘리먼트를 두 번째 매개변수로 지정하면 문서

의 가장 상위 엘리먼트가 아닌 해당 매개변수로 전달한 엘리먼트의 하위 엘리먼트(자손)

만 검색한다. 예를 들어 이벤트 콜백 함수에서 이벤트가 발생한 엘리먼트의 자손 엘리먼

트를 대상으로 셀렉터 표현식을 사용하는 방법은 다음과 같다.

$('div.foo').click(function() {

$('span', this).addClass('bar');

});

두 번째 줄의 span 셀렉터 표현식은 클릭한 대상인 this 엘리먼트의 자손 엘리먼트만 검

색한다.

두 번째 매개변수로 지정한 엘리먼트는 내부에서 jQuery 객체로 확장하고, 셀렉터는 확

장된 jQuery 객체의 .find() 메서드로 선택할 엘리먼트를 검색한다. 따라서 $('span',

this)는 실질적으로 $(this).find('span')과 같다.

DOM 엘리먼트 사용

두 번째 버전과 세 번째 버전의 메서드를 이용하면 이미 선택한 엘리먼트를 사용해서

jQuery 객체를 생성할 수 있다. 이 외에도 jQuery 메서드로 이벤트가 발생한 엘리먼트에

이벤트 핸들러 함수를 사용해서 이벤트가 발생한 엘리먼트에 jQuery 메서드를 사용할

수 있다. 이벤트 핸들러 함수 내부에서는 this 키워드로 이벤트가 발생한 엘리먼트에 접

근할 수 있다.

$('div.foo').click(function() {

$(this).slideUp();

});

위 예제는 선택된 엘리먼트를 클릭하면 해당 엘리먼트가 위로 접혀 올라가는 애니메이션

효과를 보여준다. 이벤드 핸들러 내부에서는 이벤트가 발생한 DOM 엘리먼트를 그대로


this 키워드로 받기 때문에 해당 엘리먼트를 상대로 jQuery 메서드를 호출하기 전에 반

드시 jQuery 객체로 만들어야 한다.

AJAX 요청에 의해 XML 데이터를 받았을 때도 $() 메서드를 써서 좀더 쉽고 강력하게

XML 구조에 접근할 수 있다. $()로 jQuery 객체로 만들어지고 나면 .find() 메서드나 다

른 DOM 탐색 메서드를 사용해서 XML 구조에 자유롭게 접근할 수 있다.

jQuery 객체 복제

$() 메서드에 jQuery 객체를 전달하면 해당 객체의 사본이 만들어진다. 새 jQuery 객체

는 원본 jQuery 객체와 동일한 DOM 엘리먼트를 참조한다.

새 엘리먼트 생성

$() 메서드의 매개변수로 문자열을 전달하면 jQuery는 일단 해당 문자열이 HTML 문

법인지 검사한다. HTML 문법에 해당하지 않으면 셀렉터 표현식으로 간주하고 표현식

을 해석한다. 하지만 HTML로 판단하면 HTML로 기술한 대로 새 DOM 엘리먼트를 생

성하고 이를 jQuery 객체로 확장해 반환한다. 다음은 HTML을 매개변수로 전달해서 새

DOM 엘리먼트를 생성하고 문서에 삽입하는 예제다.

$('<p>My <em>new</em> paragraph</p>').appendTo('body');

jQuery는 매개변수에 두 개 이상의 태그가 들어 있을 때 자바스크립트의 innerHTML

을 사용해 새로운 엘리먼트를 생성한다. 내부적인 동작 방식을 좀더 자세하게 알아보면,

먼저 임의의 <div> 엘리먼트를 새로 생성하고 해당 엘리먼트의 innerHTML 프로퍼티에

매개변수로 선언한 HTML 코드를 대입해서 DOM 엘리먼트를 생성한다. 그러나 $('<img

/>')나 $('<a>hello</a>')와 같이 태그 하나만 매개변수로 전달하면 자바스크립트의 기본

함수인 createElement()를 사용해서 엘리먼트를 생성한다.

크로스 플랫폼을 확실하게 지원하려면 매개변수로 전달한 HTML 코드가 HTML 문법

을 준수해야 한다. 열고 닫는 태그의 짝이 맞아야 여러 태그를 선언했는지 태그 하나만

선언했는지 정확하게 파악할 수 있기 때문이다.

$('<a></a>');


jQuery는 XML 타입의 태그 문법을 추가로 지원한다(닫는 슬래시 앞에는 공백이 없어도

된다).

$('<a/>');

닫히는 태그가 따로 없는 단일 태그로 입력할 때는 하위 엘리먼트를 포함할 수 없다.

$('<img />');

$('<input>');


필터링 메서드

아래의 메서드는 jQuery 객체에서 특정 엘리먼트를 제거한다.

⊙ .filter()

메서드 매개변수로 셀렉터 표현식을 전달하거나 사용자 함수를 선언해 엘리먼트를 필터링

한다.

.filter(selector)

.filter(function)

.filter(selector)

• selector : 엘리먼트를 필터링할 셀렉터 표현식

.filter(function)

• function : 엘리먼트를 필터링할 사용자 정의 함수

반환값

새로운 jQuery 객체

설명

DOM 엘리먼트 집합을 나타내는 특정 jQuery 객체를 대상으로 .filter() 메서드를 호출

하면 조건에 부합하는 엘리먼트로 구성된 새로운 jQuery 객체가 생성된다. .filter() 메서

드는 각 엘리먼트를 검사해서 조건에 부합하는 엘리먼트로 구성된 집합을 jQuery 객체

로 만들어 반환한다.


다음과 같은 간단한 리스트가 있다고 해보자.

<ul>







</ul>

다음과 같은 식으로 .filter() 메서드를 적용할 수 있다.

$('li').filter(':even').css('background-color', 'red');

코드를 실행하면 1, 3, 5번째 리스트 아이템의 배경이 빨간색으로 바뀐다(0부터 증가하

는 인덱스 기준으로 :even은 짝수 , :odd는 홀수 인덱스를 처리한다는 점을 떠올려보자).

사용자 함수로 필터링하기

.filter(function) 메서드에서는 셀렉터 대신 사용자 정의 함수를 매개변수로 전달할 수

있다. 이 메서드는 엘리먼트 집합의 항목을 대상으로 사용자 정의 함수를 실행해서 함수

의 반환값이 true면 해당 엘리먼트를 필터링된 결과 집합에 포함하고, false면 포함하지

않는다.

<ul>

<li><strong>list</strong> item 1 - one strong tag</li>

<li><strong>list</strong> item <strong>2</strong> - two <span>strong tags

</span></li>





</ul>

위와 같은 경우에는 해당 엘리먼트에 포함된 내용을 기준으로 필터링할 수 있다.


$('li').filter(function(index) {

return $('strong', this).length == 1;

}).css('background-color', 'red');

이 코드를 실행하면 리스트에서 첫 번째 항목만 바뀐다(해당 항목에만 <strong> 태그가

하나 포함돼 있으므로). 필터 함수 내부에서 this 키워드는 엘리먼트 집합의 각 엘리먼트

를 차례로 참조한다. 필터 함수에 전달되는 매개변수는 jQuery 객체가 가리키는 엘리먼

트 집합 내의 DOM 엘리먼트의 인덱스를 의미한다.

함수로 전달되는 index 매개변수를 이용해서 엘리먼트 집합을 필터링할 수도 있다. 이 매

개변수는 아직 필터링되지 않은 엘리먼트 집합에서 각 엘리먼트가 위치한 인덱스(0부터

증가하는)를 가리킨다.

$('li').filter(function(index) {

return index % 3 == 2;

}).css('background-color', 'red');

이 스크립트를 실행하면 3으로 나눴을 때 나머지가 2인 인덱스 값에 해당하는 3, 6번째의

항목의 배경색이 빨갛게 변한다.


⊙ .not()

엘리먼트 집합에서 조건에 부합하지 않는 엘리먼트를 제거한다.

.not(selector)

.not(elements)

.not(function)

.not(selector)

• selector : 제거할 엘리먼트를 찾을 셀렉터 표현식

.not(elements)

• elements : 제거할 엘리먼트와 동일한 엘리먼트나 엘리먼트 집합

.not(function)

• function : 엘리먼트 집합의 각 엘리먼트에 사용할 사용자 정의 함수

반환값


설명

DOM 엘리먼트 집합을 나타내는 특정 jQuery 객체를 대상으로 .not() 메서드를 호출하

면 조건에 부합하는 엘리먼트로 구성된 새로운 jQuery 객체가 생성된다. .not() 메서드

는 각 엘리먼트를 검사해서 조건에 부합하지 않는 엘리먼트로 구성된 집합을 jQuery 객

체로 만들어 반환한다.


<ul>






</ul>


위 리스트에 대해 다음과 같은 메서드를 적용할 수 있다.

$('li').not(':even').css('background-color', 'red');

코드를 실행하면 셀렉터 표현식과 일치하지 않는 2번째와 4번째 항목의 배경이 빨간색으

로 바뀐다(0부터 증가하는 인덱스를 기준으로 :even은 짝수, :odd는 홀수 인덱스를 처리

한다는 점을 떠올려보자).

특정 엘리먼트 제거

두 번째 버전의 .not() 메서드를 이용하면 어떤 다른 수단으로 엘리먼트를 찾았다는 가

정하에 해당 엘리먼트를 엘리먼트 집합에서 제거할 수 있다. 예를 들어, 다음 중 리스트

항목 하나에 ID가 지정돼 있다고 해보자.

<ul>



<li id="notli">list item 3</li>



</ul>

이때 자바스크립트 내장 함수인 getElementById()를 이용해 리스트에서 세 번째 항목을

구한 다음 jQuery 객체에서 해당 엘리먼트를 제외할 수 있다.

$('li').not(document.getElementById('notli'))

.css('background-color', 'red');

위 스크립트를 실행하면 1, 2, 4, 5번째 항목에 해당하는 엘리먼트의 배경색이 바뀐다. 물

론 다른 jQuery 셀렉터 표현식으로도 이렇게 할 수 있겠지만 이 기법은 jQuery 이외의 다

른 라이브러리로 구한 엘리먼트 집합에서 특정 엘리먼트를 제외할 때 유용하다.

jQuery 1.4 버전부터는 .filter() 메서드와 마찬가지로 .not() 메서드에 함수를 전달할 수

있다. 이때 .not() 메서드에 전달한 함수의 반환값이 true이면 해당 엘리먼트는 필터링된

엘리먼트 집합에서 제외되고, 다른 엘리먼트는 모두 포함된다.


⊙ .has()

셀렉터 표현식에 해당하는 자손 엘리먼트를 지닌 엘리먼트만 추출한다.

.has(selector)

매개변수

• selector : 대상 엘리먼트를 찾을 셀렉터 표현식

반환값


설명

DOM 엘리먼트 집합을 나타내는 특정 jQuery 객체를 대상으로 .has() 메서드를 호출하

면 조건에 부합하는 엘리먼트로 구성된 새로운 jQuery 객체가 생성된다. .has() 메서드

는 각 엘리먼트의 자손 엘리먼트를 검사해서 셀렉터 표현식을 만족하는 자손 엘리먼트가

있으면 해당 엘리먼트로 구성된 집합을 jQuery 객체로 만들어 반환한다.

아래와 같은 중첩된 리스트가 있다고 해보자.

<ul>


<li>list item 2

<ul>

<li>list item 2-a</li>

<li>list item 2-b</li>

</ul>

</li>



</ul>

위 리스트에 대해 다음과 같은 메서드를 적용할 수 있다.

$('li').has('ul').css('background-color', 'red');

코드를 실행하면 <ul>을 자손 엘리먼트로 포함하는 두 번째 <li>의 배경색이 바뀐다.


⊙ .eq()

엘리먼트 가운데 지정된 index에 해당하는 엘리먼트를 반환한다.

.eq(index)

매개변수

• index : jQuery 객체의 엘리먼트 배열에서 엘리먼트의 위치를 나타내는 0부터 증가

하는 정수

반환값


설명

DOM 엘리먼트 집합을 나타내는 특정 jQuery 객체를 대상으로 .eq() 메서드를 호출하

면 지정한 인덱스에 해당하는 엘리먼트를 새로운 jQuery 객체로 만들어 반환한다. 인덱

스 값은 jQuery 객체 배열에서 엘리먼트가 위치한 인덱스를 의미한다.


<ul>






</ul>

위 리스트에 대해 다음과 같이 메서드를 실행한다.

$('li').eq(2).css('background-color', 'red');

코드를 실행하면 해당 리스트에서 인덱스 값이 2인 3번째 리스트 항목(인덱스 값은 0부

터 증가)의 배경색이 빨간색으로 바뀐다.

인덱스 값으로 0 이하의 음수를 전달하면 마지막 엘리먼트부터 거꾸로 개수를 세어 해당

엘리먼트를 반환한다. 예를 들어 다음 메서드를 실행해보자.

$('li').eq(-2).css('background-color', 'red');


코드를 실행하면 리스트상에서 뒤에서 2번째에 해당하는 항목 4의 배경색이 빨간색으로

바뀐다.

⊙ .first()

jQuery 객체의 엘리먼트 집합에서 첫 번째 엘리먼트만 추출한다.

.first()

매개변수

없음

반환값


설명

DOM 엘리먼트 집합을 나타내는 특정 jQuery 객체를 대상으로 .�rst() 메서드를 호출하

면 엘리먼트 집합에서 첫 번째 엘리먼트를 새로운 jQuery 객체로 만들어 반환한다.

<ul>






</ul>


$('li').first().css('background-color', 'red');

코드를 실행하면 첫 번째 항목의 배경색이 바뀐다.


⊙ .last()

jQuery 객체의 엘리먼트 집합에서 마지막 엘리먼트를 반환한다.

.last()

매개변수

없음

반환값


설명

DOM 엘리먼트 집합을 나타내는 특정 jQuery 객체를 대상으로 .last() 메서드를 호출

하면 엘리먼트 집합에서 마지막 엘리먼트를 새로운 jQuery 객체로 만들어 반환한다.


<ul>






</ul>


$('li').last().css('background-color', 'red');

코드를 실행하면 리스트에서 마지막 항목의 배경색이 빨간색으로 바뀐다.


⊙ .slice()

jQuery 객체의 엘리먼트 집합에서 인덱스 값이 지정된 범위 내에 해당하는 엘리먼트를 반환

한다.

매개변수

• start : 시작 인덱스 값. 인덱스 값은 0부터 증가한다.

• end (옵션) : 종료 인덱스 값. 생략하면 엘리먼트 집합의 마지막 인덱스 값으로 지정

된다.

반환값


설명

DOM 엘리먼트 집합을 나타내는 특정 jQuery 객체를 대상으로 .slide() 메서드를 호출

하면 조건에 부합하는 엘리먼트로 구성된 새로운 jQuery 객체가 반환된다. .slide() 메서

드는 엘리먼트 집합에서 인덱스 값이 일정 범위에 해당하는 엘리먼트를 추출한다. start

매개변수는 추출을 시작할 인덱스 값이고, end 매개변수는 범위가 끝나는 인덱스 값에 해

당한다. end 매개변수를 지정하지 않으면 시작 값부터 마지막 엘리먼트까지 모두 반환한다.


<ul>






</ul>

위 HTML에 대해 다음과 같이 메서드를 실행한다.

$('li').slide(2).css('background-color', 'red');


메서드를 실행하면 3, 4, 5번째 리스트 항목의 배경색이 빨간색으로 바뀐다. 인덱스 값은

셀렉터 표현식으로 얻은 엘리먼트의 인덱스 값(0부터 증가)이며, DOM 트리의 엘리먼트

순서와는 상관없다.

아래처럼 end 매개변수(옵션)를 지정하면

$('li').slide(2, 4).css('background-color', 'red');

3, 4번째의 리스트 항목만 배경색이 빨간색으로 바뀐다. 지정된 인덱스 값이 end 값에 도

달하면 더는 jQuery 객체에 포함하지 않는다.

음수 인덱스

.slice() 메서드는 자바스크립트의 배열 관련 메서드인 .slide()를 모방해서 만들었다.

.slide() 메서드에 start와 end 값을 음수로 넘겼을 때의 동작방식은 자바스크립트의 함

수를 흉내 낸 것이다. 매개변수로 음수가 전달되면 엘리먼트 배열의 마지막 값부터 시작

해서 새로운 jQuery 객체를 생성한다는 의미다.

예를 들어, 다음과 같이 메서드를 실행하면

$('li').slide(-2, -1).css('background-color', 'red');

항목 4만 배경이 빨간색으로 바뀌는데, 이는 해당 항목이 엘리먼트 집합에서 끝에서 두

번째(-2)와 끝에서 첫 번째(-1) 사이에 존재하는 유일한 항목이기 때문이다.


트리 탐색 메서드

트리 탐색 메서드는 DOM 트리의 구조를 사용해서 새로운 엘리먼트 집합을 jQuery 객체로 반환

한다.

⊙ .find()

대상 엘리먼트에서 셀렉터 표현식에 해당하는 자손들을 반환한다.

.find(selector)

.find(jQuery object) ☞ jQuery 1.6 이상

.find(eleent) ☞ jQuery 1.6 이상

.find(selector)

• selector : 자손 엘리먼트를 검색할 셀렉터 표현식

.find(jQuery object) ☞ jQuery 1.6 이상

• jQuery object : 자손 엘리먼트를 검색할 jQuery 객체

.find(eleent) ☞ jQuery 1.6 이상

• element : 자손 엘리먼트를 검색할 엘리먼트

반환값


설명

DOM엘리먼트 집합을 나타내는 특정 jQuery 객체를 대상으로 .find() 메서드를 호출하

면 조건에 부합하는 엘리먼트로 구성된 새로운 jQuery 객체가 생성된다. .find() 메서드는

.children() 메서드와 비슷하지만 차이점은 .children() 메서드는 DOM 트리에서 바로

하위 엘리먼트만 대상으로 삼는다는 것이다.


.find() 메서드에는 $()에 전달할 수 있는 것과 같은 유형의 셀렉터 표현식을 전달할 수 있

으며, 각 엘리먼트는 전달한 셀렉터 표현식에 부합하는지 검사함으로써 필터링할 수 있다.

다음과 같이 리스트가 중첩된 페이지가 있다고 해보자.

<ul class="level-1">

<li class="item-i">I</li>

<li class="item-ii">II


<li class="item-a">A</li>

<li class="item-b">B


<li class="item-1">1</li>



</ul>

</li>

<li class="item-c">C</li>

</ul>

</li>

<li class="item-iii">III</li>

</ul>

II 항목부터 시작한다면 다음과 같은 식으로 해당 항목 내의 리스트 항목을 찾을 수 있다.

$('li.item-ii').find('li').css('background-color', 'red');

코드를 실행하면 A, B, 1, 2, 3, C 항목의 배경이 빨간색으로 바뀐다. 셀렉터 표현식이 II

리스트 항목과 일치하더라도 자손 엘리먼트만 검색 대상이므로 II 리스트 항목은 엘리먼

트 집합에 포함되지 않는다.

이전의 jQuery 메서드 절에서 설명했듯이 셀렉터 컨텍스트는 .�nd()으로 구현돼 있다.

따라서 $('li.item-ii').find('li')는 $('li', 'li.item-ii')와 같다.

알아두기

다른 DOM 트리 탐색 메서드와는 달리 find() 메서드에서는 셀렉터 표현식을 반드시 매개변

수로 전달해야 한다. 참고로 모든 자손 노드를 검색하려면 ‘*’를 사용하면 된다.


⊙ .children()

특정 엘리먼트의 자식 엘리먼트를 반환한다. 선택사항으로 셀렉터를 전달해서 필터링할 수

도 있다.

.children([selector])

매개변수

• selector (옵션): 특정 자식 메서드를 선택할 셀렉터 표현식

반환값


설명

DOM 엘리먼트 집합을 나타내는 특정 jQuery 객체를 대상으로 .children() 메서드

를 호출하면 조건에 부합하는 엘리먼트로 구성된 새로운 jQuery 객체가 생성된다.

.children() 메서드는 DOM 트리상 바로 자식 엘리먼트를 대상으로 셀렉터 표현식과

일치하는 엘리먼트로 구성된 엘리먼트 집합을 새로운 jQuery 객체로 만들어 반환한다.

.children() 메서드가 .find() 메서드와 다른 점은 .children() 메서드는 DOM 트리상

바로 하위 노드만 검색 대상으로 삼는다는 점이다.

.children() 메서드에는 옵션으로 매개변수를 지정할 수 있으며, 이는 $() 메서드에 전달

하는 셀렉터 표현식과 같다. 매개변수를 지정하면 자식 노드 가운데 셀렉터 표현식과 일

치하는 엘리먼트만 추출해 반환한다. 참고로 .children() 메서드는 jQuery 1.5에서 많은

성능 향상이 이뤄졌다.













</ul>

</li>


</ul>

</li>


</ul>

이번에는 클래스가 level-2인 엘리먼트의 자식 노드만 찾아보자.

$('ul.level-2').children().css('background-color', 'red');

코드를 실행하면 리스트 항목 가운데 A, B, C 항목의 배경색이 빨간색으로 바뀐다.

.children()을 호출할 때 셀렉터 표현식을 전달하지 않았으므로 엘리먼트의 모든 자식

노드를 대상으로 .css() 메서드가 실행된다. 반면 셀렉터 표현식을 전달했다면 자식 노

드 가운데 셀렉터 표현식과 일치하는 자식 노드에만 .css() 메서드가 실행된다.

⊙ .parents()

엘리먼트의 조상 엘리먼트 가운데 조건과 일치하는 엘리먼트를 반환한다.

.parent([selector])

매개변수

• selector : 조상 엘리먼트들을 검색할 셀렉터 표현식

반환값


설명

DOM 엘리먼트 집합을 나타내는 특정 jQuery 객체를 대상으로 .parent() 메서드를 호

출하면 해당 엘리먼트보다 상위 노드에 해당하는 엘리먼트, 즉 조상 엘리먼트 중 셀렉


터 표현식과 일치하는 엘리먼트로 구성된 엘리먼트 집합을 새로운 jQuery 객체로 만들

어 반환한다. .parents() 메서드는 .parent() 메서드와 비슷하지만 .parent() 메서드는

DOM 트리상 바로 상위의 부모 엘리먼트만 검색한다는 차이가 있다.

이 메서드는 옵션으로 매개변수를 지정할 수 있으며, 매개변수는 $() 메서드에서 사용하

는 셀렉터 표현식과 같다. 매개변수를 지정하면 조상 엘리먼트 가운데 셀렉터 표현식과

일치하는 엘리먼트만 추출해 반환한다.












</ul>

</li>


</ul>

</li>


</ul>

A 항목의 조상 엘리먼트는 다음과 같은 식으로 검색한다.

$('li.item-a').parents().css('background-color', 'red');

코드를 실행하면 level-2 항목의 조상 엘리먼트인 II와 level-1 항목(그리고 일반 HTML

문서에서 DOM 트리상 가장 상위 엘리먼트에 해당하는 <html>까지)의 배경색이 빨간색

으로 바뀐다. 예제에서는 셀렉터 표현식을 지정하지 않았으므로 모든 조상 엘리먼트를

jQuery 객체로 반환한다. 셀렉터 표현식을 매개변수로 지정하면 모든 조상 엘리먼트 가

운데 셀렉터 표현식과 일치하는 엘리먼트가 jQuery 객체로 반환된다.


⊙ .parentsUntil()

엘리먼트의 조상 엘리먼트를 대상으로 각 엘리먼트의 상위 엘리먼트 가운데 셀렉터 표현식

과 일치하는 엘리먼트 전까지 하위에서 상위로 순차적으로 탐색해 반환한다.

.parentsUntil(selector)

매개변수

• selector : 상위 엘리먼트 검색을 중단할 지점을 나타내는 셀렉터 표현식

반환값


설명

DOM 엘리먼트 집합을 나타내는 특정 jQuery 객체를 대상으로 .parentsUntil() 메서드

를 jQuery 객체의 엘리먼트 집합에서 메서드 인자로 전달한 셀렉터 표현식에 해당하는

상위 엘리먼트에 도달할 때까지 상위 엘리먼트를 탐색한다. 이때 .parentsUntil() 셀렉터

에 해당하는 엘리먼트 전까지 모든 상위 엘리먼트의 집합을 새로운 jQuery 객체로 만들

어 반환한다. 다음과 같이 리스트가 중첩된 페이지가 있다고 해보자.











</ul>

</li>


</ul>

</li>


</ul>


A 항목의 조상 엘리먼트 가운데 <li class="level-1">까지 검색하는 코드는 다음과 같다.

$('li.item-a').parentsUntil('.level-1').css('background-color', 'red');

코드를 실행하면 level-2와 II 항목의 배경색이 빨간색으로 바뀐다.

.parentsUntil() 메서드는 상위 노드 가운데 셀렉터 표현식과 일치하는 엘리먼트를 찾지

못하거나 메서드를 호출할 때 매개변수로 셀렉터 표현식을 지정하지 않았을 때는 모든 조

상 엘리먼트를 반환 대상에 포함한다.

A 항목을 대상으로 다음과 같이 메서드를 실행해보자.

$('li.item-a').parentsUntil('.not-here').css('background-color', 'red');

코드를 실행하면 level-2 리스트, II 항목, level-1 리스트, <body>, <html>이 빨간색으로

바뀐다.


⊙ .parent()

엘리먼트의 부모 엘리먼트를 반환하며, 셀렉터 표현식을 매개변수로 지정하면 부모 엘리먼트

가운데 셀렉터 표현식과 일치하는 엘리먼트만 추출해 반환한다.

.parent([selector])

매개변수

• selector (옵션) : 부모 엘리먼트를 검색할 셀렉터 표현식

반환값


설명

DOM 엘리먼트 집합을 나타내는 특정 jQuery 객체를 대상으로 .parent() 메서드를 호

출하면 jQuery 객체의 엘리먼트 집합에서 DOM 트리상 바로 상위 노드에 해당하는

부모 엘리먼트를 찾아 새로운 jQuery 객체로 만들어 반환한다. .parents() 메서드와

.parent() 메서드는 비슷하지만 .parent()는 DOM 트리에서 한 단계 상위 노드에 위치

한 부모 엘리먼트만 검색한다는 차이점이 있다.

이 메서드에는 매개변수를 지정할 수도 있는데, 매개변수는 $() 함수에서 사용하는 셀렉

터 표현식과 같다. 매개변수를 지정하면 부모 엘리먼트 가운데 셀렉터 표현식과 일치하는

엘리먼트만 추출해 반환한다.












</ul>

</li>



</ul>

</li>


</ul>

A 엘리먼트의 부모 엘리먼트를 찾아보자.

$('li.item-a').parent().css('background-color', 'red');

코드를 실행하면 level-2 리스트의 배경이 빨간색으로 바뀐다. 셀렉터 표현식을 지정하

지 않으면 모든 부모 엘리먼트가 반환되고, 셀렉터 표현식을 사용하면 셀렉터 표현식과

일치하는 부모 엘리먼트만 반환된다.


⊙ .closest()

대상 엘리먼트와 상위 엘리먼트 가운데 셀렉터 표현식과 일치하는 첫 번째 엘리먼트를 반

환한다.

.closest(selector[, context])

.closest(jQuery object) ☞ jQuery 1.6 이상

.closest(element) ☞ jQuery 1.6 이상

.closest(selector[, context])

• selector : 엘리먼트를 추출할 셀렉터 표현식

• context (옵션) : 셀렉터가 탐색할 DOM 트리상의 영역

.closest(jQuery object) ☞ jQuery 1.6 이상


.closest(element) ☞ jQuery 1.6 이상


반환값


설명

DOM 엘리먼트 집합을 나타내는 특정 jQuery 객체를 대상으로 .closest() 메서드를 호

출하면 jQuery 객체의 엘리먼트 집합에서 엘리먼트의 상위 노드인 조상 엘리먼트 가운데

조건에 부합하는 엘리먼트로 구성된 엘리먼트 집합을 새로운 jQuery 객체로 만든다.

.parents()와 .closest()는 DOM 트리상 상위 엘리먼트를 검색 대상으로 삼는다는 점은

같지만, 다음 표에 나온 것처럼 미묘하지만 중요한 차이가 있다.


.closest() .parents()

대상 엘리먼트부터 탐색을 시작한다. 대상 엘리먼트의 부모부터 탐색을 시작한다.

셀렉터 표현식과 일치하는 엘리먼트까지 상위 엘리먼

트를 순환 탐색한다.

DOM 트리상 가장 상위 엘리먼트까지 탐색

하며 셀렉터 표현식과 일치하는 상위 엘리먼

트만 모아 반환한다.

0개나 1개의 jQuery 객체를 반환한다. 0개, 1개, 혹은 다수의 jQuery 객체를 반환

한다.


<ul id="one" class="level-1">


<li id="ii" class="item-ii">II








</ul>

</li>


</ul>

</li>


</ul>

이번에는 A 항목을 시작으로 <ul> 엘리먼트를 찾는다고 해보자.

$('li.item-a').closest('ul').css('background-color', 'red');

코드를 실행하면 DOM 트리 구조에서 A 항목보다 상위 엘리먼트 가운데 가장 가까운

<ul>인 level-2 <ul>의 배경이 빨간색으로 바뀐다.


이번에는 ul 엘리먼트 대신 li를 찾는다고 해보자.

$('li-item-a').closest('li').css('background-color', 'red');

코드를 실행하면 A 항목의 배경색이 빨간색으로 바뀐다. .closest() 메서드는 엘리먼트

의 상위 노드인 조상 엘리먼트뿐 아니라 메서드를 실행하는 대상인 자기 자신까지도 검

색한다. 예제에서는 대상인 엘리먼트가 셀렉터 표현식을 충족하므로 더는 상위로 검색하

지 않고 자기 자신만을 반환한다.

검색 대상을 좁히고자 대상 엘리먼트를 두 번째 매개변수로 지정해 검색 대상 컨텍스트

를 지정할 수 있다.

var listItemII = document.getElementById('ii');

$('li.item-a').closest('ul', listItemII)


$('li.item-a').closest('#one', listItemII)

.css('background-color', 'green');

코드를 실행하면 A 항목의 첫 번째 <ul> 상위 엘리먼트이자 II 리스트 항목의 하위 노드

인 level-2 <ul>의 배경색이 빨간색으로 바뀐다. 하지만 level-1 <ul>은 II 리스트 항목

의 하위 노드가 아니라서 검색 대상 컨텍스트에 포함되지 않아 색이 바뀌지 않는다.

⊙ .offsetParent()

조상 엘리먼트 가운데 위치가 지정된 엘리먼트를 반환한다.

.offsetParent()

매개변수

없음

반환값



설명

DOM 엘리먼트 집합을 나타내는 특정 jQuery 객체를 대상으로 .offsetParent() 메서

드를 호출하면 jQuery 객체의 엘리먼트 집합에서 해당 엘리먼트와 가장 가까운 상위 엘

리먼트 중 CSS의 position 속성이 relative나 absolute, 또는 fixed인 엘리먼트로 구성된

집합을 새로운 jQuery 객체로 만든다. 대상 엘리먼트의 위치 정보는 엘리먼트에 애니메이

션을 적용하거나 페이지상에 개체를 위치시킬 때 매우 유용하다.

다음과 같이 리스트가 중첩된 페이지에 position 속성이 지정된 엘리먼트가 있다고 해

보자.



<li class="item-ii" style="position: relative;">II








</ul>

</li>


</ul>

</li>


</ul>

A 항목의 상위 엘리먼트 가운데 위치 값을 지닌 가장 가까운 엘리먼트를 찾는 방법은 다

음과 같다.

$('li.item-a').offsetParent().css('background-color', 'red');

코드를 실행하면 II 리스트 항목의 배경이 빨간색으로 바뀐다.


⊙ .siblings()

엘리먼트의 형제 엘리먼트를 반환한다. 매개변수로 셀렉터 표현식을 지정해 검색된 형제 엘

리먼트를 필터링할 수 있다.

.sibliings([selector])

매개변수

• selector (옵션) : 형제 엘리먼트를 선택할 셀렉터 표현식

반환값


설명

DOM 엘리먼트 집합을 나타내는 특정 jQuery 객체를 대상으로 .siblings() 메서드를

호출하면 DOM 트리상 같은 레벨에 있는 형제 엘리먼트로 구성된 엘리먼트 집합을 새로

운 jQuery 객체로 생성한다.

이 메서드에는 $() 함수에 전달하는 것과 같은 셀렉터 표현식을 옵션으로 전달할 수 있

다. 셀렉터를 전달하면 해당 셀렉터에 일치하는 엘리먼트만 엘리먼트 집합에 포함되어 반

환된다.


<ul>



<li class="third-item">list item 3</li>



</ul>

세 번째 리스트 항목으로 시작한다면 해당 엘리먼트의 형제를 다음과 같은 식으로 찾을

수 있다.

$('li.third-item').siblings().css('background-color', 'red');


코드를 실행하면 1,2,4,5 항목의 배경이 빨간색으로 바뀐다. 매개변수로 셀렉터 표현식

을 지정하지 않으면 이처럼 모든 형제 엘리먼트가 반환값에 포함된다. 셀렉터 표현식을 지

정하면 해당 셀렉터 표현식을 만족하는 형제 엘리먼트만 jQuery 객체에 포함한다.

또한 형제 엘리먼트는 반환값에 포함되지만 메서드가 실행되는 대상 엘리먼트는 반환값

에 포함되지 않는다. DOM 트리에서 같은 수준에 있는 엘리먼트를 모두 찾으려고 할 경우

이 점에 유의해야 한다.


⊙ .prev()

엘리먼트의 각 형제 엘리먼트 가운데 바로 이전 엘리먼트의 집합을 반환한다. 매개변수로 셀

렉터 표현식을 지정하면 검색된 엘리먼트를 필터링할 수 있다.

.prev([selector])

매개변수

• selector (옵션) : 엘리먼트를 필터링할 셀렉터 표현식

반환값


설명

DOM 엘리먼트 집합을 나타내는 특정 jQuery 객체를 대상으로 .prev() 메서드를 호출

하면 DOM 트리에서 대상 엘리먼트보다 먼저 선언된 엘리먼트로 구성된 엘리먼트 집합

을 새로운 jQuery 객체로 생성한다.

이 메서드는 옵션으로 매개변수를 지정할 수 있으며, 매개변수는 $() 메서드에서 사용하

는 셀렉터 표현식과 같다. 매개변수를 지정하면 검색된 엘리먼트 가운데 셀렉터 표현식과

일치하는 엘리먼트만 필터링해서 반환한다. .prev()메서드는 jQuery 1.5에서 많은 성능

향상이 이뤄졌다


<ul>






</ul>

다음과 같은 방식으로 세 번째 리스트 항목으로 시작해서 해당 엘리먼트의 바로 이전 엘

리먼트를 선택할 수 있다.

$('li.third-item').prev().css('background-color', 'red');


코드를 실행하면 항목 2의 배경이 빨간색으로 바뀐다. 매개변수로 셀렉터 표현식을 사용

하지 않았으므로 이전 엘리먼트가 필터링되지 않는다. 셀렉터 표현식을 사용하면 대상 엘

리먼트의 바로 이전 엘리먼트 가운데 셀렉터 표현식과 일치하는 엘리먼트만 jQuery 객체

에 포함된다.


⊙ .prevAll()

엘리먼트의 형제 엘리먼트 가운데 이전 엘리먼트를 모두 반환한다. 셀렉터 표현식을 매개변

수로 지정해 검색된 엘리먼트를 필터링할 수 있다.

.prevAll([selector])

매개변수

• selector (옵션) : 엘리먼트를 추출할 셀렉터 표현식

반환값


설명

DOM 엘리먼트 집합을 나타내는 특정 jQuery 객체를 대상으로 .prevAll() 메서드를 호

출하면 jQuery 객체의 엘리먼트 집합에서 해당 엘리먼트보다 먼저 선언된 엘리먼트로 구

성된 집합을 새로운 jQuery 객체로 만들어 반환한다.

이 메서드는 매개변수를 옵션으로 지정할 수 있으며, 매개변수는 $() 메서드에서 사용하

는 셀렉터 표현식과 같다. 매개변수를 지정하면 추출된 엘리먼트 가운데 셀렉터 표현식과

일치하는 엘리먼트만 반환한다.


<ul>






</ul>

세 번째 항목보다 이전 항목을 선택하려면 아래와 같이 메서드를 실행한다.

$('li.third-item').prevAll().css('background-color', 'red');


코드를 실행하면 리스트 항목 가운데 항목 1, 2의 배경색이 빨간색으로 바뀐다. 여기서는

셀렉터 표현식을 매개변수로 전달하지 않았으므로 이전 엘리먼트를 필터링하지 않는다.

셀렉터 표현식을 사용하면 해당 엘리먼트 이전에 선언된 형제 엘리먼트 가운데 셀렉터 표

현식과 일치하는 엘리먼트가 반환된다.


⊙ .prevUntil()

대상 엘리먼트 전에 선언된 형제 엘리먼트 가운데 셀렉터 표현식에 일치하는 엘리먼트 전까

지의 형제 엘리먼트만 반환한다.

.prevUntil(selector)

매개변수

• selector : 먼저 선언된 형제 엘리먼트의 검색을 중단할 지점을 나타내는 셀렉터 표

현식

반환값


설명

DOM 엘리먼트 집합을 나타내는 특정 jQuery 객체를 대상으로 .prevUntil() 메서드를

호출하면 jQuery 객체의 DOM 트리상에서 메서드 인자로 전달한 셀렉터 표현식과 일치

하는 엘리먼트를 찾을 때까지 해당 엘리먼트보다 먼저 선언된 엘리먼트를 찾아 jQuery

객체로 만든다. 반환된 새 jQuery 객체에는 .prevUntil() 셀렉터에 해당하는 엘리먼트는

포함되지 않고 그 전의 모든 형제 엘리먼트가 포함된다.

셀렉터에 해당하는 엘리먼트가 없거나 셀렉터 표현식을 지정하지 않으면 이전 엘리먼트

를 모두 포함하며, 이는 .prevAll() 메서드에 필터 셀렉터를 전달하지 않고 실행한 것과

결과가 같다.

다음과 같은 간단한 정의 리스트가 있다고 해보자.

<dl>

<dt>term 1</dt>

<dd>definition 1-a</dd>

<dd>definition 1-b</dd>

<dd>definition 1-c</dd>

<dd>definition 1-d</dd>

<dt id="term-2">term 2</dt>





<dt>term 3</dt>



</dl>

다음은 term 2에서부터 탐색을 시작해 <dt> 이전까지의 형제 엘리먼트를 구하는 코드다.

$('#term-2').prevUntil('dt').css('background-color', 'red');

코드를 실행하면 definition 1-a, definition 1-b, definition 1-c의 배경색이 빨간색으

로 바뀐다.


⊙ .next()

엘리먼트의 형제 엘리먼트 가운데 바로 다음 엘리먼트만 반환한다. 옵션으로 셀렉터 표현식

을 사용해서 검색된 엘리먼트를 필터링할 수 있다.

.next([selector])

매개변수


반환값


설명

DOM 엘리먼트 집합을 나타내는 특정 jQuery 객체를 대상으로 .next() 메서드를 호출

하면 jQuery 객체의 엘리먼트 집합 가운데 해당 엘리먼트 바로 다음에 선언된 엘리먼트

로 구성된 엘리먼트 집합이 jQuery 객체로 만들어진다.

이 메서드에는 매개변수를 옵션으로 지정할 수 있으며, 매개변수는 $() 메서드에서 사용

하는 셀렉터 표현식과 같다. 매개변수를 지정하면 추출된 엘리먼트 가운데 셀렉터 표현

식과 일치하는 엘리먼트만 추출해 반환한다. .next() 메서드는 jQuery 1.5에서 많은 성능

향상이 이뤄졌다.


<ul>






</ul>

다음과 같은 식으로 third-item 항목에서 바로 다음 엘리먼트를 선택해 보자.

$('li.third-item').next().css('background-color', 'red');


코드를 실행하면 항목 4의 배경이 빨간색으로 바뀐다. 여기서는 옵션으로 지정 가능한

셀렉터 표현식을 사용하지 않았으므로 다음 엘리먼트를 필터링하지 않는다. 셀렉터 표현

식을 사용하면 대상 엘리먼트의 바로 다음 엘리먼트 가운데 셀렉터 표현식과 일치하는

엘리먼트가 반환된다.


⊙ .nextAll()

특정 엘리먼트의 형제 엘리먼트 가운데 이후 엘리먼트만 반환한다. 옵션으로 셀렉터 표현식

을 사용해 검색된 엘리먼트를 필터링할 수 있다.

.prevAll([selector])

매개변수


반환값


설명

DOM 엘리먼트 집합을 나타내는 jQuery 객체를 대상으로 nextAll() 메서드를 호출하면

jQuery 객체의 엘리먼트 집합 가운데 해당 엘리먼트 이후에 선언된 엘리먼트로 구성된

엘리먼트 집합이 새로운 jQuery 객체로 만들어진다.

이 메서드는 매개변수를 옵션으로 지정할 수 있으며, 매개변수는 $() 메서드에서 사용하

는 셀렉터 표현식과 같다. 매개변수를 지정하면 추출된 엘리먼트 가운데 셀렉터 표현식과

일치하는 엘리먼트만을 추출해 반환한다.


<ul>






</ul>

third-item으로 시작해서 해당 항목의 엘리먼트보다 이후에 선언된 엘리먼트를 선택하

려면 다음과 같이 메서드를 실행한다.

$('li.third-item').nextAll().css('background-color', 'red');


코드를 실행하면 리스트 항목 가운데 항목 4, 5의 배경색이 빨간색으로 바뀐다. 여기서는

매개변수로 셀렉터 표현식을 지정하지 않았으므로 이전 엘리먼트를 필터링하지 않는다.

셀렉터 표현식을 사용하면 대상 엘리먼트의 다음 형제 엘리먼트 가운데 셀렉터 표현식과

일치하는 엘리먼트를 반환한다.


⊙ .nextUntil()

특정 엘리먼트 이후에 선언된 형제 엘리먼트 가운데 셀렉터 표현식과 일치하는 엘리먼트보

다 이전에 선언된 엘리먼트를 반환한다.

.nextUntil(selector)

매개변수

• selector : 다음 엘리먼트 탐색 중 탐색을 멈출 엘리먼트를 찾을 셀렉터 표현식

반환값


설명

DOM 엘리먼트 집합을 나타내는 특정 jQuery 객체를 대상으로 .nextUntil() 메서드를

호출하면 jQuery 객체의 엘리먼트 집합에서 메서드 인자로 전달한 셀렉터 표현식과 일치

하는 엘리먼트 전까지 검색한 형제 엘리먼트로 구성된 엘리먼트 집합을 새로운 jQuery 객

체로 만든다.

매개변수로 지정한 셀렉터 표현식과 일치하는 엘리먼트가 없거나 셀렉터 표현식을 지

정하지 않으면 형제 엘리먼트를 모두 포함하게 되며, 이는 필터 셀렉터를 지정하지 않은

.nextAll() 메서드의 반환값과 같다.

다음과 같은 간단한 정의 리스트가 있다고 해보자.

<dl>

<dt>term 1</dt>




<dd>definition 1-d</dd>

<dt id="term-2">term 2</dt>





<dt>term 3</dt>



</dl>

다음은 term 2에서부터 탐색을 시작해 <dt> 이전까지의 형제 엘리먼트를 구하는 예제다.

$('#term-2').nextUntil('dt').css('background-color', 'red');

코드를 실행하면 definition 2-a, definition 2-b, definition 2-c의 배경색이 빨간색으

로 바뀐다.


기타 탐색 메서드

기타 탐색 메서드는 jQuery 객체에 포함된 DOM 엘리먼트를 다루는 각종 기능을 제공한다.

⊙ .add()

jQuery 객체의 엘리먼트 집합에 새로 엘리먼트를 추가한다.

.add(selector[, context])

.add(elements)

.add(html)

.add(selector[, context])

• selector : jQuery 객체에 추가할 엘리먼트를 찾는 셀렉터 표현식

• context (옵션) : 셀렉터가 검색할 DOM 트리상의 영역

.add(elements)

• elements : jQuery 객체에 추가할 엘리먼트의 집합

.add(html)

• html : 새로 만든 후 추가할 엘리먼트의 HTML 코드

반환값


설명

DOM 엘리먼트 집합을 나타내는 특정 jQuery 객체를 대상으로 .add() 메서드를 호출하

면 메서드를 실행하는 엘리먼트 집합과 매개변수로 지정된 엘리먼트의 집합을 결합한 새

jQuery 객체를 생성한다. .add() 메서드의 인자는 $() 메서드에 전달하는 것과 흡사하며,

이러한 인자로 jQuery 셀렉터 표현식, 이미 만든 엘리먼트 집합의 jQuery 객체, 새로 만

들 엘리먼트의 HTML을 전달할 수 있다.

다음과 같이 간단한 리스트와 일부 <p> 태그가 포함된 페이지가 있다고 해보자.


<ul>




</ul>

<p>a paragraph</p>

<div>

<p>paragraph within a div</p>

</div>

여기서는 .add() 메서드의 인자로 셀렉터 표현식이나 DOM 엘리먼트의 레퍼런스 자체를

사용해서 리스트 항목을 선택한 다음 <p> 엘리먼트를 선택할 수 있다.

$('li').add('p').css('background-color', 'red');

혹은

$('li').add(document.getElementsByTagName('p')[0])


와 같은 코드를 실행하면 3개의 리스트 항목은 물론이고 두 개의 <p> 태그 엘리먼트도

배경이 빨간색으로 바뀐다.

여기서 엘리먼트 집합에 특정 컨텍스트에 있는 엘리먼트만 검색해 추가하는 것은 다음

과 같다.

$('li').add('p', 'div').css('background-color', 'red');

코드를 실행하면 3개의 리스트 항목과 두 번째 <p> 태그 엘리먼트만 배경이 빨간색으로

바뀐다.

.add() 메서드의 매개변수로 HTML을 활용해(세 번째 버전) 새로운 엘리먼트를 생성한

후 엘리먼트에 집합에 추가해 메서드를 실행할 수 있다. 예를 들어, 새로운 <p> 태그를 추

가하는 것은 다음과 같다.

$('li').add('<p id="new">new paragraph</p>').css('background-color', 'red');

하지만 위와 같이 새로운 <p> 엘리먼트를 집합에 추가하고 배경을 변경하는 메서드를 실

행하더라도 여전히 페이지에는 보이지 않는다. 페이지에 추가된 <p> 엘리먼트를 보여주려

면 DOM상에 엘리먼트를 삽입하는 메서드를 실행해야 한다.


알아두기

4장, 'DOM 처리 메서드'에서 DOM에 엘리먼트를 삽입하는 메서드에 관해 좀더 자세하게 설

명한다.

⊙ .is()

엘리먼트 집합에서 셀렉터 표현식과 일치하는 엘리먼트가 있는지 여부를 반환한다.

.is(selector)

.is(jQuery object) ☞ jQuery 1.6 이상

.is(element) ☞ jQuery 1.6 이상

.is(selector)

• selector : 일치하는 엘리먼트를 찾을 셀렉터 표현식

.is(jQuery object) ☞ jQuery 1.6 이상


.is(element) ☞ jQuery 1.6 이상


반환값

셀렉터 표현식과 일치하는 엘리먼트의 존재 여부를 나타내는 불리언(참 또는 거짓) 값

설명

이 장에서 설명한 다른 메서드와는 달리 .is() 메서드는 새로운 jQuery 객체를 생성하지

않는다. .is() 메서드는 특히 이벤트 핸들러에서 jQuery 객체 내의 엘리먼트 집합을 검사

하고, 반환값을 이용해 값에 따라 다른 이벤트 처리를 할 때 유용하다.

다음과 같이 자식 엘리먼트가 두 개 포함된 리스트가 있다고 해보자.

<ul>

<li>list <strong>item 1</strong></li>


<li><span>list item 2</span></li>


</ul>

여기서는 다음과 같이 먼저 <ul>를 클릭했을 때 실행할 이벤트 핸들러를 등록하고, 이벤

트 핸들러 내부에서 <ul>의 자식 노드에서 클릭 이벤트가 발생했을 때만 동작하게 하고

그 외의 엘리먼트에서 이벤트가 발생했을 때는 동작하지 않게 할 수 있다.

$('ul').click(function(event) {

if ($(event.target).is('li') ) {

$(event.target).css('background-color', 'red');

}

});

이벤트 핸들러를 추가하고 리스트 내의 항목 1과 3을 클릭하면 배경색이 빨간색으로 바

뀐다. 하지만 항목 2를 클릭하면 실제 이벤트가 <span>이나 <strong> 엘리먼트에서 발생

하므로 배경을 바꾸는 이벤트 핸들러는 동작하지 않는다.


⊙ .end()

메서드 체인에서 가장 마지막의 DOM 처리 메서드가 실행되기 이전 상태의 jQuery 객체를

반환한다.

.end()

매개변수

없음

반환값

이전 jQuery 객체

설명

이번 장에서 설명한 메서드는 대부분 선택된 엘리먼트의 집합에서 일정한 조건에 따라 새

로운 집합을 생성하고 해당 집합을 다시 다른 조건에 따라 새롭게 만든다. 이렇게 DOM

처리 메서드가 실행되어 생성된 새로운 jQuery 객체들은 해당 메서드를 실행하기 이전의

jQuery 객체의 상태를 임의로 유지하며, DOM 처리 메서드를 실행하기 이전의 jQuery 객

체가 필요한 경우 .end() 메서드를 호출해서 이전 jQuery 객체를 참조할 수 있다.

다음과 같이 페이지에 몇 가지 짧은 리스트가 있다고 해보자.

<ul class="first">

<li class="foo">list item 1</li>


<li class="bar">list item 3</li>

</ul>

<ul class="second">

<li class="foo">list item 1</li>


<li class="bar"></ul>

.end() 메서드는 jQuery의 메서드 체이닝을 이용할 때 매우 유용하다. 메서드 체이닝을

활용하지 않으면 jQuery 객체를 새로운 변수에 할당하고 할당한 변수를 써서 해결해야

하지만 메서드 체이닝을 활용하면 따로 변수를 선언하고 할당하는 작업을 하지 않아도

된다. 그럼에도 .end() 메서드를 이용하면 모든 메서드 호출을 한꺼번에 연결할 수 있다.

$('ul.first').find('.foo').css('background-color', 'red')


.end().find('.bar').css('background-color', 'green');

위 코드처럼 연결된 메서드들을 실행하면 먼저 <ul class="first">를 찾고 .find() 메서드

가 하위 노드 가운데 클래스가 foo인 엘리먼트들을 검색해 배경을 빨간색으로 바꾼다.

그러고 나서 .end() 메서드가 호출되면 .find() 메서드가 작동해 클래스가 foo인 엘리먼

트 집합에서 <ul class="first">로 참조를 되돌린다. 그런 다음 다시 .find() 메서드로 클

래스가 bar인 엘리먼트를 찾아 배경을 초록색으로 바꾼다. 결과적으로 첫 번째 리스트

의 항목 1과 3에는 배경색이 지정되고 두 번째 리스트의 항목에는 배경색이 지정되지 않

는다.

다음과 같이 필터링 메서드로 코드 블록을 열고 .end() 메서드로 코드 블록을 닫으며 메

서드 연쇄 호출 코드를 들여 쓰면 HTML의 들여쓰기처럼 코드 블록을 쉽게 알아볼 수

있다.

$('ul.first').find('.foo')

.css('background-color', 'red')

.end().find('.bar')

.css('background-color', 'green')

.end();

마지막 .end()는 jQuery 객체를 더는 사용하지 않으므로 필요하지 않다. 하지만 .end() 메

서드를 써서 코드에 시각적인 대칭이 살아나고 적어도 일부 개발자가 보기에는 프로그램

의 가독성이 높아진다.


⊙ .andSelf()

메서드 연쇄 호출 코드에서 현재 선택돼 있는 엘리먼트에 필터링 이전 집합의 엘리먼트를 추

가한다.

.andSelf()

매개변수

없음

반환값


설명

이전의 .end() 메서드에서 설명했듯이 jQuery 객체는 메서드 실행 이전의 집합을 따로

유지하고 있다. .andSelf()는 DOM 탐색 메서드가 실행된 후 jQuery 객체 내의 엘리먼트

집합과 실행 이전의 엘리먼트 집합을 함께 처리할 때 유용하다.


<ul>






</ul>

여기서는 다음과 같은 방식으로 세 번째 항목으로 시작해서 이후 항목을 선택할 수 있다.

$('li.third-item').nextAll().andSelf().css('background-color', 'red');

코드를 실행하면 항목 3, 4, 5의 배경이 빨간색으로 바뀐다. .nextAll() 메서드를 실행한

후 반환되는 jQuery 객체에는 항목 4, 5만이 존재하지만 .andSelf() 메서드가 실행되면

검색 기준 대상이었던 항목 3이 jQuery 객체에 추가되어 반환된다.


⊙ .map()

.map() 메서드는 jQuery 객체의 각 엘리먼트를 대상으로 사용자 정의 함수를 실행한 후 반

환값으로 구성된 새로운 jQuery 객체로 만든다.

.map(callback)

매개변수

• callback : 각 엘리먼트를 대상으로 실행할 사용자 정의 함수

반환값


설명

.map() 메서드는 jQuery 객체의 엘리먼트의 값을 가져와서 새로운 값으로 지정할 때 유

용하다. 다음과 같이 체크박스가 포함된 폼이 있다고 해보자.

<form method="post" action="">

<fieldset>

<div>

<label for="two">2</label>

<input type="checkbox" value="2" id="two" name="number[]">

</div>

<div>

<label for="four">4</label>

<input type="checkbox" value="4" id="four" name="number[]">

</div>

<div>

<label for="six">6</label>

<input type="checkbox" value="6" id="six" name="number[]">

</div>

<div>

<label for="eight">8</label>

<input type="checkbox" value="8" id="eight" name="number[]">

</div>

</fieldset>

</form>

다음과 같이 모든 체크박스의 checked 프로퍼티를 true로 변경할 수 있다.


$(':checkbox').map(function() {

return this.checked = true;

});

이번에는 다음과 같이 모든 체크박스의 value 값의 합을 구할 수 있다.

var sum = 0;

$(':checked').map(function() {

return sum += (this.value * 1);

});

아울러 체크된 체크박스의 ID 값을 콤마로 구분한 문자열 값을 구하는 방법은 다음과

같다.

$(':checkbox').map(function() {

return this.id;

}).get().join(',');

코드를 실행하면 two, four, six, eight라는 문자열이 반환된다.

⊙ .contents()

텍스트 노드를 포함해서 각 엘리먼트의 자식 엘리먼트를 반환한다.

.contents()

매개변수

없음

반환값


설명

DOM 엘리먼트 집합을 나타내는 특정 jQuery 객체를 대상으로 .contents() 메서드

를 호출하면 텍스트 노드를 포함한 DOM 트리상의 자식 엘리먼트 집합이 반환된다.

.contents() 메서드는 .children() 메서드와 비슷한데, .contents() 메서드는 결과로 생


성되는 jQuery 객체에 HTML 엘리먼트는 물론 텍스트 노드까지 포함한다는 차이점이

있다.

다음과 같이 간단한 <div> 엘리먼트에 여러 텍스트 노드가 있고, 텍스트 노드마다 <br />

로 두 줄씩 줄바꿈돼 있다고 해보자.

<div class="container">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

eiusmod tempor incididunt ut labore et dolore magna aliqua. <br /><br

/>

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris

nisi ut aliquip ex ea commodo consequat.<br /><br />

Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur.

</div>

.contents() 메서드를 이용하면 이러한 텍스트 블록을 세 개의 단락으로 변환할 수 있다.

$('.container').contents().filter(function() {

return this.nodeType == 3;

})

.wrap('<p></p>')

.end()

.filter('br')

.remove();

이 코드는 우선 <div class="container"> 안의 텍스트 노드를 포함한 모든 자식 엘리먼

트를 사용자 필터링 함수로 추출한다. 사용자 정의 함수에서는 엘리먼트의 .nodeType 프

로퍼티를 검사해서 필터링한다. 참고로 .nodeType이라는 DOM 프로퍼티는 노드의 유형

을 나타내는 숫자값을 담고 있으며, 텍스트 노드의 코드는 3이다. 이어서 다시 한번 <br

/> 엘리먼트를 필터링해서 해당 엘리먼트들을 제거한다.

jquery api 레퍼런스 가이드

Documents