기타 탐색 메서드 DOM 트리에서 요소의 탐색을 위해 사용되는 메서드 .add() : 선택한 요소의 집합에 전달받은 요소를 추가 $(function() { $("button").on("click", function() { $("li").add("p") // 선택한 요소의 집합에 요소를 추가함. .css({"border": "2px solid green"}); // 해당 요소의 CSS 스타일을 변경 }); }); $(function() { $("button").on("click", function() { $("#list").append("새로 추가된 아이템이에요!"); }); }); 위의 예제에서 알 수 있듯이 .add() 메서드는 선택한 '요소의 집합'에 인수로 전달받은 요소를 추가하는 메서드 하지만 ...

조상 요소의 탐색 트리 탐색(tree traversing) : 특정 요소로부터 다른 요소들과의 관계를 통해 선택하길 원하는 요소까지 DOM 트리를 검색해 나아가는 과정 조상(ancestor) 요소의 탐색 DOM 트리에서 특정 요소의 부모(parent) 요소를 포함한 상위의 요소를 탐색하기 위한 메서드 .parent() : 선택한 요소의 부모(parent) 요소를 선택 선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 부모 요소만을 선택 가능 .css() : 선택한 요소에 인수로 전달받은 스타일을 설정 $(function() { $("button").on("click", function() { $("p").parent() // 요소의 부모 요소를 선택함. .css({"border": "2px solid..

요소의 복사 선택한 요소나 콘텐츠를 복사하여 새로운 요소나 콘텐츠를 생성 가능 . clone() : 선택한 요소를 복사하여 새로운 요소를 생성 $(function() { $("button").on("click", function() { // id가 "firstItem"인 요소를 복사하여 id가 "list"인 요소에 추가함. $("#firstItem").clone().appendTo("#list"); }); }); $(function() { $("#firstBtn").on("click", function() { // id가 "list"인 요소의 맨 마지막에 id가 "firstItem"인 요소 추가 $("#firstItem").appendTo("#list"); }); }); 위의 예제에서 볼 수 있듯이. c..

CSS 선택자 요소의 선택 제이쿼리를 사용하면 손쉽게 HTML 요소를 선택하여, 선택된 요소에 특정 동작을 설정 할 수 있음. 제이쿼리에서는 요소를 선택하기 위해 대부분의 CSS 선택자뿐만 아니라 몇몇 비표준 선택자까지 제공 CSS 선택자를 이용한 선택 제이쿼리에서는 CSS 선택자를 사용하여 HTML 요소를 선택 가능 태그 이름을 사용하여 같은 태그 이름을 가지는 HTML 요소를 모두 선택 가능 자바스크립트의 getElementsByTagName() 메서드와 같은 동작 $(function() { $("p").on("click", function() { // 요소를 모두 선택함. $("span").css("fontSize", "28px"); // 요소를 모두 선택함. }); }); $() 함수에 전달되는 ..

제이쿼리(jQuery) 문법 제이쿼리를 사용하면 아주 간편하게 HTML 요소를 선택하고, 그렇게 선택된 요소에 손쉽게 특정 동작을 설정 할 수 있다. $(선택자).동작함수(); 달러($) 기호는 제이쿼리를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자 선택자를 이용하여 원하는 HTML 요소를 선택하고, 동작 함수를 정의하여 선택된 요소에 원하는 동작을 설정 $() 함수 : 선택된 HTML 요소를 제이쿼리에서 이용할 수 있는 형태로 생성해 주는 역할 $() 함수의 인수로는 HTML 태그 이름뿐만 아니라, CSS 선택자를 전달하여 특정 HTML 요소를 선택 가능 이러한 $() 함수를 통해 생성된 요소를 제이쿼리 객체(jQuery object) 제이쿼리는 이렇게 생성된 제이쿼리 객체의 메서드를 사용하여 ..

제이쿼리(jQuery) 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리 제이쿼리를 이용하면 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현 또한, Ajax 응용 프로그램 및 플러그인도 제이쿼리를 활용하여 빠르게 개발 가능 제이쿼리가 많이 사용되는 이유 제이쿼리는 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원 HTML DOM을 손쉽게 조작할 수 있으며, CSS 스타일도 간단히 적용 가능 애니메이션 효과나 대화형 처리를 간단하게 적용 같은 동작을 하는 프로그램을 더욱 짧은 코드로 구현 가능 다양한 플러그인과 참고할 수 있는 문서가 많이 존재 오픈 라이선스를 적용하여 누구나 자유롭게 사용 가능 제이쿼리 적용 제이쿼리는 자바스크립트 ..

정규 표현식의 개념 정규 표현식(regular expression)은 문자열에서 특정한 규칙을 가지는 문자열의 집합을 찾아내기 위한 검색 패턴 이러한 검색 패턴은 모든 문자열 검색이나 교체 등의 작업에서 사용 가능 정규 표현식 리터럴을 이용한 생성 RegExp 객체를 이용한 생성 /검색패턴/플래그 정규 표현식 리터럴은 슬래시(/) 기호로 시작하여, 슬래시(/) 기호로 끝남 또한, 필요에 따라 플래그를 추가하여 기본 검색 설정을 변경 가능 var regStr = /a+bc/; // 정규 표현식 리터럴을 이용한 생성 var regObj = new RegExp("a+bc"); // RegExp 객체를 이용한 생성 regStr; // /a+bc/ regObj; // /a+bc/ 단순한 패턴 검색 정규 표현식을 ..

예외(exception) 프로그램이 실행 중에 발생하는 런타임 오류를 의미 이러한 예외가 발생하지 않도록 미리 예방하는 것도 중요하지만, 발생한 예외를 처리하는 방법 또한 매우 중요 예외 발생 예외를 발생시킨다는 것은 명시적으로 오류를 발생시킨다는 의미뿐만 아니라 예외 상황을 알림 자바스크립트에서는 throw 키워드를 사용하여 예외를 발생 throw 표현식; ※ 표현식에는 예외 코드를 나타내는 숫자나 오류 메시지를 담고 있는 문자열, Error 객체 등 예외 처리(exception handling) 자바스크립트에서는 프로그램이 실행되는 도중 발생하는 예외를 처리하기 위해 try / catch / finally 문을 사용 try { // 예외를 처리하길 원하는 실행 코드; } catch (ex) { // ..