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 속성 접근 방법 var apan =$('#wrapper').children('.txt'); var apan =$('#wrapper').find('txt'); 더보기 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> 더보기 개발자도구 보기 #box { position:absolute; width:100px; height:100px; left:50px; top:50px; background:red; color:white;} 더보기 box 드래그하여 좌표 값 보여주기 * { margin:0; padding:0; }#wrapper { position: absolute; width:500px; height:500px; border:3px solid blue; left:100px; top:150px; }#box { position:absolute; width:100px; height:100px; left:50px; top:50px; background:red; color:white;} $(document).ready(function(){var box = $('#box');var positionInfo = $('#position_info');console.log(box.offset().left);console.log(box.offset().top); positionInfo... 더보기 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.. 더보기 jQuery 스타일 적용 ① 배경색 바꾸기 배경색 바꾸기. $(document).ready(function(){$(' #el' ).css( "background", 'yellow');}); // 배경색 바꾸기. ② 스타일 여러개 적용하기 여러개 스타일 적용. $(document).ready(function(){$(' #el' ).css( {"width:300, height:400, padding:10});;}); // 여러개 스타일 적용하기.// px 픽셀외에 단위는 "em" "%" 등등 은 문자열과 단위를 함께 작성해야함 ex) width:300% ③ 스타일 읽어오기 더보기 jQuery example html * { margin:0; padding:0; }body { padding:10px; margin-top:10px;}body span { color:red; font-size: 30px; }p { margin-bottom: 20px;}#wrapper { width:522px; margin:0 auto; text-align:center;}li { float: left; list-style: none; margin-left: 10px;overflow:hidden; width:123px; height:40px;}li.first { margin-left:0px; }li a {display:block; width:123px;}li a img {display:block;} #nav {width:522px; .. 더보기 이전 1 2 3 4 다음
