스파르타/Web
[Web] JQuery - ( week 2)
bakcoding_sparta
2023. 4. 18. 07:11
JQuery
자바스크립트를 미리 작성한 코드이다. 자바스크립트로 코드를 만들기 위해서는 복잡한 과정을 거쳐야 하는데 반복되고 자주 사용되는 형태의 문장을 미리 구조화된 코드로 만들어 놓은 것이라고 할 수 있다.
document.getElmentById("element").style.display = "none"; // js
=> $('#element').hide(); // jquery
연습
jquery를 사용해서 html의 문자를 바꾸어 본다.
<script>
function checkResult(){
//alert('Hello World!')
let a = '사과'
$('#q1').text(a)
alert(a)
}
</script>
<body>
<div class="top-part">
<h1>자바스크립트 문법 연습하기!</h1>
</div>
<hr/>
<br>
<h2>1. 함수</h2>
<div class="button-part">
<button onclick="checkResult()">결과 확인하기!</button>
</div>
<div class="list-part">
<h2>2. 리스트</h2>
<div id="q1">테스트</div>
</div>
</body>
버튼을 클릭하게 되면 id="q1" 요소의 텍스트가 변수 a의 값으로 변경된다.
리스트에서 값을 불러와서 사용할 수 있다.
let a = ['사과', '배', '감','귤']
$('#q1').text(a[1])
딕셔너리도 동일한 방식으로 사용이 가능하다.
<script>
function checkResult(){
//alert('Hello World!')
let a = ['사과', '배', '감','귤']
$('#q1').text(a[1])
let b = {'name':'영수','age':30}
$('#q2').text(b['name'])
}
</script>
리스트&딕셔너리
let c = [
{'name':'영수','age':30},
{'name':'철수','age':35}
]
$('#q3').text(c[1]['age'])
append
html을 붙여서 작성할 수 있는 기능이다.
<script> function checkResult() {
let fruits = ['사과', '배', '감', '귤', '수박']
fruits.forEach((a) => {
let temp_html = `<p>${a}</p>`
$('#q1').append(temp_html)
})
} </script>
` 백틱 안에는 html 구문을 append를 통해서 해당 요소뒤에 이어서 작성되도록한다.
empty
$('#q1').empty()
해당 요소를 지운다.
딕셔너리에서 데이터를 가지고 와서 html을 만들어서 붙여본다.
let people = [
{'name':'서영','age':24},
{'name':'현아','age':30},
{'name':'영환','age':12},
{'name':'서연','age':15},
{'name':'지용','age':18},
{'name':'예지','age':36}
]
$('#q2').empty()
people.forEach((a)=>{
let name = a['name']
let age = a['age']
let temp_html = `<p>${name}는 ${age}입니다</p>`
$('#q2').append(temp_html)
})
html 구문은 백틱(`) 안에 작성한다. 그 안에서 변수를 사용할 경우 ${var}로 표현하고 html에서 요소를 가져올 때는 $('#id')로 나타낸다.