jQuery / Method / .val() - 양식(form)의 값을 가져오거나 값을 설정하는 메소드

.val()

.val()은 양식(form)의 값을 가져오거나 값을 설정하는 메소드입니다.

문법 1

.val()

선택한 양식의 값을 가져옵니다. 예를 들어

var jb = $( 'input#jbInput' ).val();

은 아이디가 jbInput인 input 요소의 값을 변수 jb에 저장합니다.

문법 2

.val( value )

선택한 양식의 값을 설정합니다. 예를 들어

$( 'input#jbInput' ).val( 'ABCDE' );

는 아이디가 jbInput인 input 요소의 값을 ABCDE로 정합니다.

예제 1

양식에 텍스트를 입력하고 버튼을 클릭하면, 입력한 값을 출력합니다.

<!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>
			$( document ).ready( function() {
				$( 'button#jbInputButton' ).click( function() {
					var jb = $( 'input#jbInput' ).val();
					alert( jb );
				} );
			} );
		</script>
	</head>
	<body>
		<p><input type="text" id="jbInput"> <button id="jbInputButton">Click</button></p>
	</body>
</html>

예제 2

select 양식에서 값이 바뀌면, 그 값을 출력합니다.

<!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>
			$( document ).ready( function() {
				$( 'select#jbSelect' ).change( function() {
					var jb = $( 'select#jbSelect' ).val();
					alert( jb );
				} );
			} );
		</script>
	</head>
	<body>
		<select id="jbSelect">
			<option>One</option>
			<option>Two</option>
			<option>Three</option>
		</select>
	</body>
</html>

예제 3

버튼을 클릭하면 input의 값을 ABCDE로 설정합니다.

<!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>
			$( document ).ready( function() {
				$( 'button#jbInputButton' ).click( function() {
					$( 'input#jbInput' ).val( 'ABCDE' );
				} );
			} );
		</script>
	</head>
	<body>
		<p><input type="text" id="jbInput"> <button id="jbInputButton">Click</button></p>
	</body>
</html>

같은 카테고리의 다른 글
jQuery / Method / .prepend() - 선택한 요소의 내용의 앞에 콘텐트를 추가하는 메서드

jQuery / Method / .prepend() - 선택한 요소의 내용의 앞에 콘텐트를 추가하는 메서드

.prepend() .prepend()는 선택한 요소의 내용의 앞에 콘텐트를 추가합니다. 문법 .prepend( content ) 예를 들어 <p>Lorem Ipsum Dolor</p> 가 있을 때 $( 'p' ).prepend( '123 ' ); 라고 하면 <p>123 Lorem Ipsum Dolor</p> 으로 출력됩니다. 예제 1 순서 없는 목록 처음에 Dolor를 추가합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...

jQuery / meta 태그의 값 가져오기

jQuery / meta 태그의 값 가져오기

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"> ...

jQuery / Selector / :has() - 특정 요소를 포함하는 요소를 선택하는 선택자

jQuery / Selector / :has() - 특정 요소를 포함하는 요소를 선택하는 선택자

