jQuery / Method / .submit() - 폼 전송 이벤트
.submit()을 이용하여 폼 전송을 제어할 수 있다. 다음은 이를 활용한 몇 가지 예제이다.
select 선택 시 바로 폼 전송
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() {
$( '#jb-fruit' ).change( function() {
$( '#jb-form' ).submit();
} );
} );
</script>
<style>
* {
font-family: Consolas;
}
</style>
</head>
<body>
<form method="POST" id="jb-form">
<select name="fruit" id="jb-fruit" required>
<option value=""></option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</select>
</form>
<p><?php echo $_POST[ 'fruit' ] ?></p>
</body>
</html>
전송 버튼이 아닌 요소를 클릭 시 폼 전송
form 외부의 요소를 클릭해도 폼을 전송하게 할 수 있다. 단, 이때 required는 작동하지 않는다.
<!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() {
$( '#jb-submit' ).click( function() {
$( '#jb-form' ).submit();
} );
} );
</script>
<style>
* {
font-family: Consolas;
}
</style>
</head>
<body>
<form method="POST" id="jb-form">
<select name="fruit" id="jb-fruit" required>
<option value=""></option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</select>
</form>
<p id="jb-submit">Submit</p>
<p><?php echo $_POST[ 'fruit' ] ?></p>
</body>
</html>
폼 전송 전에 특정 작업 수행
폼을 전송하기 전에 특정 작업을 할 수 있다. 다음은 선택한 값을 알려주는 예이다.
<!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() {
$( '#jb-form' ).submit( function() {
alert( 'You selectd ' + $( '#jb-fruit' ).val() + '!' );
} );
} );
</script>
<style>
* {
font-family: Consolas;
}
</style>
</head>
<body>
<form method="POST" id="jb-form">
<select name="fruit" id="jb-fruit" required>
<option value=""></option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</select>
<input type="submit" value="submit">
</form>
</body>
</html>
유효성 검사
입력 또는 선택한 값이 유효한지 검사하는 게 사용할 수 있다. 다음은 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() {
$( '#jb-form' ).submit( function( event ) {
if ( $( '#jb-fruit' ).val() == '' ) {
alert( 'Select!' );
event.preventDefault();
}
} );
} );
</script>
<style>
* {
font-family: Consolas;
}
</style>
</head>
<body>
<form method="POST" id="jb-form">
<select name="fruit" id="jb-fruit">
<option value=""></option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
</select>
<input type="submit" value="submit">
</form>
</body>
</html>
jQuery / Method / .addClass() - 클래스 값을 추가하는 메서드
.addClass() .addClass()로 선택한 요소에 클래스 값을 추가할 수 있습니다. 문법 .addClass( className ) 클래스 값은 큰 따옴표 또는 작은 따옴표로 감쌉니다. $( 'h1' ).addClass( 'abc' ); 띄어쓰기로 구분하여 여러 개의 값을 추가할 수 있습니다. $( 'h1' ).addClass( 'ab cd ef' ); 페이지가 로드된 상태에서 클래스 값이 추가되는 것이므로, 추가되기 전의 모양에서 추가된 후의 모양으로 변하는 것을 방문자가 볼 ...
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> ...
jQuery / Method / .text() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드
.text() .text()는 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꿉니다. .html()과 비슷하지만 태그의 처리가 다릅니다. 문법 1 .text() 선택한 요소 안의 내용을 가져옵니다. 태그는 가져오지 않습니다. 예를 들어 var jb = $( 'h1' ).text(); 는 h1 요소의 내용을 변수 jb에 저장합니다. 문법 2 .text( textString ) 이전 내용을 지우고 새로운 내용을 넣습니다. 예를 들어 $( 'div' ).html( '<h1>Lorem</h1>' ); 는 div ...
jQuery / Method / .slice() - 일치하는 요소의 일부분만 선택하는 메서드
.slice() .slice()는 일치하는 요소의 일부분만 선택합니다. 문법 .slice( start ) 예를 들어 $( 'li' ).slice( 2 ).css( 'color', 'red' ); 는 li 요소 중 3번째부터 빨간색으로 만듭니다. $( 'li' ).slice( 2, 5 ).css( 'color', 'red' ); 는 li 요소 중 3번째부터 5번째까지 빨간색으로 만듭니다. $( 'li' ).slice( -4, -2 ).css( 'color', 'red' ); 는 li 요소 중 ...
jQuery / Method / .prop() - 속성값을 가져오거나 추가하는 메서드
.prop() .prop()는 지정한 선택자를 가진 첫번째 요소의 속성값을 가져오거나 속성값을 추가한다. 주의할 점은 HTML 입장에서의 속성(attribute)이 아닌 JavaScript 입장에서의 속성(property)이라는 것이다. 문법 1 - 속성의 값 가져오기 propertyName 속성의 값을 가져온다. .prop( propertyName ) 문법 2 - 속성 추가하기 propertyName 속성에 value 값을 추가한다. .prop( propertyName, value ) 예제 1 - 속성의 값 가져오기 a 요소의 href 속성값을 .attr()과 ...
jQuery / Method / .css() - 선택한 요소의 css 속성값을 가져오거나, 속성을 추가하는 메서드
.css()로 선택한 요소의 css 속성값을 가져오거나 style 속성을 추가한다. 문법 1 - 속성의 값 가져오기 propertyName의 속성값을 가져온다. .css( propertyName ) 예를 들어 아래는 h1 요소의 스타일 중 color 속성의 값을 가져온다. $( "h1" ).css( "color" ); 문법 2 - 속성 추가하기 style 속성을 추가한다. .css( propertyName, value ) 예를 들어 아래는 h1 요소에 style 속성을 추가하여 글자색을 녹색으로 ...
Slider bxSlider slick Uncategorized Smooth Scroll : 한 페이지에 있는 링크 사이를 부드럽게 이동하게 해주는 플러그인 jQuery Actual : 보이지 않는 요소의 크기를 가져오는 플러그인 vTicker : 아래에서 위로 스크롤되는 티커
jQuery / Method / .attr() - 속성(attribute)의 값을 가져오거나 속성을 추가하는 메서드
.attr() .attr()은 요소(element)의 속성(attribute)의 값을 가져오거나 속성을 추가한다. 문법 1 - 속성의 값 가져오기 선택한 요소의 속성의 값을 가져온다. .attr( attributeName ) 예를 들어 아래는 div 요소의 class 속성의 값을 가져온다. $( 'div' ).attr( 'class' ); 문법 2 - 속성 추가하기 선택한 요소에 속성을 추가한다. .attr( attributeName, value ) 예를 들어 아래는 h1 요소에 title 속성을 추가하고 속성의 값은 Hello로 ...
jQuery / Method / .children() - 어떤 요소의 자식 요소를 선택하는 메서드
.children() .children()은 어떤 요소의 자식 요소를 선택합니다. 문법 .children( ) 예를 들어 $( 'div' ).children().css( 'color', 'blue' ); 는 div 요소의 자식 요소의 색을 파란색으로 만듭니다. $( 'div' ).children( 'p.bl' ).css( 'color', 'blue' ); 는 div 요소의 자식 요소 중 클래스 값으로 bl을 가진 p 요소의 색을 파란색으로 만듭니다. 예제 ul 요소의 자식 요소 중 ip를 클래스 값으로 가지는 ...
jQuery / 스크롤해도 상단에 고정되는 메뉴 만들기
상단 고정 메뉴 웹페이지의 내용이 많으면 아래로 스크롤해서 보게 됩니다. 그러면 페이지에 있는 모든 내용이 움직이고 상단에 있는 메뉴도 위로 사라지게 됩니다. 이렇게 되면 페이지의 내용을 다 보고 다른 메뉴로 이동하려 할 때 다시 문서의 위로 스크롤해서 올라가야 하는 불편이 있습니다. 모바일 기기에서라면 더욱 불편합니다. 이 불편을 해소하는 방법 중의 하나가 메뉴를 고정시키는 ...