1. remove 함수와 empty 함수의 차이는?
$("#removeMthod").remove();
$("#emptyMthod").empty();-
$(dom).remove()
$(dom)과 그 하위 요소를 전부 제거한다.
제거된 요소가 jQuery 데이터 형태로 유지되나, 제거된 요소 및 하위 요소들의 데이터, 이벤트는 전부 제거된다. -
$(dom).empty()
$(dom)의 하위요소들(텍스트 포함)을 제거한다.
자식 요소들의 데이터, 이벤트도 함께 제거된다.
detach와 달리, 제거된 요소가 데이터로 유지되지 않는다.
$(dom).detach()
$(dom)과 그 하위 요소를 전부 제거한다.
제거된 요소가 jQuery 데이터 형태로 유지되고, 제거된 요소의 데이터, 이벤트도 제거되지 않고 유지된다.
화면에서 제거하였다가 추후 재삽입할 경우 사용된다.
2. $("셀렉터").html() vs $("셀렉터").text() vs $("셀렉터").val() 의 차이는?
$("셀렉터").html()
.html()은 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾼다..text()와 비슷하지만 태그의 처리가 다르다. HTML 태그를 포함하여 선택한 요소 안의 내용을 가져온다.
var jb = $( 'h1' ).html();h1 요소의 내용을 변수 jb에 저장한다.
$( 'div' ).html( '<h1>Lorem</h1>' );이전 내용을 지우고 새로운 내용을 넣는다. div 요소의 내용을 <h1>Lorem</h1>로 바꾼다.
div 요소 안의 내용을 가져와서 그 내용을 출력한다. div 요소가 여러 개 있으면 첫번째 요소의 내용을 가져온다. HTML 태그까지 함께 저장한다는 것에 주의한다.
div 요소 안의 내용을 지우고 새로운 내용을 넣는다. div 요소가 여러 개 있으면 모든 요소에 적용된다. 삽입하는 내용에 있는 HTML 태그는 텍스트가 아니라 태그로 인식한다.
$("셀렉터").text()
.text()는 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾼다..html()과 비슷하지만 태그의 처리가 다르다.
var jb = $( 'h1' ).text();h1 요소의 내용을 변수 jb에 저장한다.
$( 'div' ).html( '<h1>Lorem</h1>' );
이전 내용을 지우고 새로운 내용을 넣는다.
div 요소의 내용을 <h1>Lorem</h1>로 바꾼다. HTML 태그는 텍스트로 처리한다.
div 요소 안의 내용을 가져와서 그 내용을 출력한다. div 요소가 여러 개 있으면 모든 내용을 가져온다. HTML 태그는 제외한다는 것에 주의한다.
$("셀렉터").val()
양식(form)의 값을 가져오거나 값을 설정하는 메소드이다.
var jb = $( 'input#jbInput' ).val();
아이디가 jbInput인 input 요소의 값을 변수 jb에 저장한다.
$( 'input#jbInput' ).val( 'ABCDE' );
아이디가 jbInput인 input 요소의 값을 ABCDE로 정한다.
3. jquery 에 대하여 설명하시오.
제이쿼리는 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리이다.
제이쿼리를 이용하면 문서 객체 모델(DOM)과 이벤트에 관한 처리를 손쉽게 구현할 수 있다.
또한, Ajax 응용 프로그램 및 플러그인도 제이쿼리를 활용하여 빠르게 개발할 수 있다.
4. 아래를 구현하시오.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>체크 박스 선택 결과 출력</title>
<script>
onload = function () {
function checkboxHandler() {
console.log("a");
let checked = [];
let boxValue = document.getElementsByClassName("li");
for (let i = 0; i < boxValue.length; i++) {
if (boxValue[i].checked == true) {
checked.push(boxValue[i].value);
}
}
// var checkedResult = document.getElementById("result-content");
document.getElementById("result-content").innerHTML = checked.toString();
}
var checkboxButton = document.getElementById("result-button");
checkboxButton.addEventListener("click", checkboxHandler);
}
</script>
</head>
<body>
<h1>취미</h1>
<ul>
<li>야구<input class="li" type="checkbox" value="야구"></li>
<li>농구<input class="li" type="checkbox" value="농구"></li>
<li>게임<input class="li" type="checkbox" value="게임" ></li>
<button id="result-button">결과보기</button>
<p>결과값: <br>
<h1><span id="result-content">
<br>
</span></h1>
</p>
</ul>
</body>
</html>