본문 바로가기

jQuery42

jQuery stop(),Callback,Chaining 이번 장에서는 jQuery stop(), Callback,Chaining 에 대해서 알아보겠습니다. jQuery stop() stop()은 말 그대로 어떤 액센이 수행될때 멈추는 것을 말합니다. 기본 문법은 $(selector).stop(stopAll,goToEnd); 사용할 수 있습니다. 기본 예제 $("#stop").click(function(){ $("#panel").stop(); }); 관련예제 슬라이딩 멈춰라 슬라이딩 해라 Park's 블로그 // 슬라이딩을 하는 도중에 "슬라이딩 멈춰라" 버튼을 클릭하면 슬라이딩이 멈추는것을 볼 수 있습니다. jQuery Callback Functions 자바스크립트는 기본적으로 한줄씩 실행이 됩니다. 그러나 어떤 경우에는 함수가 실행이 끝나지 않았을때 실행이.. 2013. 5. 16.
jQuery Effects - Animation jQuery Animation은 애니메이션 효과를 만들 수 있습니다. 기본적인 문법은 $(selector).animate({params},speed,callback); 사용합니다. animate() 간단한 속성 animate()로 CSS속성을 정의할 수 있습니다. "slow", "fast", milliseconds 로 시간을 정의할 수 있습니다. 간단한 사용 방법은 아래 구문을 확인해주세요. 의 내용을 왼쪽으로 250px 이동하는 내용입니다. $("button").click(function(){ $("div").animate({left:'250px'}); }); 관련예제 애니메이션 효과 CSS를 정의하여 좌측으로 250px 만큼 div 값을 이동합니다! // 이미지에서 확인되듯이 "애니메이션 효과" 버튼.. 2013. 5. 15.
jQuery Effects - Sliding jQuery Sliding는 어떤 내용이 위, 아래로 슬라이딩하게 하는 역할을 합니다. slide 종류에는 slideDown(), slideUp(), slideToggle() 이 있습니다. slideDown() 기본 문구는 $(selector).slideDown(speed,callback); 처럼 사용합니다. 괄호() 안에 숫자를 넣어 속도를 조절할 수 있으며, "slow", "fast" 등을 사용할 수 있습니다. $("#flip").click(function(){ $("#panel").slideDown(); }); 관련예제 이곳을 클릭해보세요!! 안녕하세요 Park's의 블로그 입니다. // div 영역 "flip" 을 클릭하면 "안녕하세요 ~" 내용이 아래로 슬라이딩 됩니다. -------------.. 2013. 5. 14.
jQuery fadeIn(), fadeOut(), fadeToggle(), fadeTo() 이번 장에서는 jQuery 에서 fadeIn(), fadeOut(), fadeToggle(), fadeTo() 함수에 대해서 알아보겠습니다. fade의 사전적인 의미는 "천천히 사라지다" , "점점 희미해지다" 라는 뜻입니다. 그럼 대충 어떤 현상이 일어나겠구나 하는 짐작은 할 수 있을 겁니다. jQuery fadeIn() 천천히 나타나게 하는 함수 입니다. $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }); 관련예제 fadeIn 현상을 확인해보세요! fadeIn 버튼을 클릭하세요 // 우선 기본적으로 fadeIn()을 사용하며, 괄호() 안에 위처럼 옵션을 줄 수 .. 2013. 5. 13.
jQuery hide(), show(), toggle() 이번 장에서는 hide(), show(), toggle()에 대한 기능을 알아보겠습니다. 이미 앞장부터 보셨다면 이미 hide() 기능을 알고 계실거라 생각됩니다. hide() 기능은 문구를 숨기는 기능을 합니다. show() 기능은 문구를 보여주는 기능을 합니다. $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); 관련예제 버튼을 차례차례 클릭해보시기 바랍니다. 숨겨라 보여줘라 // 버튼의 id값 hide를 클릭하면 문구가 없어지는 현상이 나타남 // 버튼의 id값 show를 클릭하면 문구가 나타나는 현상이 나타남 // "보여줘라" 버튼을 클릭하면 글씨가 나타나며 // "숨겨라" 버튼.. 2013. 5. 13.
jQuery Events hover(), focus(), blur() 이번 장에서는 jQuery Event 중에서 hover(), focus(), blur() 에 대해서 알아보겠습니다. hover() 마우스가 HTML 요소에 오버되었을때 한번 함수가 실행되고, 마우스가 HTML 요소를 떠날때 두 번째 함수가 실행됩니다. $("#p1").hover(function(){ alert("You entered p1!"); }, function(){ alert("Bye! You now leave p1!"); }); 관련예제 이곳에 마우스를 가져오고 또 벗어나보세요! -------------------------------------------------------------- focus() form 의 양식에 포커스를 받았을때 실행되는 함수 입니다. $("input").focus(f.. 2013. 5. 10.
jQuery events mouseenter(), mouseleave(), mousedown(), mouseup() 이번장에서는 jQuery 이벤트중 mouseenter(), mouseleave(), mousedown(), mouseup() 마우스와 관련된 이벤트에 대해서 알아보겠습니다. ------------------------------------------------------- mouseenter() 마우스 다가왔을때 발생하는 이벤트입니다. $("#p1").mouseenter(function(){ alert("You entered p1!"); }); 관련예제 Enter this paragraph. ↓ ↓ ↓ 마우스를 아이디값 p1에 올렸을때 alert 메시지를 보여 줍니다. ------------------------------------------------------- mouseleave() 마우스가 자리.. 2013. 5. 10.
jQuery Events ( click(). dbclick() ) jQuery 는 html 이벤트를 만들수 있습니다. 이벤트(Events)가 무었인지 알아보겠습니다. 웹 페이지가 응답 할 수있는 모든 다른 방문자의 행동을 이벤트라고합니다. 이벤트는 무언가가 일어나는 순간을 나타냅니다. 관련예제 어떤 요소에 마우스가 오버되었을 경우 라디오버튼을 선택했을 경우 클릭 이벤트가 발생했을 경우 마우스 이벤트에는 click, dbclick(더블클릭), mouseenter(마우스오버), mouseleave(마우스아웃) 등이 있고 키보드 이벤트에는 keypress(키보드클릭), keydown, keyup 등이 있고 폼 이벤트에는 submit, change, focus, blur 등이 있고 Document/Window 이벤트에는 load, resize, scroll, upload 등이.. 2013. 5. 10.
jQuery Selectors jQuery Selectors jQuery Selectors는 html elements를 선택할수 있고 조작을 할 수 있습니다. CSS를 기반으로 하며 id, class, type, attributes(속성, 속성값)등 보다 많은것을 조작할 수 있습니다. "조작"한다는 말은 예를 들어 id=test 가는 id값이 있을경우 jquery를 이용하여 id값이 test 를 찾아서 test안의 내용을 원하는 형태로 바꿀수 있다는 말입니다. Element Selector jQuery element selector은 기본적으로 태그(tag)에도 적용이 가능합니다. %("p") $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); .. 2013. 5. 8.
jQuery 기초 오늘부터 하루에 하나 또는 두개씩 jquery 에 대한 내용을 기초부터 다루어 보려고 합니다. jquery 를 공부하시는 많은 분들에게 도움이 되길 바랍니다. 잘 정리되어 있는 해외 사이트를 참조하여 내용을 다루겠습니다. jQuery는 Javascript Library입니다. jQuery는 Javascript 프로그래밍을 매우 단순하게 해줍니다. jQuery는 배우기 쉽습니다. jQuery 라이브러리는 웹페이지에 단 한줄을 추가하여 사용할 수 있습니다. [배우기 전에 알아둬야 할 부분] jQuery를 배우기 전에 다음 사항에 대한 기본 지식이 있어야 합니다. - HTML - CSS - Javascript [jQuery란 무엇인가?] jQuery는 javascript 함수들로 이루어진 라이브러리입니다. j.. 2013. 5. 8.
jQuery 2.0 정식 릴리즈 라이브러리 jQuery 최신 버전인 2.0 버전이 릴리즈 되었습니다. 업그레이드로 인하여 API의 변경이나 큰 기능추가는 없지만 internet Explorer 6,7,8 지원을 하지 않으며, 이를 통해 브라우저를 중점으로 코드를 다시 작성하여 보다 컴팩트해지고 빠르고 안정화된 실행을 목표로 하였습니다. jQuery 2.0은 1.9.1버전에 비해 약 12% 정도 작어졌다 보시면 됩니다. 앞으로 jQuery 2.0에서는 오래된 환경지원을 하지 않고 경량화되고 빠른 라이브러리를 목표로 할 예정이고 다음 지원을 하지 않을 것은 Android/Webkit 2.x의 브라우저로 점유율 추이를 보며 조만간 폐지할 것이라 합니다. 다만 하위 호환성을 위해 jQuery 1.x 버전도 병행해서 릴리즈를 계속하여 호환성을 .. 2013. 5. 2.
jQuery Dialog로 레이어 팝업 띄우기 javascript의 alert 효과를 jQuery의 Dialog를 사용하여 띄우는 예제입니다. This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon. 실행결과 2013. 4. 30.
Creating, getting, and setting content using jQuery jQuery를 사용하면 (만들기) HTML 콘텐츠를 추가할 수 있습니다. 예를 들어 여기서 각 'div'요소에 일부 HTML을 추가하려면 jquery를 사용하여 할 수 있습니다. Hello OUTPUT 여러분은 jQuery를 사용하여 HTML을 받을 수 있으며 그것을 수정할 수 있습니다 예를 들어, 클릭과 텍스트로 HTML에서 변환할 수 단락을 얻을 수 있습니다. : Click to change the html to a text node. This button does nothing. OUTPUT : The page looks like : click 를 클릭하면 로 바뀌어진다. 또한 일치하는 요소에 HTML 콘텐츠를 설정할 수 있습니다. 예를 들어, 각각의 필터 elememts에 HTML 콘텐츠를 설정할.. 2013. 4. 29.
jQuery selectors 이 튜토리얼에서는 jQuery selectors 에 대해 얘기하겠습니다. jQuery selectors jQuery 라이브러리에서 주요 기능의 하나입니다.이 selectors는 개발자가 쉽게 jQuery 라이브러리 방법으로페이지의 요소를 식별할 수 있도록 CSS 구문을 사용합니다. 가장 효과적으로 JQuery 라이브러리를 사용 하려면, jQuery selectors 에 대해 잘 알고 있어야합니다. Syntax pattern of jQuery selector : $.(selector).methodName(); selector 는 메서드가 구현되어야하는 요소를 식별하는 문자열 표현입니다. 예를 들면 다음과 같습니다 $("p").click(); You can also hide the paragraph as f.. 2013. 4. 29.
jQuery Utility Functions 여러분은 jQuery Utility Functions 기능을 이해하는 것은 당신의 jQuery 애플 리케이션을 작성할때 매우 자주 이러한 funtions을 사용해야하므로 중요하다. . clearQueue () 이 기능은 실행되지 않은 대기열에서 모든 기능을 제거하는 데 사용됩니다. jQuery.contains () jQuery.contains () 함수는 DOM 노드가 다른 DOM 노드 내에 있는지 확인하는 데 사용됩니다. jQuery.data () jQuery.data () 함수는 DOM 요소에 어떠한 유형의 데이터를 추가하는 데 사용됩니다 . dequeue () dequeue () 함수는 대기열에있는 다음 함수를 제거하는 데 사용됩니다. jQuery.dequeue () jQuery.dequeue ().. 2013. 4. 29.
jQuery with other libraries 웹 애플 리케이션을 개발하는 개발자를 돕기 위해 수많은 자바 스크립트 라이브러리가 있습니다. 이러한 라이브러리는 효과적으로 특정한 문제를 해결하도록 설계되었습니다. jQuery로 각 라이브러리를 사용하는 몇 가지 요구 사항이있을 수 있습니다. 그래서, jQuery와 함께 이러한 라이브러리를 사용하여 비 호환성을 찾을 수 있습니다. 우리는 다른 libraries jQuery를 사용하는 방법을 논의할 것입니다. 다른 libraries도 변수 이름의 기능에 액세스하려면 $를 사용하기 때문에이 문제가 온다. 아래 예제에서는 jQuery와 다른 라이브러리 함수와 변수를 모두 액세스할 수 $를 사용하는 방법을 볼 수 있습니다. jQuery에서 $는 jQuery에 대한 별칭이므로 jQuery 메소드에 액세스하기위한 .. 2013. 4. 29.
How jQuery Works? 이 섹션에서는 우리는 간단한 프로그램의 도움으로 어떻게 작동하는지 jQuery 볼 수 있습니다. 이 튜토리얼은 여러분에게 jQuery의 기본적인 소개를 제공하고 이해하는 데 필요한 개념을 설명합니다. jQuery 라이브러리는 개발자가 리치 인터넷 애플 리케이션을 개발하는 데 도움이됩니다. 이것은 웹에서 가장 많이 사용되는 프레임 워크 중 하나입니다. 그것의 쉬운 학습과 언어를 사용할 수 있습니다. 다음은 jQuery의 하이라이트는 다음과 같습니다 • jQuery는 브라우저에서 실행되는 자바 스크립트 기반의 라이브러리입니다. 그것은 클라이언트측 AJAX 프레임 워크입니다. • jQuery는 JavaScript 프로그래밍 언어를 사용하여 AJAX 기반 응용 프로그램의 개발을 단순화합니다. • jQuery는 .. 2013. 4. 29.
jQuery Hello World alert example 이 섹션에서는 jQuery를 사용하여 "Hello World" 경고 상자를 표시하는 프로그램을 작성 안내합니다. 이 응용 프로그램은 "Hello World"라는 메시지를 표시하기 위해 javascript alert() 메서드를 사용합니다. 이 예제에서는 jQuery를 사용하여 JavaScript를 작성하는 방법을 배우게됩니다.버튼을 사용자가 클릭 "Click Me"하면 경고 메시지가 사용자에게 표시됩니다 다음 메소드는 버튼 첨부된 Click 이벤트에 사용됩니다 : $("#cl").click(function(){....}) jQuery의 위의 코드는 단추 클릭 이벤트를 처리하고 중괄호 {}에 정의된 JavaScript를 실행합니다.중괄호에서는 JavaScript alert () 메소드를 정의했습니다. CL.. 2013. 4. 29.
jQuery Hello World example jQuery 설정하기 시작을 위해서는 jQuery 라이브러리가 필요합니다. 다음과 같은 링크를 사용하여 그것을 얻을 수 있습니다 : http://code.jquery.com/jquery-1.4.2.js 여러분은 다음 링크를 클릭하면 그것은 jQuery 라이브러리 스크립트를 포함하는 페이지가 열립니다. 이 파일은 (jquery-1.4.2.js) 70kb의 작은 용량 입니다. 다운로드 또는 해당 사이트를 스크립트 링크방식으로 링크만 걸면 됩니다. Hello World Example(HelloWorld.html) Hello World !! (display due to HTML) 설명 : 최초이자 가장 중요한 것은 jQuery 라이브러리로 포함하는 것입니다 : jQuery 스크립트를 사용 하려면, 2013. 4. 29.
Downloading and Installing jQuery 데모 응용 프로그램을 개발하기 위해 jQuery를 다운로드하여 설치합니다. jQuery는 하나의 JS 파일로 제공됩니다. 그래서 자사의 웹 애플 리케이션에서 jQuery를 다운로드하여 설치하기가 매우 편리합니다. 여러분은 심지어 기존 응용 프로그램에 추가하고 jQuery 함수를 사용할 수 있습니다. 이러한 단순 프로그램으로 인해 자신의 웹 응용 프로그램에 ajax 기능을 추가하기 위해 jQuery를 사용하고 있습니다. 여러분은 공식 사이트 http://jquery.com/에서 jQuery의 최신 버전을 다운로드하실 수 있습니다 2013. 4. 29.
what is jQuery? jQuery는 AJAX 기반 응용 프로그램을 개발하기위한 좋은 라이브러리입니다. jQuery는 웹 2.0 애플 리케이션 개발을 단순화 자바 스크립트 프로그래머를위한 훌륭한 라이브러리입니다. 여러분은 멋진 웹 2.0 애플 리케이션을 개발하기 위해 jQuery를 사용할 수 있습니다. jQuery는 프로그래머가 코드를 단순하고 간결하게하는 데 도움이 됩니다. jQuery 라이브러리는 상황이 매우 단순하고 재사용 가능하도록 설계 되었습니다. jQuery 라이브러리는 HTML DOM 트리의 탐색 과정을 단순화합니다. 여러분은 이벤트를 처리하고 애니메이션을 수행하고 쉽게 웹 응용 프로그램에 AJAX 지원을 추가하기 위해 jQuery를 사용할 수 있습니다. Why jQuery? 여러분은 jQuery가 제공하는 모든 .. 2013. 4. 29.

티스토리툴바