본문 바로가기

jQuery40

jQuery 최신 버전! 매번 jQuery 최신 버전을 찾을때 구글링 하는데 이제 그것도 귀찮아서 여기 적어둠... 걍 위에 적어놓고 쓰려면 위처럼 사용하면 됨 그리고 다운로드를 하려면 https://jquery.com/download/ 사이트 들어가서 다운받으면 된다. 2023. 9. 15.
숫자만 입력하는 스크립트 See the Pen Untitled by 진격IT (@zsrcvkwa-the-animator) on CodePen. 반응형 소스라 걍 가져왔는데 중요한건 class 의 onlyNumber 입니다. $(function(){ $(".onlyNumber").keyup(function(event){ // onlyNumber 클래스 가져오고 if (!(event.keyCode >=37 && event.keyCode 2023. 3. 16.
따라다니는 배너 만들기 아래 이미지를 보면 카카오톡 채널 배너가 우측에 있는걸 확인할 수 있습니다. 현재 이미지라서 고정되어 있어 보이지만 홈페이지 http://체크앤체크.kr/ 를 들어가보면 움직이며 따라다니는 모습을 볼 수 있습니다. 뭐 따라다니는 배너 , 고정된 배너 등등 여러가지 스킬들이 있지만 지금까지 적용한것중 가장 방법이 쉬워서 이렇게 공유합니다. See the Pen Untitled by 진격IT (@zsrcvkwa-the-animator) on CodePen. 이미지 링크걸고 id값으로 floatRight 으로 CSS 조절해가며 우측 또는 좌측 마음대로 이미지 위치 이동 가능하고 스크립트 위 위 소스만 적용해주면 따라다니는 배너를 쉽게 만들수 있습니다. 지금까지 제가 써본것중 적용하기 쉽고 단순해서 좋네요. 2023. 3. 8.
jQuery 체크박스에 전체 체크하기 사실 잘 안쓰는? 스킬이긴 하지만 아주 간혹 이 기능을 사용할 경우가 생기곤 합니다. 그래서 여기 남깁니다. 바로 체크박스에 전처체크 하기!~ See the Pen Untitled by 진격의 IT (@zsrcvkwa-the-animator) on CodePen. 이 기능을 사용할 코딩이 안생기길... ㅋ 아 참고로 " target="_blank" rel="noopener">'http://code.jquery.com/jquery-latest.min.js'> 위 스크립트는 jQuery 항상 최신버전을 가지고 오는 url 입니다. 2022. 11. 4.
bxSlider 이미지 슬라이드 홈페이지를 제작하다 보면 이미지 슬라이드 기능을 자주 사용하곤 하는데 아주 좋은 bxSlider 입니다. 사용하기도 매우 쉽고 MIT 라이센스로 무상으로 제한없이 누구나 사용 가능하며, 반응형 홈페이지에도 적용되니 이보다 좋을수 없을듯합니다. 참고로 MIT 라이센스는 미국 매사추세츠 공과대학교(MIT)에서 해당 대학의 소프트웨어 공학도들을 돕기 위해 개발한 라이센스입니다. MIT 소프트웨어를 누구라도 무상으로 제한없이 취급해도 좋지만 저작권 표시 및 이 허가 표시를 소프트웨어의 모든 복제물 또는 중요한 부분에 기재해야 합니다. 그리고 저자 또는 저작권자는 소프트웨어에 관해서 아무런 책임을 지지 않는다. 뭐 구글에 bxSlider 검색하면 많이 나오긴 합니다. 아무튼 전 이곳에 남겨 봅니다. 사용법은 Se.. 2022. 10. 21.
jQuery Mobile 리스트(List Views) 안녕하세요!! 또 오랜만에 jQuery Mobile 관련 내용을 올립니다. 요즘 이직한 새로운 직장에서 일배우느라 정신이 정말 없습니다. 지금도 공부를 해야하는데도 불구하고 이렇게 블로그를 씁니다. 6개월 넘게 블로그를 쓰다보니 정말 애착이 갑니다. 또 많은 분들이 질문도 주시고 답변하면서 보람도 느낍니다. 어쨋든 오늘 포스팅할 내용은 jQuery Mobile List 입니다. jQuery Mobile 을 사용하여 리스트 화면을 만들어보겠습니다. jQuery Mobile 리스트를 만들경우 또는 을 사용하여 나타냅니다. 그리고 를 사용하여 리스트들을 만들면 됩니다. 즉, 아래 소스와 같이 만들어지게 됩니다. OL 리스트 UL 리스트 리스트 화면을 직접 만들어보겠습니다. OL 리스트 OL 리스트1 OL 리스.. 2013. 11. 26.
jQuery Mobile 툴바(Toolbars) 안녕하세요!! 이번 포스팅은 지난 포스팅에 이어서 jQuery Mobile 툴바에 대해서 설명하겠습니다. 오늘 설명드릴 내용은 툴바에 대한 스크롤 입니다. 스크롤은 마우스에 달려있는 위, 아래 내리고 올리는 기능을 하는 역할이죠. 그런데 jQuery Mobile의 스크롤은 모바일에서 하는 것이기 때문에 손가락을 이용해서 한다고 보시면 되겠습니다. 스크롤은 총 3가지 방법으로 할 수 있습니다. inline : 기본적으로 헤더와 푸터 내용이 함께 스크롤 됩니다. fixed : 헤더와 푸터 내용은 고정된체 그 안의 내용만 스크롤 됩니다. fullscreen : 내용을 클릭하면 헤더와 푸터는 나타났다 사라졌다를 반복합니다. 내용만 보고 싶을 경우 한번 클릭하면 헤더와 푸터의 내용은 사라지며 내용만 스크롤을 하면.. 2013. 11. 13.
jQuery Mobile 툴바(toolbars) 안녕하세요!! 이번 포스팅은 jQuery Mobile 의 툴바에 대해서 알아보겠습니다. 내용이 조금 많은듯 해서 다음 포스팅과 반반 나눠서 포스팅해야 할듯 합니다. ^^; 우선 오늘 포스팅은 헤더 바(hearder bars)와 푸터 바(footer bars)에 설명하겠습니다. 사실 헤더(hearder)는 일반적으로 페이지 제목, 로고, 그리고 버튼을 포함하는 내용을 많이 담고 있습니다. 지금 보여드릴 예제는 여러분들이 왼쪽과 오른쪽에 버튼을 추가하는 내용입니다. 예제를 보시기 바랍니다. Home 나의 모바일 홈페이지 Search // 붉은 글씨로 표시된 부분을 보면 태그 태그 태그로 나오는 것을 볼 수 있고 data-icon 은 home 과 search 를 넣어서 해당하는 아이콘이 나오게 한것을 알 수 .. 2013. 11. 11.
jQuery Mobile 아이콘 안녕하세요!! 이번에 포스팅할 jQuery Mobile 내용은 아이콘 입니다. jQuery Mobile 은 아주 쉽게 아이콘을 생성할 수 있습니다. 오늘 그 부분에 대해서 알아보겠습니다. 우선 아래 간단한 소스를 보면서 설명드리겠습니다. Left Arrow Button // 위 구문에서 중요하게 보아야 할 곳은 붉은색으로 표시된 부분입니다. data-icon="arrow-l" 입니다. 여기서 l 은 left 의 줄임말이라고 보면 되겠습니다. 위 구문을 실행하면 아래와 같은 화면이 나오게 됩니다. // 위 그림을 보면 좌측에 아이콘이 생긴것을 확인할 수 있습니다. 이렇게 아이콘을 만들고 싶은 경우 data-icon 을 이용하여 사용하고 싶은 아이콘을 적어주기만 하면 됩니다. 아래 내용은 기타 아이콘들에 대.. 2013. 11. 7.
jQuery Mobile 버튼 안녕하세요!! 오랜만에 jQuery Mobile 포스팅을 하는것처럼 느껴집니다. 요즘 정신도 없고 게으르고 하다보니 그런듯하네요. 아무튼 이번에 포스팅할 내용은 jQuery Mobile 에서 사용되는 버튼의 종류 및 사용방법에 대해서 설명드립니다. jQuery Mobile 은 3가지의 방법으로 버튼을 만들 수 있습니다. 첫번째 방법은 입니다. Button 두번째 방법은 입니다. 세번째 방법은 입니다. Button // 여기서 특이점은 붉은 글씨로 표현된 부분입니다. 그냥 단순히 href 를 사용하면 텍스트에 링크만 걸게 되기 때문에 data-role="button" 이라고 정의를 하여 버튼을 생성합니다. 기본적으로 버튼은 화면의 전체 너비를 차지합니다. 하지만 두 개 이상의 버튼을 만들고자 할 경우 da.. 2013. 10. 31.
jQuery Mobile 페이지2 안녕하세요!! 이전 포스팅에서 jQuery Mobile의 페이지에 대해서 간략히 설명을 드렸었습니다. 내용이 너무 길어질듯해서 이렇게 단락을 잘라서 설명을 드리는점 양해 바랍니다. 아래 설명하는 내용은 페이지 이동입니다. 일단 소스를 보면서 설명드립니다. 나의 모바일 홈페이지 첫 번째 페이지입니다!! 두 번째 페이지 Copyright by makand123. All Rights Reserved. 나의 모바일 홈페이지 두 번째 페이지입니다!! 첫 번째 페이지 Copyright by makand123. All Rights Reserved. // 위 구문을 보면 ... 의 내용안에 과 이렇게 두개의 내용이 들어 있는것을 확인할 수 있습니다. 그리고 안의 내용은 header, content, footer 로 이.. 2013. 10. 28.
jQuery Mobile 페이지 안녕하세요!! 이번에 포스팅할 내용은 jQuery Mobile의 간단한 페이지를 만들어 보겠습니다. 원래 모바일이란 기기가 많이 업그레이드 되고는 있지만 우리가 흔히 사용하는 개인용 PC 처럼 CPU, 메모리 등이 많이 높지는 않습니다. 그래서 가끔 모바일 홈페이지들중에 버벅거리는 현상이 나타나는 경우가 종종 있죠. 아마도 계속 모바일 기기도 사양이 높아지고 있는 추세고 광대역 LTE도 나오고 있어서 점점 그런 경우는 줄어들거라 생각하지만 jQuery Mobile은 사실 모바일에 최적화 되어 있기 때문에 적은 소스 내용으로 최적의 모바일 환경을 구축할 수 있다고 보면 되겠습니다. 그럼 예제로 어떻게 구성되는지 간단히 알아보겠습니다. 나의 모바일 홈페이지 자 이제 시작해봅시다!! Copyright by m.. 2013. 10. 25.
jQuery Mobile 인스톨(Install) 안녕하세요!! 이번에 포스팅할 내용은 jQuery Mobile 의 Install(인스톨) 입니다. 인스토이라고 해서 사실 거창한건 크게 없으니 안심하셔도 됩니다. 이전 포스팅에서도 잠깐 설명을 드렸었죠. jQuery Mobile 의 인스톨은 상단에 라이브러리 3줄의 내용만 있으면 끝입니다. 그리고 라이브러리를 직접 다운받아서 서버에 저장하여 사용해도 무관합니다. 인스톨을 하기 위해서 컴퓨터(서버)에 어떠한 설치도 요구하는건 없습니다. 라이브러리는 총 3개이며 하나의 CSS 파일과 두개의 자바스크립트(JS) 파일입니다. // 위 처럼 서버에 다운로드된 주소의 링크를 걸면 되겠습니다. 이제 인스톨을 했으니 다음 포스팅부터 jQuery Mobile 의 페이지를 만들어가며, 여러가지 기능에 대해서 알아보겠습니다.. 2013. 10. 21.
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 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.

티스토리툴바