qwef

$('#box1').prepend('삽입된 내용1'); $('#box1').append('삽입된 내용2'); $('#box1').before('자신의 앞에 삽입된 내용1'); $('#box1').after('자신의 뒤에 삽입된 내용1'); 이렇게 태그도 넣을 수 있음. $('삽입된 내용1').prependTo('#box2'); $('삽입된 내용2').appendTo('#box2'); $('자신의 앞에 삽입된 내용').insertBefore('#box2'); $('자신의 뒤에 삽입된 내용').insertAafter('#box2'); To는 넣을 대상

console.log( $('.box').offset().left ); offset() html 기준으로 left, top등의 위치를 return함 아마 margin만큼? 인듯..? console.log($('.box').position().left); position() 부모를 기준으로 left, top등의 위치를 반환 부모의 margin, padding, border 포함해서 그 위치 left띄어진 것. margin, padding, border까지가 부모니 그거 다포함한 바깥의 left가 left니 $('.box p').offset({left:150, top:100}); 이렇게 변경할 수 있음

$('div').eq(0).css({ padding: '10px', textAlign: 'center' }); $('div').css('width',function(index){ return (index + 1)*(100+100); }); 이거 div가 여러개라서 반복문처럼 돌아감.

attr은 속성값 그 자체로, prop()는 bool식으로 제어용도로 사용함. 그래서 checked나 disable 같은 bool 형식이 값인 속성을 다룰 때 많이 사용. $('input:checkbox').eq(0).attr('checked','checked'); $('input:checkbox').eq(1).prop('checked', true); 근데, $('input:checkbox').eq(1).attr('checked', true); 이것도 되긴 함.. 이 둘의 차이는, attr은 true를 문자열로 전달한다고 함. 이 bool속성이 아닌 문자열이 브라우저 호환이라던지 문제가 있을 수 있다고 함. 그리고, html에서 checked나 disabled같은 bool속성은 일반적으로 값이 있는게 아..

태그의 속성 console.log($('.site a:eq(0)').attr('href')); 속성 가져오기. $('.site a:eq(1)').attr('href','http://google.com'); 속성 주기 $('.site a').attr('title', function(){ return '새창열기'; }); 이것도 가능. 'title' 에 function의 return을 줌.

let text = 'javascript'; $('#m3').html(` ${text} ${text} ${text} `); 직접 저렇게 태그 넣는것도 가능. 백엔드에서 스타일 넣을 땐 그냥 이렇게 넣음

$('h1').text() 가져옴 $('h1').text('asdf'); 바꿈 $('h1').text(function(){ }); 가능

$(document).ready(function(){ setInterval(function(){ $('#slide > ul').animate({ left:'-1200px' },1000,function(){ $(this).append($(this).children().eq(0)); $(this).css({ left:'0' }) }); },2000); }); 여기서 animate의 콜백함수 자리에 css({})가 들어간거라, 보통 이런 건 설정으로 쓰여짐. 원래는 보통 jquery라도 css({}) 이거는 이동하거나 변경해주는건데, animate 콜백으로 들어가서 다른 듯.

$('.nav').children() 자식 $('.nav').parent() 부모 $('.nav').parents('div') 조상 중 div들 $('.nav').closest('div') 조상 중 첫번째 div $('.nav').next() .nav 다음 $('.nav').nextAll() .nav 다음 모든 요소 $('.nav').prev() .nav 이전 $('.nav').nextUntil('p') .nav부터 p전까지 $('.nav').siblings('p') 형제요소 p $('.nav').find('p') .nav 하위 요소 중 p 선택 $('div').filter('.nav') div 중 nav 클래스 선택 $('div').not('.nav') .nav가 아닌 요소 $('div').has('...

$(div:hidden) $(div:visible) display: none 이나 visible: hidden 모두 해당하는 듯?