prop & attr

prop(property): 상태 -> 현재 DOM의 실제 상태

$('input').prop('checked'); // "true/false"로 반환

-checked, disabled, selected

$('a').attr('href',google.com')

attribute(attr): 정보 -> html에 적힌 초기값

$('input').attr('checked); //"checked"로 반환

-id, class, href, src

$('input').prop('disabled', true);

이메일 입력상자

html

<!-- 제이쿼리 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="form-1" style="display: flex;">
	<span>이메일 : </span>
	<div>
		<input type="email" placeholder="이메일을 입력해주세요.">
		<div class="need_input">이메일을 입력해주세요.</div>
		<div class="invalid">형식이 올바르지 않습니다.</div>
	</div>
</div>

css

.form-1 input[type="email"] ~ div {
	display: none;
}

.form-1 input[type="email"].focused:placeholder-shown ~ .need_input {
	display: block;
}

.form-1 input[type="email"].focused:invalid ~ .invalid {
	display: block;
}

.need_input, .invalid {
	color: red;
}

js

console.clear();

function From1__init() {
	$('.form-1 input[type="email"]').focus(function(){
		$(this).addClass('focused');
	})
}

From1__init();