jQuery 개발자 수업 69일차(2) - Effect, HTML 조작

1. Effect

2. HTML 조작

---

1. Effect

[ jQuery Effect Function ]

- CSS 애니메이션(transition, animate) 조작

  1) 요소의 표시와 숨김 메소드

메소드명	설명
hide(time)	선택한 요소를 숨긴다.
show(time)	선택한 요소를 나타낸다.
toggle(time)	선택한 요소를 숨길 수 있으며 나타낼 수 있다.
* 인자값(time)에는 'slow', 'fast', 시간(s)을 넣을 수 있다.

See the Pen event 예제1 by yhyuk (@yhyuk) on CodePen.

 

  2) 요소의 표시와 숨김 메소드 

메소드명	설명
fadeOut(time)	선택한 요소를 숨긴다.
fadeIn(time)	선택한 요소를 나타낸다.
fadeToggle(time)	선택한 요소를 숨길 수 있으며 나타낼 수 있다.
* 인자값(time)에는 'slow', 'fast', 시간(s)을 넣을 수 있다.

See the Pen by yhyuk (@yhyuk) on CodePen.

 

  3) 요소의 표시와 숨김 메소드 

메소드명	설명
animate( { }, time )	선택한 요소를 숨긴다.
* 인자값(time)에는 'slow', 'fast', 시간(s)을 넣을 수 있다.

See the Pen event 예제3 by yhyuk (@yhyuk) on CodePen.

 

2. HTML 조작

[ 컨텐츠 조작 ]

메소드명	설명
text( )  , text( content )	innerText와 동일하며, 입력한 값을 모두 반환한다.
html( ) , html( content )	innerHTML와 동일하다. (태그 적용 가능)
append( )	선택한 요소의 내용 맨 뒤에 Content를 추가한다.
prepend( )	선택한 요소의 내용 맨 앞에 Content를 추가한다.
* 인자값이 없으면 읽기(getter), 있으면 쓰기(setter) 기능을 한다.

  1) text() 

$('#box').text('test입니다!');

 

  2) html()

$('#box').html('<b>test 입니다!</b>');

  

  3) append(), prepend()

// append: 요소의 맨 뒤에 추가
$('#box').append('<input type="text">');

// prepend: 요소의 맨 앞에 추가
$('#box').prepend('<input type="text">');

 

[ 속성 조작 ]

메소드명	설명
attr()	속성의 값을 가져오거나 속성을 추가하는 메소드이다.
attr( attributename ) : 읽기 attr( attributename , value ) : 쓰기

// href태그의 링크 주소를 가져온다.
$('#link').attr('href');


// href태그의 링크가 naver로 변경되며, title과 target 속성이 추가된다.
$('#link').atter({
    href: 'http://naver.com',
    title: '네이버',
    target: '_blank'
});

 

[ CSS 조작 ]

// 표기방법 1
$('#box').css('width', '100px')
         .css('height', '100px')
         .css('border', '10px solid black');

// 표기방법 2
$('#box').css({
    width: '100px',
    height: '100px',
    border: '10px solid black'
});