jQuery 라이브러리 간단 정리

문서 객체 사용

script 태그 안에 이벤트를 활용 $(document).ready(function(){ }); // head 태그 안에 사용할 경우 

 

문서 객체 선택

$('선택자') 메소드로 문서 객체 선택

 

글자 조작

HTML 글자

접근 -  $(선택자).html() :선택자로 선택된 태그 내부의 HTML 태그를 반환 (한 개만 반환)

수정 -  $(선택자).html(HTML코드) :선택자로 선택된 태그 내부의 HTML 태그를 HTML코드로 변경

ex) $('h1:nth-child(2)').html('<a href="#">html()</a>‘); // html() 출력

태그 글자

접근 - $(선택자).text() :선택자로 선택된 모든 태그 내부의 글자를 결합하여 반환

수정 - $(선택자).text(글자) :선택자로 선택된 태그 내부의 글자를 글자로 변경

ex) $('h1:nth-child(1)').text('<a href="#">text()</a>‘); // <a href="#">text()</a> 출력 

 

스타일 조작

$(선택자).css(스타일속성): 선택자로 선택된 태그에서 스타일 속성의 값을 반환

ex) console.log($('.box').css('backgroundColor')) // bkacground-color도 사용 가능

$(선택자).css(스타일속성, 속성값): 선택자로 선택된 태그에서 스타일 속성의 값을 속성 값으로 변경

ex) $('.box').css('float', 'left');

- 선택된 태그의 여러 스타일을 변경할 경우

ex) $('.box').css({ float: 'left' , margin:10, width:100});

//

$('.box').each(function(index, item){ // 클래스 중복(index는 키, item은 값)

     console.log($(item).css('color’))

     console.log($(item).css('float’))

});

 

속성 조작

$(선택자).attr(속성): 선택자로 선택된 태그에서 속성의 값을 반환

ex) var src = $('script').attr('str');

cf. 동일한 선택자가 여러 개 있을 경우 제일 첫 번째 속성 값을 반환

$(선택자).attr(속성,속성값): 선택자로 선택된 태그의 속성을 속성 값으로 변경

ex) $('img').attr('alt', 'jQuery 라이브러리를 사용한 속성 지정‘);

cf. 동일한 선택자가 여러 개 있을 경우 전부 적용, 속성 값에는 함수도 사용할 수 있는데 return 하는 값으로 적용

- 선택된 태그의 여러 속성 값을 변경할 경우 

ex) $('img').attr({ alt: '~~~', src: '~~~', width: 100 });

 

클래스 조작

- addClass(클래스) : 클래스 추가

- rermoveClass(클래스) : 클래스 제거

- toggleClass(클래스) : 클래스 전환

 

이벤트 연결

1. 이벤트 이름 메서드를 활용한 연결 $(선택자).method(function (event){} );

ex) $('h1').click(function () {alert('클릭!');});

2. on() 메서드를 활용한 이벤트 연결 $(선택자).on(eventName, eventHandler);

ex) $('#box’).on('mouseleave', function () {$(this).css('background', 'orange');});

 

이벤트 객체 받기

$(선택자).method(function(event){ });

ex)

$('a').click(function (event) {

     alert('click’);

     event.preventDefault();

});

 

시각 효과 메서드

- 객체를 속도에 맞게 효과를 넣어서 보여줌

중지: stop() 메서드로 시각 효과 중지 기능 $('h1').stop(clearQueue, goToEnd);

clearQueue 매개변수

- false (기본값): 현재 실행 중인 효과만 멈춤

- true: 예약된 모든 효과를 제거

goToEnd 매개변수

- true: 효과 완료 후 모습으로 표시

- false: 현 상태로 유지

 

애니메이션 메서드

$(선택자).animate(속성 객체);

$(선택자).animate(속성 객체, 시간);

ex) $('#box’).animate({width: 300, opacity: 0.5}, 500);});

$(선택자).animate(속성 객체, 시간, 콜백 함수);

 

애니메이션 예약

- animate() 혹은 delay() 메서드 사용

- 차례대로 실행

ex) $(선택자).animate({}).delay(1000).animate({});

setInterval(function () {

      $('#box').animate({ width: 200}, 1000).delay(1000).animate({width: 100,height: 100},1000);

}, 3000);

 

문서 객체 생성과 추가

$(대상).append(객체): 객체를 대상(in)의 뒷부분에 추가

$(대상).prepend(객체): 객체를 대상(in)의 앞부분에 추가

$(대상).after(객체): 객체를 대상(out)의 뒤쪽에 추가

$(대상).before(객체): 객체를 대상(out)의 앞쪽에 추가

$(객체).prependTo(대상): 객체를 대상(in)의 앞부분에 추가

$(객체)appendTo(대상):　객체를 대상(in)의 뒷부분에 추가

 

appendTo는 뒤에 있는 객체에 앞에 있는 내용을 붙이겠다는 의미이고 append는 앞에 있는 객체에 뒤에 있는 내용을 붙이겠다는 뜻