jQuery11 jQuery 유틸리티 메소드 유틸리티 메소드 제이쿼리는 프로그래밍을 하는 데 도움이 되는 다수의 유틸리티 메소드를 제공합니다. 타입 검사 메소드 제이쿼리는 인수로 전달받은 값의 타입을 손쉽게 확인해 주는 다음과 같은 메소드를 제공합니다. 1. $.type() 2. $.isArray() 3. $.isFunction() 4. $.isNumeric() 5. $.isEmptyObject() 6. $.isPlainObject() 7. $.isWindow() 8. $.isXMLDoc() $.type() 메소드 자바스크립트의 typeof 연산자는 값에 따라 부정확하거나 모순된 타입 검사 결과를 반환합니다. 하지만 제이쿼리는 전달받은 값을 자바스크립트의 내부 클래스와 비교하여, 더욱 정확한 타입 검사를 제공하는 $.type() 메소드를 제공합니다.. 2020. 7. 3. jQuery Ajax연동 Ajax란? Ajax란 Asynchronous JavaScript and XML을 의미합니다. Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있게 해줍니다. Ajax는 백그라운드 영역에서 서버와 데이터를 교환하여 웹 페이지에 표시해 줍니다. 예제 $(function() { $("#requestBtn").on("click", function() { $("#text").load("/examples/media/jquery_ajax_data.txt"); }); }); Ajax 프레임워크 Ajax를 사용하여 손쉽게 개발할 수 있도록 미리 여러 가지 기능들을 포함해 놓은 개발 환경을 Ajax 프레임워크라고 합니다. 이러한 Ajax 프레임워크 중에서도 가장 많이 사용되는 대표적.. 2020. 7. 3. jQuery 이펙트효과 이펙트(effect) 효과 제이쿼리는 웹 페이지에 이펙트 효과를 손쉽게 넣을 수 있는 다양한 메소드를 제공합니다. 이러한 이펙트 효과는 기본 설정으로 바로 사용할 수도 있고, animate() 메소드를 통해 설정을 변경해서 사용할 수도 있습니다. 요소의 표시와 숨김 .hide() 메소드는 선택한 요소를 순간적으로 사라지게 하고, .show() 메소드는 나타나게 합니다. .hide() 메소드를 통해 숨겨진 요소는 CSS display 속성값이 none으로 설정됩니다. 즉, 이렇게 숨겨진 요소는 더는 웹 페이지의 레이아웃에 영향을 주지 않고 완전히 사라지게 됩니다. 예제 $(function() { $("#showBtn").on("click", function() { $("#text").show(); // i.. 2020. 7. 3. jQuery 이벤트처리 이벤트(event)란? 오늘날 웹 페이지는 사용자와 수많은 상호작용을 하게 됩니다. 사용자는 마우스를 움직이거나, 요소를 클릭하거나, 텍스트 박스에 글을 쓰는 등 수많은 종류의 동작(action)을 수행합니다. 위에서 예를 든 사용자의 동작들이 모두 이벤트(event)를 발생시킵니다. 즉, 이벤트가 발생했다는 것은 웹 페이지에서 특정 동작이 발생하여, 웹 브라우저가 그 사실을 알려주는 것을 의미합니다. 이벤트 핸들러(event handler) 웹 페이지에서는 수많은 이벤트가 계속해서 발생합니다. 특정 요소에서 발생하는 이벤트를 처리하기 위해서는 이벤트 핸들러(event handler)라는 함수를 작성하여 연결해야만 합니다. 이벤트 핸들러가 연결된 특정 요소에서 지정된 타입의 이벤트가 발생하면, 웹 브라우.. 2020. 7. 3. jQuery 스타일설정 CSS 스타일 설정 제이쿼리를 사용하면 선택한 요소의 스타일에 관한 속성값을 손쉽게 받아오거나 설정할 수 있습니다. .css() 메소드 제이쿼리에서는 .css() 메소드를 사용하여 선택한 요소의 CSS 스타일을 간단하게 설정할 수 있습니다. .css() 메소드는 선택한 요소 집합의 첫 번째 요소의 스타일 속성값을 반환하거나, 선택한 요소의 스타일 속성을 인수로 전달받은 값으로 설정합니다. 예제 $(function() { $("button").on("click", function() { $("p").css("fontSize", "25px"); // 모든 요소의 글씨 크기를 25px로 설정함. $("#text").html($("p").css("fontSize")); // 첫 번째 요소의 글씨 크기를 반환함... 2020. 7. 3. jQuery 요소의영역 요소의 크기 제이쿼리는 선택한 요소의 크기에 관한 정보를 손쉽게 받아오거나 설정할 수 있도록 다양한 메소드를 제공합니다. inner와 outer 제이쿼리에서 요소의 크기는 다음과 같이 구성됩니다. 접두사로 inner가 붙은 메소드는 선택한 요소의 크기에 패딩(padding) 영역이 포함된 크기 정보를 반환합니다. 접두사로 outer가 붙은 메소드는 패딩 영역뿐만 아니라 테두리(border) 영역까지 포함된 크기 정보를 반환합니다. 또한, 접두사로 outer가 붙은 메소드에 인수로 true 값을 전달하면, 패딩과 테두리 영역뿐만 아니라 마진(margin) 영역까지 포함된 크기 정보를 반환합니다. .width()와 .height() 메소드 .width() 메소드는 선택한 요소 집합의 첫 번째 요소의 너비를 .. 2020. 7. 3. 이전 1 2 다음
