<title>jQuery start</title?
// case1. download
// script src="./jquery-3.7.1.min.js"></script>
// case2. network
<script src = "https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>
<h1>jQuery start</h1>
<button id="textBtn">TEXT<button>
<button id="htmlBtn">HTML<button>
<script>
// jQuery / $
// -> wrapper(래퍼) : 인자로 전달된 요소들에
// jQuery의 기능성을 부가해서 반환
// $(CSS선택자).동작메소드()
// (1) h1 요소 가져오기
let valJS=document.querySelector('h1');
console.log(valJS);
let valJQ = jQuery('h1');
valJQ = $('h1');
console.log(valJQ);
// (2) TEXT버튼 클릭 시 내용만
$('#textBtn').click(()=>{
console.log('textBtn');
console.log(valJS.innerText);
console.log($('h1').text());
// 내용변경
// vlaJS.innerTEXT = 'JavaScript';
$('h1').text('JavaScript');
})
// (3) html 버튼 클릭 시 태그까지
$('#htmlBtn').click(()=>{
console.log('htmlBtn');
// 태그까지 변경
// valJS.innerHTML = '<a href = "#">a태그로 변경</a>'
$('h1').html('<a href = "#">a태그로 변경</a>);
})
</script>
</body>
갓벽한 개발자