2021.12.24.Fri.
✍ 복습
jQuery Class 다루기
class가 두 개 이상일 때는 addClass 사용.
.attr('class','blue');
.addClass('blue(css클래스선택자)');
jQuery addClass, removeClass 사용 예제
$(document).ready(function() {
let isEm = false;
let isBorder = false;
let isUnderline = false;
$('#em').click(function() {
isEm = !isEm;
if(isEm===true) {
$('#target').addClass('em');
} else {
$('#target').removeClass('em');
}
});
$('#border').click(function() {
isBorder = !isBorder;
if(isBorder===true) {
$('#target').addClass('border');
} else {
$('#target').removeClass('border');
}
});
$('#underline').click(function() {
isUnderline = !isUnderline;
if(isUnderline===true) {
$('#target').addClass('underline');
} else {
$('#target').removeClass('underline');
}
});
});jQuery DOM 작업 append() vs appendTo (1)
요소붙이기 append(), appendTo()를 사용하자.
역할은 동일, 부모 element에 자식을 뒤로 붙인다.
부모.append(자식)
자식.appendTo(부모)
$(document).ready(function() {
const $a = $('#a');
const $b = $('#b');
$a.append('<li>우리나라</li>');
// $()에 html 태그를 적으면 그 요소를 만든다
const $li = $('<li>');
$li.append('<a href="#">좋은나라</a>');
$a.append($li);
$a.append($('<li>').text('정말??'));
// 방법 1
$b.append('<li id="hello" class="red"name="hello">우리나라</li>');
// 방법 2 → 이 방법을 주로 쓰게 될 것..
$b.append($('<li>').text('좋은나라').attr('id','hello')
.attr('class','red').attr('name','hello'));
// 방법 3
$b.append($('<li id="hello">정말??</li>')
.attr('class','red').attr('name','hello'));jQuery DOM 작업 append() vs appendTo (2)
<script>
$(document).ready(function() {
// 부모.append(자식)의 결과는 부모
const $a = $('#a');
const result1 = $a.append('<li>부모</li>');
console.log(result1[0]);
// 자식.appendTo(부모)의 결과는 자식
const $b = $('#b');
const result2 = $('<li>자식</li>').appendTo($('#b'));
console.log(result2[0]);
})
</script>
</head>
<body>
<ul id='a'></ul>
<ol id='b'></ol>
</body>