DOTI Project

GET 방식의 파라미터 값을 스크립트내에서 활용하는 방법 [예제 URL] index.php/?name=doti&age=30 [예제 소스] 1234567891011121314<script>function window.getParameter(strParamName) { var arrResult = null; if (strParamName) { arrResult = location.search.match(new RegExp("[&?]" + strParamName+"=(.*?)(&|$)")); return arrResult && arrResult[1] ? arrResu..

파일 폼 업로드전 jQuery를 이용하여 확장자를 체크할 수 있다 [예제] 12345678910111213<input type="file" id="file"> <script>$("#file").change(function(){ if( $(this).val() != "" ){ var ext = $(this).val().split('.').pop().toLowerCase(); if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) { alert('gif,png,jpg,jpeg 파일만 업로드 할수 있..

스크롤의 움직임에 따라 반응하는 TOP 버튼 [예제] 1234567891011121314151617181920212223<div id='btnTop'>TOP</div> <script>$(function(){ //마지막 스크롤 값을 저장할 lastScroll 변수 var lastScroll = 0; $(window).scroll(function(event){ //스크롤이 움직일때 마다 이벤트 실행 //현재 스크롤의 위치를 저장할 st ..

append 메소드는 메소드 이름에서 볼 수 있듯이 마지막에 삽입하는 역할을 한다 [예제] 12345<div>jQuery</div> <script> $('div').append(' Example')<script>cs [결과] jQuery Example 위의 예제는 div 태그를 찾아 마지막에 Example 이라는 단어를 삽입한다

jQuery 를 통해 개체의 CSS를 변경할 수 있는 css() 메소드에 대해 알아봅시다 [지정 방법] .css("name") - 지정된 name의 속성값을 리턴합니다 .css("name", "value") - 지정된 name의 속성값을 value 값으로 지정합니다 (단일지정) .css({"name":"value", "name":"value", "name":"value"}) - 지정된 name의 속성값을 value 값으..

first() 와 last() 를 쉽게 이해해보자 말그대로 첫번째 요소와 마지막 요소를 찾아서 스크립트를 적용하는 메서드이다 [예제] 123456789101112<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li></ul> <script>..

jQuery 에서 each() 메서드는 for문 처럼 반복 실행한다고 생각하면 된다 [예제] 12345678910111213<div>111</div><div>222</div><div>333</div><div>444</div><div>555</div> <script>$(document).ready(function(){ $('div').each(function(){ $(this).css('color', 'red') })})</script>cs [결과] 11..

문장내에 특정 단어를 검색할 경우 그 단어에 하이라이트를 줄 수 있다 [예제] 123456789101112131415161718<style>.text-red { color: red;}</style> <input id="search"><div id="contents">this is a new bar and bar</div> <script>$('#search').keyup(function () { var search = $('#search').val(); $("#contents:contains('"+sea..

resizeTo, resizeBy를 이용해 브라우저 크기 조절 123<script> window.resizeTo(width, height);</script>cs - 브라우저를 지정한 크기로 변경함 123<script> window.resizeBy(width, height);</script>cs - 브라우저를 현재 크기에서 지정한 크기만큼 늘려준다

스크립트를 이용하여 지연시간을 구현할 수 있다 [예제1] 123456<script>function explode() { alert("Boom!");}setTimeout(explode, 2000);</script>cs [예제2] 123456<script>var explode = function() { alert("Boom!");};setTimeout(explode, 2000);</script>cs [예제3] 12345<script>setTimeout(function(){ alert("Boom!");}, 2000);</scr..