HOME
HOME
제이쿼리(jQuery) - 이벤트 Event
제이쿼리 이벤트 기본코드 예시 $(element).명령어(function(event){ ▶ element 요소에 명령어 실행시 함수 동작 }); EVENT 제어 .on() 동적으로 생성된 DOM 객체들의 이벤트를 연결 $('a').on('click', function(event){...}); //a를 클릭 했을때 이벤트 .off() .on() 제거 .one() 선택된 이벤트를 지정 딱 한번만 이벤트가 실행 .trigger() 선택된 요소의 이벤트를 발생 .triggerHandler() trigger() 함수와 비슷하게 동작 - form submission에는 동작하지 않음 - 선택된 요소들중 가장 첫번째 요소만 영향을 미침 - 브라우저 기본동작, 버블링, live Events는 일어나지 않음 웹 브라우저..
제이쿼리(jQuery) - 효과 Effect
jQuery Effect .animate() 해당 객체의 CSS에 변화 효과 $('p').animate({CSS Map}, {options}); $('p).animate( {color:'white', font-size : 22px}, {duration : 400, easing : 'ease-in', complete : function(){....}} ); {queue:false} .delay() 해당 시간만큼 실행을 지연 $("div").slideDown().delay(5000).slideUp(); ▶ id div 요소를 슬라이드 다운 후 5초 후 슬라이드 업 .stop() 실행중인 애니메이션을 중지 $("div").stop(); ▶ div의 큐의 애니메이션을 멈춤 .show() 해당 요소를 보여줌 $(..
제이쿼리(jQuery) - 선택자 Selector
속성 [name] name속성이 있는 요소를 선택 [name="value"] [name2="value2"] name속성의 값이 value이고 name2 속성의 값이 value2 인 요소를 선택 [name="value"] name속성의 값이 value인 요소를 선택 [name!="value"] name속성의 값이 value가 아닌 요소를 선택 [name^="value"] name속성의 값이 value로 시작하는 요소를 선택 [name|="value"] name속성의 값이 value 이거나 value로 시작하는 요소를 선택 [name*="value"] name속성의 값에 value가 들어 있는 요소를 선택 [name~="value"] name속성의 값이 value를 포함하는, 쉼표로 구분된 문자열 요소를 선..
제이쿼리(jQuery) - 추출
.size() 선택한 요소 배열의 길이를 반환 - version deprecated: 1.8, removed: 3.0 - var num = $("div").size(); ▶ num은 div의 배열 크기를 숫자로 반환한다. .length 선택한 요소의 배열의 길이를 반환한다. - var num = $('div').length; ▶ num은 div의 배열 크기를 숫자로 반환한다 .offSet() 선택한 요소의 전체 문서 내(document)에서의 left, top 좌표를 구한다. - var offset = $('div:last').offset(); ▶ div 마지막 요소의 left, top 좌표 반환 offset.left / offset.top .position() 선택한 요소의 부모요소를 기준으로 left..
제이쿼리(jQuery) - 속성
속성 .addClass() 지정한 요소에 class 값을 추가 $("p").addClass("name"); ▶ class = "name" 추가 .hasClass() 지정한 요소에 class 유무를 확인 if($("p").hasClass("name")==true) ▶ class 가 "name"인지 확인 true/false .removeClass() 지정한 요소에 class 값을 제거 $("p").removeClass("name"); ▶ class = "name"을 제거 .attr() (1) 지정한 요소의 속성값을 입력 또는 변경 $("a").attr("href","http://www.google.co.kr"); ▶ a 요소의 href 값을 변경 $("#content").attr({id:'content01'..
제이쿼리(jQuery) - 제어(확장)
확장 $.noop() : 비어있는 함수 (function(){}) $.noConflict() : 다른 JavaScript 라이브러리와 함께 사용할때 $의 충돌을 막기위해 사용 $.sub() : 새로운 jQuery 함수를 정의할때, 네임스페이스의 충돌로 다른 개발자의 함수에 영향을 주지 않도록 캡슐화된 플러그인을 만들고자 할때 $.sub() 로 복사하여 사용 (function(){ var sub$ = jQuery.sub(); sub$.fn.myCustomMethod = function(){ ⠀⠀⠀return 'just for me'; }; sub$(document).ready(function(){ sub$('body').myCustomMethod() ▶ 'just for me' }); })(); typeo..
제이쿼리(jQuery) - 제어(변경, 변환)
변경, 변환 기본 .text() : 해당 요소에 text 요소를 삽입 또는 변경 .html() : 해당 요소에 html 요소를 삽입 또는 변경 .val() : 해당 요소의 value 값을 삽입 또는 변경 .replaceAll() 해당 요소들로 인자 요소를 대체 $('New heading').replaceAll($("div")); // div 요소를 New heading 요소로 변경한다. .replaceWith() 해당 요소들을 인자의 요소로 바꾼다. replaceAll() 과 선택, 인자(target)이 반대 $("div").replaceWith('New heading'); // New heading 요소로 div 요소를 변경 시킨다. 배열 .toArray() 선택한 요소 DOM 집합을 자바스크립트 배열..
제이쿼리(jQuery) - 제어(삽입,삭제)
삽입 형제의 위치에 삽입 .after() 지정한 요소 뒤에 내용 삽입 A.after(B) A뒤에 B를 추가 코드 $( ".inner" ).after( "Test" ); // class=inner 뒤에 Test 추가 .insertAfter() 지정한 내용을 요소 뒤에 삽입 A.insertAfter(B) B뒤에 A를 추가 코드 $( "Test" ).insertAfter( ".inner" ); // Test를 class=inner 뒤에 추가 같은결과 hello Test .before() 지정한 요소의 앞에 요소를 삽입 A.before(B) A 앞에 B를 추가 코드 $( ".inner" ).before( "Test" ); // class=inner 앞에 Test 추가 .insertBefore() 지정한 요소의 ..
제이쿼리(jQuery) - 제어(선택)
직접선택 .add() 기본 선택자에 요소를 추가 선택 $("p").add("div"); // p 요소와 div 요소를 선택 .not() 선택된 확장집합에서 인자에 해당하는 요소를 제외하고 선택 $("p").not(".green"); // p 요소의 확장집합에서 class가 green인 요소를 제외하고 선택 .end() jQuery 함수를 연쇄적으로(chain)으로 사용할 경우 앞쪽에 이미 선택되었던 요소로 돌아간다. $("ul.first") .find(".foo") .css("background-color","red") // ul의 첫번째 요소에서 class=foo를 찾아 배경 변경 .end() .find(".bar") .css("background-color","green"); // find를 호출하기..
맥(Mac) - 단축키
아이콘 ⌘ command ⌥ option ⌃ control ⇧ shift ⌽ power ⏏︎ Eject ⌫ delete ⎋ escape 일반적으로 사용하는 단축키 ⌘ + A 전체 선택 ⌘ + C 복사 ⌘ + D 현재 창 닫기 ⌘ + E 검색 ⌘ + F 찾기 ⌘ + G 다음 찾기 ⌘ + H 현재 창 숨기기 ⌘ + I 기울임꼴 ⌘ + J 다운로드 ⌘ + K 서버 연결 ⌘ + L 주소창 선택 ⌘ + M 현재창 윈도우 '최소화'로 Dock에 추가 ⌘ + ⌥ + M 현재창 '모두' 윈도우 '최소화'로 Dock에 추가 ⌘ + N 새로운 창 ⌘ + O 선택한 항목을 열거나, 열려는 파일을 선택할 수 있는 대화상자 열기 ⌘ + P 현재 페이지 인쇄 ⌘ + Q 선택된 프로그램 종료 ⌘ + R 새로고침 ⌘ + S 저장 ⌘..
Xcode - 단축키
Xcode 유용한 단축키 모음 ⌘ + N : 새파일 ⌘ + ⌥ + N : 새폴더 ⌃ + A : 줄의 맨 앞으로 이동 ⌃ + B : Left. 캐럿을 좌측으로 한칸이동 ⌃ + D : DELETE. 뒤의 한문자 삭제 ⌃ + F : Right. 캐럿을 우측으로 한칸이동 ⌃ + H : Back. 앞의 한문자 삭제 ⌃ + I : Re-Indent 자동으로 들여쓰기를 조절 ⌃ + K : 현재줄 캐럿이후의 문자를 전부 삭제. 문자가 없을 경우 개행문자 삭제 ⌃ + N : Down. 아래로 ⌃ + P : Up. 위로 ⌃ + T : 커서 앞뒤로 글자 교환 ⌃ + V : 전체의 마지막 위치 한 칸 전으로 이동. 이미 그 위치라면 맨 마지막으로 이동 ⌃ + . : Code Completion 창 열기 // ESC : ⌃ +..
