Web Tech/jQuery 검색 결과

해당 글 34건

jQuery를 이용한 기초 DOM 트리 다뤄보기

DOM 트리 다루기 이 포스팅에서는 jQuery 를 이용한 "DOM(Document Object Model) 을 간단히 다뤄보도록 합니다. 제이쿼리 메서드 중에 before, appendTo, append, wrap 그리고 기타 메서드를 사용하여 DOM 을 제어해보도록 하겠습니다. 아래 코드펜 소스를 참고하세요. Source See the Pen DOM 트리 다루기 by jaeheekim (@jaehee) on CodePen. Jaehee's WebClub
Web Tech/jQuery 2017. 4. 3. 14:40

include html with jQuery

HTML 인클루드하기 이 포스팅에서는 제이쿼리를 이용하여 html 파일을 인클루드 해보록 하겠습니다.(웹서버에서 동작) HTML html #wrap #container .snb #content .aside header_inc.html header #Header Include 헤더 인클루드입니다. footer_inc.html footer #Footer Include 푸터 인클루드입니다. Script javascript 스크립트는 body 하단에 위치시키는 것을 권장합니다. test CSS css /* Common */ p,div { margin:0; padding:0; } /* 임시 비주얼 스타일 정의 */ div{margin-bottom:10px;padding:10px 0;color:#2d2c2d;fon..
Web Tech/jQuery 2016. 11. 24. 00:30

jQuery(), $() 의 정체

jQuery 실체 알아보기jQuery 생성자 함수는 어떻게 생성하는지에 대해 알아봅니다. javascript var $p = $('p'); $p.css('border', '1px solid red').children('a').css('text-decoration', 'none') (function (global, $) { var num = 10; var $body = $('body'); global.data = { num : num, $body: $body }; })(window, window.jQuery); function moving() { console.log(this) } moving(); document.body.onclick = moving; function car(arg) { this.nam..
Web Tech/jQuery 2016. 9. 29. 13:34

필수적인 제이쿼리 플러그인 패턴

Essential jQuery Plugin Patterns 자바스크립트에서는 일반적인 개발 문제를 해결하기 위해 입증,검증된 좋은 방법인 Design Pattern(설계 패턴)을 사용함으로써 유용한 이익을 얻을 수 있습니다. 공식 jQuery 플러그인 작성가이드와 Widget 도 훌륭한 출발점을 제공하지만 또 다른 플러그인 디자인 패턴을 살펴보도록 하겠습니다. 플러그인의 개발은 지난 몇 년동안 많은 진전을 해 왔습니다. 우리는 더이상 플러그인을 하나의 방식으로 작성하지 않습니다. 실제로, 플러그인의 특정 패턴은 다른 이슈에 있어서 더 나은 사용성을 제공할 수 있을 것입니다. 일부 개발자들은 jQuery UI widget factory 를 사용할 수 있습니다. 그것은 복잡하고 유연한 UI 구성 요소에 유용..
Web Tech/jQuery 2016. 9. 28. 18:08

Animation jQuery- delay()

애니메이션 지연 앞선 포스팅에서 사용한 애니메이션 효과는 메서드가 실행되지 마자 바로 효과가 나타났습니다. jQuery 효과 관련 메서드를 사용자가 정의하여 특정한 시간 후에 실행하고자 할 경우에는 delay() 메서드를 사용할 수 있습니다. jQuery delay() 메서드 delay() 메서드의 매개 변수에는 지연시키려는 시간을 밀리초 단위로 작성합니다. 다음의 예제를 통해 확인해보도록 합니다. See the Pen jQuery delay() 메서드 by jaeheekim (@jaehee) on CodePen. 각 박스는 delay() 메서드로 인하여 0.5초 지연 후에 애니메이션 효과가 나타나는 것을 확인하실 수 있습니다. Related Info 애니메이션 큐와 애니메이션 정지하기 Jaehee's ..
Web Tech/jQuery 2016. 7. 13. 07:00

애니메이션 정지와 큐 - jQuery stop() 메소드 & clearQueue()

Animation Stop & Queue제이쿼리에서 애니메이션 사용시 이용되는 stop() 과 clearQueue() 에 대해 알아보도록 합니다.먼저 애니메이션 큐부터 알아보도록 하겠습니다. 애니메이션 큐큐는 특정한 엘리먼트에서 발생될 애니메이션의 목록입니다. 제이쿼리를 사용해 엘리먼트에서 애니메이션을 실행시킬 때마다 애니메이션은 큐에 저장됩니다. 엘리먼트는 큐의 모든 애니메이션이 완료될 때까지 큐에 저장된 애니메이션을 한번에 하나씩 실행시킵니다.다시 말해, 애니메이션 효과의 명령은 큐(Queue)에 누적됩니다.큐는 먼저 들어간 것이 먼저 나오는 공간을 말합니다.jQuery의 효과 메서드를 사용하면 효과 명령이 차례차례 큐에 들어가게 되고, 들어간 순서대로 실행되게 됩니다. 아래의 코드를 실행하면서 살펴..
Web Tech/jQuery 2016. 7. 12. 18:36

jQuery의 each() 메서드 알아보기

jQuery - each() 메서드 jQuery를 사용해 배열을 관리하고자 할 때 each() 메서드를 사용할 수 있습니다. each() 메서드는 매개 변수로 받은 것을 사용해 for in 반복문과 같이 배열이나 객체의 요소를 검사할 수 있는 메서드입니다. each() 메서드는 다음과 같은 두 가지 타입이 있습니다. javascript // jQuery 유틸리티 메서드 $.each(object, function(index, item){ }); // jQuery 일반 메서드 $(selector).each(function(index, item){ }) 위의 메서드를 차례로 알아보도록 하겠습니다. $.each() $.each() 메서드는 object 와 배열 모두에서 사용할 수 있는 일반적인 반복 함수입니다...
Web Tech/jQuery 2016. 7. 4. 07:00

attr() 메서드와 prop() 메서드의 차이점

attr() Vs prop() jQuery 1.6버전 이전에는 attr() 만으로 가능하던 처리를 1.6 업데이트로 attr()과 prop() 으로 나뉘어졌다. 이전에는 attr() 하나로 많은 것을 처리하려다 보니 버그 및 문제가 발생하여 업데이트를 통해 불완전을 해소했다고 한다. attr() prop() HTML 의 속성(attribute)을 취급 JavaScript의 프로퍼티(property)를 취급 속성은 HTML Element에 있는 정보 프로퍼티는 JavaScript에서 사용하는 정보 (HTML의 정보와 일치 또는 불일치) 다음의 예시를 살펴보도록 합니다.. 먼저 다음의 코드가 있다고 가정해봅니다. html 버튼 javascript var $goLink = $('.link'); console...
Web Tech/jQuery 2016. 7. 1. 11:37

세로형 2단 메뉴 - jQuery Study #2

심플 세로형 2단 메뉴 - 단계별 학습 #2 이 글에서는 지난 시간에 이어 기존 코드를 플러그인화 시켜보도록 하겠습니다. JavaScript 기존 단계별 학습 #1에서 진행했던 마크업과 CSS는 동일하며 자바스크립트는 플러그인화 시킨 부분만 보여주도록 하겠습니다. javascript (function($) { // 플러그인 정의 $.fn.accordionMenu = function () { this.each(function (index) { var $this = $(this); var accMenu = new AccordionMenu($this); // n번째 인덱스에 해당하는 메뉴를 선택하는 기능(selectMenu())을 // 사용하기 위해 accordionMenu 플러그인에서 생성한 Accordio..
Web Tech/jQuery 2016. 6. 17. 08:55