21.01.11
[Slide]
$('#flip').hover(function(){
$('#p1').slideDown('slow')
},function(){
$('#p1').slideUp('slow')
});
$('#flip2').click(function(){
$('#p2').slideToggle('fast')
});
- slideUp(speed, callback) : 요소가 아래서 위로 크기가 작아지며 사라지는 효과
- slideDown(speed, callback) : 요소가 위에서 아래로 크기가 커지며 나타나는 효과
- slideToggle(speed, callback) : slideUp() + slideDown() -> 번갈아가면서 효과
- speed : milliseconds , slow, fast (나타날 때 속도)
- callback : 효과가 끝나고 실행할 기능
(위와 같은 경우 마우스를 오버를 계속하다가 뗐을 경우에도 계속 올라갔다 내려갔다 하니까
이 상황을 방지하려고 on으로 이벤트를 걸어주고 callback에 off를 걸어주는 형식으로 사용가능하다)
[Animate]
$('#right').click(function(){
//animate(*{css},*speed,easing(가속,등가속),callback)
//한번 100까지 가면 애니메이션이 안일어남
//$('#obj').animate({'left':'100px'},'slow','swing')
$('#obj').animate({'left':'+=1000'},'slow','swing');//누를때마다 증가하고싶다면
});
$('#left').click(function(){
$('#obj').animate({'left':'-=100'},'slow','swing');
});
$('#stop').click(function(){
$('#obj').stop();
});
- $('셀렉터').animate({변경할 css}, speed, easing, callback);
- easing : linear(가속) , swing(등가속)
- $('#obj').animate({'left':'100px'},'slow','swing') :
100px까지 가면 더이상 애니메이션이 안일어남
- {'left':'+=100px'} : += 혹은 -= 을 줘서 누를 때마다 증가나 감소하게 한다.
- $('셀렉터').stop(); : 진행중인 내용 정지
$('#step').click(function(){ $('#obj').animate({'left':'+=500'},'slow').animate({'top':'+=500'},'slow').animate({'left':'-=500'},'slow').animate({'top':'=500'},'slow');
});
- $('셀렉터').animate().animate().animate() -> 메서드(함수) 체이닝
:各機能が接続されているように連続して発生します.//클릭하면 obj가 그 위치로 따라오는 애니메이션 구현
$(document).click(function(evt){
$('#obj').animate({'left': evt.clientX,'top':evt.clientY},'slow','swing')
});
//마우스가 움직이면 follow가 따라오는 기능 구현
$(document).mousemove(function(evt){
//마우스무브 이벤트는 연속적으로 일어나기 때문에 애니메이션을 굳이 사용할 필요 없다.
$('#follow').css({'left': evt.clientX, 'top': evt.clientY},'fast')
});
[要素を追加]
<各追加要素の位置が異なる>
var i=1;
$('#append').click(function(){ //무언가 추가할 때 가장많이사용
i++;
$('ol').append('<li>LIST ITEM '+i+'</li>');
});
$('#ppend').click(function(){
i++;
$('ol').prepend('<li>LIST ITEM '+i+'</li>');
});
$('#aft').click(function(){
i++;
$('ol').after('<li>LIST ITEM '+i+'</li>');
});
$('#bef').click(function(){
i++;
$('ol').before('<li>LIST ITEM '+i+'</li>');
});
- $('셀렉터').append('추가내용') : 선택한 요소 내 마지막 요소에 추가
- $('셀렉터').prepend('추가내용') : 선택한 요소 내 시작점에 추가
- $('셀렉터').after('추가내용') : 선택한 요소 밖의 바로 뒷 부분에 추가
- $('셀렉터').before('추가내용') : 선택한 요소 밖의 바로 앞 부분에 추가
- 추가되는 위치 잘 확인!
$('button').click(function(){
var aVal = $('#a').val();
var bVal = $('#b').val();
var cVal = $('#c').val();
var dVal = $('#d').val();
var eVal = $('#e').val();
$('table').append('<tr><td>'+aVal+'</td><td>'+bVal+
'</td><td>'+cVal+'</td><td>'+dVal+'</td><td>'+eVal+'</td></tr>');
});
< table에 아래 열에 요소가 추가 되게 구현 >
$('button').click(function(){
var $elem = $('input[type="text"]');
var txt = "<tr>"
for(var i=0; i<$elem.length; i++){
txt +='<td>'+$elem.eq(i).val()+'</td>';
}
txt += "</tr>"
$('table').append(txt);
});
< id를 사용하지 않고 table에 아래 열에 요소가 추가 되게 구현 >
- id를 사용하지 않고 구현하는건 요소의 순서가 바뀔 때 효율적이지 않음
[要素を削除]
$('#empty').click(function(){
$('.parent').empty();
});
$('#remove').click(function(){
$('.parent').remove();
});
- $('셀렉터').empty() : 선택한 요소의 하위 요소만 삭제 ( 비우기 )
- $('셀렉터').remove() : 선택한 요소 자체를 삭제( 선택한 요소와 하위 요소 모두 삭제 )
[要素面積]
<区間要素の大きさを求める関数>
-width():要素幅
-innerWidth():要素幅+padding
-外幅():要素幅+padding+border
-外幅(真):要素の幅+塗りつぶし+枠線+余白
-height:要素の高さ
-innerHeight():要素の高さ+padding
-outerHeight():要素の高さ+padding+border
-outherHeight(true):要素の高さ+padding+border+margin
window.onresize = function(){ /
console.log('window : ' + $(window).width()); //창
console.log('doc : ' + $(document).width()); //html
}
- onresize : 창의 크기가 바뀔경우 이벤트 발생
Reference
この問題について(21.01.11), 我々は、より多くの情報をここで見つけました https://velog.io/@mingmang17/21.01.11テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol