html() 와 appendTo()로 추가했을때의 차iv점DOM 요소를 특정 위치에 추가할때 html() 메서드와 appendTo() 메서드의 차이점은 무엇일까요? html() 메서드는 innerHTML에 값을 대입(set) 해준다는 점이고, appendTo() 메서드는 기존 값에 추가 해준다는 점 입니다. 다음과 같이 각각 메서드를 두 번씩 실행했을때의 차이점이 무엇일까요? 단 문서의 body 태그는 비어있는 상태입니다.메서드 실행 전 body 요소의 상태appendTo()를 두 번 실행했을 때$('domTest').appendTo('body');$('domTest').appendTo('body');html()를 두 번 실행했을 때$('body').html('domTest');$('body').html..
JavaScript
2018. 7. 1. 00:40
[jQuery] jQuery 필터 메서드 사용법
이전글[jQuery] jQuery 선택자(Selector) 필터 총정리jQuery 필터 메서드이전글에서는 jQuery에서 사용하는 선택자 문법 및 필터 구문을 알아보았습니다. 예를 들어 두 번째 td를 선택할때에는 0부터 시작하는 index를 기준으로 :eq(1)을 선택자 필터로 사용하여 얻어올 수 있습니다.$('td:eq(1)');그런데 필터구문은 선택자로도 제공되지만 jQuery의 메서드로도 제공되고 있습니다. 위의 구문은 eq(indext) 메서드로 다음과 같이 바꾸어 사용이 가능합니다.$('td').eq(1); //선택한 td 요소들 중 1번 index 요소 (즉 두번째 요소);이뿐만 아니라 jQuery 셀렉터 문법과 대응되는 기능의 다양한 메서드들을 제공하고 있습니다.filter() 메서드fil..
JavaScript
2018. 6. 27. 05:30
[Underscore.js] 언더스코어 JS 템플릿 엔진 사용하기
언더스코어 JS(Underscore.JS) 템플릿 엔진 사용하기Underscore.JS(이하 언더스코어)는 자바스크립트 유틸리티(여러 가지 편의를 도와주는) 라이브러리입니다. 언더스코어라는 이름이 의미하는 바와 같이 언더스코어는 모든 함수들을 _를 사용합니다. jQuery가 $를 사용하는 것과 같습니다.언더스코어는 여러 가지 다양한 유틸성 함수들을 제공하기 때문에 수많은 자바스크립트 프로젝트에서 사용 중이며, 프로젝트 이외에도 여러 자바스크립트 프레임워크나 라이브러리에서 자체적으로 언더스코어를 기본으로 사용하기도 합니다.그 중 언더스코어에 있는 기능 중 하나인 템플릿 엔진 기능을 사용해 보도록 하겠습니다. 언더스코어에는 Java 진영의 JSP와 같은 스크립트 템플릿 방식의 엔진을 제공합니다. 템플릿을 텍..
JavaScript
2018. 6. 27. 01:00
[jQuery] DOM 요소 제거하기 - remove(), empty() 메서드
jQuery DOM 요소 제거하기다음과 같이 body가 구성되어 있을때 span 요소를 제거하기 위한 방법으로 두 가지가 있습니다. remove() 메서드를 사용하거나 empty() 메서드는 사용하는 방법입니다.remove() 메서드사용법은 $(selector).remove() 이며, selector 에 해당하는 DOM 요소를 제거합니다.span 요소가 통째로 제거됩니다.empty() 메서드사용법은 $(selector).empty() 이며, selector 에 해당하는 DOM 요소의 내용을 (제거)비웁니다.따라서 셀렉터로 잡은 span 요소가 아닌 그 내부(하위)의 요소들이 제거됩니다.text() 또는 html() 메서드로 제거하기DOM 요소의 textContent 속성과 innerHTML 을 제어하는 ..
JavaScript
2018. 6. 25. 21:20
[jQuery] jQuery text(), html() 메서드 설명 및 차이점
jQuery text(), html() 메서드jQuery text(), html() 메서드text(), html() 메서드는 문서 객체 안의 내용을 가져오거나 추가할때 사용하는 메서드입니다. 얼핏 보기에는 두 메서드의 동작과 결과가 똑같은듯 보이지만 조금의 차이가 있습니다. 이 둘의 사용법 및 차이를 살펴보겠습니다.문서 객체의 내용 얻어오기문서 body의 내용이 위와 같이 구성되어 있습니다. 만약 이상태에서 span의 내용을 얻고자 할때 text(), html() 메서드를 사용할 수 있습니다.그러나 결과는 서로 다르게 나타납니다. 이 둘의 차이점은 무엇일까요?text(), html() 동작의 차이점먼저 text() 메서드를 먼저 살펴보자면 text() 메서드는 jQuery로 선택한 DOM 객체의 text..
JavaScript
2018. 6. 25. 17:30
[jQuery] jQuery 스타일(style CSS) 다루기
jQuery 스타일 속성 값 얻기만약 body가 위와 같이 구성되어 있는 경우 table 스타일의 border 값을 얻기 위해서는 jQuery의 css() 메서드를 사용합니다.*RGB는 순서대로 Red, Green, Blue 를 의미하며 0 ~ 255 까지 값으로 표현합니다.jQuery 스타일 속성 추가 및 수정하기만약 span 요소에 font-size 값을 30px로 추가하고 싶으면 css(속성명, 속성값)을 이용할 수 있습니다. 만약 기존에 font-size 속성값이 존재한다면 새로 지정한 값으로 수정됩니다.font-size 스타일이 적용된 모습입니다.jQuery 스타일 속성 여러개 동시에 다루기만약 css() 메서드를 통해 동시에 여러개의 스타일 속성을 변경하고 싶은 경우에는 css(객체) 형태로 ..
JavaScript
2018. 6. 25. 13:19
[jQuery] jQuery DOM 요소에 속성 추가, 수정 및 제거하기
관련글[자바스크립트] 데이터 속성(data-xxx)에 대해 DOM 요소에 속성 추가하기다음과 같이 원하는 속성을 요소에 추가시킬 수 있습니다. 여기서는 data-value라는 임의의 속성에 10 이라는 값을 추가시켰습니다.data-로 시작하는 속성은 HTML5 표준에서 요소에 원하는 값을 저장하고 싶은 경우 사용하는 속성입니다. jQuery에서 속성을 추가하고 싶은 경우에는 attr(속성명, 속성값) 이라는 메서드를 사용합니다.속성 여러개 동시에 추가하기속성을 동시에 여러개 추가할 때에는 attr(객체) 메서드를 사용해 객체를 넘겨주어 동시에 여러 속성을 추가할 수 있습니다.넘겨준 객체의 속성과 값들이 그대로 요소에 추가되었습니다.속성 값 가져오기특정 속성의 값을 얻어야 할 때에는 attr(속성명) 메서..
JavaScript
2018. 6. 24. 06:30
[jQuery] jQuery DOM 계층 구조를 이용한 선택자 메서드
이전글[jQuery] jQuery DOM 셀렉터(Selector) 기본 사용법DOM 계층 구조를 이용한 선택자 메서드DOM은 다음과 같이 트리 구조를 갖기 때문에 부모와 자식 조상과 후손으로 상대적인 계층 구조가 생성됩니다. 예를들어 H1의 부모는 BODY이고 형제로는 P가 있습니다. jQuery 선택자는 이러한 계층구조를 조건으로 하여 세밀한 DOM 탐색을 할 수 있도록 css 선택자 표현식을 제공하지만 그 밖에도 선택자 메서드를 제공하고 있습니다.실습 예제body 구조는 다음과 같습니다.자식(Child) 선택자 메서드만약 body 태그 구성이 위와 같은 경우 body 의 자식 요소들(children) 을 선택할때에는 children() 메서드를 사용합니다.네번째 b 태그는 body의 자식이 아니기 때..
JavaScript
2018. 6. 24. 03:00
[jQuery] jQuery 요소에 클래스(class) 추가 및 삭제하기
요소에 클래스(class) 추가하기요소에 클래스를 추가할때는 jQuery의 addClass() 메서드를 사용합니다. 다음과 같이 클래스를 추가할 요소를 선택자로 지정한 이후 추가할 클래스 값을 매개변수로 지정하여 추가합니다.h1 태그에 클래스가 추가된 것을 알 수 있습니다.클래스 한꺼번에 여러개 추가하기클래스를 한꺼번에 여러개 추가하고 싶은 경우에는 클래스 문자열 배열을 addClass() 메서드의 매개변수로 넘겨 사용합니다.클래스가 두 개 추가됐습니다.여러개의 요소 순서에 맞게 클래스 추가하기다음과 같이 콜백함수 형태로 addClass() 메서드를 사용하여 클래스를 추가할 수 있습니다. 콜백 함수를 사용하면 위 예제와 같이 여러 요소에 클래스를 한꺼번에 추가할 때 index값을 인자로 받게 되는데, 이..
JavaScript
2018. 6. 23. 11:00
[jQuery] jQuery 선택자(Selector) 필터 총정리
이전글[jQuery] jQuery 선택자(Selector) 목록 정리jQuery 선택자(Selector) 필터jQuery는 DOM 요소를 탐색할때 속성 값을 조건으로 하거나 순서(index) 및 상태를 조건으로 선택할 수 있는 표현식을 제공하는데 이러한 표현식을 필터라고 합니다.속성 필터속성을 조건으로 하는 선택자 필터입니다. 값을 조건으로 할때 공백이 들어간 경우에는 "" 또는 ''으로 묶어 표현합니다.특정 속성을 갖는 요소특정 속성을 갖는 요소를 선택할때는 [속성명] 과 같이 사용합니다.$('[data-value]') //data-value 라는 속성을 갖는 모든 요소 선택$('td[class]') //class 속성을 갖는 모든 td 요소 선택특정 속성의 값을 조건으로 선택하기특정 속성의 값을 기준..
