[KOSTA] Spring 기반 Cloud 서비스 개발자 양성 과정 43일차

📃 속성값 추출 및 기본 이벤트 취소

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-3.1.1.js"></script>
    <script>
       $(function() {
    	   $('#my-form').submit(function(event){
			   var name = $('#name').val(); // id = name 속성값 추출
			   var password = $('#password').val(); // id = password 속성값 추출
			   
			   alert(name + " : " + password);
    		   
    		   
    		   
    		   //기본이벤트 취소
    		   event.preventDefault();
    	   })
       });
    </script>
</head>
<body>
    <form id="my-form" action="server.jsp">
        <table>
            <tr>
                <td>이름: </td>
                <td><input type="text" name="name" id="name" /></td>
            </tr>
            <tr>
                <td>비밀번호: </td>
                <td><input type="password" name="password" id="password" /></td>
            </tr>
        </table>
        <input type="submit" value="제출" />
    </form>
</body>
</html>

📃 all 버튼 클릭시 전체 선택

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-3.1.1.js"></script>
    <script>
       $(function(){
    	   $('#all-check').change(function() {
    	   		if(this.checked){
    	   			$('#check-item :checkbox').attr('checked', true);
    	   		}else{
    	   			$('#check-item :checkbox').attr('checked', false);
    	   		}
    	   });
       })
    </script>
</head>
<body>
    <input type="checkbox" id="all-check" />
    <label>All</label>
    <div id="check-item">
        <input type="checkbox" />
        <label>A Option</label>
        <input type="checkbox" />
        <label>B Option</label>
        <input type="checkbox" />
        <label>C Option</label>
    </div>
</body>
</html>

📃 animate 이용해 버튼 클릭시 텍스트 크기 조절

default

bigger

smaller

$(function(){
	var $speech = $('div.speech');
	var defaultSize = parseInt($speech.css('fontSize'));
	
	$('#switcher button').click(function(){
		var num = parseInt($speech.css('fontSize'));
		
		switch(this.id){
			case 'switcher-large':
				num *= 1.2;
				break;
			case 'switcher-small':
				num /= 1.2;
				break;
			default:
				num = defaultSize;
				break;
		}
		
		$speech.animate({fontSize: num+'px'}, 'slow');
		
	});
	
});

Author And Source

이 문제에 관하여([KOSTA] Spring 기반 Cloud 서비스 개발자 양성 과정 43일차 - jQuery 실습), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@junbeomm-park/KOSTA-Spring-기반-Cloud-서비스-개발자-양성-과정-43일차-jQuery-실습

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[KOSTA] Spring 기반 Cloud 서비스 개발자 양성 과정 43일차 - jQuery 실습

Author And Source

좋은 웹페이지 즐겨찾기