0622
jQuery FORM 태그 선택자
Form 태그 내부의 입력에 관련된 태그들에 대한 선택자
:input : 모든 입력에 관련된 태그들을 선택
jQuery 이벤트 함수
jQuery는 여러 이벤트에 대해 이벤트 처리를 할 수 있는 함수를 제공
각 함수는 해당 이벤트가 발생됐을 때 등록된 함수를 자동으로 호출
click : 클릭
Dbclick : 더블 클릭
Mouseenter : 마우스 커서가 들어왔을 때
Mouseleave : 마우스 커서가 나갔을 때
Mousedown : 마우스 키를 눌렀을 때
Mouseup : 마우스 키를 떼었을 때
Hover : 마우스 커서가 들어왔을 때와 나갔을 때
DOM
Document Object Model
text : 태그 사이의 문자열을 제어
html : 태그 내부의 html을 제어
val : 입력 도구들의 value 속성값을 제어
attr : 태그의 속성을 제어
append, prepend
append : html 코드나 태그를 태그 내부의 뒤에 추가
prepend : html 코드나 태그를 태그 내부의 앞에 추가
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("#a1").click(function(){
$("#a1").css("background-color", "black");
$("#a1").css("color", "white");
});
});
</script>
</head>
<body>
<h3 id="a1">click</h3>
<h3 id="a2">double click</h3>
<h3 id="a3">mouse enter/leave</h3>
<h3 id="a4">mouse down/up</h3>
<h3 id="a5">mouse hover</h3>
<input id="a6" type="text"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function getA1(){
var str=$("#a1").text();
alert(str);
}
function getA2(){
var str=$("#a2").text();
alert(str);
}
function setA3(){
$("#a3").text("문자열 설정");
}
function setHtml(){
$("#a3").text("<a href='http;//apple.co.kr'>apple</a>");
}
</script>
</head>
<body>
<div id="a1">a1 문자열</div>
<button onclick="getA1()">a1 문자열 가져오기</button>
<div id="a2">
<a href="http://www.google.co.kr">google</a></div>
<button onclick="getA2()">a2 문자열 가져오기</button>
<div id="a3">
<button onclick="setA3()">a3 문자열 설정하기</button>
<button onclick="setHtml()">a3 html 설정하기</button>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function getAttr(){
var src = $("#a1").attr("src");
var width = $("#a1").attr("width");
var height = $("#a1").attr("height");
var id = $("#a1").attr("id");
$("#result").html("src : "+src+"<br>"+
"width : " + width + "<br>"
+"id : " + id + "<br>");
}
function setAttr(){
$("#a1").attr("width", 544);
$("#a1").attr("height", 184);
}
</script>
</head>
<body>
<img src="Image/MicrosoftTeams-image (1).png" width="272" height="92" id="a1"/>
<br/>
<div id="result"></div>
<button onclick="getAttr()">속성 읽어오기</button>
<button onclick="setAttr()">속성 설정하기</button>
</body>
</html>
코딩