<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script>
<style>
p {
margin: 14px;
cursor: pointer;
}
strong {
text-decoration: underline;
}
button {
cursor: pointer;
}
/* #res {font-size:20px; color : blue; font-weight:bold;} */
</style>
<script>
/*
제이쿼리객체.html() : => 자바스크립트의 innerHTML(값자리)
제이쿼리객체의 자식 요소들(태그, 텍스트포함)을 html형식으로 가져오세요.
제이쿼리객체.html("소스코드") : => 자바스크립트의 innerHTML(공간자리)
제이쿼리객체의 자식요소를 모두 지우고 그 안의 자식으로 넣는데, html형식으로 넣으세요.
제이쿼리객체.text() : => 자바스크립트의 innerText(값자리)
제이쿼리객체의 자식 요소들 중 텍스트만 가져오세요.
제이쿼리객체.text("문자열값") : => 자바스크립트의 innerText(공간자리)
제이쿼리객체의 자식요소를 모두 지우고 그 안의 자식으로 넣는데, 문자열로 넣으세요.
*/
$(function () {
var htmlStr; //undefined-선언만 한 상태
$("p").click(function () {
htmlStr = $(this).html();
// htmlStr = $(this).text();
// console.log(htmlStr);
report(htmlStr);
//inner 자식들, 텍스트 요소들 모두 다 지우고..
});
});
function report(msg) {
$('#res').html(msg);
// $('#res').html(msg);
}
</script>
</head>
<body>
<p><strong>html()은</strong> 엘리먼트의 <span id="tag">내용을</span></p>
<p>HTML 형식의 <span id="text">문자열로</span> 리턴한다.</p>
<p>버튼을 포함한
<button name="oktbtn" onclick="alert('버튼클릭')">button</button>
문장이다.</p>
<div id="res"></div>
</body>
</html>
key
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.js"></script>
<script>
$(function(){
$('input[name=val_test]').focus();
// keyup() : 키보드 버튼을 눌렀다떼자마자 이벤트 실행
$('input').not('#kInp').keyup(function(){
//.not('선택자') 해당 선택자 제외
var value = $(this).val();
report(value);
});
$('button').click(function(){
$('input').not('#kInp').val("button으로 새로운 값 설정");
});
function report(msg){$('#res').text(msg);}
/*
콜백함수형식 = 익명함수형식
function([매개변수...]){실행문;...}
on함수 호출 형식
1. 한 개의 이벤트만 적용 : on("이벤트속성자", 콜백함수);
2. 여러 개의 이벤트를 적용 :
on({
"이벤트속성자1" : 콜백함수1,
"이벤트속성자2" : 콜백함수2,
...
});
3. 여러 개의 이벤트에 한 개의 기능을 적용
on("이벤트속성자1 이벤트속성자2...", 콜백함수);
*/
// $("input[name=user_id]").on("keyup focus", function(){
// console.log("키보드를 눌렀다 떼었을 때 \n포커스가 생성이 되었을 때 이벤트 발생");
// });
$("input[name=user_id]").on({
"keyup":function(){
console.log("키보드를 눌렀다 떼었을 때 이벤트 발생");
},
"focus":function(){
console.log("포커스가 생성이 되었을 때 이벤트 발생");
}
});
$("#kInp").keydown(function(e){
//event
console.log(e);
var a = e.keyCode;
switch(a){
case 8: case 32: case 13: break;
default : alert("키보드 코드값은: "+a);
}
});
});
</script>
</head>
<body>
<button>reset</button>
<input type="text" name="val_test" value="val 메소드" size="50">
<input type="text" name="user_id">
<input type="text" id="kInp">
<div id="res"></div>
</body>
</html>
