슬기로운 개발자 생활

.animate() 메소드jQuery에서는 .animate() 메소드를 이용하여 사용자 정의한 이펙트 효과를 정의할 수 있다. .animate() 메소드는 여러 CSS 스타일 속성을 이용하여 새로운 이펙트 효과를 만들어 준다..animate() 메소드의 원형은 다음과 같다.$(선택자).animate(스타일 [,지속시간] [,시간당속도함수] [,콜백 함수]); 스타일 : 필수이며, 이펙트 효과를 구성할 CSS 스타일 속성을 정의한다.지속 시간 : 이펙트 효과가 지속될 시간을 전달한다.시간당 속도 함수(easing function): 이펙트 효과의 시간당 속도를 전달한다.콜백 함수: 이펙트 효과의 동작이 완료된 후에 실행할 함수를 정의한다.아래 예제는 요소를 200x200px으로 크기를 변경하고, 투명도를 ..

슬라이드(slide) 효과jQuery에서의 슬라이드(slide) 효과는 해당 요소의 CSS height 속성값을 빠르게 변경하여 표현한다. 이러한 슬라이드 효과를 표현하기 위해 사용되는 메소드는 다음과 같다.메소드설명.slideUp()선택한 요소의 CSS height 속성값을 높여가며 사라지게 한다..slideDown()선택한 요소의 CSS height 속성값을 낮춰가며 나타나게 한다..slideToggle()선택한 요소에 .slideUp() 메소드와 .slideDown() 메소드를 번갈아가며 적용한다..slideUp() 메소드 - 슬라이드 업(slide up).slideUp() 메소드는 선택한 요소가 서서히 올라가면서 사라지는 효과를 보여준다.아래 예제는 id가 "divBox1"인 요소를 올라가면서 사..

페이드(fade) 효과jQuery에서 페이드(fade) 효과는 해당 요소의 CSS opacity 속성값을 빠르게 변경하여 표현한다. 이러한 페이드 효과를 표현하기 위해 사용되는 메소드는 다음과 같다.메소드설명.fadeIn()선택한 요소의 CSS opacity 속성값을 높여가며 요소를 나타지게 함..fadeOut()선택한 요소의 CSS opacity 속성값을 높여가며 요소를 사라지게 함..fadeToggle()선택한 요소에 fadeIn() 메소드와 fadeOut() 메소드를 번갈아가며 적용함..fadeTo()페이드 효과에서 사용하는 opacity 속성값을 직접 설정함..fadeIn() .fadeOut() 메소드 - 표시 및 숨기기.fadeOut() 메소드는 선택한 요소를 서서히 사라지게 하고, .fadeI..

이펙트(effect) 효과jQuery는 웹 페이지에 이펙트 효과를 손쉽게 넣을 수 있는 다양한 메소드를 제공한다. 이러한 이펙트 효과는 기본 설정으로 바로 사용할 수도 있고, animate() 메소드를 통해 설정을 변경해서 사용할 수도 있다. 요소의 표시와 숨김.show() 메소드는 선택한 요소를 순간적으로 사라지게 하고, .hide() 메소드는 나타나게 한다.메소드설명.hide()선택한 요소를 사라지게 한다..show()선택한 요소를 나타나게 한다..toggle()선택한 요소에 .show() 메소드와 .hide() 메소드를 번갈아가며 적용한다..hide() .show() 메소드 - 요소의 표시와 숨김.hide() 메소드를 통해 숨겨진 요소는 CSS display 속성값이 none으로 설정하여, 요소를 ..

체크여부 확인id가 동일한 체크박스에 대하여 선택되어 있는지 확인 : true / false 반환$("#chkBox").is(":checked"); $("input:checkbox[id='chkBox']").is(":checked"); 1.6이상일 때, 권장 사용법$("#chkBox").prop("checked"); 체크박스 갯수 가져오기선택된 체크박스 갯수 구하기$("#chkBox:checked").length; 전체 체크박스 갯수 구하기$("#chkBox").length; 체크박스 전체 선택하기 / 해제하기전체 선택하기$("#chkBox").prop('checked', true); $("#chkBox").attr('checked', true); 전체 해제하기$("#chkBox").prop('check..

옵션 요소(option element)의 구조{옵션 내용} 선택된 옵션 값(value) 읽기$("#{{id}} option:selected").val(); $("select[name=name]").val(); 선택된 옵션 내용 읽기$("#{{id}} option:selected").text()

radio selectorjQuery( ":radio" ) 체크된 radio value값 가져오기var val = $(':radio[name="{{name}}"]:checked').val(); radio 값 체크하기$(':radio[name={{name}}]:input[value={{value}}]').attr("checked", true); 참조https://api.jquery.com/radio-selector/

이벤트 메소드jQuery는 .on() 메소드 이외에도 자바스크립트 이벤트와 관련된 다양한 메소드를 제공한다. 이러한 이벤트 메소드는 이벤트가 발생하는 요소에 따라 다음과 같이 구분할 수 있다.마우스 이벤트와 관련된 메소드키보드 이벤트와 관련된 메소드입력 양식 이벤트와 관련된 메소드마우스 이벤트와 관련된 메소드jQuery에서 제공하는 마우스 이벤트와 관련된 메소드는 다음과 같다.메소드설명.click()자바스크립트의 "click" 이벤트가 이벤트 핸들러를 연결되고, 해당 요소에 "click" 이벤트가 발생되었을 때 설정한 함수가 실행된다..dblclick()자바스크립트의 "dblclick" 이벤트 핸들러를 연결되고, 해당 요소에 "dblclick" 이벤트가 발생되었을 때 설정한 함수가 실행된다..hover(..