donaricano-btn

표준 요소를 jQuery 객체로 변환- $()


1. $() 의미

- $()함수를 이용하여 표준 요소jQuery 객체로 변환이 가능하다


1) 배경색을 변경 예제

$(document.body).css('background-color', 'Red');

- document.body : 브라우저 표준 객체

- $() 이용하여 jquery 함수를 이용 할 수 있다


2) border-color 변경

- 마우스가 인 아웃 되면 테두리 색이 변경된다


- 이벤트 리스너의 $(this) : 이벤트 발생처에 엑세스 한다. $(this) == $('#square') 같다

- 일반 this: this는 표준 요소 객체를 의미. jquery에 엑세스 하기 위해 $()함수로 this를 랩핑해야 한다 

블로그 이미지

리딩리드

,
donaricano-btn

요소 내용 삭제/비우기 - remove(), empty()


1. remove()

- 페이지 안의 요소를 삭제 한다

- 변경 전

- 변경 후



2. empty()

- 요소 삭제가 아닌 요소 안의 내용이 삭제된다

- 변경 전

- 변경 후

 


블로그 이미지

리딩리드

,
donaricano-btn

기존의 요소 변경 - replaceAll(), replaceWith()


1. replaceWith()

- repaceWith()의 인수에 태그 문자열이나 jQuery객체를 지정할 수 있다

1) 예

- 변경 전

- 변경 후



블로그 이미지

리딩리드

,
donaricano-btn

요소 삽입 - insertBefore(), insertAfter(), prependTo(), appendTo()


1. insertBefore(), insertAfter(), prependTo(), appendTo()

1) 기본 형태

- $('삽입요소').method('삽입셀렉터')

- '<' 로 시작하고 '>'로 끝나야한다

- <br/>은 안됨

2) 메소드

- insertBefore(): 요소 삽입할 곳 에 추가

- insertAfter() : 요소 삽입할 곳 에 추가

- prependTo() : 요소를 삽입할 곳의 자식요소 앞부분추가

- appendTo() : 요소를 삽입할 곳의 자식요소 끝에 추가

3) 예제


2. before(), after(), prepend(), append()

1) 기본형태

- $('삽입 셀렉터').method('삽입 요소')

- 위의 함수와 비슷하지만 위치만 바뀌게 된다

2) 예제

- 결과는 같다


3. 요소를 이동하라

- 위의 함수를 이용하여 요소를 이동할 수 있다

1) 예제

변경 전

변경 후 

$('#cool').insertBefore('#list');



블로그 이미지

리딩리드

,