.slideDown()
.slideDown()은 선택한 요소를 아래쪽으로 서서히 나타나게 합니다.
문법
.slideDown( )
duration
요소가 나타날 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다.
fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다.
easing
요소가 나타나는 방식을 정합니다.
swing과 linear가 가능하며, 기본값은 swing입니다.
complete
요소가 나타난 후 수행할 작업을 정합니다.
예제 1
버튼을 클릭하면 파란색 배경의 div ...
:selected는 select에서 선택된 option를 선택한다.
:selected 대신 :checked를 사용해도 된다.
색을 선택하면 그 값을 div 요소의 배경색으로 만든다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
* {
font-family: Consolas, monospace;
...
.parent()
.parent()는 어떤 요소의 부모 요소를 선택합니다.
문법
.parents( )
selector에 값이 없으면 부모 요소를 선택하고, 값이 있으면 부모 요소에 그 selector가 있어야 선택합니다. 예를 들어
$( 'p' ).parent().css( 'color', 'green' );
은 p의 부모 요소의 색을 녹색으로 만들고,
$( 'p' ).parent( 'div' ).css( 'color', 'green' );
은 p의 부모 요소가 div일 때만 녹색으로 만듭니다.
예제
ef를 클래스 값으로 갖는 ...
.fadeIn()
.fadeIn()은 선택한 요소를 서서히 나타나게 합니다.
문법
.fadeIn( )
duration
duration에는 완전히 나타날 때까지의 시간이 들어갑니다. fast, slow로 정하거나 400 같은 숫자로 정할 수 있습니다. 숫자일 경우 단위는 1000분의 1초이며, fast는 200, slow는 600에 해당합니다. 아무것도 입력하지 않으면 기본값 400으로 설정됩니다.
문자로 시간을 정할 때는 따옴표 안에 ...
사이트의 메뉴는 보통 맨 위에 있습니다. 내용이 긴 문서를 읽은 후 다시 메뉴로 가려면 한참 스크롤을 해야 하는 불편이 있습니다. 이 불편을 없애기 위해 맨 위로 가는 링크를 제공하는 곳이 많습니다. 단순한 링크로 만들면 순식간에 맨 위로 이동하는데, jQuery의 scrollTop()을 이용하면 맨 위로 스르륵 올라가는 효과를 쉽게 만들 수 있습니다.
HTML 문서에 ...
jQuery로 원하는 meta 태그를 선택하여 값을 가져오는 방법은 다음과 같습니다.
$( 'meta' ).attr( 'content' );
meta 태그 중 name이 xxx인 것을 선택하고, content 속성의 값을 가져오라는 뜻입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<meta name="author" content="JB">
<meta property="og:image" content="abc.png">
...
.toggle()
.toggle()은 선택한 요소가 보이면 보이지 않게, 보이지 않으면 보이게 합니다.
문법
.toggle( )
duration
duration에는 완전히 나타날 때까지의 시간이 들어갑니다. fast, slow로 정하거나 400 같은 숫자로 정할 수 있습니다. 숫자일 경우 단위는 1000분의 1초이며, fast는 200, slow는 600에 해당합니다. 아무것도 입력하지 않으면 기본값 400으로 설정됩니다.
문자로 시간을 정할 때는 따옴표 ...
jQuery를 사용할 때 다른 라이브러리와 충돌이 나는 경우가 있습니다. 충돌의 원인은 두 가지로 구분할 수 있습니다.
다른 라이브러리와 충돌
다른 버전의 jQuery와 충돌
각 경우에 대해서 어떻게 충돌을 방지할 수 있는지 알아보겠습니다.
다른 라이브러리와 충돌
jQuery는 $를 jQuery의 alias로 사용합니다. 그런데 다른 라이브러리에서 $를 함수나 변수로 사용한다면 jQuery가 제대로 작동하지 않을 수 있습니다. 이를 방지하는 방법은 ...
.resize()
.resize()는 윈도우 크기가 바뀔 때 어떤 작업을 할 수 있게 합니다.
문법
$( window ).resize( function() {
// do somthing
} );
예제
웹브라우저의 크기를 변경할 때, p 요소의 가로폭을 출력합니다. 윈도우 크기를 변경하면 숫자가 바뀝니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
...
.attr()
.attr()은 요소(element)의 속성(attribute)의 값을 가져오거나 속성을 추가한다.
문법 1 - 속성의 값 가져오기
선택한 요소의 속성의 값을 가져온다.
.attr( attributeName )
예를 들어 아래는 div 요소의 class 속성의 값을 가져온다.
$( 'div' ).attr( 'class' );
문법 2 - 속성 추가하기
선택한 요소에 속성을 추가한다.
.attr( attributeName, value )
예를 들어 아래는 h1 요소에 title 속성을 추가하고 속성의 값은 Hello로 ...