:has() :has()는 특정 요소를 포함하는 요소를 선택할 때 사용하는 선택자입니다. 문법 $( ':has(selector)' ) 예를 들어 $( 'p:has(span)' ) 은 span 요소를 가지고 있는 p 요소를 선택합니다. 예제 <!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> $( document ...

jQuery / Method / .fadeIn() - 선택한 요소를 서서히 나타나게 하는 메서드

jQuery / Method / .fadeIn() - 선택한 요소를 서서히 나타나게 하는 메서드

.fadeIn() .fadeIn()은 선택한 요소를 서서히 나타나게 합니다. 문법 .fadeIn( ) duration duration에는 완전히 나타날 때까지의 시간이 들어갑니다. fast, slow로 정하거나 400 같은 숫자로 정할 수 있습니다. 숫자일 경우 단위는 1000분의 1초이며, fast는 200, slow는 600에 해당합니다. 아무것도 입력하지 않으면 기본값 400으로 설정됩니다. 문자로 시간을 정할 때는 따옴표 안에 ...

jQuery / Method / .text() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드

jQuery / Method / .text() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드

.text() .text()는 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꿉니다. .html()과 비슷하지만 태그의 처리가 다릅니다. 문법 1 .text() 선택한 요소 안의 내용을 가져옵니다. 태그는 가져오지 않습니다. 예를 들어 var jb = $( 'h1' ).text(); 는 h1 요소의 내용을 변수 jb에 저장합니다. 문법 2 .text( textString ) 이전 내용을 지우고 새로운 내용을 넣습니다. 예를 들어 $( 'div' ).html( '<h1>Lorem</h1>' ); 는 div ...

jQuery / Selector / :nth-child() - 형제 요소 중 an+b번째 요소들을 선택하는 선택자

jQuery / Selector / :nth-child() - 형제 요소 중 an+b번째 요소들을 선택하는 선택자

:nth-child()는 형제 요소 중 an+b번째 요소들을 선택하는 선택자입니다. 문법 $( ':nth-child(an+b)' ) a와 b는 상수, n은 변수입니다. n에는 음이 아닌 정수(0, 1, 2, 3, ···)가 차례대로 대입됩니다. an+b 대신에 even, odd를 사용할 수 있습니다. 예제 $( 'ol li:nth-child(2)' ) ol 요소의 자식 요소인 li의 형제 요소 중에서 두 번째 요소를 선택합니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / Method / .slideUp() - 요소를 위쪽으로 사라지게 하는 메서드

jQuery / Method / .slideUp() - 요소를 위쪽으로 사라지게 하는 메서드

.slideUp() .slideUp()는 선택한 요소를 위쪽으로 서서히 사라지게 합니다. 문법 .slideUp( ) duration 요소가 사라질 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 사라지는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete 요소가 사라진 후 수행할 작업을 정합니다. 예제 1 버튼을 클릭하면 파란색 배경의 div ...

jQuery / Plugin / slick / 슬라이더 플러그인

jQuery / Plugin / slick / 슬라이더 플러그인

slick은 jQuery 기반의 슬라이더 플러그인입니다. 홈페이지 : https://kenwheeler.github.io/slick/ GitHub : https://github.com/kenwheeler/slick/ 기본 사용법 jQuery, slick.css, slick-theme.css, slick.min.js를 연결합니다. 아래는 CDN을 이용하여 연결하는 코드입니다. <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" /> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" /> 아래와 같은 형식으로 마크업합니다. 클래스 값 slider는 변경해도 됩니다. <div class="slider"> <div><img src="images/slider-1920x1080-01.png" alt=""></div> <div><img src="images/slider-1920x1080-02.png" alt=""></div> <div><img src="images/slider-1920x1080-03.png" alt=""></div> <div><img src="images/slider-1920x1080-04.png" alt=""></div> ...

jQuery / Method / .hover()

jQuery / Method / .hover()

.hover() .hover()로 선택한 요소에 마우스 포인터를 올렸을 때, 그리고 마우스 포인터가 그 요소를 벗어났을 때 어떤 효과를 넣을 수 있습니다. 문법 .hover( handlerIn(eventObject), handlerOut(eventObject) ) handlerIn(eventObject)에는 요소에 마우스 포인터를 올렸을 때의 효과를, handlerOut(eventObject)에는 마우스 포인터가 요소를 벗어났을 때의 효과를 넣습니다. 예제 span 요소에 마우스 포인터를 올리면 글자가 커지고, 포인터가 벗어나면 다시 원래대로 돌아옵니다. <!doctype html> <html lang="ko"> ...

jQuery / Method / jQuery.trim() - 문자열에 있는 공백(whitespace)을 제거하는 메서드

jQuery / Method / jQuery.trim() - 문자열에 있는 공백(whitespace)을 제거하는 메서드

jQuery.trim() jQuery.trim()은 문자열에 있는 공백(whitespace)을 제거합니다. 주의할 점은 문자열 앞과 뒤에 있는 공백은 제거하지만, 문자열 중간에 있는 공백은 제거하지 않는다는 것입니다. 문법 jQuery.trim( str ) 예제 같은 문자열에 대하여, 두 번째 줄은 jQuery.trim()을 적용하였습니다. <!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> ...