스타일 설정(프로퍼티/클래스) CSS 설정 제이쿼리를 사용하면 선택한 요소의 스타일에 관한 속성값을 손쉽게 받아오거나 설정할 수 있다. .css( ) 메소드 제이쿼리에서는 .css( ) 메소드를 사용하여 선택한 요소의 CSS 스타일을 간단하게 설정할 수 있다. .css( ) 메소드는 선택한 요소 집합의 첫 번째 요소의 스타일 속성값을 반환하거나, 선택한 요소의 스타일 속성을 인수로 전달받은 값으로 설정한다. 예제123456789101112131415161718192021222324252627 jQuery Style $(function() { $("button").on("click", function() { $("p").css("fontSize", "25px"); // 모든 요소의 글씨 크기를 25px로 ..
요소의 영역(크기 / 위치) 요소의 크기 제이쿼리는 선택한 요소의 크기에 관한 정보를 손쉽게 받아오거나 설정할 수 있도록 다양한 메소드를 제공한다. inner와 outer 제이쿼리에서 요소의 크기는 다음과 같이 구성된다.접두사로 inner가 붙은 메소드는 선택한 요소의 크기에 패딩(padding) 영역이 포함된 크기 정보를 반환한다. 접두사로 outer가 붙은 메소드는 패딩 영역뿐만 아니라 테두리(border) 영역까지 포함된 크기 정보를 반환한다.또한, 접두사로 outer가 붙은 메소드에 인수로 true 값을 전달하면, 패딩과 테두리 영역뿐만 아니라 마진(margin) 영역까지 포함된 크기 정보를 반환한다. 위의 내용을 표로 정리하면 다음과 같다. 메소드 설명 .windth( ), .height( ) ..
필터링 메소드 필터링(filtering) 메소드 DOM 트리에서 선택한 요소를 필터링하기 위한 메소드는 다음과 같다..first( ) .last( ).eq( ).filter( ).not( ) .first( ) 메소드와 last( ) 메소드 .first( ) 메소드는 선택한 요소 중에서 첫 번째 요소를 선택하고, .last( ) 메소드는 마지막 요소를 선택한다. 예제1234567891011121314151617181920212223242526272829303132333435 jQuery Filtering $(function() { $("#firstBtn").on("click", function() { $("li").first() // 선택한 요소 중에서 첫 번째 요소만을 선택함. .css({"border"..
조상 요소의 탐색 / 형제 요소의 탐색 / 자손 요소의 탐색 트리 탐색(tree traversing) 트리 탐색(tree traversing)이란 특정 요소로부터 다른 요소들과의 관계를 통해 선택하길 원하는 요소까지 DOM 트리를 검색해 나아가는 과정을 의미한다. 이러한 트리 탐색은 다음과 같이 세 영역으로 나눌 수 있다. 조상(ancestor) 요소 탐색형제(sibling) 요소 탐색자손(descendant) 요소 탐색 조상(ancestor) 요소의 탐색 DOM 트리에서 특정 요소의 부모(parent) 요소를 포함한 상위의 요소를 탐색하기 위한 메소드는 다음과 같다. parent( )parents( )parentsUntil( )closest( ) .parent( ) 메소드 .parent( ) 메소드는 ..
요소의 추가 / 복사 및 삭제 요소의 추가 제이쿼리는 새로운 요소나 콘텐츠를 손쉽게 추가할 수 있도록 여러 메소드를 제공한다. 기존 요소의 내부에 추가 다음 메소드를 사용하면 기존 요소의 내부에 새로운 요소나 콘텐츠를 추가할 수 있다. .append( ).prepend( ).appendTo( ).prependTo( ) .append( ) 메소드 .append( ) 메소드는 선택한 요소의 '마지막'에 새로운 요소나 콘텐츠를 추가한다. 예제1234567891011121314151617181920212223242526272829 jQuery Element Insert $(function() { $("button").on("click", function() { $("#list").append("새로 추가된 아이..
요소의 선택 요소의 선택 제이쿼리를 사용하면 손쉽게 HTML 요소를 선택하여, 선택된 요소에 특정 동작을 설정할 수 있다. 제이쿼리에서는 요소를 선택하기 위해 대부분의 CSS 선택자뿐만 아니라 몇몇 비표준 선택자까지 제공하고 있다. CSS 선택자를 이용한 선택 제이쿼리에서는 CSS 선택자를 사용하여 HTML 요소를 선택할 수 있다. 태그 이름을 사용하여 같은 태그 이름을 가지는 HTML 요소를 모두 선택할 수 있다. 이것은 자바스크립트의 getElementByTagName( ) 메소드와 같은 동작을 한다. 예제1234567891011121314151617181920212223242526 jQuery Element Selection $(function() { $("p").on("click", functio..
제이쿼리 시작 제이쿼리(jQuery) 제이쿼리는 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리이다. 제이쿼리를 이용하면 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현할 수 있다.또한, Ajax 응용 프로그램 및 플러그인도 제이쿼리를 활용하여 빠르게 개발할 수 있다. 제이쿼리를 배우기 위한 사전지식 제이쿼리는 자바스크립트 라이브러리이므로, 자바스크립트 언어에 대한 기초 지식이 필요하다.또한, HTML 요소를 선택하고, CSS 스타일을 변경하는 등 HTML 과 CSS와도 많은 연관이 있다. 따라서 제이쿼리를 배우기 전에 다음과 같은 기초 지식이 필요하다. HTMLCSS자바스크립트 제이쿼리의 역사 제이쿼리는 2006년 미국의 존 레식(John ..
정규 표현식(regular expression)이란 ?정규 표현식(regular expression)은 문자열에서 특정한 규칙을 가지는 문자열의 집합을 찾아내기 위한 검색 패턴이다. 이러한 검색 패턴은 모든 종류의 문자열 검색이나 교체 등의 작업에서 사용할 수 있다. 정규 표현식의 생성자바스크립트에서 정규 표현식을 만드는 방법은 다음과 같다. 정규 표현식 리터럴을 이용한 생성RegExp 객체를 이용한 생성 자바스크립트에서 정규 표현식 리터럴은 다음 문법을 사용하여 표현한다. 문법/검색 패턴/플래그 정규 표현식 리터럴은 슬래시(/) 기호로 시작하여, 슬래시(/) 기호로 끝난다. 또한, 필요에 따라 플래그를 추가하여 기본 검색 설정을 변경할 수도 있다. 🔔 예제) 정규 표현식의 생성 ..