jQuery Examples

 

jQuery Selectors

$("p").hide()
p태그를 숨깁니다.

$("#test").hide()
아이디 test를 숨깁니다

$(".test").hide()
클래스 test를 숨깁니다.

$(this).hide()
html 요소를 숨깁니다.

jQuery Events

jQuery click()
클릭했을때 발생하는 이벤트 입니다.

jQuery dblclick()
더블클릭했을때 발생하는 이벤트 입니다.

jQuery mouseenter()
마우스가 다가왔을때 발생하는 이벤트 입니다.

jQuery mouseleave()
마우스가 자리를 떠날때 발생하는 이벤트 입니다.

jQuery mousedown()
마우스 버튼클릭시 발생하는 이벤트 입니다.

jQuery mouseup()
마우스 버튼을 클릭하고 놓을때 발생하는 이벤트 입니다.

jQuery hover()
마우스가 오버되었을때 발생하는 이벤트 입니다.

jQuery focus() and blur()
focus() 는 폼의 양식에 포커스를 받았을때 실행되는 이벤트 입니다.

blur() 는 폼의 양식에 포커스를 잃었을때 실행되는 이벤트 입니다.

위 내용의 자세한 설명과 예제는 jQuery Tutorial 에서 확인 가능합니다.

--------------------------------------------------------------------------------

jQuery Hide/Show

jQuery hide()
문구를 숨기는 이벤트 입니다.

jQuery show()
문구를 보여주는 이벤트 입니다.

jQuery toggle()
문구를 숨기고 보여주는 기능을 동시에 수행하는 이벤트 입니다.

jQuery Fade

jQuery fadeIn()
어떤 문구 또는 html 요소에 대하여 천천히 나타나게 하는 이벤트 입니다.

jQuery fadeOut()
어떤 문구 또는 html 요소에 대하여 천천히 사라지게 하는 이벤트 입니다.

jQuery fadeToggle()
어떤 문구 또는 html 요소에 대하여 천천히 나타나게, 사라지게를 동시에 수행 하는 이벤트 입니다.

jQuery fadeTo()
어떤 문구 또는 html 요소에 대하여 투명도를 조절할 수 있게 하는 이벤트 입니다.

jQuery Slide

jQuery slideDown()
아래로 천천히 나타나게 하는 이벤트 입니다.

jQuery slideUp()
위로 천천히 나타나게 하는 이벤트 입니다.

jQuery slideToggle()
천천히 아래로, 위로 를 동시에 수행하는 이벤트 입니다.

jQuery Animate

jQuery animate()
animate() 는 CSS의 속성을 정의할 수 있으며, "slow", "fast", "milliseconds" 를 이용하여 시간을 정의할 수 있습니다.

위 내용의 자세한 설명과 예제는 jQuery Effects 에서 확인 가능합니다.

--------------------------------------------------------------------------------

jQuery HTML Get Content and Attributes

jQuery text() and html()
text() 는 텍스트의 내용을 설정하거나 반환하는 이벤트 입니다.

html() 는 html의 내용을 설정하거나 반환하는 이벤트 입니다.

jQuery val()
폼 필드의 값을 설정하거나 반환하는 이벤트 입니다.

jQuery attr()
속성값을 설정하거나 반환하는 이벤트 입니다.

jQuery HTML Add Elements/Content

jQuery append()
선택된 html 요소의 끝에 문구등을 나타나게 하는 이벤트 입니다.

jQuery prepend()
선택된 html 요소의 앞에 문구등을 나타나게 하는 이벤트 입니다.

jQuery after()
선택한 요소의 뒤에 html, javascript 를 추가하는 이벤트 입니다.

jQuery before()
선택한 요소의 앞에 html, javascript 를 추가하는 이벤트 입니다.

jQuery HTML Remove Elements/Content

jQuery remove()
선택한 요소를 모두 지우는 이벤트 입니다.

jQuery empty()
선택한 자식 요소를 지우는 이벤트 입니다.


jQuery Get and Set CSS Classes

jQuery addClass()
선택한 요소에 하나 이상의 클래스를 추가하는 이벤트 입니다.

jQuery removeClass()
선택한 요소에 하나 이상의 요소를 지우는 이벤트 입니다.

jQuery toggleClass()
선택한 요소에 하나 이상의 요소를 추가/삭제 를 동시에 수행하는 이벤트 입니다.

jQuery css() Method

jQuery css()
선택된 요소에 하나 또는 그 이상의 속성값을 줄 수 있는 이벤트 입니다.

jQuery Dimensions

jQuery width() and height()
width()와 height()는 넓이와 높이값을 반환하는 이벤트 입니다.

jQuery innerWidth() and innerHeight()
innerWidth()와 innerHeight()는 width(),height()와 같이 넓이와 높이를 반환하지만 padding값만을 포함하여 반환하는 이벤트 입니다.

jQuery outerWidth() and outerHeight()
outerWidth()와 outerHeight()는 width(),height()와 같이 넓이와 높이를 반환하지만 border, padding값을 포함하여 반환하는 이벤트 입니다.

위 내용의 자세한 설명과 예제는 jQuery HTML 에서 확인 가능합니다.

--------------------------------------------------------------------------------

jQuery AJAX load() Method

jQuery load()
다른 서버의 값을 불러들이는 역할을 하는 이벤트 입니다.

jQuery AJAX get() and post() Methods

jQuery get()
기본적으로 서버로부터 데이터를 가져오는 이벤트 입니다.

jQuery post()
서버로부터 일부 데이터를 가져오는 이벤트 입니다.

위 내용의 자세한 설명과 예제는 jQuery AJAX 에서 확인 가능합니다.