본문 바로가기

jQuery42

jQuery 최신 버전! 매번 jQuery 최신 버전을 찾을때 구글링 하는데 이제 그것도 귀찮아서 여기 적어둠... 걍 위에 적어놓고 쓰려면 위처럼 사용하면 됨 그리고 다운로드를 하려면 https://jquery.com/download/ 사이트 들어가서 다운받으면 된다. 2023. 9. 15.
jQuery Mobile 아이콘 안녕하세요!! 이번에 포스팅할 jQuery Mobile 내용은 아이콘 입니다. jQuery Mobile 은 아주 쉽게 아이콘을 생성할 수 있습니다. 오늘 그 부분에 대해서 알아보겠습니다. 우선 아래 간단한 소스를 보면서 설명드리겠습니다. Left Arrow Button // 위 구문에서 중요하게 보아야 할 곳은 붉은색으로 표시된 부분입니다. data-icon="arrow-l" 입니다. 여기서 l 은 left 의 줄임말이라고 보면 되겠습니다. 위 구문을 실행하면 아래와 같은 화면이 나오게 됩니다. // 위 그림을 보면 좌측에 아이콘이 생긴것을 확인할 수 있습니다. 이렇게 아이콘을 만들고 싶은 경우 data-icon 을 이용하여 사용하고 싶은 아이콘을 적어주기만 하면 됩니다. 아래 내용은 기타 아이콘들에 대.. 2013. 11. 7.
jQuery shuffle 효과(이미지가 한장씩 뒤로 넘어가는 효과) jQuery 관련 포스팅은 기본적인 포스팅이기에 관련된 예제를 통하여 직접 응용하기 바라는 의미에서 이제 관련 예제를 올리려고 합니다. 이번 jQuery 포스팅 예제는 이미지가 한장씩 자동으로 뒤로 넘어가는 효과를 만드는 예제 입니다. // 이용방법은 간단합니다. 위와 같이 jquery.js 와 cycle_plugin.js 파일을 불러들인후 jQuery 선언뒤에 처럼 이미지를 적으면 끝입니다. 그렇게 되면 아래와 같이 이미지가 한장씩 뒤로 자동으로 넘어가는 효과가 나타납니다. 그림 상으론 제대로 표현이 안될듯 합니다. 첨부화일 올려놓았으니 참조 바랍니다. 나름대로 응용을 해보면 실무에도 적용이될 내용을 찾을수 있지 않을까 기대해봅니다. http://www.hscripts.com/scripts/jquery.. 2013. 7. 1.
jQuery Slide Menu(슬라이드 메뉴) 예전에는 보통 복잡한 자바스크립트 소스를 사용하여 메뉴 구성을 만들어 사용했었습니다. 하지만 jQuery 가 나온 이후 간편하게 jQuery의 라이브러리를 사용하여 더 화려한 효과를 낼 수 있습니다. 아래 소스와 이미지를 살펴 보시기 바랍니다. Aberdeen Ada Adamsville Addyston Delphi Ada Saarland Salzburg Saarland Salzburg Delphi Ada Saarland Salzburg Delphi Ada Saarland Salzburg Perch Amesville // 깔끔한 3단 메뉴구성을 할 수 있는 소스 입니다. CSS를 조금 다룰줄 안다면 텍스트, 이미지 구성등 더 응용을 할 수 있지 않을까 생각합니다. 출처 : http://jqueryui.com/ 2013. 6. 25.
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 HTML / CSS 함수 Reference addClass() 선택한 요소에 하나 이상의 클래스 이름을 추가합니다. after() 선택된 요소 뒤에 내용 삽입 합니다. append() 선택된 요소의 끝에 내용 삽입 합니다. appendTo() 선택된 요소의 끝에 HTML 요소를 삽입 합니다. attr() 선택된 요소의 집합에서 요소의 해당하는 속성값을 반환합니다. before() 선택된 요소 전에 콘텐츠 삽입합니다. clone() 선택한 요소를 복사합니다. css() 선택된 요소에 대해 하나 이상의 Style 속성값을 설정하거나 반환합니다. detach() 선택한 요소를 지웁니다. empty() 선택된 요소의 모든 자식 노드 및 콘텐츠를 제거합니다. hasClass() 선택한 요소에 대해 특별한 class name이 있는지 검사합니다. heigh.. 2013. 6. 4.
jQuery Effect 함수들 animate() 선택한 요소에 사용자 지정 애니메이션을 실행 clearQueue() 선택한 요소에서 아직 실행되지 않는 모든 함수 기능을 제거 delay() 선택된 요소에 대기중인 모든 기능에 대한 딜레이(지연) dequeue() 선택한 요소에 대한 다음 대기 함수를 실행 fadeIn() 선택한 요소에 대하여 fadein fadeOut() 선택한 요소에 대하여 fadeout fadeTo() 선택한 요소에 대하여 투명도를 설정 fadeToggle() 선택한 요소에 대하여 fadeIn 과 fadeOut 함수를 둘다 실행 finish() 선택한 요소에 대하여 animation을 제거하고 중지함 hide() 선택한 요소에 대하여 숨김 queue() 선택한 요소에서 대기중인 기능을 보여줌 show() 선택한 요.. 2013. 5. 31.
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 Add Elements 이번 장에서는 jQuery add에 대해서 알아보겠습니다. jQuery add 요소에는 여러가지 함수가 있는데 append(), prepend(), after(), before() 에 대해서 알아보겠습니다. append() 함수는 선택한 요소의 끝에 문구를 추가 할 수 있습니다. prepend() 함수는 선택한 요소의 앞에 문구를 추가 할 수 있습니다. after(), before() 의 역할은 선택한 모든 요소의 뒤,앞에 html 또는 javascript 구문등을 추가 할 수 있습니다. append() 와 prepend() 의 간단예제 $("p").append("append 구문을 보여주세요."); $("p").prepend("prepend 구문을 보여주세요."); 관련예제 첫번째 구문입니다. 두 번째.. 2013. 5. 21.
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.

티스토리툴바