JQuery removeClass
JQuery removeClass ■ 지난 글에서는 CSS의 클래스 속성을 추가하는 메서드인 'addClass'에 대해서 알아봤었는데요. 이번에는 적용된 클래스를 제거하는 'removeClass'에 대해서 알아보겠습니다. removeClass 메서드의 형식은 다음과 같습니다.  $("선택자").removeClass("클래스"); ■ 이때 클래스는 addClass와 마찬가지로 클래스 구분자인 마침표(.)는 생략합니다. ..
JQuery addClass
JQuery addClass ■ 이번 글에서는 JQuery의 메서드 중에서 addClass()에 대해서 알아보려고 하는데요. 이 메서드를 이용하면 이미 CSS가 적용된 상태에서 다른 속성을 추가로 부여해서 동시에  표시되도록 할 수 있는 기능입니다.  <class ="aaa">라는 태그가 있을 때 css에서는 다음과 같은 형태로 속성을 정의하겠죠? -style- .aaa{ color: re..
jquery trigger
jquery trigger ■ 프로그래밍을 하다 보면 상황에 따라서 이벤트를 연결, 제거해야 할 때가 있는데요. 원하는 경우에는 특정 시점에 강제로 이벤트를 발생시킬 수도 있습니다. 그 기능을 하는 메서드가 [trigger]인데요. 이 메서드를 이용하면 매크로 프로그램처럼 일정한 간격으로 특정 버튼을 클릭하는 프로그램을 만들 수 있습니다. 먼저 trigger를 사용하는 형식은 다음과 같습니다.  $("선택자").trigger("..
JQuery event on / off
JQuery event on / off ■ 프로그래밍을 하다 보면 상황에 따라서 이벤트를 발생, 제거해야 하는데요. 이번 글에서는 이벤트를 연결하고 제거하는 과정을 정리해보겠습니다. 화면에 보이는 태그에 이벤트를 연결하고 제거하는 정적인 형태는 다음과 같습니다.  $("선택자").bind(이벤트이름, 함수);  $("선택자").unbind(이벤트 이름, 함수) ■ 하지만 정적인 형태는 많이 사용하지 않기 때문..
JQuery 브라우저 이벤트 resize
JQuery 브라우저 이벤트 resize ■ 브라우저는 이벤트가 가장 많이 발생하는 곳 중 하나일겁니다. 대표적으로 브라우저가 열리면서 로드 이벤트가 발생하고, 창의 크기를 조절하거나 스크롤이 발생하는 등의 이벤트가 대표적인데요. 이번 글에서는 브라우저 이벤트 중 "resize"에 대해서 알아보겠습니다. 단어의 뜻에서도 알 수 있듯이 화면의 크기가 변하면 발생하는 이벤트인데요.  ■ 브라우저의 크기를 조절하..
jquery keyboard event
jquery keyboard event ■ 일반적으로 웹 화면에서 이루어지는 이벤트의 대부분은 마우스 이벤트로 처리할 수 있어서 사용하는 경우는 거의 없지만, 그래도 그냥 넘어갈 수 없어서 keyboard event에 대해서 간단하게 정리해볼까 합니다. 키보드 이벤트의 종류는 다음과 같습니다.  1. keypress : 키보드의 키를 눌렀을 때 발생하는 이벤트인데요. 이벤트 처리 과정에서 변하는 경우가 많아서 잘 사용하..
JQuery Mouse Event
JQuery Mouse Event■ 브라우저 위에서 마우스 이벤트가 발생하면 해당 이벤트 외에도 부가적인 정보가 발생하게 되는데요. 예를 들어 화면의 좌표값이나 이벤트가 발생한 시간, 마우스의 어느 버튼이 클릭됐는지 부가 정보로 확인할 수 있습니다. 그리고 이것들을 이용하면 좀 더 다양한 기능을 만들어낼 수 있습니다.    ■ 마우스의 클릭 이벤트 발생하는 부가적인 정보를 받기 위해서 이벤트를 연결할 ..
JQuery mouseover / mouseout Event
JQuery mouseover / mouseout Event ■ JQuery 이벤트 중에서 마우스를 특정 요소 위에 올렸을 때 발생하는 이벤트가 mousetover인데요. 보통 mouseout과 mouseleave 이벤트와 함께 사용합니다. 이 두 이벤트의 차이는 mouseout은 요소 안에 있는 다른 요소를 선택하게 되면 마우스가 요소를 빠져나간 것으로 인식하는 반면 mouseleave는 나간 것으로 인식하지 않는다는 차이점이 ..
JQuery 마우스 클릭 이벤트 연결
JQuery 마우스 클릭 이벤트 연결 지난 글에서 마우스의 클릭 이벤트에 대해서 동적 연결, 정적 연결하는 과정을 알아봤었는데요. 이번 글에서는 JQuery에서 사용되는 마우스 이벤트 목록을 정리하고 클릭 이벤트의 동적 연결 방법에 대해서 자세히 알아보겠습니다.    마우스 이벤트는 다음과 같습니다.  click : 클릭했을 때 dblclick : 더블클릭 했을 때 mousemove : 포인터가 움..
JQuery Event
JQuery Event ■ JQuery는 이벤트를 기반으로 작동하는 구성인데요. HTML 문서가 로드 된 후, 또는 버튼을 클릭했을 때 이벤트가 실행됩니다. JQuery로 프로그램을 작성할 때는 언제 어떤 이벤트가 실행될지를 생각하면서 코딩해야 하는데요. 이번 글에서는 이벤트를 연결하는 과정을 정리해볼까 합니다. JQuery에서 이벤트를 연결하는 과정은 크게 두 가지로 나눌 수 있습니다.   ■ 첫 번째는 화면에 보이는..
JQuery val()
JQuery val() ■ 지난 글에서 html과 text 메서드를 이용해서 태그 안에 있는 내용을 읽어오거나 변경하는 과정에 대해서 알아봤는데요. 일반적인 문자열과 태그는 이 메서드를 이용해서 처리할 수 있지만, "사용자 입력 태그"의 내용은 읽어오지 못하는데요. 예를 들어 input, select, textarea 태그 등이 해당됩니다. 사용자가 입력하거나 선택된 내용은 value 값에 저장돼서 관리되는데요. text와 html 메서드로..
JQuery append prepend
JQuery append prepend 지난 글에서 JQuery의 text(), html() 메서드를 이용해서 내용을 읽어오고, 수정하는 방법에 대해서 알아봤었는데요. html이나 text 메서드는 내용 변경하려면 먼저 기존의 것을 읽어와서 추가하는 형식이었는데요. JQuery에서는 앞. 뒤로 새로운 내용을 추가하는 메서드도 제공하고 있습니다. append와 prepend 메서드가 그것들인데요. 형식은 다음과 같..
JQuery text html method
JQuery text html method■ JQuery에는 태그의 내용을 제어할 수 있는 몇 가지 메서드가 있는데요. 그것들 중 이번 글에서는 text와 html 메서드에 대해서 알아보려고 합니다. 이 두  메서드는 똑같이 태그의 내용을 읽어오거나, 내용을 변경해주는 역할을 하는데요. 차이점이 있다면 태그의 기능을 유지하느냐 그렇지 않으냐의 차이가 있습니다. text 메서드는 태그의 내용을 문자 그대로 읽어오고 태그의 기..
JQuery 선택자
JQuery 선택자■ JQuery 코드는 일반적으로 선택자와 메서드의 조합으로 이루어지는데요. HTML의 태그를 선택해서 메서드로 기능을 실현하는 구조로 되어있습니다. 이번 글에서는 JQuery의 선택자 구조에 대해서 정리해볼까 합니다.   JQuery 선택자 형식은 다음과 같습니다.$("선택자")■ 여기서 선택자는 HTML태그 이름, 아이디, 클래스 등을 선택하면 되는데요. 예를 들어 ..
JQuery 코드의 형식
JQuery 코드의 형식■ 지난 글에서 JQuery 라이브러리를 연결하는 과정을 알아봤었는데요. 이번에는 JQuery 코드의 기본 형식을 살펴보겠습니다. JQuery(document).ready() 명령어를 먼저 살펴볼 텐데요. ■ 이 코드는 HTML 문서가 로딩되면 실행되는 명령어입니다. 즉, 브라우저가 실행되면서 HTML 문서가 모두 열리고 나면 실행되는 코드예요. JQuery에서 제공하는 많은 함수와 메서..
HTML5 JQuery 연결하기
HTML5 JQuery 연결 ■ JQuery는 대표적인 자바스크립트의 [라이브러리]인데요. '라이브러리'란 자주 쓰는 자바스크립트 객체나 함수를 모아 놓은 것입니다. 이 라이브러리를 사용하기 위해서는 HTML 문서와 JQuery를 연결해줘야 하는데요. 연결하는 방법은 두 가지가 있습니다. 첫 번째는 파일을 내려받아서 HTML 파일과 같은 폴더에 넣어서 연결하는 방법과 CDN을 이용하는 방법인데요. CDN 형식은.... 콘텐..