슬기로운 개발자 생활

요소의 크기jQuery는 선택한 요소의 크기에 관한 정보를 손쉽게 받아오거나 설정할 수 있도록 다양한 메소드를 제공한다.메소드설명.width()선택한 요소 집합의 첫 번째 요소의 너비를 반환하거나, 선택된 요소의 너비를 인수로 전달받은 값으로 설정한다..height()선택한 요소 집합의 첫 번째 요소의 높이를 반환하거나, 선택된 요소의 높이를 인수로 전달받은 값으로 설정한다..innerWidth()선택한 요소 집합의 첫 번째 요소의 너비에 패딩 영역을 포함한 너비를 반환한다..innerHeight()선택한 요소 집합의 첫 번째 요소의 높이에 패딩 영역을 포함한 높이를 반환한다..outerWidth()선택한 요소 집합의 첫 번째 요소의 너비에 패딩 영역과 테두리를 포함한 너비를 반환한다. 또는 인수로 tr..

필터링(filtering) 메소드DOM 트리에서 선택한 요소를 필터링하기 위한 메소드는 다음과 같다.메소드설명.first()선택한 요소 중에서 첫 번째 요소를 선택함..last()선택한 요소 중에서 마지막 요소를 선택함..eq()선택한 요소 중에서 전달받은 인덱스에 해당하는 요소를 선택함..filter()선택한 요소 중에서 전달받은 선택자에 해당하거나, 함수 호출의 결과가 참(true)인 요소를 모두 선택함..not()선택한 요소 중에서 전달받은 선택자에 해당하거나, 함수 호출의 결과가 참(true)인 요소를 제외한 나머지 요소를 모두 선택함..has()선택한 요소 중에서 전달받은 선택자에 해당하는 요소를 자손 요소로 가지고 있는 요소를 모두 선택함..is()선택한 요소 중에서 전달받은 선택자에 해당하는..

기타 탐색 메소드DOM 트리에서 요소의 탐색을 위해 사용되는 기타 메소드는 다음과 같다.메소드설명.add()선택한 요소에 다른 요소를 추가 선택한다..addBack()선택한 요소의 집합에 바로 전에 선택했던 요소를 추가한다..each()선택한 요소들을 각 요소마다 전달받은 콜백 함수를 반복 실행한다..end()마지막으로 실행한 메소드의 실행 전 상태로 선택한 요소의 집합을 복원한다..offsetParent()DOM 트리에 존재하는 부모요소들 중 위치(positioned)요소를 기준으로 가장 가까운 요소를 찾아서 요소를 선택한다..contents()선택한 요소의 자식(child) 요소를 모두 선택한다. (텍스트 노드와 주석 노드까지 모두 포함함).add() 메소드.add() 메소드는 선택한 요소에 다른 요..

형제(sibling) 요소의 선택DOM 트리에서 특정 요소의 형제(sibling) 요소 즉, 같은 선상에 있는 요소를 선택하기 위한 메소드는 다음과 같다.메소드설명.siblings()선택한 요소의 형제(sibling) 요소 중에서 지정한 선택자에 해당하는 요소를 모두 선택한다..next()선택한 요소의 바로 다음에 위치한 형제 요소를 선택한다..nextAll()선택한 요소의 다음에 위치한 형제 요소를 모두 선택한다..nextUntil()선택한 요소의 형제 요소 중에서 지정한 선택자에 해당하는 요소 바로 이전까지의 요소를 모두 선택한다..prev()선택한 요소의 바로 이전에 위치한 형제 요소를 선택한다..prevAll()선택한 요소의 이전에 위치한 형제 요소를 모두 선택한다..prevUntil()선택한 요..

하위(descendant:자손) 요소의 탐색DOM 트리에서 특정 요소의 자손(descendant) 요소를 탐색하기 위한 메소드는 다음과 같다.메소드설명.children()선택한 요소의 자식(child) 요소를 모두 선택한다..find()선택한 요소의 자손(descendant) 요소 중에서 전달받은 선택자에 해당하는 요소를 모두 선택한다..children() 메소드.children() 메소드는 선택한 요소의 자식(child) 요소를 모두 선택한다. 이때, 선택자를 인수로 전달하여, 전달받은 선택자에 해당하는 자식 요소만을 선택할 수도 있다.아래와 같이 HTML 요소가 있을 때,div (할아버지) ul (부모) li (자식) span (손자) 요소의 자식 요소를 모두 선택하고, 해당 요소의 CSS 스타일을 ..

트리 탐색(tree traversing)트리 탐색(tree traversing)이란 특정 요소로부터 다른 요소들과의 관계를 통해 선택하길 원하는 요소까지 DOM 트리를 검색해 나아가는 과정을 의미한다.이러한 트리 탐색은 다음과 같이 세 영역으로 나눌 수 있다.상위(ancestor) 요소 탐색하위(descendant) 요소 탐색형제(sibling) 요소 탐색 상위(ancestor:조상) 요소의 탐색DOM 트리에서 특정 요소의 부모(parent) 요소를 포함한 상위의 요소를 탐색하기 위한 메소드는 다음과 같다.메소드설명.parent()선택한 요소의 부모(parent) 요소를 선택한다..parents()선택한 요소의 상위(ancestor) 요소를 모두 선택한다..parentsUntil()선택한 요소의 상위 요..

요소의 삭제다음 메소드를 사용하면 선택한 요소나 콘텐츠를 삭제할 수 있다.메소드설명.remove()선택한 요소를 DOM 트리에서 삭제한다. 삭제된 요소와 연관된 jQuery 데이터나 이벤트도 같이 삭제된다.detach()선택한 요소를 DOM 트리에서 삭제한다. (삭제된 요소와 연관된 jQuery 데이터나 이벤트는 유지된다..empty()선택한 요소의 자식 요소를 모두 삭제한다..unwrap()선택한 요소의 부모 요소를 삭제한다..remove() 메소드.remove() 메소드는 선택한 HTML 요소를 DOM 트리에서 삭제한다. 이때 삭제되는 요소와 연관된 jQuery 데이터나 이벤트도 모두 함께 삭제된다.아래와 같이 HTML 요소가 있을 때,안녕하세요. devkuma입니다. 반갑습니다. ` 요소 중에 id..

요소의 대체다음 메소드를 사용하면 선택한 요소나 콘텐츠를 지정된 요소나 콘텐츠로 대체할 수 있다.메소드설명.replaceAll()선택한 요소를 지정된 요소로 대체한다..replaceWith()선택한 모든 요소를 지정된 요소로 대체한다..replaceAll() 메소드.replaceAll() 메소드는 선택한 요소를 지정된 요소로 대체한다. 이 메소드는 인수로 선택자나 jQuery 객체, HTML DOM 요소, 배열 등을 전달받을 수 있다.$(source).replaceWith(target); 아래와 같이 HTML 요소가 있을 때,안녕하세요. 반갑습니다. 요소를 생성해서 다른 요소를 그 요소로 대체할 수 있다.$("devkuma입니다.").replaceAll("p"); 또는 객체를 다른 요소를 그 객체의 요소..