jQuery / Reference / .width()
개요
.width()는 선택한 요소의 가로 크기를 반환하거나, 가로 크기를 변경합니다.
문법 1
.width()
- 선택한 요소의 가로 크기를 반환합니다. 예를 들어 다음은 p 요소의 가로 크기를 변수 jbVar에 저장합니다.
var jbVar = $( 'p' ).width();
문법 2
.width( value )
- 선택한 요소의 가로 크기를 변경합니다. 예를 들어 다음은 h1 요소의 가로 크기를 100px로 만듭니다.
$( 'h1' ).width( '100px' );
예제 1
- 선택한 요소의 가로 크기를 출력합니다. 가로 크기를 %로 지정해도 반환되는 값의 단위는 px입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
div {
border: 1px solid #dddddd;
text-align: center;
}
.div-a {
width: 600px;
}
.div-b {
width: 50%;
}
</style>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
jQuery( document ).ready( function() {
var jbWidthDivA = $( '.div-a' ).width();
$( '.width-div-a' ).append( jbWidthDivA );
var jbWidthDivB = $( '.div-b' ).width();
$( '.width-div-b' ).append( jbWidthDivB );
} );
</script>
</head>
<body>
<div class="div-a">
<p>A - 600px</p>
</div>
<p class="width-div-a"></p>
<div class="div-b">
<p>B - 50%</p>
</div>
<p class="width-div-b"></p>
</body>
</html>
예제 2
- 버튼을 클릭하면 요소의 가로 크기가 변합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>jQuery</title>
<style>
div {
border: 1px solid #dddddd;
text-align: center;
}
</style>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
jQuery( document ).ready( function() {
$( '.width-div-a' ).click( function() {
$( '.div-a' ).width( '500px' );
} );
$( '.width-div-b' ).click( function() {
$( '.div-b' ).width( '50%' );
} );
} );
</script>
</head>
<body>
<div class="div-a">
<p>To 500px</p>
</div>
<p><button class="width-div-a">Click</button></p>
<div class="div-b">
<p>To 50%</p>
</div>
<p><button class="width-div-b">Click</button></p>
</body>
</html>
참고
- 가로 크기는 내용 영역(Content Area)이 기준입니다. 즉, 박스 모델에서 바깥 여백 영역(Margin Area), 테두리 영역(Border Area), 안쪽 여백 영역(Padding Area)을 제외한 부분의 가로 크기입니다.
jQuery / Reference / .before()
개요 .before()는 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킵니다. 문법 .before( content ) 예제 1 p 요소 앞에 Lorem Ipsum Dolor를 내용으로 갖는 h1 요소를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> ...
jQuery / Reference / .addClass()
개요 .addClass()로 선택한 요소에 클래스 값을 추가할 수 있습니다. 문법 .addClass( className ) 클래스 값은 큰 따옴표 또는 작은 따옴표로 감쌉니다. $( 'h1' ).addClass( 'abc' ); 띄어쓰기로 구분하여 여러 개의 값을 추가할 수 있습니다. $( 'h1' ).addClass( 'ab cd ef' ); 페이지가 로드된 상태에서 클래스 값이 추가되는 것이므로, 추가되기 전의 모양에서 추가된 후의 모양으로 변하는 것을 방문자가 볼 수도 ...
개요 .val()은 양식(form)의 값을 가져오거나 값을 설정합니다. 문법 1 .val() 선택한 양식의 값을 가져옵니다. 예를 들어 다음은 아이디가 jbInput인 input 요소의 값을 변수 jb에 저장합니다. var jb = $( 'input#jbInput' ).val(); 문법 2 .val( value ) 선택한 양식의 값을 설정합니다. 예를 들어 다음은 아이디가 jbInput인 input 요소의 값을 ABCDE로 정합니다. $( 'input#jbInput' ).val( 'ABCDE' ); 예제 1 양식에 텍스트를 입력하고 버튼을 클릭하면, ...
.width()는 선택한 요소의 가로 크기를 반환하거나, 가로 크기를 변경합니다.
jQuery / Reference / :contains()
:contains()는 특정 문자열을 포함한 요소를 선택하는 선택자입니다. 문자열 포함 여부를 따질 때 대소문자를 구분한다는 점에 주의합니다.
jQuery / Reference / .slideDown()
개요 .slideDown()은 선택한 요소를 아래쪽으로 서서히 나타나게 합니다. 문법 .slideDown( ) duration 요소가 나타날 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 나타나는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete 요소가 나타난 후 수행할 작업을 정합니다. 예제 1 버튼을 클릭하면 파란색 배경의 div ...
jQuery / Reference / .addBack()
개요 .addBack()은 현재 선택한 요소와 함께 이전에 선택한 요소도 선택하게 합니다. 문법 .addBack( ) 예를 들어 다음은 ul의 하위 요소 중 li를 선택하고, 추가적으로 처음 선택했던 ul을 선택합니다. $( 'ul' ).find( 'li' ).addBack() 예제 div 요소 안에서 클래스 값이 ip인 p 요소를 찾아 선택을 하고, 추가로 div 요소도 선택하여 테두리를 만듭니다. <!doctype html> <html lang="ko"> <head> ...
개요 .wrap()은 선택한 요소를 원하는 태그로 감쌉니다. 문법 .wrap( wrappingElement ) 예를 들어 다음과 같이 하면 p 요소를 div로 감쌉니다. $( 'p' ).wrap( '<div></div>' ); class나 id 값을 추가할 수도 있습니다. $( 'p' ).wrap( '<div id="ab" class="cd"></div>' ); 여러 태그로 감쌀 수도 있습니다. $( 'p' ).wrap( '<div><strong></strong></div>' ); 예제 클래스의 값이 a인 p 요소를 blockquote 태그로 감쌉니다. <!doctype html> <html lang="ko"> <head> ...
jQuery / Reference / .slideUp()
개요 .slideUp()는 선택한 요소를 위쪽으로 서서히 사라지게 합니다. 문법 .slideUp( ) duration 요소가 사라질 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 사라지는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete 요소가 사라진 후 수행할 작업을 정합니다. 예제 1 버튼을 클릭하면 파란색 배경의 div ...
jQuery / Reference / .unwrap()
개요 .unwrap()은 선택한 요소의 상위 태그를 제거합니다. 문법 .unwrap() 예를 들어 다음은 h1 요소의 바로 상위의 태그를 제거합니다. $( 'h1' ).unwrap(); 예제 버튼을 크릭하면 h1 요소의 상위 태그인 div 태그를 제거합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> div { ...