드럼치는 프로그래머

children( ) => 지정한 엘리먼트의 바로 아래 자식 노드 (parent( )는 부모 노드) each( ) => 각각 엘리먼트에 차례로 접근 Azit4u S2ang Hello 출처: http://mandooya.com/entry/jQuery-childreneach [만두야닷컴]

HTML ### CSS .wrap { width: 500px; height: auto; position: relative; display: inline-block; } .wrap textarea { width: 100%; resize: none; min-height: 4.5em; line-height:1.6em; max-height: 9em; } .wrap span { position: absolute; bottom: 5px; right: 5px; } #counter { background:rgba(255,0,0,0.5); border-radius: 0.5em; padding: 0 .5em 0 .5em; font-size: 0.75em; } JavaScript $(function() { $('#conte..

행 추가하기 행 삭제하기 제목 일시 $('#btn-add-row').click(function() { var time = new Date().toLocaleTimeString(); $('#mytable > tbody:last').append('안녕 친구들 ' + time + ''); }); $('#btn-delete-row').click(function() { $('#mytable > tbody:last > tr:last').remove(); }); 행 추가하기행 삭제하기 제목 일시 [출처] http://zetawiki.com/wiki/JQuery_%ED%85%8C%EC%9D%B4%EB%B8%94_%ED%96%89_%EC%B6%94%EA%B0%80/%EC%82%AD%EC%A0%9C

1. 커서 변경 $('body').css('cursor', 'default'); $('body').css('cursor', 'wait'); 2. Select Box에서 선택된 Value 찾기 $('#search_sale_pernr_s option:selected').val(); 3. Table의 타이틀 Row를 제외한 모든 Row 삭제하기 $("#data_list_table > tbody").children("tr:not(:first)").remove(); 4. Table의 마지막 Row 다음에 Row 추가하기 $("#data_list_table > tbody:last").append("값1"); 5. innerHTML값 Setting하기 $("#id_total_price").html("값"); 6. 해..

jQuery는 매우 짧은 코드만으로도 휼륭한 애니메이션 효과를 낼 수 있다는 장점이 있다. 이러한 일이 가능해진 이유는 jQuery가 굉장히 우수한 방법을 통하여 자바스크립트 기능을 리팩토링하였기 때문인데 개인적으로 jQuery의 소스를 통해 자바스크립트 리팩토링 과정을 공부하면 매우 유익할 듯 싶다. (물론 그 길고긴 소스를 직접 해독해야 한다는 사실은 곤욕이지만…) 오늘 우리는 jQuery에서 발생하는 애니메이션 중복문제에 대한 해결책을 알아보도록 할 것이다. 우선 다음과 같은 코드를 작성해 보도록 하자. 클릭하세요!숨겨진 메뉴1숨겨진 메뉴2클릭하세요!숨겨진 메뉴1숨겨진 메뉴2 이제 브라우져를 통해 작성한 코드를 확인해보자. 얼핏보기엔 기능이 매우 훌륭하게 동작하는 듯이 보이지만 사실 이 코드는 잠재..

For some reason on our grid the vertical alignment of the rows is not middle. It appears to be top. Is there something specific you have to do to achieve vertical alignment? Here's an example of the alignment: Our grid definitions:$.extend(jQuery.jgrid.defaults, { url:'NoData.json', datatype: 'json', mtype: 'GET', altRows:true, //altclass:'zebraOdd', loadError: function(xhr,st,err) { handleError..

jQuery의 .slideToggle()은 객체를 말아올리거나 펼치는 효과를 낸다. .slideToggle()의 형식은 아래와 같다. .slideToggle( [움직임 시간(duration)] [, 움직이고 나서 실행할 함수(callback)] ) .slideToggle( [움직임 시간(duration)] [, 늦춤 함수(easing)] [, 움직이고 나서 실행할 함수(callback)] ) 움직임 시간은 밀리초(ms) 단위로 넣거나 slow, normal, fast를 쓸 수 있다. 아래는 jQuery로 단추(button)를 딸깍하면 상자(div)가 펼쳐져 있으면 말아올려서 접고, 접혀 있으면 천천히 펼쳐내리는 예제이다. 딸깍해 보세요 말아올리고 말아내리는 글상자 딸깍해 보세요 말아올리고 말아내리는 글상..

slideUp([speed], [callback]) / version : 1.0 - 높이를 지정한 시간동안 0으로 감소시키고 style의 display:none 상태를 적용시킨다. 슬라이딩(UP) 형식으로 표현되면서 사라지게 된다. $(document).ready(function(){ $("#test_id").click(function(){ $("#a").slideUp(500); }); }); - test_id 라는 id를 가진 요소를 클릭하면 a라는 id를 가진 요소가 0.5초간 슬라이딩(UP) 효과를 나타내며 사라진다. slideDown([speed], [callback]) / version : 1.0 - 숨겨진 요소의 style의 display:none 상태를 이전의 상태(block 또는 lilin..

fadeOut([speed], [callback]) / version : 1.0 - 지정한 시간동안 투명도를 1에서 0으로 감소시키고 style의 display:none 상태로 적용시킨다. 해당 요소가 서서히 사라지게 표현된다. $(document).ready(function(){ $("#test_id").click(function(){ $("#a").fadeOut(500); }); }); - test_id 라는 id를 가진 요소를 클릭하면 a라는 id를 가진 요소가 0.5초간 페이딩(Out) 효과를 나타내며 사라진다. fadeIn([speed], [callback]) / version : 1.0 - 지정한 시간동안 투명도를 0에서 1로 증가시키고 style의 display를 none의 이전상태(bloc..

window.onload 함수는 웹페이지의 로딩이 끝나는 시점에 실행되는 함수다 window.onload = function () { alert("로딩 완료"); } 와 같이 사용하게 되면 페이지 로드가 끝난 후에 "로딩 완료" 라는 얼럿창이 뜨게 된다. 하지만 onload에는 몇가지 단점이 있는데, 이 함수는 페이지 안의 이미지나 외부 파일이 로드 될때까지도 기다린 후에 사용되기 때문에 엔드유저 입장에서 불필요하게 로딩시간이 길어지게 된다. 더욱 심각한것은 동일한 페이지 내에서 onload 함수는 하나만 존재해야 한다는 것인데, 만약 외부 라이브러리에서 onload가 이미 선언 되어 있다면 이를 찾거나 하나로 합치는 것은 여간 어려운일이 아니다.또한 와 같은 attribute 가 설정이 되어 있는 경우..