선택자로 요소를 가져올 때, 태그의 속성으로 더 자세하게 가져오는 방법을 배우다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<input type="text">
<select id="fruits">
<option value="strawberry">딸기</option>
<option value="mango">망고</option>
<option value="pineapple">파인애플</option>
</select>
<input type="button" value="출력">
</form>
<p id="result"></p>
<p>선택한 과일 :
<span id="selected_fruit"></span>
</p>
<!-- jQuery 파일 불러오기 -->
<script src="./js/jquery-3.7.0.js"></script>
<script>
// 속성선택자
$("input[type='button']").on("click", () => {
// alert("클릭");
// 입력요소의 값을 가져오려면? val() 사용
let $userInput = $("input[type='text']").val();
console.log("유저 입력값: ", $userInput)
// 유저가 입력한 값을 웹 페이지에 출력
$("#result").text($userInput)
});
// select태그의 내용이 바뀔 때 동작하는 이벤트
$("#fruits").on("change", () => {
console.log($("#fruits").val());
$("#selected_fruit").text($("#fruits").val())
})
</script>
</body>
</html>
코드 설명
$("선택자[타입='타입값']")으로 타입을 가진 요소를 타입값으로 정확하게 가져올 수 있다. 버튼에 클릭 이벤트를 걸어준다.
클릭했을 때 사용자가 입력한 값을 p태그에 넣어줄 것이다. 입력한 값을 출력하려면 js에선. value를 썼지만 여기선 비슷하게 val( )을 사용해 준다. jQuery에서 변수를 선언할 때 변수 이름 앞에$를 넣어서 자바스크립트 변수와 헷갈리지 않게 해 주면 좋다.
result 아이디를 가진 태그에 텍스트로 유저 입력값을 넣어준다. $("#result").text($userInput)
선택한 과일: 의 옆에 선택한 텍스트의 요소의 value 값을 넣어줄 것이다. change 이벤트로 select 태그의 옵션이 바뀔 때를 감지하고, 선택이 바뀜을 감지하면 select의 아이디가 fruits니까 fruits를 사용해서 val( )로 value값을 가져와서, 출력하는 span태그의 텍스트로 넣어준다.
'Front-End > 4. jQuery' 카테고리의 다른 글
| Ex06_animate.html (0) | 2023.06.22 |
|---|---|
| Ex05_jQuery추가삭제.html (0) | 2023.06.22 |
| Ex03_jQuery_클래스변경.html (0) | 2023.06.21 |
| Ex02_jQuery.html (0) | 2023.06.21 |
| Ex01_jQuery.html (0) | 2023.06.21 |
