본문 바로가기

웹관련/JavaScript-Jquery45

[자바스크립트] 자바스크립트 기초 공부하자!! 1. 내장함수 (1) 내장메시지 함수alert("Hello."); confirm("정말로 삭제할껴?"); prompt(메시지, 초기값); (2) 일반내장 함수isFinite(number) : number가 유한수이면 true, 아니면 false를 리턴isNaN(value) : value가 순수한 문자이면 true, 숫자형태의 문자이면 false를 리턴number(obj) : obj를 숫자로 변환하여 리턴string(obj) : obj를 문자로 변환하여 리턴eval(수식문자열 또는 Object 문자열) : 수식을 처리한 결과를 리턴, Object로 변환하여 리턴parseInt(문자열, [진수]) : 문자열을 정수로 변환하여 리턴parseFloat(문자열) : 문자열을 float-실수형으로 변환하여 리턴es.. 2016. 9. 22.
[자바스크립트] Cookie 함수로 정의하기 [사용방법] setCookie() - 쿠키를 만드는 함수입니다. setCookie('쿠키이름', '쿠키값', 만료일) 쿠키이름 : 쿠키이름을 영문으로 넣어주세요. 쿠키값 : 쿠키의 값을 문자열로 넣어주세요. 만료일 : 쿠키의 만료일을 숫자로 넣어주세요 예) 만료일이 1 이면 하루동안 지속되는 쿠키입니다. 예) 만료일이 -1 이면 쿠키가 삭제됩니다. 2016. 9. 22.
[Jquery] 종종헷갈리는 - text(),html(),val(),attr() 제이쿼리 돔 조작을 할때 많이 사용하는 내용입니다.근데 나만 그런가요?? 사용할때마다 헷갈리는데... 이놈의 머리....그래서 따로 정리를 해놓았습니다. text() - 텍스트의 내용을 설정하거나 반환html() - 선택한 요소의 내용을 설정하거나 반환val() - 폼 필드의 값을 설정하거나 반환attr() - 속성값을 설정하거나 반환 저 처럼 헷갈리시는 분들은 이걸보고 조금 덜 헷갈리시겠죠??ㅎㅎ 2016. 9. 22.
[Jquery] 제이쿼리 ON 이벤트관련 bind(), .live(), .delegate(), .on()은 이벤트에 관련된 기능으로, 먼저 각각의 기능들을 살펴보는 것이 순서인것 같아 먼저 기능들을 살펴본다. .bind()는 가장 많이 쓰는 이벤트 설정 함수이다. DOM이 로드된 후 추가된 element들에 대해서 event handler를 처리할 수 없고, .live(), .delegate()는 나중에 추가된 element들의 이벤트들을 처리할 수 있다. foo에 이벤트를 설정하고 싶다면 아래와 같이 사용된다. $(".foo").bind("click", handler); $(".foo").on("click", handler); .delegate()는 이벤트 설정을 부모에 대해 한다. 이런 방식을 이벤트 대리자라고 명명한다. .foo에 이벤트를.. 2016. 9. 22.
[자바스크립트] animate 속성정리 backgroundPositionXbackgroundPositionYborderWidthborderBottomWidthborderLeftWidthborderRightWidthborderTopWidthborderSpacingmarginmarginBottommarginLeftmarginRightmarginTopoutlineWidthpaddingpaddingBottompaddingLeftpaddingRightpaddingTopheightwidthmaxHeightmaxWidthminHeightminWidthfontSizebottomleftrighttopletterSpacingwordSpacinglineHeighttextIndent http://www.w3schools.com/jquery/eff_animate.asp 2016. 9. 22.
[자바스크립트] rotate,scale 지원하지 않지만 사용할수 있도록 해주는 플로그인 hello baby 다운받는곳 : https://github.com/zachstronaut/jquery-animate-css-rotate-scale/zachstronaut/jquery-animate-css-rotate-scalejquery-animate-css-rotate-scale - A monkey patch for jQuery 1.3.1+ that adds support for setting or animating CSS scale and rotation...github.com 2016. 9. 22.
[자바스크립트] 이미지 프리로딩 (window.load) 마우스 온 오버 할때 버튼이미지가 교체된다거나 배경 이미지의 변경이 있는 경우 아래와 같은 자바스크립트를 통해 해당 이미지를 바꿔주곤 한다. 이런 경우 마우스가 오버하는 순간 이미지를 불러들여오게 되는데 만약 이미지가 배경이미지이거나 혹은 불러들이는 어떤 데이터가 용량이 큰 경우 사용자의 입장에서는 사이트의 반응이 느리다고 느낄 수 있다. 이런 문제를 해결하기 위해서는 미리 해당 데이터를 불러들여오는 방법이 있는데 불러들여오는 방법에는 여러가지가 있을 수 있다. 숨겨진 div그룹안에 해당 image를 호출하거나 아이프레임을 쓴다거나 하는 방법들을 쓸 수 있지만이런 식으로 이미지를 불러들이는 경우 디스플레이 되지 않는 이미지를 로딩하기 위해 첫 페이지의 진입속도가 더뎌지는 문제가 생기게 된다.따라서 아래와.. 2016. 6. 10.
[Jquery] 핵심노드 다루기 1. 노드 찾기 - 태그 이름으로 노드 찾기 : $("태그이름"), $("선택자") - 클래스 이름으로 노드 찾기 : $(".클래스이름") - ID로 노드 찾기 : $("선택자") - 속성으로 노드 찾기 : $("[속성이름=값]") - 찾은 요소 개수 구하기 : .size() , .length - 찾은 요소 n번째 접근하기 : .eq(index) , .each(function(index){}); - 찾은 요소에서 특정요소만을 걸러내기 : .filter("선택자") - 찾은 요소에서 특정 자식요소만 찾기 : .find("선택자") 2. 자식 노드 찾기 - 전체 자식 노드 찾기 -- 텍스트 노드 포함 전체 자식 노드 찾기 : $("선택자").contents() -- 텍스트 노드 제외한 전체 자식 노드 찾기 .. 2016. 6. 10.
[자바스크립트] 스르르 넘어가게 해주는 제이쿼리 소스 (원하는위치로 ex:탑으로) 스르르 원하는 위치로 가게하는 제이쿼리 2가지 방법 [1번째 방법] Scroll to target jQuery(document).ready(function($) { $(".scroll").click(function(event){ event.preventDefault(); $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500); }); }); [2번째 방법] 또다른 방법은 이동할 위치에다가 id값이나 클래스를 주고.. offset(); 함수로 해당 위치값을 알아낸다음 변수에 저장하고 제이쿼리 애니메이션 메소드를 이용해서 해당변수 값만큼 이동하면 된다. jQuery offset() var val = $('#divId').offset(); $('.. 2016. 6. 10.