슬기로운 개발자 생활

이벤트의 위임(event delegation)jQuery는 이벤트의 위임을 통해 다수의 요소에 공통으로 적용되는 이벤트 핸들러를 공통된 상위 요소에 단 한번의 연결만으로도 동작할 수 있도록 해준다.다음 예제는 다수의 요소에 클릭 이벤트 핸들러를 연결하고 있다.$("#linkList a").on("click", function(event) { event.preventDefault(); alert("이 링크는 동작하지 않습니다!"); }); 첫번째 링크 두번째 링크 코드 실행이는 각 요소에 연결된 이벤트 핸들러는 화면에 현재 존재하는 요소에는 연결되지만, 새롭게 추가되는 요소에는 연결되지 않는다.위에 예제에서 신규 추가하는 버튼을 추가해 보자.$("button").one("click", function() ..

이벤트의 연결(event binding)특정 요소에서 발생하는 이벤트를 처리하기 위해서는 이벤트 핸들러(event handler) 함수를 작성해야만 한다. 이렇게 작성된 이벤트 핸들러를 특정 요소에 연결하는 것을 이벤트 바인딩(event binding)이라고 한다.jQuery는 이벤트 바인딩을 위한 다양한 방법을 제공한다.다음 예제는 id가 "btn"인 요소에 클릭(click) 이벤트 핸들러를 바인딩하는 다양한 방법이다.$("#btn").click(function(event) { // 실행하고자 하는 jQuery 코드 }); $("#btn").bind("click", function(event) { // 실행하고자 하는 jQuery 코드 }); $("#btn").on("click", function(ev..

이벤트(event)란?웹 페이지는 사용자와 수많은 상호작용을 하게 된다. 사용자는 마우스를 움직이거나, 요소를 클릭하거나, 텍스트 박스에 글을 쓰는 등 수많은 종류의 동작(action)을 수행한다.이러한 사용자의 동작들이 모두 이벤트(event)를 발생시킨다. 즉, 이벤트가 발생했다는 것은 웹 페이지에서 특정 동작이 발생하여, 웹 브라우저가 그 사실을 알려주는 것을 의미한다.이벤트 핸들러(event handler)웹 페이지에서는 수많은 이벤트가 계속해서 발생한다. 특정 요소에서 발생하는 이벤트를 처리하기 위해서는 이벤트 핸들러(event handler)라는 함수를 작성하여 연결해야만 한다. 이벤트 핸들러가 연결된 특정 요소에서 지정된 타입의 이벤트가 발생하면, 웹 브라우저는 연결된 이벤트 핸들러를 실행한..

클래스 설정HTML 요소는 여러 개의 class 속성값을 가질 수 있다. jQuery는 HTML 요소의 class 속성값을 손쉽게 다루기 위한 여러 메소드를 제공한다. 제공되는 이 메소드를 통해서 class 속성에 적용되는 CSS 스타일이 동적으로 적용되게 할 수 있다.메소드설명.addClass()선택된 요소에 인수로 전달받은 클래스를 추가한다..removeClass()선택된 요소에서 인수로 전달받은 클래스를 제거한다..toggleClass()선택된 요소에 클래스가 없으면 인수로 전달받은 클래스를 추가하고, 전달받은 클래스가 이미 추가되어 있으면 제거한다..hasClass()인수로 전달받은 값이 선택된 요소의 클래스가 존재하는지 여부를 확인한다.클래스 속성 추가 .addClass().addClass() ..

CSS 스타일 설정jQuery를 사용하면 선택한 요소의 스타일에 관한 속성값을 손쉽게 받아오거나 설정할 수 있다.메소드설명.css()css() 메소드는 선택한 요소 집합의 첫 번째 요소의 스타일 속성값을 반환하거나, 선택한 요소의 스타일 속성을 인수로 전달받은 값으로 설정한다..css() 메소드jQuery에서는 .css() 메소드를 사용하여 선택한 요소의 CSS 스타일을 간단하게 설정할 수 있다. .css() 메소드는 선택한 요소 집합의 첫 번째 요소의 스타일 속성값을 반환하거나, 선택한 요소의 스타일 속성을 인수로 전달받은 값으로 설정한다.스타일 설정$("p").css("backgroundColor", "#00ff00") 위의 예제에서 .css() 메소드는 모든 요소의 배경색을 #00ff00로 설정한다..

jQuery를 사용하면 선택한 HTML 요소의 CSS 스타일에 관한 속성값을 손쉽게 받아오거나 설정할 수 있다. 프로퍼티 설정다음 메소드를 사용하면 특정 프로퍼티의 값을 받아오나 설정할 수 있다.메소드설명.attr()선택한 요소 집합의 첫 번째 요소의 지정된 속성(attribute)값을 반환하거나, 선택한 요소의 지정된 속성을 전달받은 값으로 설정한다..prop()선택한 요소 집합의 첫 번째 요소의 지정된 프로퍼티(property)값을 반환하거나, 선택한 요소의 지정된 프로퍼티를 전달받은 값으로 설정한다..removeAttr()선택한 요소에서 지정된 속성(attribute)을 제거한다..removeProp()선택한 요소에서 지정된 프로퍼티(property)를 제거한다..attr()와 .removeAttr..

요소의 스크롤 위치jQuery는 선택한 요소의 스크롤 위치를 손쉽게 반환하고 설정 할 수 있는 메소드를 제공한다.메소드설명.scrollLeft()선택한 요소 집합의 첫 번째 요소의 수평 스크롤 바의 위치를 얻거나, 선택된 요소의 수평 스크롤 바의 위치를 인수로 전달받은 값으로 설정한다..scrollTop()선택한 요소 집합의 첫 번째 요소의 수직 스크롤 바의 위치를 얻거나, 선택된 요소의 수직 스크롤 바의 위치를 인수로 전달받은 값으로 설정한다..scrollLeft() 메소드와 .scrollTop() 메소드.scrollLeft() 메소드는 선택한 요소의 수평 스크롤 바의 현재 위치를 반환하거나, 해당 요소의 수평 스크롤 바의 위치를 설정한다. 그리고 .scrollTop() 메소드는 선택한 요소의 수직 스..

요소의 위치jQuery는 선택한 요소의 위치를 손쉽게 반환하고 설정 할 수 있는 메소드를 제공한다.메소드설명.offset()선택한 요소 집합의 첫 번째 요소의 위치를 HTML 문서를 기준으로 반환하거나, 선택한 요소의 위치를 인수로 전달받은 값으로 설정한다..position()선택한 요소 집합의 첫 번째 요소의 위치를 해당 요소가 웹 페이지에 위치할 때 기준이 되었던 부모 요소를 기준으로 하는 상대 위치를 반환한다..offset() 메소드.offset() 메소드는 HTML 문서(document)를 기준으로 선택한 요소의 오프셋 좌표를 반환하거나 설정한다.아래 예제는 선택한 요소의 위치를 반환하는 예제이다.$("button").on("click", function(){ var p = $("p:first")..