이번에는 not() 메소드로 선택한 요소 중에서 특정 선택자를 제외한 나머지 요소를 선택하는 방법에 대하여 알아보겠습니다.not() 메소드선택한 요소 중에서 특정 선택자의 요소를 제외한 나머지 요소를 모두 선택합니다.즉, 지난 글에 포스팅된 filter() 메소드와는 반대의 기능을 가지고 있습니다. 예제를 통하여 not() 메소드를 다루어 보도록 하겠습니다.아래 소스는 button을 클릭하면 요소 중 인덱스가 2보다 작은 요소를 제외한 나머지 요소들을 초록색 테두리로 씌우는 예제입니다.출력 결과 인덱스가 2이상인 요소들만 초록색 테두리가 씌워진 것을 확인하실 수 있습니다.
2020. 8. 3.
이번 글에서는 형제 요소 관련된 메소드들에 대하여 알아보도록 하겠습니다.prev() 메소드 - 이전에 위치한 형제 요소 선택next() 메소드 - 다음에 위치한 형제 요소 선택 prev() 메소드와 next() 메소드는 서로 반대되는 기능을 가지고 있지만, 문법은 같습니다. 따라서, next() 메소드만 예를 들어도 prev() 메소드는 충분히 이해하실 수 있을 겁니다.next() 메소드선택한 요소의 바로 다음에 위치해 있는 형제 요소를 선택합니다.예제를 통해 알아보겠습니다. 아래는 button을 클릭하면 바로 다음의 형제 요소에 빨간색 테두리가 씌워지는 코드입니다. 출력 결과
2020. 7. 23.
focusin(): focus가 들어갔을 때 이벤트 발생focusout(): focus가 빠져나왔을 때 이벤트 발생 저렇게 설명하면 무슨 소리인지 이해하기 어려우니 간단한 예제를 통하여 이해를 돕도록 하겠습니다..keypress() 메소드.focusin()과 .focusout() 메소드아래 텍스트 필드를 마우스로 클릭해 보세요!출력 결과 요소에 포커스가 맞춰져 있으면 노란색으로 배경이 바뀌고, 요소에 포커스가 맞춰져 있지 않으면 흰색으로 배경이 바뀌는 예제였습니다.
2020. 6. 16.
자바스크립트의 "dblclick()" 이벤트와 이벤트 핸들러를 연결하거나, 해당 요소에 더블클릭 이벤트를 발생시킵니다. 아래 예제를 통해 자세히 살펴보도록 하겠습니다.출력 결과 button을 더블 클릭하면 위의 텍스트에서 '더블 클릭' 부분이 빨갛게 변경되는 예제였습니다.사용하기 쉽고 간단한 메소드입니다.
2020. 6. 13.
off() 메소드는 더 이상 사용하지 않는 이벤트와 연결을 제거합니다.말로만 듣고 본다면 이해하기 어려울 수 있으니, 예제를 통해 살펴보도록 하겠습니다. 아래는 'removeBtn' 이라는 id를 가진 button을 클릭하면 'click' 이벤트를 제거하는 코드입니다..off() 메소드마우스를 클릭해 보세요!클릭 이벤트를 제거합니다!출력 결과'clickBtn' 이라는 id를 가진 button을 클릭하면 '버튼을 클릭했어요'라는 메소드가 나옵니다.(이때, off() 메소드를 통하여 클릭 이벤트를 제거할 수 있습니다.)
2020. 6. 12.
jQuery에서 요소(element)를 삭제하는 메소드는 여러가지가 있습니다.아래 메소드를 사용하면 선택한 요소나 콘텐츠를 삭제할 수 있습니다.1. .remove()2. .detach().remove() 메소드선택한 요소를 DOM에서 삭제합니다.이때 삭제되는 요소와 연관된 제이쿼리나 이벤트 모두 함께 삭제됩니다. 아래 예제를 통하여 잘 삭제되었는지 확인해 보도록 하겠습니다..remove() 메소드 첫 번째 컨텐츠에요! 두 번째 컨텐츠에요! 세 번째 컨텐츠에요!div 요소 삭제출력 결과 button을 클릭하면 content 클래스의 .first와 .second가 삭제되는 예제였습니다.세 번째 클래스만 잘 남아있는게 보이네요..detach() 메소드remove() 메소드와는 다르게 삭제되는 ..
2020. 5. 22.
parentsUntil() 메소드는 선택한 요소의 조상 요소 중 전달받은 선택자(인수)에 해당하는 요소 바로 이전까지의 요소만을 모두 선택합니다. 이때 선택자를 인수로 전달하지 않으면, .parent() 메소드와 같이 선택한 요소의 조상 요소를 모두 선택하게 됩니다. 아래 예제를 통하여 자세히 알아보도록 하겠습니다..parents() 메소드 div 요소 ul 요소 li 요소 li 요소 p 요소 (기준) span 요소 li 요소 p 요소의 부모 요소출력 결과 button을 클릭하면 요소의 조상 요소 중..
2020. 5. 21.
이번 글에서는 이펙트 효과를 지연시키거나, 정지시키거나, 끝내는 방법에 대하여 알아보려고 합니다.이러한 방법을 해결해주는 메소드로는 delay(), stop(), finish()가 있습니다.각각의 메소드에 대하여 알아보도록 합시다.delay() 메소드이펙트 효과 사이의 지연 시간을 설정하여 효과를 지연시키는 메소드입니다.아래 소스는 fadeOut() 효과와 fadeIn() 효과 사이에 1초의 지연시간을 설정하는 예제입니다. 이펙트 효과의 지연 설정 이펙트 효과 시작! 이번에는 이펙트 효과를 중지시키는 방법과 종료하는 방법에 대한 메소드들에 대하여 알아보겠습니다. stop() 메소드 - 선택한 요소에서 실행 중인 모든 이펙트 효과를 중지시킵니다.finish() 메소드 - 선택한 요소가에서..
2020. 4. 18.
이번 글에서는 슬라이드 효과를 내는 방법에 대하여 알아보도록 하겠습니다.슬라이드(slide) 관련 메소드는 대표적으로 3가지입니다.1. slideUp()2. slideDown()3. slideToggle()slideUp()과 slideDown().slideUp() 메소드는 선택한 요소가 서서히 올라가면서 사라지는 효과를 보여주고.slideDown() 메소드는 선택한 요소가 서서히 내려오면서 나타나는 효과를 보여줍니다. 아래 예제를 보시면 쉽게 이해하실 수 있으실 겁니다. 슬라이드 업과 슬라이드 다운 슬라이드 업 슬라이드 다운 출력 결과 출력 결과는 사진 이미지이기 때문에 애니메이션 효과인 슬라이드를 보여주지는 않네요..결과가 궁금하신 분은 직접 코딩 해보시기 바랍니다!또한, 사라지거..
2020. 4. 18.
이번 글에서는 애니메이션 기능인 페이드에 대하여 알아보도록 하겠습니다.페이드(fade) 관련 메소드는 대표적으로 4가지입니다.1. fadeIn()2. fadeOut()3. fadeToggle()4. fadeTo() 이번 글에서는 fadeIn(), fadeOut(), fadeToggle()만 다루어 보겠습니다.페이드 인(fade in)과 페이드 아웃(fade out).fadeIn() 메소드는 선택자로 정한 요소를 서서히 사라지게 하고, .fadeOut() 메소드는 서서히 나타나게 합니다.출력 결과 출력 결과는 사진이기 때문에 서서히 사라지고, 서서히 나타나는 것이 보이지 않네요..직접 코딩하고 확인해보시는 것을 강력히 추천드립니다. 위의 예제처럼 페이드 아웃 효과가 끝나게 되면, 해당 요소는 웹 페이지에서..
2020. 4. 12.
이번 글에서는 직렬화하는 방법에 대하여 알아보겠습니다.직렬화란 무엇일까요?Ajax에서는 서버와 비동기 통신을 위해 입력받은 데이터를 직렬화하여 전송합니다.이때, 직렬화란 입력받은 여러 데이터를 하나의 쿼리 문자열로 만들어 주는 것을 의미합니다.이렇게 직렬화함으로써 입력받은 데이터를 한 번에 서버로 보낼 수 있게됩니다. 제이쿼리에서는 태그의 요소를 통해 입력된 데이터의 직렬화를 아주 간단하게 수행할 수 있습니다..serialize() 메소드와 .serializeArray() 메소드를 이용하면 되는데 이 두 가지 메소드에 대하여 알아보겠습니다. .serialize() 메소드는 태그의 요소를 통해 입력된 데이터를 쿼리 문자열로 변환합니다..serializeArray() 메소드는 serialize() 메소..
2020. 4. 12.
이번 글에서는 AJAX와 관련된 메소드 $.GET() 과 $.POST() 메소드에 대하여 알아보도록 하겠습니다.이 두가지 방식은 클라이언트에서 서버로 HTTP 요청을 보낼 때 사용되는 방식입니다.$.get() 메소드 $.get(URL주소[,콜백함수]); URL은 클라이언트가 서버에 요청을 보낼 주소입니다.콜백함수는 HTTP 요청이 성공했을 때 실행할 함수를 나타냅니다.$.get() 메소드GET 방식으로 데이터 불러오기!$.post() 메소드$.post(URL 주소[,데이터][,콜백함수]); 이 메소드를 통해 간단하게 서버에 요청을 간단하게 할 수 있습니다.
2020. 4. 12.
hide() 메소드 - 선택한 요소를 순간적으로 사라지게 합니다.show() 메소드 - 선택한 요소를 나타나게 합니다. .hide() 메소드를 통해 숨겨진 요소는 CSS의 속성값이 none으로 설정됩니다.그러므로 요소가 보이지 않게 됩니다. 아래 예제를 통하여 자세히 살펴보도록 하겠습니다.요소의 표시와 숨김요소 표시하기!요소 숨기기!CSS의 display 속성값이 none으로 설정되기 때문에 웹 페이지의 레이아웃에서 아예 사라져 버려요!이 단락을 숨기거나 나타나게 할 거에요!출력 결과 'showBtn' 이라는 id를 가진 button을 클릭하면 'text'라는 id를 가진 태그가 보여지고,'hideBtn' 이라는 id를 가진 button을 클릭하면 'text'라는 id를 가진 태그가 숨겨지는 예제..
2020. 4. 12.
이번 글에는 부모의 요소를 탐색하는 방법과 관련하여 글을 올려보도록 하겠습니다. 아래의 메소드들은 부모 요소와 관련된 메소드들입니다. 1. .parent() 2. .parents() .parent() 메소드 선택한 요소의 부모(parent) 요소를 선택하는 메소드입니다. 이때 선택자를 인수로 전달하고, 전달받은 선택자(인수)에 해당하는 부모 요소만 선택도 가능합니다. 예제를 통하여 자세히 다루어 보도록 하겠습니다. 아래 코드는 button을 클릭하면 의 부모인 의 css가 빨간색 테두리로 변경되는 예제입니다. .parent() 메소드 div 요소 ul 요소 li 요소 li 요소 p 요소 (기준) span 요소 li 요소 p 요소의 부모 요소 출력 결과 $()에 선택자를 인수로 받고, 그 인수에 대한 부모..
2020. 4. 12.
이번 글에는 요소를 복사하는 방법에 대하여 알아보도록 하겠습니다. clone() 메소드 - 선택한 요소를 복사하여 새로운 요소를 생성이 가능합니다. 예제를 통하여 자세히 살펴보도록 하겠습니다. 아래 코드는 을 클릭하면 'firstItem' 이라는 id를 가진 태그를 복사하고 추가하는 예제입니다. .clone() 메소드 첫 번째 아이템이에요! 두 번째 아이템이에요! 세 번째 아이템이에요! 아이템 복사 출력 결과 정상적으로 화면에 나온 것을 확인할 수 있습니다.
2020. 4. 11.제이쿼리 문법 $(선택자).함수(); 달러($) 기호는 제이쿼리 자체를 의미하고, 제이쿼리에 접근할 수 있게 해주는 식별자라고 생각하시면 됩니다. 선택자를 이용하여 원하는 HTML 요소를 선택하고, 함수를 정의하여 선택된 요소에 원하는 동작을 설정합니다. 이해하기 쉽게 예제를 통하여 다시 한 번 확인해보겠습니다. 아래 코드는 태그를 클릭하면 태그의 글자크기가 100px로 바뀌는 예제입니다. $(function() { $("p").on("click", function() { $("body").css("fontSize", "100px"); }) }) $() 함수의 인수로는 HTML 태그 뿐만 아니라, CSS 선택자도 가능하여 특정 HTML 요소를 선택할 수 있습니다. 이러한 $() 함수를 통해 생성된 요소를..
2020. 4. 9.Jquery 적용 방법 Jquery는 자바스크립트 라이브러리이므로, 제이쿼리 파일은 자바스크립트 파일(js 파일) 형식의 형태로 존재합니다. 따라서 제이쿼리를 사용하기 위해서는 제이쿼리 파일을 먼저 웹 페이지에 로드(load)해야 합니다. 웹 페이지에서 제이쿼리 파일을 로드하는 방법은 2가지로 다음과 같습니다. 1. 제이쿼리 파일을 다운받아 로드하는 방법 2. CDN을 이용하여 로드하는 방법 제이쿼리 파일을 다운받아 로드하는 방법 최신 버전의 제이쿼리 파일은 아래 링크에서 다운받을 수 있습니다. Download jQuery | jQuery link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The..
2020. 3. 18.