jquery (2)스타일변경

해당 요소의 각도 값의 변화 주기

$(function(){
	$('#typo .inner').css('transform', 'rotate(10deg)');
});

#typo와. inner 두 개의 요소에 스타일 변화주기. #typo와. inner사이에 띄어쓰기가 들어가 있다.

rotate는 회전, 10deg와 degree 10.

 

 

투명하게 만들기

$(function(){
	$('.page-main > div:nth-child(1) .inner').css('opacity', 0.5);
});

.page-main안의 자식 태그 중 두 번째(0부터 시작이므로 1이면 두 번째)의 투명도를 0.5로 지정.

 

 

css() 메서드를 사용하여 한 개의 요소에 여러 개의 변화를 주는 코드

$(function(){
    $('#typo').css('font-size', '50px');
    $('#typo').css('background-color', '#ae5e9b');
    $('#typo').css('color', '#ebc000');
});

폰트 사이즈, 배경색, 폰트 색을 변경하기 위해 위와 같이 작성 가능하지만 다음과 같이 좀 더 심플하게도 작성 가능하다.

 

$(function(){
    $('#typo').css({
        'font-size': '50px',
    	'background-color': '#ae5e9b',
    	'color': '#ebc000'
    )}
});

홑 따옴표를 떼고 작성할 수도 있다. 주의해야 할 것은 -도 삭제하고 카멜 케이스로 작성해야 한다

$(function(){
    $('#typo').css({
        fontSize: '50px',
    	backgroundColor: '#ae5e9b',
    	color: '#ebc000'
    )}
});

 

 

타이밍 컨트롤하기

다음과 같은 동작이 일어났을 때 특정 요소에 변화를 주는 것도 가능하다.

• 마우스 커서를 위에 놓았을 경우
• 위에 있던 마우스 커서가 다른 곳으로 이동한 경우
• 클릭했을 경우
• 마우스를 움직였을 경우
• 윈도 사이즈가 변경한 경우
• 스크롤했을 경우 

마우스 커서를 특정 요소 위에 위치했을 경우

$(function(){
    $('#typo').on('mouseover', function(){
        $('#typo').css('color', '#ebc000');
    });
});

 

메서드 on의 구문

on('이벤트타입', 이벤트핸들러)

 

이벤트 타입의 종류

이벤트타입	이벤트타이밍
mouseover	요소 위에 마우스 위치
mouseout	요소에서 벗어남
mousedown	요소 위에서 버튼 클릭
mouseup	요소 위의 버튼에서 벗어남
mousemove	요소 위에서 커서가 움직임
click	요소를 클릭
dbclick	요소를 더블 클릭
keydown	요소 위에 마우스를 위치 상태에서 키보드 키를 눌렀을 때
keyup	요소 위에 마우스를 위치 상태에서 키보드 키가 돌아왔을 때
focus	요소 위에 포커스가 맞은 경우
blur	focus와 반대
checnge	입력내용이 바뀐 경우
resize	요소의 사이즈가 변경된 경우
scroll	요소가 스크롤된 경우

 

마우스 클릭 시

$(function(){
    $('#typo').on('click', function(){
        $('#typo').css('color', '#ebc000');
    });
});

 

header요소의 이벤트 추가

$(function(){
    $('#typo').on('mouseover', function(){
        $('#typo').css('background-color', '#ae5e9b');
        $('header').css('color', '#ae5e9b');
    });
});

 

on메서드에 여러 개의 이벤트 지정

$(function(){
    $('#typo').on('mouseover', function(){
        $('#typo').css({
        	color: '#ebs000',
        	backgroundColor: '#ae5e9b'
        )};
    });
    $('#typo').on('mouseout', function(){
        $('#typo').css({
        	color: '',
        	backgroundColor: ''
        )};
    });
});

 

체인 메서드

$(function(){
    $('#typo').on('mouseover', function(){
        $('#typo').css({
        	color: '#ebs000',
        	backgroundColor: '#ae5e9b'
        )};
    })
    .on('mouseout', function(){
        $('#typo').css({
        	color: '',
        	backgroundColor: ''
        )};
    });
});