본문 바로가기

jQuery 예제20

jQuery shuffle 효과(이미지가 한장씩 뒤로 넘어가는 효과) jQuery 관련 포스팅은 기본적인 포스팅이기에 관련된 예제를 통하여 직접 응용하기 바라는 의미에서 이제 관련 예제를 올리려고 합니다. 이번 jQuery 포스팅 예제는 이미지가 한장씩 자동으로 뒤로 넘어가는 효과를 만드는 예제 입니다. // 이용방법은 간단합니다. 위와 같이 jquery.js 와 cycle_plugin.js 파일을 불러들인후 jQuery 선언뒤에 처럼 이미지를 적으면 끝입니다. 그렇게 되면 아래와 같이 이미지가 한장씩 뒤로 자동으로 넘어가는 효과가 나타납니다. 그림 상으론 제대로 표현이 안될듯 합니다. 첨부화일 올려놓았으니 참조 바랍니다. 나름대로 응용을 해보면 실무에도 적용이될 내용을 찾을수 있지 않을까 기대해봅니다. http://www.hscripts.com/scripts/jquery.. 2013. 7. 1.
jQuery 기타 References data() jQuery data() 는 선택된 요소에 사용자가 원하는 객체를 저장하고 불러오는 기능을 합니다. jQuery에 data 메소드가 있는 가장 큰 이유는 메모리 누수를 피하기 위해서 입니다. each() 일치하는 각 요소에 대한 함수를 실행합니다. 즉, 특정한 집합을 반복문 형태로 사용할 수 있습니다. $("button").click(function(){ $("li").each(function(){ alert($(this).text()) }); }); 위의 구문은 ""에 있는 text를 알림창에 표시하는 내용인데 예를 들어서 Park's의 블로그!!! 누군가에게 도움이 되는!!! 양질의 포스팅을 위해서!!! 에 있는 모든 내용을 알림창에 띄우게 됩니다. 가 3개가 있으니 3번 반복하여 알림창.. 2013. 6. 7.
jQuery AJAX 함수 Reference 이번장에서는 jQuery AJAX Reference에 대해서 알아보겠습니다. AJAX는 전체페이지를 로딩하지 않고 서버와 데이타 및 웹페이지의 업데이트 부분을 불러들일수 있는 예술적인 기능을 합니다. AJAX 기능에 대해서 조금더 자세히 알고싶은 분들은 저의 블로그 jQuery AJAX 를 방문하시면 됩니다. 다음 내용은 모든 jQuery의 AJAX 방법을 나타냅니다. $.ajax() AJAX의 요청을 수행합니다. $.ajaxPrefilter() AJAX 요청을 보내기 전이나 $.ajax() 함수에 의해 호출되기 전에 AJAX 옵션들을 수정하거나 조작합니다. 말이 좀 어렵습니다. ^^; 저도 코딩하면서 거의 본적이 없는 함수이기에 .... 내용인즉슨 미리 정의 되어있는 AJAX의 요청을 취소 또는 수정할.. 2013. 6. 5.
jQuery Event Reference Event method는 선택한 요소에 대하여 이벤트 핸들러에 함수를 트리거하거나 연결합니다. Event 관련 jQuery 함수의 종류는 아래와 같습니다. bind() : 요소(element)에 이벤트 처리기(handler)를 연결합니다.(바인딩이라고 하죠) $('#foo').bind('click', function() { alert('User clicked on "foo."'); }); // 위의 구문을 보면 bind()의 역할은 id값 foo인 요소에 대하여 click 이벤트에 연결하게 합니다. 유저가 이 foo 요소를 클릭하면 알림창이 나타나게 됩니다. blur() : JavaScript 이벤트인 "blur"를 이벤트 핸들러에 바인딩 하거나 요소에 이벤트를 발생시킵니다. Trigger the han.. 2013. 5. 30.
jQuery selector Selector Example Selects * $("*") 모든요소 선택 #id $("#lastname") 아이디 lastname 요소 선택 .class $(".intro") 클래스 intro 요소 선택 .class,.class $(".intro,.demo") 클래스 intro, demo 요소 선택 element $("p") 태그 p 요소 선택 el1,el2,el3 $("h1,div,p") 모든 , , 요소 선택 :first $("p:first") 첫번째 요소 선택 :last $("p:last") 마지막 요소 선택 :even $("tr:even") 모든 의 짝수 요소(0,2,4…) 선택 :odd $("tr:odd") 모든 의 홀수 요소(1,3,5…) 선택 :first-child $("p:first-ch.. 2013. 5. 29.
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 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.

티스토리툴바