jQuery36 jQuery is()사용하기 $('p').click(function(){ if($(this).parent().is('div')){ $(this).css('color', 'blue'); $(this).parent().css('background', 'lightblue'); $(this).parent().css(true).appendTo('body'); } }) --> is()메소드는 true, false이기 때문에 if문에서 많이 사용된다. 2020. 1. 12. jQuery end()이용하기 $('div').filter(:odd).eq(0).css('background', 'lightgreen') --> 홀수번째 div의 0번째에 밝은 녹색주기 .end().eq(1).css('background', 'lightblue') --> 홀수번째 div의 1번째에 밝은 파란색주기 .end().eq(2).css('background', 'orange'); --> 홀수번째 div의 2번째에 주황색주기 2020. 1. 12. jQuery wrap, unwrap, wrapall 사용하기 $('#wrap').click(function(){ $('p').wrap(''); }) --> id wrap인 버튼 클릭 시 각 p태그에 div주기 $('unwrap').click(function(){ $('p').unwrap(); }) --> id unwrap 버튼 클릭 시 p태그에 unwrap주기 $('#wrapall').click(function(){ $('p').wrapAll(''); }) --> id wrapall인 버튼 클릭 시 p 태그에 wrapAll주기 2020. 1. 12. jQuery 필터, 메서드 css주기 필터를 사용하나 필터메소드를 사용하나 결과는 같다. 하지만 필터메소드를 사용하면 필터를 이용하는 것보다 속도면에서 유리하다. $('p').first().css('color', '#400FF'); --> p태그 첫번째에 폰트색 #400FF주기 $('p').eq(2).css('color', '#58D3F7'); -> p태그 배열2번(3번째 줄)에 폰트색 #58D3F7주기 $('p').last().css('background', '#D358F7'); --> p태그 마지막에 배경색 #D358F7주기 $('p').filter(':even').css('border'. '1px solid red'); --> 짝수번째에 테두리색 1px 빨간색주기 2020. 1. 12. jQuery empty, remove - 복사하기 $('.pp').click(function(){ $(this).css('font-size', '+=2px'); --> class pp 클릭 시 글자 크기 +2px씩 증가 }) $('#empty').click(function(){ $('#p1').empty(); --> id empty 삭제 후 id p1 div에 생성 }) $('#remove').click(function(){ --> id remove 삭제 후 id p2 div에 생성 $('#p2').remove(); }) empty(), remove() 차이 - empty : 대상 엘리먼트의 자식요소를 지운다. ex) $('div').empty(); --> div는 삭제되지 않기 때문에 테두리는 남아 있다. --> 복사 된 후에도 이벤트 핸들러가 남아있.. 2020. 1. 8. jQuery clone - 복사하기 $(function(){ $('.pp').click(function(){ $(this).css('font-size', '+=2px'); --> class pp 클릭시 글자크기 +2px씩 증가 }) $('#clone').click(function(){ $('#pp1').clone().appendTo('body'); --> clone() : 이미지 복사 , appendTo() : 이미지 붙여넣기 }) --> 기본적인 clone()은 이벤트가 복사되지 않는다. $('#clonetrue').click(function(){ $('#pp2').clone(true).appenTo('body') --> clone(boolean) : 이벤트도 같이 복사가 된다. }) }) 2020. 1. 8. 이전 1 2 3 4 5 6 다음
