Code Playground

< h1 > Code Playground </ h1 >

스크롤이 몇 퍼센트 움직였는지 구하는 방법: var percent = ($(window).scrollTop() / ($(document).height() - $(window).height())) * 100;

-입력 요소 제어- [1] 값 설정하기 $("셀렉터").val('내용'); [2] 값 읽어오기 # text, select(드롭다운)var input = $("셀렉터").val(); 드롭다운 요소의 경우 사용하지 않는 태그라 하더라도 value 속성값을 부여해야 한다. ---선택하세요--- item1 # 라디오 버튼의 경우셀렉터가 여러 개를 의미하는 경우이므로 그 중에서 선택된 항목만 지정하는 셀렉터를 사용해야 한다.라디오는 하나만 선택 가능하므로 가져온 결과 자체는 단일 값이다. var input = $("셀렉터: checked").val(); # 체크 박스의 경우checked 가상 클래스를 통해 가져온 대상이 배열 상태가 되므로 이를 반복문으로 처리해야 한다.배열의 요소는 선택된 체크박스들에 대한 HT..

-요소의 탐색- [1] 메서드 체인하나의 jQuery요소에 대하여 메서드를 연속적으로 호출하는 기법.특별한 경우가 아닌 이상 jQuery()의 함수들은 객체 자신을 리턴한다. $("#foo").attr(key, value) .css(key, value) .addClass(cls) .click(function() {}); [2] 주변 요소 탐색하기 함수설명prev()이전 요소를 리턴한다.next()다음 요소를 리턴한다.parent()상위 요소를 리턴한다.children()하위 요소(들)을 리턴한다.eq(n)n번째 요소를 리턴한다. [3] 부모 요소 얻기: 주어진 셀렉터를 갖는 가장 인접한 부모 요소를 리턴한다.$("#foo").parents("셀렉터"); [4] 자식 요소 얻기: 주어진 셀렉터를 갖는 가장..

- 요소의 판별 - [1] index() 함수 : 특정 요소가 부모 태그 안에서 갖는 인덱스 번호를 리턴하는 함수 (0부터 시작함) ... --->0 --->1 --->2 [2] $(this) : 복수 요소에 대한 이벤트에 전달된 콜백함수 안에서 이벤트가 발생한 주체를 의미하는 객체 button1 button2 button3 [3] HTML 요소의 속성 제어 특정 요소에 적용되어 있는 속성값 조회하기var foo - $("#bar").attr("속성이름"); 특정 요소에 적용하기개별 적용$("#bar").attr('속성이름', '값); 일괄 적용 (JSON 형태 사용)$("#bar").attr({ 속성이름: '값', 속성이름: '값', 속성이름: '값' ... }); 속성 이름에 공백이나 - 기호가 포함..

[1] jQuery 이벤트 처리 웹 브라우저가 HTML요소를 인식한 후에 처리되어야 하므로 jQuery의 load 처리 안에서 정의한다.이벤트는 함수 형태로 정의되어 있고, 해당 이벤트가 발생한 경우 호출될 함수를 콜백 파라미터로 전달한다.콜백함수에는 이벤트의 정보를 갖는 e 객체가 전달된다.필요한 경우 이 객체를 선언하고 활용할 수 있다.e.preventDefault()는 링크의 href 속성이나 폼의 submit 등에 대해서 HTML 요소가 수행해야 하는 기본 동작을 차단하는 역할을 한다. //jQuery의 load 처리 안에서 정의 $(function() { $("#foo").이벤트이름(function([e]) { [e.preventDefault();] });}); [2] 마우스 관련 (클릭 이벤트..

$(document).bind('keypress', function(event) { if( event.which === 65 && event.shiftKey ) { alert('you pressed SHIFT+A'); } }); shift, ctrl, alt, meta 키와 일반 키를 동시에 눌렀을 때 위와 같은 방식으로 이벤트를 줄 수 있다.event.shiftKeyevent.ctrlKeyevent.altKeyevent.metaKey [keyCode 표] KeyCodebackspace8tab9enter13shift16ctrl17alt18pause/break19caps lock20escape27(space)32page up33page down34end35home36left arrow37up arrow38..