JQuery
-
브라우저별 호환성 이슈를 해결하며 등장한 Framework 과거 JavaScript의 문법적 불편함을 해소 했던 Framework
-
Jquery는 자바스크립트와 혼용해도 상관이 없다
$ = jQuery.
$("#box") 는 document.getElementById("box"); 와 동일하다
하지만 두 데이터의 자료형은 다르다*/
.html = innerhtml
- <p태그중 홀수번쨰 요소들만 BacgroundColor pink 부여
- 줄과 컬러를 선택하여 변경
- 덧셈 문제
- 패스워드 검증
동적 요소 제어
- 인피니트 스크롤링 ex) 페이스북
- 동적 요소를 추가하는 추가하는 문법 4가지
- before/ prepend /append / after
- 위로, 아래로 추가하기
제이쿼리는 모든 선택자 처리를 배열로 처리, for문 사용없이 한번에 이벤트 적용 가능
동적요소에 이벤트 주는 방법 (로딩이 끝나고 추가된 요소에 이벤트 주는법)
-
html 문서 안에는 정적 엘리먼트 요소가 있고 동적 엘리먼트 요소가 있는데 정적 엘리먼트 요소에 이벤트를 추가하는 방법과 동적 요소에 이벤트를 추가하는법이 다르다
-
동적요소 생성 후 이벤트 생성1
-
동적요소 생성후 바로 이벤트 직접 생성2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
</head>
<body>
<fieldset>
<legend>Input Controls</legend>
<input type="text" id= "title" placeholder="제목"><Br>
<input type="text" id ="contents" placeholder="내용"><br>
<input type="text" id = "writer" placeholder="작성자">
<button id = add>추가하기</button>
</fieldset>
<table border="1">
<tr>
<th>제목</th>
<th>내용</th>
<th>작성자</th>
<th>삭제</th>
</tr>
</table>
<script>
// $(".del").on("click", function () {
// alert("TEST");
// }) //삭제 버튼에 이벤트 부여 정적 요소(로딩 끝나기전에 생성된 요소)
$(document).on("click",".del",function () {
// $(this).parent().parent().remove(); // 제이쿼리로 형변환하고 조상의조상을 제거해야
$(this).closest("tr").remove(); //버튼으로부터 가장 가까운 tr을 찾아서 지워라
})
// 동적 바인딩 이슈, 동적요소= html 로딩 끝나고 나중에 추가된 요소에 이벤트 부여 방법 = 가장 가까운 정적 parent 지정해야함 document or table
// document
// 제이쿼리 document일때 ""사용?
//html 문서 안에는 정적 엘리먼트 요소가 있고, 로딩이 끝난 후 추가되는 동적요소가 있는데 정적 엘리먼트에 이벤트를 부여 하는방법과 동적요소에
//이벤트를 부여하는 방법은 다르다
//1번방법
$("#add").on("click", function(){
let title = $("#title").val();
let contents = $("#contents").val();
let writer = $("#writer").val();
// let complete = "<td>"+title+"</td> <td> "+contents+"</td> <td>"+writer+"</td> <td>"+"<button> X </button> </td>"
// $("table").append("<tr>"+complete+"</tr>")
let tr = $("<tr>")
let buttondel = $("<button>")
buttondel.html("X");
buttondel.addClass("del"); //삭제버튼의 클래스이름을 del로지정
//동적요소 생성후 1번 방법 or 2번 방법 사용하여 이벤트부여
buttondel.on("click", function () {
alert("test")
}) //동적요소 생성후 이벤트 직접 생성 2번방법
tr.append($("<td>").append(title)).append($("<td>").append(contents)).append($("<td>").append(writer)).append($("<td>").append(buttondel))
$("table").append(tr)
$("#title").val("")
$("#contents").val("")
$("#writer").val("")
})
</script
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<style>
div:not(#result){
border: 1px solid black;
}
.container{
width: 800px;
height: 100%;
margin: auto;
}
.box1{
width: 100%;
height: 60px;
}
.box1>input{
width: 80%;
height: 100%;
background-color: lavender;
}
.box1>button{
width: 15%;
height: 100%;
}
#result{
height: 800px;
overflow-y: auto;
}
</style>
</head>
<body>
<div class="container">
<div>
<input type = "text" id ="writer" placeholder="작성자명을 입력">
</div>
<div class = "box1">
<input type = "text" id="contents" placeholder="내용을 입력하세요">
<button id="add">Reply</button>
</div>
</div>
<hr>
<div id="result">
</div>
<script>
$(document).on("click", ".del", function () {
// $(this).closest("div").remove();
$(this).parent().parent().remove();
})
$("#add").on("click", function(){
let writer = $("#writer").val();
let contents =$("#contents").val();
let divtotal =$("<div>")
let divwriter=$("<div>")
divwriter.append(writer+"님의 글").css("background-color", "pink").css("width","70%") //작성자
let divcontents= $("<div>")
divcontents.append(contents).css("background-color", "violet").css("width", "70%")//댓글
let divdel=$("<div>")
let btndel = $("<button>")
btndel.html("삭제");
btndel.addClass("del")
divdel.append(btndel).css("float","center")
divtotal.append(divwriter);
divtotal.append(divcontents);
divtotal.append(divdel);
$("#result").append(divtotal);
// // $("#result2").append(divwriter).append(divcontents).append(btndel).css("background-color", "pink")
// $("#result2").append(divwriter)
// $("#result2").append(divcontents).append(divdel)
// // divcontents.append(btndel)
})
</script>
</body>
</html>