[제이쿼리] 제이쿼리 명령어

1.조건 명령어

-$(document).ready(); 문서가 준비되면 ()를 실행

-$('a').click(); a를 클릭하면 ()를 실행

-$('a').hover(); a에 마우스를 hover하면 ()를 실행

 (*function을 ,로 두개 사용하는 경우 마우스 진입, 마우스 이탈의 효과를 개별로 지정 가능하다)

-$('a').on('scroll',function(){}); 스크롤 이벤트가 발생하면 함수(function)를 실행

-$(window).resize(); 창 크기가 조절되면 ()를 실행

 

2.선택 명령어

명령어	내용
$(this).parent()	대상의 부모요소를 선택
$(this).next()	대상 다음의 형제요소를 선택
$(this).prev()	대상 이전의 형제요소를 선택
$(this).siblings()	대상을 제외한 나머지 형제요소들을 선택
$(this).last()	대상의 마지막 요소를 선택
$('li').not(':eq(0),:eq(2)')	첫번째(0)와 3번째(2)를 제외한 li를 선택
$(this).children('p')	대상의 자식요소 중 p요소를 선택
$(this).attr('src')	대상의 src 속성을 선택
$('li:lt(2)')	2보다 낮은 순서의 li (==0,1)를 선택
$('li:eq(3)')	3번째 순서의 li (==2)를 선택
$('li:gt(3)')	3보다 높은 순서의 li (==4~)들을 선택
$('li:contains("표준")')	"표준"이라는 단어를 포함한 li를 선택
$('li').has('ul')	'ul'을 포함하고 있는 li를 선택
$(this).clone()	대상을 복제
$('li:first a')	첫번째 li의 a를 선택
$(window).width()	창 가로사이즈 (내부 너비)
$(window).height()	창 세로사이즈 (내부 높이)
$(window).innerWidth()	뷰포트(viewport) 너비 (컨텐츠 영역)을 픽셀로 반환, 스크롤바 포함
$(window).innerHeight()	뷰포트(viewport) 높이 (컨텐츠 영역)을 픽셀로 반환, 스크롤바 포함
$(window).outerWidth()	너비를 픽셀로 반환, 모든 인터페이스(툴바,스크롤바)를 포함
$(window).outerHeight()	높이를 픽셀로 반환, 모든 인터페이스(툴바,스크롤바)를 포함
$(window).scrollTop()	창 수직 스크롤 위치
$(window).scrollHeight	창 총 높이값
$('li:not(:first)')	첫번째 li를 제외한 나머지 li를 선택
$(this).index()	대상의 순서를 가져옴 (0부터 시작)
Math.abs()	절대값을 구하는 함수
push()	배열의 가장 마지막에서부터 값을 추가
unshift()	배열의 가장 앞에서부터 값을 추가
pop()	배열의 가장 마지막 값을 삭제
shift()	배열의 가장 앞에 값을 삭제
splice(1,1)	인덱스 1부터 1개 삭제
splice(3)	인덱스 3부터 뒤로 전부 다 삭제
splice(1,1,'grape','berry')	1인덱스부터 1개 삭제하고, 그 자리에 'grape','berry' 추가
a.concat(b)	a에 b 배열을 연결한다(합친다).
$('a').offset().top	a의 top위치를 가져옴
a.find('p')	a의 하위요소중에 p를 선택

 

*가상선택자(after,befor)의 경우에는 제이쿼리로 직접적인 수정이 불가능하다.
대신 가상선택자 앞에 클래스명을 주어서 css 설정을 해주고(div.test::after), 

해당 css를 toggleClass로 on/off하여 사용 가능하다.

 

3.실행 명령어

- css 속성 변경

 

script

        $('.wrap').css('background-color','blue');

            // .wrap의 배경색을 파란색으로 변경

 

 

-css 다중 속성 변경

 

script

        $('.wrap').css({'background-color':'blue','color':'red'});

            // .wrap의 배경색은 파란색으로, 폰트색은 빨간색으로 변경

 

 

-class (add / remove / toggle)

 

script

        $('.wrap').addClass('box01');

            // .wrap에 'box01' 클래스 추가

        $('.wrap').removeClass('box02');

            // .wrap에 'box02' 클래스 제거

        $('.wrap').toggleClass('box03');

            // .wrap에 'box03' 클래스 추가/제거

 

 

-slide (Down / Up / Toggle)

 

script

        $('.wrap').slideUp(500);

            // .wrap을 0.5초에 걸쳐 접기

        $('.wrap').slideDown(500);

            // .wrap을 0.5초에 걸쳐 펼치기

        $('.wrap').slideToggle(500);

            // .wrap을 0.5초에 걸쳐 접기/펼치기

 

 

-show / hide / toggle

 

script

        $('.wrap').show(500);

            // .wrap을 0.5초에 걸쳐 보이기

        $('.wrap').hide(500);

            // .wrap을 0.5초에 걸쳐 숨기기

        $('.wrap').toggle(500);

            // .wrap을 0.5초에 걸쳐 보이기/숨기기

 

 

-prepend / append

 

script

            $('.wrap').prepend('<div>내용</div>');

                // .wrap 안쪽 맨 앞에 <div> 추가

            $('.wrap').append('<div>내용</div>');

                // .wrap 안쪽 맨 뒤에 <div> 추가

 

 

-before / after

 

script

            $('.wrap').before('<div>내용</div>');

                // .wrap 바깥쪽 바로 앞에 <div> 추가

            $('.wrap').after('<div>내용</div>');

                // .wrap 바깥쪽 바로 뒤에 <div> 추가

 

 

-wrap

 

script

            $('.wrap02').wrap('<div class="box01"></div>');

                // .wrap02를 .box01로 감싼다

 

 

-fade (In / Out / Toggle)

 

script

            $('.wrap').fadeIn(500);

                // .wrap을 0.5초만에 서서히 나타나게 하시오

            $('.wrap').fadeOut(500);

                // .wrap을 0.5초만에 서서히 사라지게 하시오

            $('.wrap').fadeToggle(500);

                // .wrap을 0.5초만에 서서히 나타나게/사라지게 하시오

 

 

-prependTo / appendTo

 

 

script

            $('.wrap div').prependTo('.wrap02');

                // .wrap div를 .wrap02 안쪽 맨 앞으로 이동

            $('.wrap div').appendTo('.wrap02');

                // .wrap div를 .wrap02 안쪽 맨 뒤로 이동

 

 

-setTimeout

 

script

        $(document).ready(function(){

            setTimeout(function(){

                $('.wrap').addClass('box01');

            },500);

                // 0.5초뒤, .wrap에 box01 클래스 추가

        });

 

 

 

-animate

 

script

                if($(window).scrollTop()>=a1){

                    $("div#area1 h2").stop().animate({"left":0},2000);

                    // h2 기존 animation을 멈추고 left:0으로 2초동안 실행

                }