21.01.08

1.属性のインポート

- object는 속성을 갖는다 (멤버라고도 한다.)
- Dom객체 에서도 객체는 갖는다.
- J-Query에서는 JS와 마찬가지로 이 속성을 다룰 수 있다.

var attr = $('input[type="text"]').attr('type');
var val = $('input[type="text"]').val();
var txt = $('p').text();
var html = $('p').html();
$('#txt').text('<h1>HTML과 TEXT의 차이</h1>');
$('#html').html('<h1>HTML과 TEXT의 차이</h1>');

- $(셀렉터).attr('속성'); : 해당요소의 속성을 가져온다.
- $(셀렉터).val(); : 해당 요소의 value를 가져온다.
- $(셀렉터).text(); : 태그 사이 값을 가져올 때 html태그 무시.
- $(셀렉터).html(); : 태그 사이 값을 가져올때 html태그도 가져옴.
- $(셀렉터).text("태그포함 문자열"); : html 태그도 문자로 인식해서 가져옴.
- $(셀렉터).html("태그포함 문자열"); : html 태그를 인식해서 효과로 적용.

2.属性のインポートと変更

 $('#inc').click(function(){
	val++;
	$('input[type="range"]').val(val);
	$('#msg').html(val);
});
$('#desc').click(function(){
    val--;
    $('input[type="range"]').val(val);
    $('#msg').html(val);
});

- RANGE의 값이 증가나 감소버튼을 누를 때마다 1씩 증가 또는 감소되도록!
- 클릭시에 1씩 증가 또는 감소를 시키고 그 값을 range의 val와 msg의 html값에 넣어준다.

$('input[type="range"]').mousedown(function(){
	//마우스가 눌렸을 때 이벤트 생성
    $(this).on('mousemove',function(){
    	var point = $(this).val();
        val = point; //증가감소랑 연동되도록
        $('#msg').html(point);
    });
});
$('input[type="range"]').mouseup(function(){
	//마우스 뗐을 때 이벤트 삭제
    $(this).off('mousemove')
});

- range의 바를 움직일 때 그 값이 적용되도록!
- 바를 움직일 때는 마우스가 눌린 상태에서 움직이므로 mousedown 사용
- 그 아래 mousemove로 마우스 움직일때 마다 val값이 변하도록 적용
- 마우스를 뗐을 때( mouseup ) mousemove off
- 증가 감소 이벤트랑 연동 되도록 val에 point값을 넣어준다.
- val = point; 를 안해주면 mousemove로 옮기고 증가,감소를 누르면 처음 val값으로 돌아간다.

$('input[type=radio]');
$(':radio');
var $radio = $(':radio'); //셀렉터로 가져온 값이다.
$radio.click(function(){
	$('#selected').html('당신이 선택한 값 :'+$(this).val());
});

- 속성을 가져오는 방법은 80,81 둘다 사용해도 된다.
- 속성값에 $를 붙여 변수를 만들어 줄 수 있다.

 $('button').click(function(){
     $('#test3').attr('type','button');
     $('#test3').attr('onclick','alert("ok")');
     $('#test3').val("click")
     $('#test4').attr('type','password');
});

3.CSSの変更

var size = $('#ex1').css('font-size');
var color = $('#ex1').css('color');
$('#size').html(size);
$('#color').html(color);
$('button').click(function(){
	$('#ex2').css({'color':color, 'font-size':size})
});

- 버튼 클릭시에 특정요소에 CSS변경하는 법
- css 괄호 안에 중괄호를 쓰고 콜론을 사용하면 복수개를 넣어줄 수 있다.
	- ex) css('color','red')  css('font-size','16px') -> css({'color':'red' , 'font-size':'16px'})

4. addClass()

$('#add').click(function(){
	$('div').addClass('ex');
});
$('#remove').click(function(){
	$('div').removeClass('ex');
});

- $(셀렉터).addClass('클래스명') : 선택한 요소에 해당 클래스 추가( css추가할게 많은 경우 사용 )
- $(셀렉터).removeClass('클래스명') : 선택한 요소에 해당 클래스 삭제

$('#toggle').click(function(){
	$('div').toggleClass('ex')
	//누를 때마다 on과 off가 번갈아가면서 버튼에 표시
	var sw = $('div').hasClass('ex')
	if(sw == true){
		$(this).html('OFF')
    }else{
        $(this).html('ON')
    }
});

- $(셀렉터).toggleClass('클래스명') : 선택한 요소에 해당 클래스 번갈아가면서 삭제/추가
- $(셀렉터).hasClass('클래스명') : 선택한 요소에 해당 클래스가 있는지 -> true,false로 반환

5. hide&show

$('div').hover(function(){
	$('ul').show(500);
},function(){
	$('ul').hide('slow');
});

- hover를 이용해서 마우스가 올라 왔을 때 show, 벗어나면 hide 적용
- $(셀렉터).hide(speed, callback) : 해당 요소가 작아지면서 투명도를 조절하며 사라지게 하는 기능
- $(셀렉터).show(speed, callback) : 해당 요소가 커지면서 투명도를 조절하며 보이게 하는 기능
	- speed : 사라질때의 속도 (milliseconds , slow, fast 가능)
	- callback : 효과가 끝나고 실행할 기능

$('#toggle').click(function(){
	//누를 때 마다 ON/OFF 바뀌도록
	$('p').toggle(1000,function(){
    	var tog = $('#toggle').html();
        if(tog == 'OFF'){
        	$('#toggle').html('ON');
        }else{
            $('#toggle').html('OFF');
        }
     })
});

- $(셀렉터).toggle(speed, easing, callback) : hide/show 두 기능을 번갈아 가며 실행
	- easing : swing(가속), linear(평균,default)

6. Fade effect

$('#viz').click(function(){
	$('div').fadeIn('slow' , vizCheck); //요소를 만들어놓고 투명도 조절
});
$('#inviz').click(function(){
    $('div').fadeOut(1000, vizCheck);
});
$('#toogle').click(function(){
    $('div').fadeToggle('slow', vizCheck);
});
//callback함수
function vizCheck(){
	var vision = $('div').css('display');
	if(vision=='block'){
		$('#toogle').html('OFF')
    }else{
        $('#toogle').html('ON')
    }
}

- $(셀렉터).fadeIn(speed, callback) : 해당 요소를 만들어놓고 투명도를 조절하며 나타나게 하는 기능
- $(셀렉터).fadeOut(speed, callback) : 투명도를 조절하며 사라지게 하는 기능
- $(셀렉터).fadeToggle() : fadeIn+fadeOut
- show/hide와 다른 점은 show/hide는 크기가 커지거나 작아지면서 나타나거나 사라지는 것이고 fade는 크기를 만들어놓고 투명도가 조절된다.
- vizCheck()는 callback함수

//fadeTo : 어디까지 투명해 지는가
$('img').hover(function(){
	$(this).fadeTo('slow',0.2)
},function(){
	$(this).fadeTo('slow',1)
});

- $(셀렉터).fadeTo(speed, opacity, callback) : 투명도 조정
- hover를 이용해서 마우스를 올렸을때 slow로 0.2까지 투명도 조정
- 마우스를 뗐을 때 slow로 1까지 투명도 조정