참고1 | 참고2 | 참고3 | 참고4
- jQuery연결_방법+
- 다운로드방법 https://jquery.com/
- CDN(Content Delivery Network) https://releases.jquery.com/
- 요소의_선택+
- CSS_선택자
클릭하세요!! 항목1 항목2 항목3
- jQuery_선택자
클릭하세요!! 항목1 항목2 항목3
- 선택된 요소에 접근
⊙ getter메소드와 setter메소드
var text = $('#text').html() //getter Method
$("#select03>span:eq(2)").siblings().html(text); //setter Method클릭하세요!! 변경문자 항목1입니다. 항목2입니다. 항목3입니다.
⊙ 메서드 체이닝 : 여러개의 메소드가 연속적으로 호출되는 것.
$("#select04").find("span").eq(1).css({"color":"red","font-weight":"bold"});
select04 아이디 자손중 span선택자를 모두 선택한 후, 그중에서 두 번째 요소의 글자색을 변경클릭하세요 항목1 항목2 항목3
⊙ 메서드 체이닝 : end() 현재 선택 바로 이전에 선택했던 요소의 집합을 다시 선택
$("#select05").find('span').eq(1).css({"color":"red"}).end().eq(2).css({"background-color":"cyan"});
select05 아이디 자손중 span선택자를 모두 선택한 후, 그중에서 두 번째 요소의 글자색을 빨강색으로 변경하고, 현재 선택된 두 번째 요소 바로 이전에 선택된 span선택자중 세 번째 요소의 배경색을 cyan으로 변경.클릭하세요 항목1 항목2 항목3
⊙ width(), height() : 선택된 요소의 너비와 높이를 반환 또는 설정하는 메소드
클릭하세요
⊙ attr() : 선택된 요소의 속성값을 가져오거나 설정하는 메소드
.attr('속성') : 속성값을 가져올때
.attr('속성','속성값') : 속성값을 설정할때
.attr({'속성':'속성값','속성':'속성값'}) : 여러개의 속성값을 설정할때.
클릭하세요.
.each(), .attr(), .join(), eval(), .off()
클릭하세요 이송현 신진홍 이나홍 이원홍 이좌홍
- CSS_선택자
- 요소의 조작+
- 요소의 추가
.append() : 선택한 요소의 자손 요소들중 마지막 요소에 새로운 요소나 콘텐츠 추가
클릭(추가) 클릭(제거)항목 항목 항목 - 요소의 추가
.prepend() : 선택한 요소의 자손 요소들중 제일 처음 요소에 새로운 요소나 콘텐츠 추가
클릭(추가) 클릭(제거)항목 항목 항목 - 요소의 추가
.appendTo() : 선택한 요소를 해당 요소의 자손 요소들중 마지막에 삽입(위치이동)
클릭(위치이동) 클릭(원위치)항목1 항목2 항목3 - 요소의 추가
.prependTo() : 선택한 요소를 해당 요소의 자손 요소들중 맨앞에 삽입(위치이동)
클릭(위치이동) 클릭(원위치)항목1 항목2 항목3 - 요소의 복제 및 삭제
.clone() : 선택한 요소를 복사.
클릭(아이디 클론)항목1 항목2 항목3
클릭(클래스 클론)항목1 항목2 항목3
- 요소의 추가
- 요소의 탐색+
- 조상 요소의 탐색+
.parent() : 선택한 요소의 부모 요소를 선택.
클릭(적용) 클릭(해제) 항목1 항목2 항목3.parents() : 선택한 요소의 조상 요소를 모두 선택.
클릭(적용) 클릭(해제) 항목1 항목2 항목3.parentsUntil() : 선택한 요소의 조상 요소들중 전달 받은 요소 바로전 조상까지만 선택. 생략하면 parents()와 동일
클릭(적용) 클릭(해제) 항목1 항목2 항목3.closest() : 자신을 포함한 요소 중에서 전달받은 선택자에 해당하는 요소의 집합에서 가장 첫 번째 요소를 선택.
클릭(적용) 클릭(해제) 항목1 항목2 항목3 - 형제 요소의 탐색+
.siblings() : 선택한 요소의 형제 요소중 지정한 선택자에 해당되는 모든 선택자를 선택.
클릭(적용) 클릭(해제) 항목1 항목2 항목3 항목4 항목5.next() : 선택된 현재요소 바로 다음의 형제 요소를 선택
클릭(적용) 클릭(해제) 항목1 현재요소 항목3 항목4 항목5.nextAll() : 선택된 현재요소 다음에 위치한 모든 형제 요소를 선택
클릭(적용) 클릭(해제) 항목1 현재요소 항목3 항목4 항목5.nextUntil() : 선택된 현재요소 다음에 위치한 모든 형제들중 지정한 요소 바로전까지의 요소를 선택
클릭(적용) 클릭(해제) 항목1 현재요소 항목3 항목4 항목5.prev() : 선택된 현재요소의 형제 요소들중 바로 이전 요소를 선택. 바로 이전 바로전까지의 요소를 선택
클릭(적용) 클릭(해제) 항목1 항목2 항목3 현재요소 항목5.prevAll() : 선택된 현재요소의 형제 요소들중 전(왼쪽)에 위치한 모든 요소를 선태
클릭(적용) 클릭(해제) 항목1 항목2 항목3 현재요소 항목5.prevUtil(): 선택된 현재요소의 형제요소들중 전(왼쪽)에 위치한 모든요소들중 지정된요소 이전까지 모든 요소선택
클릭(적용) 클릭(해제) 항목1 항목2 항목3 현재요소 항목5 - 자손 요소의 탐색+
.children() : 선택한 요소의 자식 요소를 모두 선택.
클릭(적용) 클릭(해제) 항목1 항목2 항목3 항목4 항목5.find() : 선택한 요소의 자손 요소중에서 전달받은 선택자에 해당하는 자손 요소를 모두 선택.
이때 전달받은 선택자가 "*"이라면 모든 자손을 선택하게 된다.
클릭(적용) 클릭(해제) 항목1 항목2 항목3 항목4 항목5 - 기타 탐색 메소드+
.add() : 선택한 요소의 집합에 전달받은 요소를 추가.
클릭(적용) 클릭(해제) 항목1 항목2 항목3 항목4 항목5.each() : 선택한 요소 집합의 각 요소에 콜백 함수를 실행.
클릭(적용 및 해제) 항목1 항목2 항목3 항목4 항목5.end() : 선택한 요소 바로전 선택 집합의 요소를 선택.
클릭(적용 및 해제) 항목1 항목2 항목3 항목4 항목5.offsetParent() : 선택한 요소를 위치시킬때 기준으로 사용된 조상요소를 선택.
클릭(확인하기)1.2.3.4.이 박스의 기준이 된 조상을 찾아 주세요.
참고 참고.contents() : 선택한 요소의 자식 요소에 대한 텍스트 및 주석을 모두 선택.
클릭(문자영역에 테두리 적용 확인하기)var type = node.nodeType;
nodeType은 node의 type을 상수로 리턴.리턴상수 타입 예시 1 element <p><div> 3 text korea
- 필터링 메소드+
.first() .last() : 선택한 요소들중 제일 첫 번째 요소와 마지막 요소
클릭(first()적용 및 해제) 클릭(last()적용 및 해제) 항목1 항목2 항목3 항목4.eq() : 선택한 요소들중 전달받은 인덱스에 해당하는 요소를 선택(인덱스는 0부터...)
클릭(.eq(2)적용 및 해제) 항목1 항목2 항목3 항목4.filter() : 선택한 요소들중 전달받은 선택자에 해당하거나, 함수 호출의 결과가 참(true)인 요소를 모두 선택.
이 메소드는 인수로 선택자나 제이쿼리 객체, HTML DOM 요소등을 전달받을 수 있다. 또한, 요소 집합의 각 요소를 검사할 수 있는 함수를 전달할 수도 있다.
클릭( .filter(':odd') 적용 및 해제 ) 클릭( .filter(function(index)) 적용 및 해제 ) 코끼리 잉어 호랑이 붕어.not() : 선택된 요소들이 아닌 모든것. .filter()와 반대 개념.
클릭( .not() 적용 및 해제 ) 코끼리 잉어 호랑이 붕어 독수리 참새.has() : 선택된 요소들중 has 괄호 안에 있는 요소를 자손 요소로 포함 하고 있는 요소를 선택 .
▶클릭( .has() 적용 및 해제 )- 항목1
- 항목2
- 항목3
- 항목4 항목4-1연산홍
.is() : 선택된 요소들중 is 괄호 안에 있는 선택자에 해당하는 것이 하나라도 있으면 참을 반환 .
▶클릭( .is() 적용 및 해제 )- 항목1
- 항목2
- id가 is_sample인 요소의 형제 요소에는 1개 이상의 이미지가 있습니다.
.map() : 선택된 요소들의 각 요소마다 콜백함수를 실행하여, 제이쿼리객체를 반환.
▶클릭( .map() 적용 및 해제 )- 난초
- 연산홍
- 사랑초
.slice() : 선택된 요소들중에서 전달받은 인덱스 범위에 해당하는 요소만을 선택
▶클릭( .slice(1) : 1~끝까지 ) ▶클릭( .slice(1,-1) : 1~마지막 바로 전까지 ) ▶클릭(해제..)- 항목0
- 항목1
- 항목2
- 항목3
- 요소의 영역+
- 요소의 크기
요소크기에 대한 정의 :
.width() .height() : 요소의 값
.innerWidth() .innerHeight() : 요소의 값 + 패딩(padding)의 값
.outerWidth() .outerHeight() : 요소의 값 + 패딩(padding)의 값 + 테두리(border)의 값
.outerWidth(true) .outerHeight(true) : 요소의 값 + 패딩(padding)의 값 + 테두리(border)의 크기 + 마진(margin)의 값
.width() .height() : 요소의 너비와 높이 값 반환
▶클릭( .width() .height() 적용 )
- 요소의 위치
.offset() : 선택한 요소 집합의 첫 번째 요소의 위치를 HTML문서를 기준으로 반환
▶클릭( .offset() 적용 )클릭해 보세요
(현재 좌표 표시)클릭해 보세요
(제시된 위치로 이동)
.offset({top:9200,left:200});.position() : 선택한 요소가 웹페이지에 위치할때 기준이된 부모(offsetParent)로 부터의 위치값(상대값)을 반환.
▶클릭( .position() 적용 )- ↑여기가 위치 설정의 기준
클릭해 보세요
(현재 좌표 표시)↑여기가 위치 설정의 기준
.offsetParent() : 선택한 요소의 기준이 되는 조상 요소 선택.
▶클릭( .offsetParent() 적용 )클릭해 보세요
(위치설정의 기준표시)
(현재 좌표 표시)
- 스타일 설정+
- 프로퍼티 설정
클릭하세요!! 항목1 항목2 항목3
- 클래스 설정
클릭하세요!! 항목1 항목2 항목3
- 이벤트 처리+
- 이벤트의 개념
클릭하세요!! 항목1 항목2 항목3
- 이벤트의 처리
클릭하세요!! 항목1 항목2 항목3
- 이벤트의 위임
클릭하세요!! 항목1 항목2 항목3
- 이벤트의 메소드
클릭하세요!! 항목1 항목2 항목3
- 이펙트 효과+
- 요소의 포시와 숨김
클릭하세요!! 항목1 항목2 항목3
- 페이드 효과
클릭하세요!! 항목1 항목2 항목3
- 슬라이드 효과
클릭하세요!! 항목1 항목2 항목3
- 이펙트 효과의 제어
클릭하세요!! 항목1 항목2 항목3
- jquery.fx객체
클릭하세요!! 항목1 항목2 항목3
- 사용자 정의 이벤트
클릭하세요!! 항목1 항목2 항목3
- 필터링 메소드+
- 조상 요소의 탐색+