웹개발자의 기지개

[jQuery] 이미지 업로드시 미리보기 기능 구현하기 - 이미지 등록 (tistory.com)    form id="f1" name="f1" method="post" enctype="multipart/form-data">         div cla" data-og-host="wonpaper.tistory.com" data-og-source-url="https://wonpaper.tistory.com/860" data-og-url="https://wonpaper.tistory.com/860" data-og-image="https://blog.kakaocdn.net/dna/qua8U/hyWzCAO5Lx/AAAAAAAAAAAAAAAAAAAAAJgh8nXMsW4N5wWt_LAcrEkBzkgJpP0p_j3nk0peTO4_/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1788188399&allow_ip=&allow_referer=&signature=MQTTeestIF3TruoARvSRPj53aYE%3D

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667div class="work_place02">    form id="f1" name="f1" method="post" enctype="multipart/form-data">         div class="upload-box">            div id="drop-file" class="drag-file">                img src="/image/upload_icon.png" alt="파일 아이콘" class="image">                p cl..

12345678910textarea id="text" name="content" placeholder="(공백 포함 200자 이내 작성)">/textarea>p>span id="text_count">0/span> byte/p>  script>$('#text').keyup(function(e){    let $count = e.target.value.length;    $('#text_count').text($count)});/script>Colored by Color Scriptercs

실무에서 자주 쓰이는 기능이다.꼭 익혀주자. jquery 문법을 이용하면 코딩이 훨씬 간결해진다. show() , hide() 함수가 핵심이다. 1234567891011121314151617181920212223242526272829303132333435363738394041a href="#none" onclick="mView('01')">홍길동 open/a>a href="#none" onclick="mView('02')">이순신 open/a>   div class="planner_modal planner_01">    div class="planner_modal_close_btn">img src="/img_240626/planner_close.png" alt="">/div>    div class="p..

5개의 별점을 on/off  하려고 하는데, 각각의 별마다 id값을 부여하고 attr  속성으로  class  명을 바꾸어서 처리하였다. 12345678910111213141516171819202122232425h3 class="common">플래너의 별점을 남겨주세요./h3>ul>    li>i class="fa-regular fa-star fa-star1" id="start1" onclick="startCheck('1')">/i>/li>    li>i class="fa-regular fa-star fa-star2" id="start2" onclick="startCheck('2')">/i>/li>    li>i class="fa-regular fa-star fa-star3" id="start3" onc..

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 // 랜덤색상 function getRandomColor() { return "#" + Math.floor(Math.random() * 16777215).toString(16); } function getRandomColors(numColors) { const colors = []; const letters = '0123456789ABCDEF'; for (let i = 0; i

위의 사진과 같이 키보드 키값을 각각 입력받으면서 (onkeyup) 자동 핸드폰번호를 입력받도록 하는 jquery 관련 소스이다. 1 2 3 4 5 6 7 8 9 10 11 $("#mobileNum").keyup(function () { this.value = this.value .match(/\d*/g).join('') .match(/(\d{0,3})(\d{0,4})(\d{0,4})/).slice(1).join('-') .replace(/-*$/g, ''); }); Colored by Color Scripter cs 참고 : https://im-first-rate.tistory.com/138

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 MORE $('.list > div').hide(); $(".list > div").slice(0, 5).css("display", "block"); $("#load").click(function(e){ e.preventDefault(); $(".list > div:hidden").slice(0, 5).fadeIn(500).css('display', 'block'); // 클릭시 more 갯수 지저정 if($(".list > div:hidden"..