JavaScript
배열 Deep copy
간편하게 rest parameter 를 이용한다.
const arr1 = [1,2,3,4,5]
const arr2 = [...arr1]
카피 완료 ㅎㅎ;
CSS
margin : 10px 20px 30px 40px; (top right bottom left 순서)
margin은 요소 외부 간격
padding은 요소 내부 간격
jQuery
- $(document).ready vs window.onload
$(document).ready는 여러개 선언해서 써도 됨. 순차적으로 실행된다.
window.onload 는 브라우저 창에 필요한 모든 것들이 로딩된 후에 실행된다.
- 선택자
$("*") ⇒ 전체 선택자, all selector
$(".class") ⇒ 클래스 선택자
$("#id") ⇒ 아이디 선택자
$("element") ⇒ 요소(태그, element) 선택자
$("selector1, selector2, … , selectorN") ⇒ 다중 선택자(multiple selector)
P423 자식 선택자, 후손 선택자
https://api.jquery.com/child-selector
자식 -> $("parent > child")
후손 -> $("parent child")
P426 속성 선택자
- each 메소드
ex)
$('div.num').each( function(index, item) {
console.log($(item).attr('class'))
// div.num 안에 있는 item에서 class 속성값을 리턴
}
- mouseover, mouseleave
해당 요소에 마우스가 올려지면 배경을 검정색으로,
빠져나오면 원래 색깔로 하는 jQuery 코드
$(this).css('background', 'black') 에서 'background' 는 getter, 'black'은 setter로 느끼면 됨 ㅎㅎ
$('div:odd').css('background', 'red')
$('div:even').css('background', 'blue')
$('div:first').css('background', 'yellow')
$('div:last').css('background', 'green')
let orgColor;
$('div').mouseover(function() {
orgColor = $(this).css('background')
$(this).css('background', 'black')
}).mouseleave(function() {
$(this).css('background', orgColor)
})
- css class 정의해서 사용하기
<script>
$(document).ready(function () {
$('div').mouseover(function () {
$(this).attr('class', 'mycolor1')
}).mouseleave(function () {
$(this).attr('class', 'mycolor2')
})
})
</script>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid blue;
float: left;
margin: 20px;
}
.mycolor1 {
background: red;
}
.mycolor2 {
background: blue;
}
Ajax
json 파일을 요청해서 출력하는 예제
<script src="/jquery-ui-1.12.1/external/jquery/jquery.js"></script>
<script>
$(document).ready(function () {
$('button').click(function () {
$('table').html('')
$.ajax({
url: "http://127.0.0.1:5500/students.json",
type: "GET",
dataType: "json"
}).done(function (res) {
res.students.forEach((student) => {
let x = `
<tr>
<td>${student.name}</td>
<td>${student.age}</td>
<td>${student.score}</td>
</tr>
`
$('table').html($('table').html() + x)
})
})
})
})
</script>