본문 바로가기

jQuery40

jQuery Examples jQuery Selectors $("p").hide() p태그를 숨깁니다. $("#test").hide() 아이디 test를 숨깁니다 $(".test").hide() 클래스 test를 숨깁니다. $(this).hide() html 요소를 숨깁니다. jQuery Events jQuery click() 클릭했을때 발생하는 이벤트 입니다. jQuery dblclick() 더블클릭했을때 발생하는 이벤트 입니다. jQuery mouseenter() 마우스가 다가왔을때 발생하는 이벤트 입니다. jQuery mouseleave() 마우스가 자리를 떠날때 발생하는 이벤트 입니다. jQuery mousedown() 마우스 버튼클릭시 발생하는 이벤트 입니다. jQuery mouseup() 마우스 버튼을 클릭하고 놓을때 발.. 2013. 5. 28.
jQuery noConflict() 이번장에서는 noConflict() 함수 사용방법에 대해서 알아보겠습니다. 여러분들도 이미 알고있다시피 jQuery는 $ 기호를 축약으로 사용합니다. noConflict()는 다른 방법으로 jQuery를 실행할 수 있습니다. 총 3가지 예제 구문을 보여줄텐데 모두 똑같은 실행을 합니다. 관련예제 1 $.noConflict(); jQuery(document).ready(function(){ jQuery("button").click(function(){ jQuery("p").text("jQuery is still working!"); }); }); // $ 대신 jQuery를 사용하여 나타냄 관련예제 2 var jq = $.noConflict(); jq(document).ready(function(){ jq.. 2013. 5. 28.
jQuery AJAX get(), post() jQuery AJAX get() 요청 방식과 post()의 요청방식 둘다 사용 가능합니다. jQuery get() 은 기본적으로 서버로부터 데이터를 가져오는데 사용됩니다. jQuery post() 은 서버로부터 일부 데이터를 가져옵니다. jQuery get() $.get(URL,callback); 기본사용 문법 $("button").click(function(){ $.get("test.php",function(data,status){ alert("Data: " + data + "\nStatus: " + status); }); }); // test.php 의 내용을 읽어들입니다. test.php 의 내용은 --------------------------------------- ----------------.. 2013. 5. 27.
jQuery AJAX load() 이번장에서는 jQuery AJAX load() 함수에 대해서 알아보겠습니다. 실무에서 요긴하게 써먹는 부분이니 알아두면 도움이 많이 될듯합니다. jQuery load() 함수는 간단하지만, 강력한 AJAX 방식입니다. jQuery load() 함수는 전체 웹페이지를 새로고침하지 않고 웹페이지의 일부분만을 업데이트할 수 있습니다. $(selector).load(URL,data,callback); // 기본 문법 - URL 은 불러들일 페이지의 주소값입니다. - data 는 쿼리스트링 매개변수값 입니다. - callback 은 load 함수가 완료된 후 실행되는 함수 입니다. 관련예제를 살펴보기전에 우선 text.txt 화일을 미리 생성해 둡니다. test.txt 파일의 내용은 ----------------.. 2013. 5. 27.
jQuery AJAX 소개 이번 장에서는 jQuery AJAX의 기능에 관한 소개를 하겠습니다. AJAX는 웹페이지의 일부를 업데이트 할수 있고 서버와 데이터간의 교환을할 수 있는 예술적인 기술입니다. AJAX는 Asynchronous JavaScript and XML 의 줄임말입니다. 다시 말해서 AJAX는 전체페이지 로딩없이 백그라운드에서 데이터를 로딩할 수 있습니다. 설명이 조금 어려운듯 하여 예를 들어서 추가 설명하겠습니다. ☞ 예를들어 A.php 와 B.php가 있다고 가정했을때 A.php에서 B.php에 데이터를 읽어들이고 싶을경우 보통 팝업창을 띄워서 javascript 부모, 자식 기능을 이용하여 그 내용을 읽습니다. 하지만 AJAX는 그러한 작업없이 바로 하나의 페이지에서 두 개 이상의 다른 페이지에 있는 데이터를.. 2013. 5. 25.
jQuery - Dimensions(면적,넓이) 오늘은 jQuery Html이 마지막 내용인 Dimensions( 면적, 넓이)에 대해서 알아보겠습니다. jQuery Dimension 의 사용방법 - width() - height() width()와 height()는 넓이와 높이값을 반환합니다. - innerWidth() - innerHeight() innerWidth()와 innerHeight()는 width(),height()와 같이 넓이와 높이를 반환하지만 padding값만을 포함하여 반환합니다. 즉, 넓이와 높이를 100px, 100px 라고 해도 padding 값을 주면 더 넓어지게 되는데 그 넓어지는 값을 반환하게 됩니다.(단, padding만 해당됨) - outerWidth() - outerHeight() outerWidth()와 oute.. 2013. 5. 24.
jQuery classes css() 이번장에서는 jQuery css() 구문에 대해서 알아보겠습니다. css() 는 선택된 요소에 대해서 하나 또는 그 이상의 속성값을 줄 수 있습니다. css("propertyname"); css("propertyname","value"); css({"propertyname":"value","propertyname":"value",...}); propertyname 속성값을 의미하고 css 속성에 하나가 아닌 여러개가 들어갈수 있음을 나타냅니다. CSS() 관련예제 머릿글 입니다. 첫번째 구문입니다. 두번째 구문입니다. 세번째 구문입니다. 마지막 구문입니다. 클릭하세요! // 이미지를 보면 알겠지만 빨강,초록,파랑 등 백그라운드의 색상이 버튼을 클릭하면 노란 백그라운드로 바뀌는것을 보여줍니다. 즉 $("p.. 2013. 5. 23.
jQuery CSS Classes 이번 장에서는 jQuery CSS Classes에 대해서 알아보겠습니다. JQuery와 CSS 조작을 위한 여러 가지 방법이 있습니다. 우리는 다음과 같은 방법을 살펴 보겠습니다 . addClass() 선택한 요소에 하나 이상의 클래스를 추가합니다. removeClass() 선택한 요소에서 하나 이상의 클래스를 제거합니다. toggleClass() 선택된 요소에서 클래스를 추가/제거가 동시에 가능케 합니다. addClass() 관련예제 첫번째 머리글 두번째 머리글 첫번째 문장입니다. 두번째 문장입니다. 이곳은 important 문장입니다.! Add classes $("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass(".. 2013. 5. 23.
jQuery - Remove Elements 이번장에서는 jQuery 중에서 remove 즉 지운다는 의미인데 이 함수에 대해서 알아보겠습니다. jQuery remove 함수중엔 remove()와 empty() 있습니다. remove() : 선택한 모든 요소를 지웁니다. empty() : 선택한 자식 요소를 지웁니다. 예제를 보면 이해가 더 빠를겁니다. 간단예제(사용법) $("#div1").remove(); $("#div1").empty(); remove() 관련예제 div 문장입니다. div 첫번째 문장 div 두번째 문장. Remove div // Remove div 버튼을 클릭하면 id div1의 모든 값을 지웁니다. empty() 관련예제 div 문장입니다. div 첫번째 문장 div 두번째 문장. empty div // empty div .. 2013. 5. 22.
jQuery html Set text(), html(), val(), attr() 이번 장에서는 html 구문 form 구문등을 jQuery 를 이용하여 변경하는 방법에 대해서 알아보겠습니다. jQuery text(), html(), val(), attr() 앞 장에서 설명한바와 같이 text, html, var, attr 각각의 속성 값을 제어 할 수 있습니다. 간단예제 $("#btn1").click(function(){ $("#test1").text("안녕하세요!!!"); }); $("#btn2").click(function(){ $("#test2").html("안녕하세요!!!"); }); $("#btn3").click(function(){ $("#test3").val("Park's 블로그"); }); // 버튼 id btn1을 클릭하면 id text1의 값이 "안녕하세요!!!" .. 2013. 5. 20.
jQuery HTML Get Content and Attributes text(), html(), val(), attr() 이번 장에서는 jQuery HTML을 어떻게 컨트롤 할 수 있는지에 대해서 알아보겠습니다. jQuery 는 DOM을 조작할 수 있습니다. DOM 은 Document Object Model의 줄임말입니다. Get Content text(), html(), val(), attr() text() - 텍스트의 내용을 설정하거나 반환할 수 있습니다. html() - 선택한 요소의 내용을 설정하거나 반환할 수 있습니다. val() - 폼 필드의 값을 설정하거나 반환할 수 있습니다. attr() - 속성값을 설정하거나 반환할 수 있습니다. text(), html() 사용방법 간단한 예제 $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $(".. 2013. 5. 17.
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 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 ( 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.
How jQuery Works? 이 섹션에서는 우리는 간단한 프로그램의 도움으로 어떻게 작동하는지 jQuery 볼 수 있습니다. 이 튜토리얼은 여러분에게 jQuery의 기본적인 소개를 제공하고 이해하는 데 필요한 개념을 설명합니다. jQuery 라이브러리는 개발자가 리치 인터넷 애플 리케이션을 개발하는 데 도움이됩니다. 이것은 웹에서 가장 많이 사용되는 프레임 워크 중 하나입니다. 그것의 쉬운 학습과 언어를 사용할 수 있습니다. 다음은 jQuery의 하이라이트는 다음과 같습니다 • jQuery는 브라우저에서 실행되는 자바 스크립트 기반의 라이브러리입니다. 그것은 클라이언트측 AJAX 프레임 워크입니다. • jQuery는 JavaScript 프로그래밍 언어를 사용하여 AJAX 기반 응용 프로그램의 개발을 단순화합니다. • jQuery는 .. 2013. 4. 29.
Downloading and Installing jQuery 데모 응용 프로그램을 개발하기 위해 jQuery를 다운로드하여 설치합니다. jQuery는 하나의 JS 파일로 제공됩니다. 그래서 자사의 웹 애플 리케이션에서 jQuery를 다운로드하여 설치하기가 매우 편리합니다. 여러분은 심지어 기존 응용 프로그램에 추가하고 jQuery 함수를 사용할 수 있습니다. 이러한 단순 프로그램으로 인해 자신의 웹 응용 프로그램에 ajax 기능을 추가하기 위해 jQuery를 사용하고 있습니다. 여러분은 공식 사이트 http://jquery.com/에서 jQuery의 최신 버전을 다운로드하실 수 있습니다 2013. 4. 29.

티스토리툴바