<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="/Lecture-WEB/jquery/js/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$('#btn01').click(function() {
$('#p01').text('<mark>문장이 변환되었습니다</mark>')
})
$('#btn02').click(function() {
$('#p02').html('<mark>문장이 변환되었습니다</mark>')
})
$('#btn03').click(function(){
// $('a').attr('href') ==> getter
$('a').attr('href', "http://www.daum.net") // ==> setter
})
$('#btn04').click(function(){
//$('p').html('1 : <em>문장변환</em>')
// html() 내부의 callback 함수가 index를 가져온다. 매개변수명은 내가 정의할 수 있음.
$('p').html(function(idx, element){ // 반복문의 기능. 해당 태그의 인덱스만큼 돈다.
console.log(idx, element)
return (idx+1) + " : <em>문장변환</em>"
})
})
})
</script>
</head>
<body>
<a href="http://www.naver.com" target="_blank">사이트이동</a>
<p id="p01">첫번째 문장입니다</p>
<p id="p02">두번째 문장입니다</p>
<button id="btn01">TEXT변환</button>
<button id="btn02">HTML변환</button>
<button id="btn03">주소변환</button>
<button id="btn04">문장변환</button>
</body>
</html>
