제이쿼리
다른 사람이 만든 라이브러리
라이브러리 적용
< script> 상단에 적용해두기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- 제이쿼리 -->파일 추가하기(append)
<script>
let temp_html = `<li>${gu_name}:${gu_mise}</li>` <!--temp_html, gu는 변수, names-q1 은 id-->
$('#names-q1').append(temp_html) <!-- temp_html 변수를 형태를 지정하여 만들것이고 gu_name,gu_mise변수값은 names-q1 id를 가진파일에서 가져올것이다. -->
</script>
</head>글자 바꾸기
<script>
function hey(){
$('#title').text('쥬라기월드')
}<!-- 버튼을 누르면 id= title문장의 텍스트가 바뀜 -->
</script>
</head>
<body>
<button onclick="hey()" type="button" class="btn btn-outline-light">영화 기록하기</button>
<h1 id='title' class="display-5 fw-bold">킹덤</h1>
</body>글자 출력
<script>
function checkResult() {
$('#q1').text('쥬라기월드')
}
</script>
</head>
<body>
<button onclick="checkResult()">결과 확인하기!</button>
<div id="q1"></div> <!-- 버튼 누르면 쥬라기월드 -->
</body>글자 지우고 출력
<script>
let fruits = ['사과','배','감','귤','수박']
$('#q1').empty();
let temp_html = `<p>감자</p>` <!-- temp_html 변수, ``:backkey -->
$('#q1').append(temp_html)
</script>글자 지우고 사과 입력
<script>
let fruits = ['사과','배','감','귤','수박']
$('#q1').empty();
let a = fruits[0]
let temp_html = `<p>${a}</p>`
$('#q1').append(temp_html) <--temp_html 변수-->
</script>화면 나타내고 없애기
<script>
$(#'').toggle()
</script>
<script>
$("#registrationbtnid").click(async function () {
$('#resistrationcarddivid').toggle()
})
</script>데이터 입력하여 출력
<script>
function makecard() {
let image = $('#image').val()
let title = $('#title').val()
let content = $('#content').val()
let date = $('#date').val()
let temp_html = `
<div class="col">
<div class="card h-100">
<img src="${image}"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${content}</p>
</div>
<div class="card-footer">
<small class="text-muted">${date}</small>
</div>
</div>
</div>`
$('#card').append(temp_html)<--temp_html 변수-->
</script>
ISFP