목록Web (52)
noname02
우선 로딩클래스를 만들고 html 문서에 기본으로 설정한다.그리고 보통 html문서가 로딩되고 난 뒤, 스크립트가 로딩되는데 이 때 로딩클래스를 제거한다. AJAX를 사용하는 경우$body = $("body"); $(document).on({ ajaxStart: function() { $body.addClass("loading"); }, ajaxStop: function() { $body.removeClass("loading"); } });를 참고한다. (ajaxStart, ajaxStop을 사용한다.)
간단. -=와 +=를 사용하면 됨
우선 애니메이션 효과를 낼 큰 div 컨테이너를 만든다.페이지 돌입시에는 jQuery 맨 윗부분에 컨테이너에 효과를 부여한다. 페이지 이동시에는 페이지의 모든 앵커(a)를 대상으로 클릭시 효과를 부여한다.이 때, 앵커를 클릭하였을 경우 디폴트 값으로 이동되는 것을 막기 위해 return false;를 삽입하고클릭시 앵커의 속성값에 있는 url 주소를 변수로 저장한다. var url = $(this).attr("href"); 그리고 콜백 메서드에 document.location.href = url; 을 통해 이동을 시켜주면 된다. 간단한 예제>>12345678910111213141516171819$(function () { $("body div").fadeIn(500, function () { $(this..
match() - 파라미터로 Regullar Expression을 전달한다. - /pattern/modifiers 의 형태이다. - pattern은 찾을 문자열, modifiers은 조건이다.
Visual Studio에서 less파일을 작업하면, simpLESS는 해당 less파일을 컴파일하지 못하는 현상이 발생한다. 이 경우 해당 less파일을 활성화 시키고 File -> Advanced Save Option.. 에 들어가서인코딩을 Unicode (UTF-8 without signature) - Codepage 65001 로 변경해주면 된다. 스크롤바 하단부에 있다.
var value = setTimeout(function(){ }, ms) - ms뒤에 function을 실행한다. clearTimeout(value) - setTimeout의 ms를 초기화시킨다. mouseover 이벤트와 mouseout 이벤트를 사용한다고 했을 때,mouseout 되고 나서 몇 초 뒤에 어떤 일을 수행하도록 setTimeout을 설정했다고 하자.그러면 mouseover가 되어있는 동안은 mouseout 이벤트에 설정된 function이 수행이 되면 안되는데, 이상하게도 수행이 된다. 따라서 mouserover 이벤트에 clearTimeout(value)을 지정해놓고 mouseout에setTimeout을 그냥 사용하는것이 아닌 value = setTimeout 형식으로 사용해서 이러한..
http://www.fyneworks.com/jquery/xml-to-json/ - xml을 json으로 변환해주는 플러그인
https://github.com/padolsey/jquery.fn
$.ajax()는 하나의 처리를 위해 작성하는 코드의 양이 길다. 따라서 간단한 처리를 위한 메서드가 존재한다.특정한 가공이 필요없으면 .load() 메서드를 사용하면 된다. 하지만 XML을 다루기 위해서는 get과 post를사용해야 한다. $.get() $.get("url" [,data] [, success function(data)] [,dataType]) - get은 전송된 값이 주소표시줄에 노출된다. ket=value의 형태로. - 그리고 전송할 수 있는 용량이 1024byte로 제한되어있다. - 따라서 큰 용량을 전송할 경우 post방식을 사용한다. $.post() $.post("url" [,data] [, success function(data)] [,dataType]) - form 태그 속성..
1. 반복성 없는 XML 데이터 12345678910111213141516171819202122$ajax({ ... success: function(xml) { // 데이터 추출 var value1 = $(xml).find("XML element").text(); ... // 데이터를 HTML로 동적 생성 var div = $(""); var p1 = $("").html(value1); .... // 데이터 조립 div.append(p1).append(p2).... // HTML에 표시 $("#id").append(div); }, ...}); cs 2. 반복성 있는 XML 데이터 - each메서드 사용. - $(this)로 접근. 12345678910111213141516171819202122232425..
$.ajax({"url": "주소","type": "get/post","data": "파라미터 문자열 key=value&key=value","dataType": "text/xml/json/jsonp","timeout": ms"cache": 이전 요청에 대한 캐쉬저장 여부(true, false),"success": 통신이 성공했을 때 실행되는 함수 function(data){ } "error": 통신이 실패했을 때 실행되는 함수 function(xhr, textStatus, errorThrown) { }}); error의 경우 - xhr : XMLHttpRequest객체 원본으로 HTTP ERROR CODE값이 포함된다. (404에러, 500에러 등) - textStatus : ERROR라는 고정값을 갖는..
https://github.com/Borismoore/jquery-tmpl
http://jqueryvalidation.org/ - 폼의 입력값 형식검사 플러그인.- 폼 요소에 필수입력값, 허용하지 않는 입력값 등을 검사
http://lokeshdhakar.com/projects/lightbox2/ - 이미지 클릭시 어두워지면서 원본 이미지를 보여주는 플러그인. - script를 body 맨 아랫부분에 위치시키자.
bind() - bind( "이벤트1 이벤트2 이벤트3 ...", function() { } ); 와 같은 형태로 사용한다. - 여러개의 이벤트를 공통 메서드 하나로 연결할 수 있다. - bind({"이벤트1": function() { },"이벤트2": function() { },"이벤트3": function() { }}); 와 같은 JSON으로 묶을 수 있다. unbind() - bind 이벤트를 제거한다. on() - $(document).on( "이벤트", "셀렉터", function() { } ); - 동적으로 추가할 요소에 대한 이벤트를 정의하는 메서드이다. - 핵심적인 기능이다. off() - on 이벤트를 제거한다. one() - 이벤트를 한번만 실행시킨다. bind와 같은 방식으로 사용한다..
.next() - 현재 선택된 요소를 기준으로 다음 요소를 리턴한다. .prev() - 현재 선택된 요소를 기준으로 이전 요소를 리턴한다. .parent() - 현재 선택된 요소의 부모 요소를 리턴한다. .parents("Selector") - 현재 선택된 요소에서 Selector에 해당하는 가장 가까운 요소를 검색한다. - parent와의 차이점은, parent는 노드구조에 의해 바로 윗 단계만 검색되지만 parents는 단계에 상관 없이 검색된다. .children() - 현재 선택된 요소의 자식 요소들을 배열로 리턴한다. .find("Selector") - parents의 children 버젼. .eq(n) - 현재 선택된 요소의 n번째 자식 요소를 리턴한다. A.html(B) - A요소의 시작태그..
.css("CSS 속성이름"); - 해당 요소에 적용되어 있는 css값을 리턴한다. .css("CSS 속성이름", "값"); - 속성에 값을 지정한다. .css({"이름1": "값","이름2": "값","이름3": "값}); - JSON 형태로 값을 지정한다. .hasClass("클래스이름"); - 해당 요소가 클래스이름과 동일하면 true를 리턴한다. .addClass("클래스이름"); - 클래스를 부여한다. .removeClass("클래스이름"); - 클래스를 제거한다. .toggleClass("클래스이름"); - addClass removeClass .show() - 숨겨진 요소를 화면에 표시 .show(1000) - 숨겨진 요소를 1초에 걸쳐서 화면에 표시 .hide() - 요소를 숨김 .hide..
.val() - form태그 내의 요소에 입력된 값들을 리턴받는다. 파라미터를 전달하면 값을 설정할 수 있음. - 값이 없는 경우 null을 리턴한다. (조건문에서 false로 됨) .is() - 파라미터로 조건을 충족하는지 여부를 검사할 수 있다. .each() - 파라미터로 메서드를 전달하여 변수의 배열만큼 실행한다. .index() - 선택된 객체의 위치를 리턴한다. event.preventDefault() - 이 메서드를 선언하면 event의 기본값으로 설정된 액션을 취하지 않는다. $(window) - 브라우저 제어 객체. setTimeout(function, ims) - javascript 내장함수. function에 함수를 설정하고 ms는 1/1000초 단위인데 ms초 뒤에 function을..
navigator 클래스는 브라우저의 정보를 조회할 수 있는 속성값들을 가지고 있다. appName - 브라우저의 이름appCodeName - 브라우저의 코드명platform - 브라우저가 설치된 시스템의 환경userAgent - 브라우저의 종류와 버전(포괄적인 정보)appVersion - 브라우저의 버전 여기서 userAgent에는 OS의 이름이나 모바일 기기의 이름이 들어간다. 따라서 모바일기기임을 확인할 경우String클래스의 indexOf메서드를 이용해서 (만일 문자열을 찾지 못하면 -1을 반환 하는것을 이용하여) navigator.userAgent.indexOf("iPhone") > 0 과 같이 탐색하면 된다. iPhone, iPad, iPod, Android 등이 있다.
window 클래스 - 가장 최상위 클래스이다. 따라서 window는 생략 가능해서 사용한다. open("URL") - URL주소로 새 창(탭)을 연다.close(), self.close() - 창을 닫는다.open("URL","창 이름","옵션") - 새 창(탭)을 여는데, 창 이름을 설정하므로 해당 창 이름에 해당하는 창으로 연결한다. 따라서 여러 창이 열리는게 아니라 해당 창 이름에 해당하는 창 하나에만 열린다. - 창 이름이 공백이면 새 창이 열린다. 창 옵션값toolbar (yes/no) 툴바 아이콘의 표시 여부 설정location (yes/no) 주소표시줄의 표시 여부 결정status (yes/no) 상태 바의 표시 여부 결정menubar (yes/no) 메뉴 표시줄의 표시 여부 설정scrol..
setInterval 메서드는 다른 메서드의 이름과 1/1000초 단위의 시간값을 파라미터로 설정하여정해진 시간에 한번씩 파라미터로 전달된 메서드를 자동 반복 실행한다. printTimer란 메서드를 정의했을 경우setInterval(printTimer, 1000); 은 1초에 한 번씩 printTimer를 반복 실행한다.
멤버 메서드int getFullYear() - 년도 리턴int getMonth() - 월 리턴(0이 1월)int getDate() - 일 리턴int getDay() - 요일 리턴(0이 일요일)int getHours() - 시간 리턴int getMinutes() - 분 리턴int getSeconds() - 초 리턴int getTime() - 1970년 1월 1일 0시 0분 0초 부터 현재까지의 시간을 1/1000초 단위로 리턴(TimeStamp)void setYear(int n) - 1970년 이상의 년도를 설정void setMonth(int n) - 월을 설정(0~11)void setDate(int n) - 일을 설정void setDay(int n) - 요일 설정(0~6)void setHours(int ..