안녕하세요.
https://blog.naver.com/sysysy0302 여니입니다 :)
yeonee 블로그 : 네이버 블로그
예쁘고 맛있게 먹고 건강하게,강인하지만 온화하게 행하라. ※맛스타운스타일상 인스타 www.instagram.com/s2._.y25n ※맛집감성일상 유튜브https://youtube.com/channel/@S2_yeonee 티스토리https://yeoneeluv.tistory.co
blog.naver.com
* 폼
- 서버로 데이터를 전송하기 위한 수단
- 생활코딩 HTML 튜토리얼 폼 편 참고
- Query는 폼을 제어하는데 필요한 이벤트와 메소드를 제공한다.
- jQuery 폼 API 문서 : http://api.jquery.com/category/forms/
예제1. (.focus(), .blur(), .change(), .select())
<!DOCTYPE html>
<html>
<head>
<style>
span {
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>
<input type="text" />
<span></span>
</p>
<script>
$("input").focus( function () {
$(this).next("span").html('focus');
}).blur( function() {
$(this).next("span").html('blur');
}).change(function(e){
alert('change!! '+$(e.target).val());
}).select(function(){
$(this).next('span').html('select');
});
</script>
</body>
</html><코드해석>
1. this는 inut엘리먼트를 가리킵니다.
next는 input엘리먼트(this) 다음에 오는 엘리먼트를 찾으라는 의미이며, next("span")괄호 안에 "span"이 있으나 없으나 결과는 같습니다.
next("span")은, 즉 span에 selertor를 준 것이고, span엘리먼트를 찾겠다는 뜻 입니다.
.html("focus")에서 span엘리먼트에 html메소드를 통해 span 태그에 있는 html에 focus를 적히도록 하겠다는 의미이다.
정리하자면 클릭을 통해 이벤트 핸들러가 작동되고 난 후, html메소드에 적힌 focus를 통해 focus라는 데이터가 들어가게 된 것입니다.
2. .blur은 chain이 적용된 상태로 진행된 것이다.
위의 내용과 같은 방식으로 blur이벤트가 발생했을때 span엘리먼트의 콘텐트로 blur을 삽입한 것입니다.
3. change도 이벤트 핸들러입니다.
코드에서 $(e.target)은 이벤트를 적용시킨 엘리먼트를 호출해주므로, $(this)로 적어도 같은 의미를 가진다.
.val()은 그 엘리먼트의 value값을 의미합니다. 즉, 우리가 input에 적은 값(value)을 의미하게 됩니다.
=> jQuery는 래퍼 기능을 통해 chain 속성을 이용할 수 있기 때문에 연결해서 계속 코드를 작성할 수 있는 특징을 살펴볼 수 있습니다.
예제2. (.submit(), .val())
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin:0;
color:blue;
}
div, p {
margin-left:10px;
}
span {
color:red;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>
Type 'correct' to validate.
</p>
<form action="javascript:alert('success!');">
<div>
<input type="text" />
<input type="submit" />
</div>
</form>
<span></span>
<script>
$("form").submit( function() {
if ($("input:first").val() == "correct") {
$("span").text("Validated...").show();
return true;
}
$("span").text("Not valid!").show().fadeOut(1000);
return false;
});
</script>
</body>
</html><코드 해석>
input엘리먼트의 first(filter)첫번째 엘리먼트를 찾으라는 의미이다.
input에서 첫번째 엘리먼트의 value값(입력값)을 래퍼한다.
if문 안의 sapn엘리먼트를 찾아 text("Validated")로 메세지가 show() 보여지게 하는 메소드로 화면에 보여지게 된다.
return true;는 실행될 때 보여지는 결과를 return한다.
return false;는 위의 내용이 아닐 때 결과를 return하며 결과를 반대로 적용시킬 수 있다.
다음글 >>
+ 아래의 링크를 참고하여 공부하였습니다.
'VsCode(HTML) > 3. JQUERY' 카테고리의 다른 글
| JQUERY - 9. Traversing 탐색 (0) | 2023.07.09 |
|---|---|
| JQUERY - 선택자(Selector) 요약 정리 (0) | 2023.07.09 |
| JQUERY - 7. manipulation 엘리먼트 제어 (0) | 2023.07.09 |
| JQUERY - 6. 이벤트 event (0) | 2023.07.09 |
| JQUERY - 5. Chain (0) | 2023.07.09 |