본문 바로가기

jQuery17

DocumentFragment var $box = $('#box'); var arr = ['a','b','c','d','e','f']; arr.forEach( item => { $box.append( '' + item + '' ); }); 위와 같은 방식으로 배열 등을 받아와서 동적으로 태그를 추가해주는 방식은 양이 적으면 상관없겠지만 그 양이 수백, 수천개라면 성능에도 좋지 않고 그만큼 페이지를 새로 그려야합니다. 브라우저가 힘들어할겁니다. var $box = $('#box'); var arr = ['a','b','c','d','e','f']; var $frag = $(document.createDocumentFragment()); arr.forEach( item => { $frag.append( '' + item + '' ); }.. 2019. 12. 20.
숫자 정렬 토글로 만들기 sort! 6 7 3 1 12 var array = []; var switching = true; $('#list li').each(function(idx, val) { array.push(val.innerText); }) function toggleSort() { switching = !switching; var code = '', list = $('#list'); list.empty(); if (switching) { array.sort(function(a, b) { return b - a; // reverse }) console.log(array) for (var i = 0; i < array.length; i++) { code += '' + array[i] + ''; } list.append(co.. 2019. 12. 19.
jQuery로 간단한 todo 만들기 제이쿼리로 투두리스트 간단하게 만들어봤습니다. 인풋박스에서 텍스트 작성하고 엔터치면 리스트 추가되도록 했습니다. jQuery Todo List 청소하기 checkdel 장보기 checkdel 공부하기 checkdel 쇼핑하기 checkdel clear * { margin: 0; padding: 0; list-style: none; text-decoration: none; color: #333; text-align: center; box-sizing: border-box; } #main { padding: 30px 20px; margin: 0 auto; width: 500px; background: #ddd; } h1 { padding: 0 0 20px; color: #fff; } ul li { displ.. 2019. 11. 14.
날씨 위젯 openweather 날씨 API를 통해 날씨 위젯을 만들었습니다. openweather API는 AJAX요청을 통해 해당 위치의 날씨 정보를 JSON으로 반환해줍니다. max min * { margin: 0; padding: 0; box-sizing: border-box; } body { color: #333; } p { margin: 0 0 10px; } #weather_info { position: relative; padding: 10px; margin: 0 auto; width: 50%; height: 310px; background: url(https://www.wired.com/wiredenterprise/wp-content/uploads//2013/02/clouds.jpg) no-repea.. 2019. 10. 11.
계산기 만들기 기본적인 계산기를 만들었습니다. 계산기 caption { font-size: 32px; } table { width: 320px; border-collapse: collapse; } table, th { background: #333; } th { padding: 0 10px 0 0; height: 80px; } td { padding: 0; height: 75px; border: 1px solid #333; text-align: center; } th>input { padding: 0; width: 100%; border: none; background: #333; color: #fff; text-align: right; font-size: 48px; } td>input[type='button'] { .. 2019. 10. 2.
TweenMax 텍스트 애니메이션 TweenMax로 텍스트가 순차적으로 보이는 애니메이션을 만들었습니다. 한글자씩 제어하기 위해 lettering.js 도 같이 사용했습니다. Hello, Tweenmax Splittext animation test! #wrap { max-width: 300px; } #cont { font-size: 30px; font-weight: bold; color: #333; } #cont .txt { display: block; float: left; } #cont .txt1 { color:#6271fd; } #cont .txt2 { color:#8b72fa; } #cont .txt3 { color:#121280; } #cont .txt span { display: block; float: left; positi.. 2019. 10. 2.