jQuery on() 동적으로 추가된 엘리먼트 이벤트 발생시키기 on() 메서드 [box 추가 ] 버튼을 클릭하면 동적으로 box엘리먼트가 추가 됩니다.기존의 box 엘리먼트의 이벤트는 잘 동작하지만 동적으로 추가된 box엘리먼트에는 이벤트가 동작하지 않습니다. 이것은 bind() 메서드는 동적으로 생성된 엘리먼트를 찾지 못하기 때문입니다.on() 메서드로 수정하여 동적으로 추가된 엘리먼트의 이벤트가 동작하도록 수정합니다. html * { margin:0; padding:0; } #wrapper { margin-left:300px; } #nav > input { margin-left:300px; } .box { width:150px; height:150px; border:2px solid blue;} .box.over { background-color: red; } .. 더보기 jQuery 이벤트 bind() bind( eventType, data, handler) html * { margin:0; padding:0; }#box { width:200px; height:200px; border:2px solid blue; margin-left:300px; margin-top:200px; background-color:blue;}#box.mouseover { background-color: red; }#box.mouseout { background-color: green; }#box.mousedown { background-color: purple; }#box.mouseup { background-color: #FF9C00; }#box > p { padding:30px; color:white; } $(docume.. 더보기 jQuery 엘리먼트 감싸기 풀어내기 wrap(wrappingElement) : 각요소를 매개변수로 감사줍니다.wrapAll(wrappingElement) : 모든 요소를 매개변수로 감싸줍니다.wraplnner(wrappingElement) : 각 요소를 매개변수로 감싸줍니다.unwrap(wrappingElement) : 요소를 감싸고 있는 부모엘리멘트를 제거합니다. ① wrap() wrap() 메서드의 경우 select한 엘리먼트의 확장 집합을 개별적으로 wrapping을 한다. wrapAll() 메서드의 경우 select한 엘리먼트의 확장 집합의 전체를 모아 한번에 wrapping을 한다. wrap() 메서드의 경우 select한 엘리먼트의 확장 .. 더보기 jQuery 엘리먼트 메서드 append(html 문자열) : html문자열 추가 또는 이동prepend(html 문자열) : 맨 앞에 html 문자열을 추가 또는 이동 before(html 문자열) : 바로 앞에 html 문자열 추가 또는 이동 after(html 문자열) : 형제엘리먼트의 바로 뒤에 html 문자열을 추가 또는 이동appendTo(target) : 자식엘리먼트 중 맨 뒤로 이동prependTo(target) : 자식엘리먼트 중 맨 앞으로 이동시킵니다.insertBefore(targets) : 형제엘리먼트 바로 앞으로 이동시킵니다. insertAfter(targets) : 형제엘리먼트 바로 뒤로 이동시킵니다, ① append() 메서드 활용_html문자열 추가 또는 이동.newElement { color:red; .. 더보기 jQuery text 컨텐츠 읽고 설정하기 ① ('#wrapper > ul > li').text() $(document).ready(function(){ $('#wrapper > ul > li').text(' 감성에 시럽 ');}); content [ 변경 후 ] 감성에 시럽 // 기존에 내용이 삭제되고 새로운 내용이 추가됨 ② ('#wrapper > span').text($('#copy').text()); $(document).ready(function(){$('#wrapper').text($('#copy').text()); }); * 기존 wrapper 엘리먼트의 내용이 삭제되고 copy 엘리먼트를 추가해주기 이곳의 내용을 바꿔 주세요. 안녕 마음에 감성시럽 한 스픈 어떠니?. [ 변경 후 ] 안녕 마음에 감성시럽 한 스픈 어떻니?. 안녕 마.. 더보기 html콘텐츠를 읽어 다른엘리먼트의 html콘텐츠로 설정 ① $(document).ready(function(){ $('#wrapper').html($('#hidden').html()); // waapper의 내용을 hidden의 내용으로 교체 }); 이곳의 내용을 바꿔 주세요.1234 // 기존 html 콘텐츠를 삭제하고 wrapper의 엘리먼트가 추가됨... ② $(document).ready(function(){ $('#wrapper').html('12'); }); 더보기 jQuery 스크롤 $(document).ready(function(){var info = $('#info');$(window).on('scroll', function(){var scroll_horizon = $(window).scrollLeft(); // 스크롤 수평 좌표 받아오기var scroll_vertical = $(window).scrollTop(); // 스크롤 세로좌표 받아오기info.children('.scrollLeft').text(scroll_horizon); // 폼에 좌표 써주기info.children('.scrollTop').text(scroll_vertical); // 폼에 좌표 써주기});var form = $('#form');var xField = form.children('.xField');v.. 더보기 jQuery input div id="form"> input type="text" class="xField" value="" /> input type="text" class="yField" value="" /> input type="button" class="btn" value="입력" /> div> 더보기 감자 고추장 찌개 * 감자2개 / 양파 반의 반개 / 파 조금 / 고추 조금 / 느타리 버섯 조금* 식용류 / 참기름 2수저 / 고추장 1수저 / 고추가루 1수저 / 다진마늘 찻잔 1수저 / 국간장 1수저 / 연두 1수저 / 멸치 액젓 1수저물 국그릇 2개 + 종이컵 1개 정도 ① 팬에 식용류 2수저 , 참기름 2수저, 고추장 1수저를 넣고 약불에 볶아 주다가 고추가루 1수저를 넣고 볶아 줍니다. 고추장부터 볶은 후에 고추가루를 볶아줘야 맛이 더 좋아요^^ ② 고추기름이 올라올즘 국그릇기준 2개 + 종이컵 1개의 물을 넣어주세요. ③ 잘라놓은 감자 2개를 넣어줍니다. ④ 냄비에 다진마늘 , 국간장 1수저, 연두1수저, 액젓1수저를 넣어주세요. ⑤ 느타리 버섯, 대파, 양파 등등을 넣어줍니다. ⑥ 약 10분 후에 불을 끕니.. 더보기 jQuery 엘리먼트 크기 / 위치 박스의 width = 0 박스의 height = 0 박스의 innerWidth = 0 박스의 innerHeight = 0 박스의 outerWidth = 0 박스의 outerHeight = 0 $(document).ready(function(){var box = $('#box');$(window).resize(function(){$('#width').text(box.width());$('#height').text(box. height());$('#innerWidth').text(box. innerWidth());$('#innerHeight').text(box. innerHeight());$('#outerWidth').text(box. outerWidth(false));$('#outerHeight').tex.. 더보기 이전 1 2 3 4 5 ··· 10 다음
